1 files changed, 16 insertions, 145 deletions

diff --git a/app/assets/javascripts/projects/settings/components/transfer_project_form.vue b/app/assets/javascripts/projects/settings/components/transfer_project_form.vue
index 55420c9c732..fd5fabd7c8a 100644
--- a/app/assets/javascripts/projects/settings/components/transfer_project_form.vue
+++ b/app/assets/javascripts/projects/settings/components/transfer_project_form.vue
@@ -1,30 +1,14 @@
 <script>
-import { GlFormGroup, GlAlert } from '@gitlab/ui';
-import { debounce } from 'lodash';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
-import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import TransferLocations from '~/groups_projects/components/transfer_locations.vue';
 import { getTransferLocations } from '~/api/projects_api';
-import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
-import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
-import { s__, __ } from '~/locale';
-import currentUserNamespace from '../graphql/queries/current_user_namespace.query.graphql';
 
 export default {
   name: 'TransferProjectForm',
   components: {
-    GlFormGroup,
-    NamespaceSelect,
+    TransferLocations,
     ConfirmDanger,
-    GlAlert,
   },
-  i18n: {
-    errorMessage: s__(
-      'ProjectTransfer|An error occurred fetching the transfer locations, please refresh the page and try again.',
-    ),
-    alertDismissAlert: __('Dismiss'),
-  },
-  inject: ['projectId'],
   props: {
     confirmationPhrase: {
       type: String,
@@ -37,150 +21,37 @@ export default {
   },
   data() {
     return {
-      userNamespaces: [],
-      groupNamespaces: [],
-      initialNamespacesLoaded: false,
-      selectedNamespace: null,
-      hasError: false,
-      isLoading: false,
-      isSearchLoading: false,
-      searchTerm: '',
-      page: 1,
-      totalPages: 1,
+      selectedTransferLocation: null,
     };
   },
+
   computed: {
     hasSelectedNamespace() {
-      return Boolean(this.selectedNamespace?.id);
+      return Boolean(this.selectedTransferLocation?.id);
     },
-    hasNextPageOfGroups() {
-      return this.page < this.totalPages;
+  },
+  watch: {
+    selectedTransferLocation(selectedTransferLocation) {
+      this.$emit('selectTransferLocation', selectedTransferLocation.id);
     },
   },
   methods: {
-    async handleShow() {
-      if (this.initialNamespacesLoaded) {
-        return;
-      }
-
-      this.isLoading = true;
-
-      [this.groupNamespaces, this.userNamespaces] = await Promise.all([
-        this.getGroupNamespaces(),
-        this.getUserNamespaces(),
-      ]);
-
-      this.isLoading = false;
-      this.initialNamespacesLoaded = true;
-    },
-    handleSelect(selectedNamespace) {
-      this.selectedNamespace = selectedNamespace;
-      this.$emit('selectNamespace', selectedNamespace.id);
-    },
-    async getGroupNamespaces() {
-      try {
-        const { data: groupNamespaces, headers } = await getTransferLocations(this.projectId, {
-          page: this.page,
-          search: this.searchTerm,
-        });
-
-        const { totalPages } = parseIntPagination(normalizeHeaders(headers));
-        this.totalPages = totalPages;
-
-        return groupNamespaces.map(({ id, full_name: humanName }) => ({
-          id,
-          humanName,
-        }));
-      } catch (error) {
-        this.hasError = true;
-
-        return [];
-      }
-    },
-    async getUserNamespaces() {
-      try {
-        const {
-          data: {
-            currentUser: { namespace },
-          },
-        } = await this.$apollo.query({
-          query: currentUserNamespace,
-        });
-
-        if (!namespace) {
-          return [];
-        }
-
-        return [
-          {
-            id: getIdFromGraphQLId(namespace.id),
-            humanName: namespace.fullName,
-          },
-        ];
-      } catch (error) {
-        this.hasError = true;
-
-        return [];
-      }
-    },
-    async handleLoadMoreGroups() {
-      this.isLoading = true;
-      this.page += 1;
-
-      const groupNamespaces = await this.getGroupNamespaces();
-      this.groupNamespaces.push(...groupNamespaces);
-
-      this.isLoading = false;
-    },
-    debouncedSearch: debounce(async function debouncedSearch() {
-      this.isSearchLoading = true;
-
-      this.groupNamespaces = await this.getGroupNamespaces();
-
-      this.isSearchLoading = false;
-    }, DEBOUNCE_DELAY),
-    handleSearch(searchTerm) {
-      this.searchTerm = searchTerm;
-      this.page = 1;
-
-      this.debouncedSearch();
-    },
-    handleAlertDismiss() {
-      this.hasError = false;
-    },
+    getTransferLocations,
   },
 };
 </script>
 <template>
   <div>
-    <gl-alert
-      v-if="hasError"
-      variant="danger"
-      :dismiss-label="$options.i18n.alertDismissLabel"
-      @dismiss="handleAlertDismiss"
-      >{{ $options.i18n.errorMessage }}</gl-alert
-    >
-    <gl-form-group>
-      <namespace-select
-        data-testid="transfer-project-namespace"
-        :full-width="true"
-        :group-namespaces="groupNamespaces"
-        :user-namespaces="userNamespaces"
-        :selected-namespace="selectedNamespace"
-        :has-next-page-of-groups="hasNextPageOfGroups"
-        :is-loading="isLoading"
-        :is-search-loading="isSearchLoading"
-        :should-filter-namespaces="false"
-        @select="handleSelect"
-        @load-more-groups="handleLoadMoreGroups"
-        @search="handleSearch"
-        @show="handleShow"
-      />
-    </gl-form-group>
+    <transfer-locations
+      v-model="selectedTransferLocation"
+      data-testid="transfer-project-namespace"
+      :group-transfer-locations-api-method="getTransferLocations"
+    />
     <confirm-danger
       :disabled="!hasSelectedNamespace"
       :phrase="confirmationPhrase"
       :button-text="confirmButtonText"
+      button-qa-selector="transfer_project_button"
       @confirm="$emit('confirm')"
     />
   </div>