Change invite modal to allow opening from anywhere in the dom

- allow multi-use across different areas.
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/73485

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

@@ -12,7 +12,7 @@ import {
   GlFormInput,
   GlFormCheckboxGroup,
 } from '@gitlab/ui';
-import { partition, isString, unescape } from 'lodash';
+import { partition, isString, unescape, uniqueId } from 'lodash';
 import Api from '~/api';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { sanitize } from '~/lib/dompurify';
@@ -117,7 +117,7 @@ export default {
   data() {
     return {
       visible: true,
-      modalId: 'invite-members-modal',
+      modalId: uniqueId('invite-members-modal-'),
       selectedAccessLevel: this.defaultAccessLevel,
       inviteeType: 'members',
       newUsersToInvite: [],
@@ -444,6 +444,7 @@ export default {
     :modal-id="modalId"
     size="sm"
     data-qa-selector="invite_members_modal_content"
+    data-testid="invite-members-modal"
     :title="$options.labels[inviteeType].modalTitle"
     :header-close-label="$options.labels.headerCloseLabel"
     @hidden="resetFields"
@@ -597,21 +598,19 @@ export default {
     </div>
 
     <template #modal-footer>
-      <div class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0">
-        <gl-button data-testid="cancel-button" @click="closeModal">
-          {{ $options.labels.cancelButtonText }}
-        </gl-button>
-        <div class="gl-mr-3"></div>
-        <gl-button
-          :disabled="inviteDisabled"
-          :loading="isLoading"
-          variant="success"
-          data-qa-selector="invite_button"
-          data-testid="invite-button"
-          @click="sendInvite"
-          >{{ $options.labels.inviteButtonText }}</gl-button
-        >
-      </div>
+      <gl-button data-testid="cancel-button" @click="closeModal">
+        {{ $options.labels.cancelButtonText }}
+      </gl-button>
+      <gl-button
+        :disabled="inviteDisabled"
+        :loading="isLoading"
+        variant="success"
+        data-qa-selector="invite_button"
+        data-testid="invite-button"
+        @click="sendInvite"
+      >
+        {{ $options.labels.inviteButtonText }}
+      </gl-button>
     </template>
   </gl-modal>
 </template>

app/assets/javascripts/invite_members/init_invite_members_modal.js

@@ -6,6 +6,10 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 Vue.use(GlToast);
 
 export default function initInviteMembersModal() {
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/344955
+  // bug lying in wait here for someone to put group and project invite in same screen
+  // once that happens we'll need to mount these differently, perhaps split
+  // group/project to each mount one, with many ways to open it.
   const el = document.querySelector('.js-invite-members-modal');
 
   if (!el) {

ee/app/assets/stylesheets/pages/groups.scss

@@ -42,9 +42,3 @@
     svg g { fill: $gray-600; }
   }
 }
-
-#invite-members-modal {
-  .modal-footer {
-    flex-direction: row;
-  }
-}

ee/spec/features/groups/members/list_members_spec.rb

@@ -66,7 +66,7 @@ RSpec.describe 'Groups > Members > List members' do
 
       click_on 'Invite members'
 
-      page.within '#invite-members-modal' do
+      page.within '[data-testid="invite-members-modal"]' do
         field = find('[data-testid="members-token-select-input"]')
         field.native.send_keys :tab
         field.click

spec/support/helpers/features/invite_members_modal_helper.rb

@@ -8,7 +8,7 @@ module Spec
           def invite_member(name, role: 'Guest', expires_at: nil, area_of_focus: false)
             click_on 'Invite members'
 
-            page.within '#invite-members-modal' do
+            page.within '[data-testid="invite-members-modal"]' do
               find('[data-testid="members-token-select-input"]').set(name)
 
               wait_for_requests