Add latest changes from gitlab-org/gitlab@master

4 files changed, 73 insertions, 51 deletions

diff --git a/app/assets/javascripts/invite_members/components/invite_groups_modal.vue b/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
index 6598000c464..f266d978ffa 100644
--- a/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_groups_modal.vue
@@ -4,6 +4,7 @@ import Api from '~/api';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { GROUP_FILTERS, GROUP_MODAL_LABELS } from '../constants';
 import eventHub from '../event_hub';
+import { getInvalidFeedbackMessage } from '../utils/get_invalid_feedback_message';
 import GroupSelect from './group_select.vue';
 import InviteModalBase from './invite_modal_base.vue';
 
@@ -55,6 +56,8 @@ export default {
   },
   data() {
     return {
+      invalidFeedbackMessage: '',
+      isLoading: false,
       modalId: uniqueId('invite-groups-modal-'),
       groupToBeSharedWith: {},
     };
@@ -83,13 +86,19 @@ export default {
     });
   },
   methods: {
+    showInvalidFeedbackMessage(response) {
+      this.invalidFeedbackMessage = getInvalidFeedbackMessage(response);
+    },
     openModal() {
       this.$root.$emit(BV_SHOW_MODAL, this.modalId);
     },
     closeModal() {
       this.$root.$emit(BV_HIDE_MODAL, this.modalId);
     },
-    sendInvite({ onError, onSuccess, data: { accessLevel, expiresAt } }) {
+    sendInvite({ accessLevel, expiresAt }) {
+      this.invalidFeedbackMessage = '';
+      this.isLoading = true;
+
       const apiShareWithGroup = this.isProject
         ? Api.projectShareWithGroup.bind(Api)
         : Api.groupShareWithGroup.bind(Api);
@@ -101,18 +110,27 @@ export default {
         expires_at: expiresAt,
       })
         .then(() => {
-          onSuccess();
           this.showSuccessMessage();
         })
-        .catch(onError);
+        .catch((e) => {
+          this.showInvalidFeedbackMessage(e);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
     },
     resetFields() {
+      this.invalidFeedbackMessage = '';
+      this.isLoading = false;
       this.groupToBeSharedWith = {};
     },
     showSuccessMessage() {
       this.$toast.show(this.$options.labels.toastMessageSuccessful, this.toastOptions);
       this.closeModal();
     },
+    clearValidation() {
+      this.invalidFeedbackMessage = '';
+    },
   },
   labels: GROUP_MODAL_LABELS,
 };
@@ -129,10 +147,12 @@ export default {
     :label-intro-text="labelIntroText"
     :label-search-field="$options.labels.searchField"
     :submit-disabled="inviteDisabled"
+    :invalid-feedback-message="invalidFeedbackMessage"
+    :is-loading="isLoading"
     @reset="resetFields"
     @submit="sendInvite"
   >
-    <template #select="{ clearValidation }">
+    <template #select>
       <group-select
         v-model="groupToBeSharedWith"
         :access-levels="accessLevels"
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 6c0fc5caf26..be48a58d838 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
@@ -21,6 +21,7 @@ import {
 } from '../constants';
 import eventHub from '../event_hub';
 import { responseMessageFromSuccess } from '../utils/response_message_parser';
+import { getInvalidFeedbackMessage } from '../utils/get_invalid_feedback_message';
 import ModalConfetti from './confetti.vue';
 import MembersTokenSelect from './members_token_select.vue';
 
@@ -84,6 +85,8 @@ export default {
   },
   data() {
     return {
+      invalidFeedbackMessage: '',
+      isLoading: false,
       modalId: uniqueId('invite-members-modal-'),
       newUsersToInvite: [],
       selectedTasksToBeDone: [],
@@ -152,6 +155,9 @@ export default {
     }
   },
   methods: {
+    showInvalidFeedbackMessage(response) {
+      this.invalidFeedbackMessage = getInvalidFeedbackMessage(response);
+    },
     partitionNewUsersToInvite() {
       const [usersToInviteByEmail, usersToAddById] = partition(
         this.newUsersToInvite,
@@ -176,7 +182,10 @@ export default {
       const tracking = new ExperimentTracking(experimentName);
       tracking.event(eventName);
     },
-    sendInvite({ onError, onSuccess, data: { accessLevel, expiresAt } }) {
+    sendInvite({ accessLevel, expiresAt }) {
+      this.isLoading = true;
+      this.invalidFeedbackMessage = '';
+
       const [usersToInviteByEmail, usersToAddById] = this.partitionNewUsersToInvite();
       const promises = [];
       const baseData = {
@@ -220,19 +229,17 @@ export default {
           const message = responseMessageFromSuccess(responses);
 
           if (message) {
-            onError({
-              response: {
-                data: {
-                  message,
-                },
-              },
+            this.showInvalidFeedbackMessage({
+              response: { data: { message } },
             });
           } else {
-            onSuccess();
             this.showSuccessMessage();
           }
         })
-        .catch(onError);
+        .catch((e) => this.showInvalidFeedbackMessage(e))
+        .finally(() => {
+          this.isLoading = false;
+        });
     },
     trackinviteMembersForTask() {
       const label = 'selected_tasks_to_be_done';
@@ -241,6 +248,8 @@ export default {
       tracking.event(INVITE_MEMBERS_FOR_TASK.submit);
     },
     resetFields() {
+      this.isLoading = false;
+      this.invalidFeedbackMessage = '';
       this.newUsersToInvite = [];
       this.selectedTasksToBeDone = [];
       [this.selectedTaskProject] = this.projects;
@@ -260,6 +269,9 @@ export default {
     onAccessLevelUpdate(val) {
       this.selectedAccessLevel = val;
     },
+    clearValidation() {
+      this.invalidFeedbackMessage = '';
+    },
   },
   labels: MEMBER_MODAL_LABELS,
 };
@@ -276,6 +288,8 @@ export default {
     :label-search-field="$options.labels.searchField"
     :form-group-description="$options.labels.placeHolder"
     :submit-disabled="inviteDisabled"
+    :invalid-feedback-message="invalidFeedbackMessage"
+    :is-loading="isLoading"
     @reset="resetFields"
     @submit="sendInvite"
     @access-level="onAccessLevelUpdate"
@@ -288,7 +302,7 @@ export default {
       <span v-if="isCelebration">{{ $options.labels.modal.celebrate.intro }} </span>
       <modal-confetti v-if="isCelebration" />
     </template>
-    <template #select="{ clearValidation, validationState, labelId }">
+    <template #select="{ validationState, labelId }">
       <members-token-select
         v-model="newUsersToInvite"
         class="gl-mb-2"
diff --git a/app/assets/javascripts/invite_members/components/invite_modal_base.vue b/app/assets/javascripts/invite_members/components/invite_modal_base.vue
index e92433e0ccf..69205d7d250 100644
--- a/app/assets/javascripts/invite_members/components/invite_modal_base.vue
+++ b/app/assets/javascripts/invite_members/components/invite_modal_base.vue
@@ -10,19 +10,15 @@ import {
   GlButton,
   GlFormInput,
 } from '@gitlab/ui';
-import { unescape } from 'lodash';
-import { sanitize } from '~/lib/dompurify';
 import { sprintf } from '~/locale';
 import {
   ACCESS_LEVEL,
   ACCESS_EXPIRE_DATE,
-  INVALID_FEEDBACK_MESSAGE_DEFAULT,
   READ_MORE_TEXT,
   INVITE_BUTTON_TEXT,
   CANCEL_BUTTON_TEXT,
   HEADER_CLOSE_LABEL,
 } from '../constants';
-import { responseMessageFromError } from '../utils/response_message_parser';
 
 export default {
   components: {
@@ -80,14 +76,22 @@ export default {
       required: false,
       default: false,
     },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    invalidFeedbackMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     // Be sure to check out reset!
     return {
-      invalidFeedbackMessage: '',
       selectedAccessLevel: this.defaultAccessLevel,
       selectedDate: undefined,
-      isLoading: false,
       minDate: new Date(),
     };
   },
@@ -116,16 +120,9 @@ export default {
     },
   },
   methods: {
-    showInvalidFeedbackMessage(response) {
-      const message = this.unescapeMsg(responseMessageFromError(response));
-
-      this.invalidFeedbackMessage = message || INVALID_FEEDBACK_MESSAGE_DEFAULT;
-    },
     reset() {
       // This component isn't necessarily disposed,
       // so we might need to reset it's state.
-      this.isLoading = false;
-      this.invalidFeedbackMessage = '';
       this.selectedAccessLevel = this.defaultAccessLevel;
       this.selectedDate = undefined;
 
@@ -135,33 +132,15 @@ export default {
       this.reset();
       this.$refs.modal.hide();
     },
-    clearValidation() {
-      this.invalidFeedbackMessage = '';
-    },
     changeSelectedItem(item) {
       this.selectedAccessLevel = item;
     },
     submit() {
-      this.isLoading = true;
-      this.invalidFeedbackMessage = '';
-
       this.$emit('submit', {
-        onSuccess: () => {
-          this.isLoading = false;
-        },
-        onError: (...args) => {
-          this.isLoading = false;
-          this.showInvalidFeedbackMessage(...args);
-        },
-        data: {
-          accessLevel: this.selectedAccessLevel,
-          expiresAt: this.selectedDate,
-        },
+        accessLevel: this.selectedAccessLevel,
+        expiresAt: this.selectedDate,
       });
     },
-    unescapeMsg(message) {
-      return unescape(sanitize(message, { ALLOWED_TAGS: [] }));
-    },
   },
   HEADER_CLOSE_LABEL,
   ACCESS_EXPIRE_DATE,
@@ -204,10 +183,7 @@ export default {
       data-testid="members-form-group"
     >
       <label :id="selectLabelId" class="col-form-label">{{ labelSearchField }}</label>
-      <slot
-        name="select"
-        v-bind="{ clearValidation, validationState, labelId: selectLabelId }"
-      ></slot>
+      <slot name="select" v-bind="{ validationState, labelId: selectLabelId }"></slot>
     </gl-form-group>
 
     <label class="gl-font-weight-bold">{{ $options.ACCESS_LEVEL }}</label>
diff --git a/app/assets/javascripts/invite_members/utils/get_invalid_feedback_message.js b/app/assets/javascripts/invite_members/utils/get_invalid_feedback_message.js
new file mode 100644
index 00000000000..62f66d009dc
--- /dev/null
+++ b/app/assets/javascripts/invite_members/utils/get_invalid_feedback_message.js
@@ -0,0 +1,12 @@
+import { unescape } from 'lodash';
+import { sanitize } from '~/lib/dompurify';
+import { INVALID_FEEDBACK_MESSAGE_DEFAULT } from '../constants';
+import { responseMessageFromError } from './response_message_parser';
+
+const unescapeMsg = (message) => unescape(sanitize(message, { ALLOWED_TAGS: [] }));
+
+export const getInvalidFeedbackMessage = (response) => {
+  const message = unescapeMsg(responseMessageFromError(response));
+
+  return message || INVALID_FEEDBACK_MESSAGE_DEFAULT;
+};