Add CRM contacts widget to frontend

What does this MR do and why?

Add the frontend work item widget for CRM contacts.

Note: This is the first MR which is getting a bit big, so i'm looking to get it merged before raising a follow up to apply some presentation/UX tweaks to make it completely match the initial designs.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screen_Recording_2024-07-25_at_12.15.19

How to set up and validate locally

pre-req: your group will need some crm contacts- this should already be seeded in your database, but read the CRM docs if not.

1. http://gdk.test:3000/flightjs/Flight/-/work_items/new
   1. Select a work item type that supports crm contacts (issue or task for example)
   2. Select Edit in the Contacts widget and try adding some contacts/removing some contacts/clearing contacts etc
2. http://gdk.test:3000/flightjs/Flight/-/work_items/iid 2. Select Edit in the Contacts widget and try adding some contacts/removing some contacts/clearing contacts etc

Related to #464589 (closed)

changed milestone to %17.3

added Category:Team Planning Deliverable backend devopsplan frontend groupproject management sectiondev typefeature work items work itemsga-issues workflowin review labels

assigned to @leetickett-gitlab

added pipelinetier-1 label

added 729 commits

• 5e059f8e...1587998e - 728 commits from branch gitlab-org:master
• 1befdd3c - Add CRM contacts frontend widget

Compare with previous version

added 1 commit

• 10aa8622 - Add CRM contacts frontend widget

Compare with previous version

added 1 commit

• ff7ec618 - Add CRM contacts frontend widget

Compare with previous version

	5 Warnings
	This merge request is quite big (800 lines changed), please consider splitting it into multiple merge requests.
	c33c21a0: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	71e2acbc: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	4c4d08c7: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

	1 Message
	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

testid selectors

The following changed lines in this MR contain testid selectors:

app/assets/javascripts/work_items/components/work_item_crm_contacts.vue

