Change sidebar assignee to use modal

- use new modal.

app/assets/javascripts/invite_members/components/invite_members_trigger.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlLink } from '@gitlab/ui';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
-  components: { GlButton },
+  components: { GlButton, GlLink },
   props: {
     displayText: {
       type: String,
@@ -37,6 +37,42 @@ export default {
       required: false,
       default: undefined,
     },
+    triggerElement: {
+      type: String,
+      required: false,
+      default: 'button',
+    },
+    event: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    isButton() {
+      return this.triggerElement === 'button';
+    },
+    componentAttributes() {
+      const baseAttributes = {
+        class: this.classes,
+        'data-qa-selector': 'invite_members_button',
+      };
+
+      if (this.event && this.label) {
+        return {
+          ...baseAttributes,
+          'data-track-event': this.event,
+          'data-track-label': this.label,
+        };
+      }
+
+      return baseAttributes;
+    },
   },
   mounted() {
     this.trackExperimentOnShow();
@@ -57,12 +93,15 @@ export default {
 
 <template>
   <gl-button
-    :class="classes"
-    :icon="icon"
+    v-if="isButton"
+    v-bind="componentAttributes"
     :variant="variant"
-    data-qa-selector="invite_members_button"
+    :icon="icon"
     @click="openModal"
   >
     {{ displayText }}
   </gl-button>
+  <gl-link v-else v-bind="componentAttributes" data-is-link="true" @click="openModal">
+    {{ displayText }}
+  </gl-link>
 </template>

app/assets/javascripts/pages/projects/issues/show.js

@@ -4,6 +4,7 @@ import initIssuableSidebar from '~/init_issuable_sidebar';
 import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
 import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import { IssuableType } from '~/issuable_show/constants';
 import Issue from '~/issue';
 import '~/notes/index';
@@ -36,6 +37,7 @@ export default function initShowIssue() {
   initSentryErrorStackTraceApp();
   initRelatedMergeRequestsApp();
   initInviteMembersModal();
+  initInviteMembersTrigger();
 
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
     .then((module) => module.default())

app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js

@@ -6,6 +6,7 @@ import initIssuableSidebar from '~/init_issuable_sidebar';
 import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
 import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import StatusBox from '~/merge_request/components/status_box.vue';
 import initSourcegraph from '~/sourcegraph';
@@ -22,6 +23,7 @@ export default function initMergeRequestShow() {
   initInviteMemberModal();
   initInviteMemberTrigger();
   initInviteMembersModal();
+  initInviteMembersTrigger();
 
   const el = document.querySelector('.js-mr-status-box');
   // eslint-disable-next-line no-new

app/views/shared/issuable/_sidebar_assignees.html.haml

@@ -53,10 +53,10 @@
       %ul.dropdown-footer-list
         %li
           - if directly_invite_members?
-            = link_to invite_text,
-              project_project_members_path(@project),
-              title: invite_text,
-              data: { 'is-link': true, 'track-event': 'click_invite_members', 'track-label': track_label }
+            .js-invite-members-trigger{ data: { trigger_element: 'anchor',
+              display_text: invite_text,
+              event: 'click_invite_members',
+              label: track_label } }
           - else
             .js-invite-member-trigger{ data: { display_text: invite_text, event: 'click_invite_members_version_b', label: track_label } }
   - else

changelogs/unreleased/322879-change-assignee-dropdown-invite-to-utilize-invite-modal.yml

+---
+title: Change assignee dropdown invite to utilize invite modal
+merge_request: 57002
+author:
+type: changed

spec/frontend/invite_members/components/invite_members_trigger_spec.js

-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
@@ -8,22 +8,29 @@ jest.mock('~/experimentation/experiment_tracking');
 
 const displayText = 'Invite team members';
 let wrapper;
+let triggerProps;
+let findButton;
+const triggerComponent = {
+  button: GlButton,
+  anchor: GlLink,
+};
 
 const createComponent = (props = {}) => {
   wrapper = shallowMount(InviteMembersTrigger, {
     propsData: {
       displayText,
+      ...triggerProps,
       ...props,
     },
   });
 };
 
-describe('InviteMembersTrigger', () => {
-  const findButton = () => wrapper.findComponent(GlButton);
+describe.each(['button', 'anchor'])('with triggerElement as %s', (triggerElement) => {
+  triggerProps = { triggerElement };
+  findButton = () => wrapper.findComponent(triggerComponent[triggerElement]);
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('displayText', () => {
@@ -74,5 +81,19 @@ describe('InviteMembersTrigger', () => {
 
       expect(ExperimentTracking).not.toHaveBeenCalledWith('_track_experiment_');
     });
+
+    it('does not add tracking attributes', () => {
+      createComponent();
+
+      expect(findButton().attributes('data-track-event')).toBeUndefined();
+      expect(findButton().attributes('data-track-label')).toBeUndefined();
+    });
+
+    it('adds tracking attributes', () => {
+      createComponent({ label: '_label_', event: '_event_' });
+
+      expect(findButton().attributes('data-track-event')).toBe('_event_');
+      expect(findButton().attributes('data-track-label')).toBe('_label_');
+    });
   });
 });

spec/support/shared_examples/features/issuable_invite_members_shared_examples.rb

@@ -2,7 +2,7 @@
 
 RSpec.shared_examples 'issuable invite members experiments' do
   context 'when a privileged user can invite' do
-    it 'shows a link for inviting members and follows through to the members page' do
+    it 'shows a link for inviting members and launches invite modal' do
       project.add_maintainer(user)
       visit issuable_path
 
@@ -11,14 +11,14 @@ RSpec.shared_examples 'issuable invite members experiments' do
       wait_for_requests
 
       page.within '.dropdown-menu-user' do
-        expect(page).to have_link('Invite Members', href: project_project_members_path(project))
+        expect(page).to have_link('Invite Members')
         expect(page).to have_selector('[data-track-event="click_invite_members"]')
         expect(page).to have_selector('[data-track-label="edit_assignee"]')
       end
 
       click_link 'Invite Members'
 
-      expect(current_path).to eq project_project_members_path(project)
+      expect(page).to have_content("You're inviting members to the")
     end
   end