Add latest changes from gitlab-org/gitlab@master

3 files changed, 64 insertions, 22 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 dbb0ed11e1b..a92289ca8c1 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue
@@ -9,6 +9,7 @@ import {
   GlButton,
   GlFormInput,
 } from '@gitlab/ui';
+import { partition, isString } from 'lodash';
 import eventHub from '../event_hub';
 import { s__, __, sprintf } from '~/locale';
 import Api from '~/api';
@@ -58,7 +59,7 @@ export default {
       visible: true,
       modalId: 'invite-members-modal',
       selectedAccessLevel: this.defaultAccessLevel,
-      newUsersToInvite: '',
+      newUsersToInvite: [],
       selectedDate: undefined,
     };
   },
@@ -79,13 +80,12 @@ export default {
       return {
         onComplete: () => {
           this.selectedAccessLevel = this.defaultAccessLevel;
-          this.newUsersToInvite = '';
+          this.newUsersToInvite = [];
         },
       };
     },
-    postData() {
+    basePostData() {
       return {
-        user_id: this.newUsersToInvite,
         access_level: this.selectedAccessLevel,
         expires_at: this.selectedDate,
         format: 'json',
@@ -101,6 +101,17 @@ export default {
     eventHub.$on('openModal', this.openModal);
   },
   methods: {
+    partitionNewUsersToInvite() {
+      const [usersToInviteByEmail, usersToAddById] = partition(
+        this.newUsersToInvite,
+        (user) => isString(user.id) && user.id.includes('user-defined-token'),
+      );
+
+      return [
+        usersToInviteByEmail.map((user) => user.name).join(','),
+        usersToAddById.map((user) => user.id).join(','),
+      ];
+    },
     openModal() {
       this.$root.$emit('bv::show::modal', this.modalId);
     },
@@ -108,7 +119,7 @@ export default {
       this.$root.$emit('bv::hide::modal', this.modalId);
     },
     sendInvite() {
-      this.submitForm(this.postData);
+      this.submitForm();
       this.closeModal();
     },
     cancelInvite() {
@@ -120,15 +131,33 @@ export default {
     changeSelectedItem(item) {
       this.selectedAccessLevel = item;
     },
-    submitForm(formData) {
-      if (this.isProject) {
-        return Api.inviteProjectMembers(this.id, formData)
-          .then(this.showToastMessageSuccess)
-          .catch(this.showToastMessageError);
+    submitForm() {
+      const [usersToInviteByEmail, usersToAddById] = this.partitionNewUsersToInvite();
+      const promises = [];
+
+      if (usersToInviteByEmail !== '') {
+        const apiInviteByEmail = this.isProject
+          ? Api.inviteProjectMembersByEmail.bind(Api)
+          : Api.inviteGroupMembersByEmail.bind(Api);
+
+        promises.push(apiInviteByEmail(this.id, this.inviteByEmailPostData(usersToInviteByEmail)));
       }
-      return Api.inviteGroupMember(this.id, formData)
-        .then(this.showToastMessageSuccess)
-        .catch(this.showToastMessageError);
+
+      if (usersToAddById !== '') {
+        const apiAddByUserId = this.isProject
+          ? Api.addProjectMembersByUserId.bind(Api)
+          : Api.addGroupMembersByUserId.bind(Api);
+
+        promises.push(apiAddByUserId(this.id, this.addByUserIdPostData(usersToAddById)));
+      }
+
+      Promise.all(promises).then(this.showToastMessageSuccess).catch(this.showToastMessageError);
+    },
+    inviteByEmailPostData(usersToInviteByEmail) {
+      return { ...this.basePostData, email: usersToInviteByEmail };
+    },
+    addByUserIdPostData(usersToAddById) {
+      return { ...this.basePostData, user_id: usersToAddById };
     },
     showToastMessageSuccess() {
       this.$toast.show(this.$options.labels.toastMessageSuccessful, this.toastOptions);
diff --git a/app/assets/javascripts/invite_members/components/members_token_select.vue b/app/assets/javascripts/invite_members/components/members_token_select.vue
index d839c089f2e..b54812dfd96 100644
--- a/app/assets/javascripts/invite_members/components/members_token_select.vue
+++ b/app/assets/javascripts/invite_members/components/members_token_select.vue
@@ -1,6 +1,7 @@
 <script>
 import { debounce } from 'lodash';
-import { GlTokenSelector, GlAvatar, GlAvatarLabeled } from '@gitlab/ui';
+import { GlTokenSelector, GlAvatar, GlAvatarLabeled, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
 import { USER_SEARCH_DELAY } from '../constants';
 import Api from '~/api';
 
@@ -9,6 +10,7 @@ export default {
     GlTokenSelector,
     GlAvatar,
     GlAvatarLabeled,
+    GlSprintf,
   },
   props: {
     placeholder: {
@@ -32,12 +34,10 @@ export default {
     };
   },
   computed: {
-    newUsersToInvite() {
-      return this.selectedTokens
-        .map((obj) => {
-          return obj.id;
-        })
-        .join(',');
+    emailIsValid() {
+      const regex = /.+@/;
+
+      return this.query.match(regex) !== null;
     },
     placeholderText() {
       if (this.selectedTokens.length === 0) {
@@ -69,7 +69,7 @@ export default {
         });
     }, USER_SEARCH_DELAY),
     handleInput() {
-      this.$emit('input', this.newUsersToInvite);
+      this.$emit('input', this.selectedTokens);
     },
     handleBlur() {
       this.hideDropdownWithNoItems = false;
@@ -86,6 +86,9 @@ export default {
     },
   },
   queryOptions: { exclude_internal: true, active: true },
+  i18n: {
+    inviteTextMessage: __('Invite "%{email}" by email'),
+  },
 };
 </script>
 
@@ -94,7 +97,7 @@ export default {
     v-model="selectedTokens"
     :dropdown-items="users"
     :loading="loading"
-    :allow-user-defined-tokens="false"
+    :allow-user-defined-tokens="emailIsValid"
     :hide-dropdown-with-no-items="hideDropdownWithNoItems"
     :placeholder="placeholderText"
     :aria-labelledby="ariaLabelledby"
@@ -116,5 +119,13 @@ export default {
         :sub-label="dropdownItem.username"
       />
     </template>
+
+    <template #user-defined-token-content="{ inputText: email }">
+      <gl-sprintf :message="$options.i18n.inviteTextMessage">
+        <template #email>
+          <span>{{ email }}</span>
+        </template>
+      </gl-sprintf>
+    </template>
   </gl-token-selector>
 </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 4c67c310e9e..74c374018de 100644
--- a/app/assets/javascripts/invite_members/init_invite_members_modal.js
+++ b/app/assets/javascripts/invite_members/init_invite_members_modal.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import InviteMembersModal from '~/invite_members/components/invite_members_modal.vue';
 
 Vue.use(GlToast);
@@ -17,6 +18,7 @@ export default function initInviteMembersModal() {
       createElement(InviteMembersModal, {
         props: {
           ...el.dataset,
+          isProject: parseBoolean(el.dataset.isProject),
           accessLevels: JSON.parse(el.dataset.accessLevels),
         },
       }),