+    data-testid="work-item-crm-contacts"
+          data-testid="organization"
+            data-testid="contact"

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the manual:e2e-test-pipeline-generate job in the prepare stage and ensure the tests in follow-up:e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
frontend	@thutterer (UTC+2, 1 hour ahead of author)	@arfedoro (UTC+2, 1 hour ahead of author)
test for spec/features/*	@theoretick (UTC-7, 8 hours behind author)	Maintainer review is optional for test for spec/features/*
UX	@nickleonard (UTC-5, 6 hours behind author)	Maintainer review is optional for UX

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

added 523 commits

• ff7ec618...f6531a97 - 522 commits from branch gitlab-org:master
• 076ed4e2 - Add CRM contacts frontend widget

Compare with previous version

added 1 commit

• d585cfb0 - Add CRM contacts frontend widget

Compare with previous version

added 1 commit

• 65d8d681 - Add CRM contacts frontend widget

Compare with previous version

Generated by gitlab_quality-test_tooling.

---

Slow tests detected in this merge request. These slow tests might be related to this merge request's changes.

Click to expand

Job	File	Name	Duration	Expected duration
#7411794596	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	117.59 s	< 50.13 s
#7411735150	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	118.67 s	< 50.13 s
#7411934277	spec/features/projects/work_items/work_item_children_spec.rb#L81	Work item children for signed in user removes a child task and undoing	74.81 s	< 50.13 s
#7411898762	spec/features/projects/work_items/work_item_children_spec.rb#L81	Work item children for signed in user removes a child task and undoing	75.82 s	< 50.13 s
#7422351701	spec/features/projects/work_items/work_item_children_spec.rb#L81	Work item children for signed in user removes a child task and undoing	74.0 s	< 50.13 s
#7422429411	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	55.42 s	< 50.13 s
#7425926046	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	53.02 s	< 50.13 s
#7453848870	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	50.22 s	< 50.13 s
#7454099086	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	123.75 s	< 50.13 s
#7463026923	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	129.81 s	< 50.13 s
#7471106577	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when updating child work item dates rolled up child dates	97.4 s	< 50.13 s
#7481918871	ee/spec/features/groups/work_items/work_item_spec.rb#L26	Work item for signed in user for epic work items on the work item route behaves like work items rolled up dates when feature flag is enabled when using inheritable dates when removing all children rolled up child dates	123.2 s	< 50.13 s

added rspec:slow test detected label

added 1 commit

• c5115647 - Add CRM contacts frontend widget

Compare with previous version

added 1 commit

• 8b29af01 - Add CRM contacts frontend widget

Compare with previous version

added 454 commits

• 8b29af01...52d173b0 - 453 commits from branch gitlab-org:master
• 75a28798 - Add CRM contacts frontend widget

Compare with previous version

added 1 commit

• a3c2a8dd - Add CRM contacts frontend widget

Compare with previous version

changed the description

marked this merge request as ready

requested review from @deepika.guliani

Thank you for working on this @leetickett-gitlab

We generally go for a UX review first , so I am going to assign it to @nickleonard

requested review from @nickleonard

added UX label

Just left a few initial thoughts Back to you

requested changes

added 381 commits

• a3c2a8dd...54b6d582 - 380 commits from branch gitlab-org:master
• 3fbb6aee - Add CRM contacts frontend widget

Compare with previous version

added 235 commits

• 3fbb6aee...d4e2cf52 - 233 commits from branch gitlab-org:master
• 158bfc82 - Add CRM contacts frontend widget
• 6ececfcc - Apply reviewer suggestions

Compare with previous version

requested review from @deepika.guliani

mentioned in issue #474870

added 1 commit

• 7a034a59 - Apply reviewer suggestions

Compare with previous version

approved this merge request

added pipeline:mr-approved label

added pipelinetier-2 label and removed pipelinetier-1 label

Before you set this MR to auto-merge

This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.

Before you set this MR to auto-merge, please check the following:

• You are the last maintainer of this merge request
• The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
• This pipeline is recent enough (created in the last 8 hours)

If all the criteria above apply, please set auto-merge for this merge request.

See pipeline tiers and merging a merge request for more details.

added 1 commit

• 8da1ecf3 - Apply reviewer suggestions

Compare with previous version

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for c33c21a0

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Plan        | 70     | 0      | 0       | 0     | 70    | ✅     |
| Create      | 127    | 0      | 12      | 0     | 139   | ✅     |
| Verify      | 43     | 0      | 2       | 0     | 45    | ✅     |
| Govern      | 71     | 0      | 0       | 0     | 71    | ✅     |
| Package     | 16     | 0      | 15      | 0     | 31    | ✅     |
| Monitor     | 8      | 0      | 0       | 0     | 8     | ✅     |
| Data Stores | 30     | 0      | 1       | 0     | 31    | ✅     |
| Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
| Secure      | 2      | 0      | 0       | 0     | 2     | ✅     |
| Fulfillment | 1      | 0      | 0       | 0     | 1     | ✅     |
| Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
| Manage      | 0      | 0      | 1       | 0     | 1     | ➖     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 375    | 0      | 31      | 0     | 406   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-package-and-test: test report for c33c21a0

expand test summary

+-------------------------------------------------------------+
|                       suites summary                        |
+--------+--------+--------+---------+-------+-------+--------+
|        | passed | failed | skipped | flaky | total | result |
+--------+--------+--------+---------+-------+-------+--------+
| Plan   | 82     | 0      | 9       | 0     | 91    | ✅     |
| Create | 270    | 0      | 34      | 0     | 304   | ✅     |
+--------+--------+--------+---------+-------+-------+--------+
| Total  | 352    | 0      | 43      | 0     | 395   | ✅     |
+--------+--------+--------+---------+-------+-------+--------+

Awesome work @leetickett-gitlab I have a couple more small comments, please let me know what you think

Other than that , what do you think about writing feature specs for the same ?

https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/support/shared_examples/features/work_items_shared_examples.rb#L543-622

added 1 commit

• 0a09f662 - Apply reviewer suggestions

Compare with previous version

mentioned in issue #475041 (closed)

resolved all threads