Add latest changes from gitlab-org/gitlab@master

2 files changed, 20 insertions, 17 deletions

diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
index a64af2da517..ee77ba110bb 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/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>
diff --git a/app/assets/javascripts/invite_members/init_invite_members_modal.js b/app/assets/javascripts/invite_members/init_invite_members_modal.js
index 85339af161a..2aa5c571157 100644
--- a/app/assets/javascripts/invite_members/init_invite_members_modal.js
+++ b/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) {