Add latest changes from gitlab-org/gitlab@master

5 files changed, 134 insertions, 88 deletions

diff --git a/app/assets/javascripts/invite_members/components/import_a_project_modal.vue b/app/assets/javascripts/invite_members/components/import_project_members_modal.vue
index 3789e3f7795..31b7fd4cc42 100644
--- a/app/assets/javascripts/invite_members/components/import_a_project_modal.vue
+++ b/app/assets/javascripts/invite_members/components/import_project_members_modal.vue
@@ -1,21 +1,20 @@
 <script>
-import { GlButton, GlFormGroup, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { importProjectMembers } from '~/api/projects_api';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { s__, __, sprintf } from '~/locale';
+import eventHub from '../event_hub';
 import ProjectSelect from './project_select.vue';
 
 export default {
+  name: 'ImportProjectMembersModal',
   components: {
-    GlButton,
     GlFormGroup,
     GlModal,
     GlSprintf,
     ProjectSelect,
   },
-  directives: {
-    GlModal: GlModalDirective,
-  },
   props: {
     projectId: {
       type: String,
@@ -45,8 +44,33 @@ export default {
     validationState() {
       return this.invalidFeedbackMessage === '' ? null : false;
     },
+    actionPrimary() {
+      return {
+        text: this.$options.i18n.modalPrimaryButton,
+        attributes: {
+          variant: 'confirm',
+          disabled: this.importDisabled,
+          loading: this.isLoading,
+        },
+      };
+    },
+    actionCancel() {
+      return { text: this.$options.i18n.modalCancelButton };
+    },
+  },
+  mounted() {
+    eventHub.$on('openProjectMembersModal', () => {
+      this.openModal();
+    });
   },
   methods: {
+    openModal() {
+      this.$root.$emit(BV_SHOW_MODAL, this.$options.modalId);
+    },
+    resetFields() {
+      this.invalidFeedbackMessage = '';
+      this.projectToBeImported = {};
+    },
     submitImport() {
       this.isLoading = true;
       return importProjectMembers(this.projectId, this.projectToBeImported.id)
@@ -57,11 +81,6 @@ export default {
           this.projectToBeImported = {};
         });
     },
-    closeModal() {
-      this.invalidFeedbackMessage = '';
-
-      this.$refs.modal.hide();
-    },
     showToastMessage() {
       this.$toast.show(this.$options.i18n.successMessage, this.$options.toastOptions);
 
@@ -79,7 +98,6 @@ export default {
     };
   },
   i18n: {
-    buttonText: s__('ImportAProjectModal|Import from a project'),
     projectLabel: __('Project'),
     modalTitle: s__('ImportAProjectModal|Import members from another project'),
     modalIntro: s__(
@@ -95,63 +113,37 @@ export default {
   },
   projectSelectLabelId: 'project-select',
   modalId: uniqueId('import-a-project-modal-'),
-  formClasses: 'gl-md-w-auto gl-w-full',
-  buttonClasses: 'gl-w-full',
 };
 </script>
 
 <template>
-  <form :class="$options.formClasses">
-    <gl-button v-gl-modal="$options.modalId" :class="$options.buttonClasses" variant="default">{{
-      $options.i18n.buttonText
-    }}</gl-button>
-
-    <gl-modal
-      ref="modal"
-      :modal-id="$options.modalId"
-      size="sm"
-      :title="$options.i18n.modalTitle"
-      ok-variant="danger"
-      footer-class="gl-bg-gray-10 gl-p-5"
+  <gl-modal
+    ref="modal"
+    :modal-id="$options.modalId"
+    size="sm"
+    :title="$options.i18n.modalTitle"
+    :action-primary="actionPrimary"
+    :action-cancel="actionCancel"
+    @primary="submitImport"
+    @hidden="resetFields"
+  >
+    <p ref="modalIntro">
+      <gl-sprintf :message="modalIntro">
+        <template #strong="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+      </gl-sprintf>
+    </p>
+    <gl-form-group
+      :invalid-feedback="invalidFeedbackMessage"
+      :state="validationState"
+      data-testid="form-group"
     >
-      <div>
-        <p ref="modalIntro">
-          <gl-sprintf :message="modalIntro">
-            <template #strong="{ content }">
-              <strong>{{ content }}</strong>
-            </template>
-          </gl-sprintf>
-        </p>
-        <gl-form-group
-          :invalid-feedback="invalidFeedbackMessage"
-          :state="validationState"
-          data-testid="form-group"
-        >
-          <label :id="$options.projectSelectLabelId" class="col-form-label">{{
-            $options.i18n.projectLabel
-          }}</label>
-          <project-select v-model="projectToBeImported" />
-        </gl-form-group>
-        <p>{{ $options.i18n.modalHelpText }}</p>
-      </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.i18n.modalCancelButton }}
-          </gl-button>
-          <div class="gl-mr-3"></div>
-          <gl-button
-            :disabled="importDisabled"
-            :loading="isLoading"
-            variant="confirm"
-            data-testid="import-button"
-            @click="submitImport"
-            >{{ $options.i18n.modalPrimaryButton }}</gl-button
-          >
-        </div>
-      </template>
-    </gl-modal>
-  </form>
+      <label :id="$options.projectSelectLabelId" class="col-form-label">{{
+        $options.i18n.projectLabel
+      }}</label>
+      <project-select v-model="projectToBeImported" />
+    </gl-form-group>
+    <p>{{ $options.i18n.modalHelpText }}</p>
+  </gl-modal>
 </template>
diff --git a/app/assets/javascripts/invite_members/components/import_project_members_trigger.vue b/app/assets/javascripts/invite_members/components/import_project_members_trigger.vue
new file mode 100644
index 00000000000..5781abb41b7
--- /dev/null
+++ b/app/assets/javascripts/invite_members/components/import_project_members_trigger.vue
@@ -0,0 +1,34 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import eventHub from '../event_hub';
+
+export default {
+  components: {
+    GlButton,
+  },
+  props: {
+    displayText: {
+      type: String,
+      required: false,
+      default: s__('ImportAProjectModal|Import from a project'),
+    },
+    classes: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    openModal() {
+      eventHub.$emit('openProjectMembersModal');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button :class="classes" @click="openModal">
+    {{ displayText }}
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/invite_members/init_import_a_project_modal.js b/app/assets/javascripts/invite_members/init_import_a_project_modal.js
deleted file mode 100644
index 954347467de..00000000000
--- a/app/assets/javascripts/invite_members/init_import_a_project_modal.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Vue from 'vue';
-import ImportAProjectModal from '~/invite_members/components/import_a_project_modal.vue';
-
-export default function initImportAProjectModal() {
-  const el = document.querySelector('.js-import-a-project-modal');
-
-  if (!el) {
-    return false;
-  }
-
-  const { projectId, projectName } = el.dataset;
-
-  return new Vue({
-    el,
-    render: (createElement) =>
-      createElement(ImportAProjectModal, {
-        props: {
-          projectId,
-          projectName,
-        },
-      }),
-  });
-}
diff --git a/app/assets/javascripts/invite_members/init_import_project_members_modal.js b/app/assets/javascripts/invite_members/init_import_project_members_modal.js
new file mode 100644
index 00000000000..daaa1315884
--- /dev/null
+++ b/app/assets/javascripts/invite_members/init_import_project_members_modal.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import ImportProjectMembersModal from '~/invite_members/components/import_project_members_modal.vue';
+
+export default function initImportProjectMembersModal() {
+  const el = document.querySelector('.js-import-project-members-modal');
+
+  if (!el) {
+    return false;
+  }
+
+  const { projectId, projectName } = el.dataset;
+
+  return new Vue({
+    el,
+    render: (createElement) =>
+      createElement(ImportProjectMembersModal, {
+        props: {
+          projectId,
+          projectName,
+        },
+      }),
+  });
+}
diff --git a/app/assets/javascripts/invite_members/init_import_project_members_trigger.js b/app/assets/javascripts/invite_members/init_import_project_members_trigger.js
new file mode 100644
index 00000000000..66a9bf118d2
--- /dev/null
+++ b/app/assets/javascripts/invite_members/init_import_project_members_trigger.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import ImportProjectMembersTrigger from '~/invite_members/components/import_project_members_trigger.vue';
+
+export default function initImportProjectMembersTrigger() {
+  const el = document.querySelector('.js-import-project-members-trigger');
+
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    render: (createElement) =>
+      createElement(ImportProjectMembersTrigger, {
+        props: {
+          ...el.dataset,
+        },
+      }),
+  });
+}