Add latest changes from gitlab-org/gitlab@master

2 files changed, 35 insertions, 39 deletions

diff --git a/app/assets/javascripts/groups/components/transfer_group_form.vue b/app/assets/javascripts/groups/components/transfer_group_form.vue
index e28459811d7..15a193f7cb8 100644
--- a/app/assets/javascripts/groups/components/transfer_group_form.vue
+++ b/app/assets/javascripts/groups/components/transfer_group_form.vue
@@ -1,29 +1,24 @@
 <script>
-import { GlFormGroup } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
-import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
+import TransferLocations from '~/groups_projects/components/transfer_locations.vue';
+import { getGroupTransferLocations } from '~/api/groups_api';
 
 export const i18n = {
   confirmationMessage: __(
     'You are going to transfer %{group_name} to another namespace. Are you ABSOLUTELY sure?',
   ),
   emptyNamespaceTitle: __('No parent group'),
-  dropdownTitle: s__('GroupSettings|Select parent group'),
+  dropdownLabel: s__('GroupSettings|Select parent group'),
 };
 
 export default {
   name: 'TransferGroupForm',
   components: {
     ConfirmDanger,
-    GlFormGroup,
-    NamespaceSelect,
+    TransferLocations,
   },
   props: {
-    groupNamespaces: {
-      type: Array,
-      required: true,
-    },
     isPaidGroup: {
       type: Boolean,
       required: true,
@@ -39,36 +34,41 @@ export default {
   },
   data() {
     return {
-      selectedId: null,
+      selectedTransferLocation: null,
     };
   },
   computed: {
     disableSubmitButton() {
-      return this.isPaidGroup || !this.selectedId;
+      return this.isPaidGroup || !this.selectedTransferLocation;
+    },
+    selectedTransferLocationId() {
+      return this.selectedTransferLocation?.id;
     },
   },
   methods: {
-    handleSelected({ id }) {
-      this.selectedId = id;
-    },
+    getGroupTransferLocations,
   },
   i18n,
+  additionalDropdownItems: [
+    {
+      id: -1,
+      humanName: i18n.emptyNamespaceTitle,
+    },
+  ],
 };
 </script>
 <template>
   <div>
-    <gl-form-group v-if="!isPaidGroup">
-      <namespace-select
-        :default-text="$options.i18n.dropdownTitle"
-        :group-namespaces="groupNamespaces"
-        :empty-namespace-title="$options.i18n.emptyNamespaceTitle"
-        :include-headers="false"
-        include-empty-namespace
-        data-testid="transfer-group-namespace-select"
-        @select="handleSelected"
-      />
-      <input type="hidden" name="new_parent_group_id" :value="selectedId" />
-    </gl-form-group>
+    <input type="hidden" name="new_parent_group_id" :value="selectedTransferLocationId" />
+    <transfer-locations
+      v-if="!isPaidGroup"
+      v-model="selectedTransferLocation"
+      :show-user-transfer-locations="false"
+      data-testid="transfer-group-namespace"
+      :group-transfer-locations-api-method="getGroupTransferLocations"
+      :additional-dropdown-items="$options.additionalDropdownItems"
+      :label="$options.i18n.dropdownLabel"
+    />
     <confirm-danger
       :disabled="disableSubmitButton"
       :phrase="confirmationPhrase"
diff --git a/app/assets/javascripts/groups/init_transfer_group_form.js b/app/assets/javascripts/groups/init_transfer_group_form.js
index f055b926918..503dad673dd 100644
--- a/app/assets/javascripts/groups/init_transfer_group_form.js
+++ b/app/assets/javascripts/groups/init_transfer_group_form.js
@@ -1,42 +1,38 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import { sprintf } from '~/locale';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import TransferGroupForm, { i18n } from './components/transfer_group_form.vue';
 
-const prepareGroups = (rawGroups) => {
-  if (!rawGroups) {
-    return [];
-  }
-
-  return JSON.parse(rawGroups).map(({ id, text: humanName }) => ({
-    id,
-    humanName,
-  }));
-};
-
 export default () => {
   const el = document.querySelector('.js-transfer-group-form');
   if (!el) {
     return false;
   }
 
+  Vue.use(VueApollo);
+
   const {
     targetFormId = null,
     buttonText: confirmButtonText = '',
     groupName = '',
-    parentGroups,
+    groupId: resourceId,
     isPaidGroup,
   } = el.dataset;
 
   return new Vue({
     el,
+    apolloProvider: new VueApollo({
+      defaultClient: createDefaultClient(),
+    }),
     provide: {
       confirmDangerMessage: sprintf(i18n.confirmationMessage, { group_name: groupName }),
+      resourceId,
     },
     render(createElement) {
       return createElement(TransferGroupForm, {
         props: {
-          groupNamespaces: prepareGroups(parentGroups),
           isPaidGroup: parseBoolean(isPaidGroup),
           confirmButtonText,
           confirmationPhrase: groupName,