Add latest changes from gitlab-org/gitlab@master

14 files changed, 68 insertions, 91 deletions

diff --git a/app/assets/javascripts/import_entities/components/group_dropdown.vue b/app/assets/javascripts/import_entities/components/group_dropdown.vue
index 25d4037bbe5..f351a9a392f 100644
--- a/app/assets/javascripts/import_entities/components/group_dropdown.vue
+++ b/app/assets/javascripts/import_entities/components/group_dropdown.vue
@@ -1,5 +1,21 @@
 <script>
 import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
+import { debounce } from 'lodash';
+
+import { s__ } from '~/locale';
+import { createAlert } from '~/flash';
+import searchNamespacesWhereUserCanCreateProjectsQuery from '~/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql';
+import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
+import { MINIMUM_SEARCH_LENGTH } from '~/graphql_shared/constants';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+
+const reportNamespaceLoadError = debounce(
+  () =>
+    createAlert({
+      message: s__('ImportProjects|Requesting namespaces failed'),
+    }),
+  DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
+);
 
 export default {
   components: {
@@ -7,18 +23,32 @@ export default {
     GlSearchBoxByType,
   },
   inheritAttrs: false,
-  props: {
-    namespaces: {
-      type: Array,
-      required: true,
-    },
-  },
   data() {
     return { searchTerm: '' };
   },
+  apollo: {
+    namespaces: {
+      query: searchNamespacesWhereUserCanCreateProjectsQuery,
+      variables() {
+        return {
+          search: this.searchTerm,
+        };
+      },
+      skip() {
+        const hasNotEnoughSearchCharacters =
+          this.searchTerm.length > 0 && this.searchTerm.length < MINIMUM_SEARCH_LENGTH;
+        return hasNotEnoughSearchCharacters;
+      },
+      update(data) {
+        return data.currentUser.groups.nodes;
+      },
+      error: reportNamespaceLoadError,
+      debounce: DEBOUNCE_DELAY,
+    },
+  },
   computed: {
     filteredNamespaces() {
-      return this.namespaces.filter((ns) =>
+      return (this.namespaces ?? []).filter((ns) =>
         ns.fullPath.toLowerCase().includes(this.searchTerm.toLowerCase()),
       );
     },
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
index 66dff77eef8..40eba0a19d2 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
@@ -21,12 +21,13 @@ import { getGroupPathAvailability } from '~/rest_api';
 import axios from '~/lib/utils/axios_utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import searchNamespacesWhereUserCanCreateProjectsQuery from '~/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 import { STATUSES } from '../../constants';
 import ImportStatusCell from '../../components/import_status.vue';
 import importGroupsMutation from '../graphql/mutations/import_groups.mutation.graphql';
 import updateImportStatusMutation from '../graphql/mutations/update_import_status.mutation.graphql';
-import availableNamespacesQuery from '../graphql/queries/available_namespaces.query.graphql';
 import bulkImportSourceGroupsQuery from '../graphql/queries/bulk_import_source_groups.query.graphql';
 import { NEW_NAME_FIELD, ROOT_NAMESPACE, i18n } from '../constants';
 import { StatusPoller } from '../services/status_poller';
@@ -107,7 +108,12 @@ export default {
         return { page: this.page, filter: this.filter, perPage: this.perPage };
       },
     },
-    availableNamespaces: availableNamespacesQuery,
+    availableNamespaces: {
+      query: searchNamespacesWhereUserCanCreateProjectsQuery,
+      update(data) {
+        return data.currentUser.groups.nodes;
+      },
+    },
   },
 
   fields: [
@@ -421,7 +427,7 @@ export default {
             data: { exists },
           } = await getGroupPathAvailability(
             importTarget.newName,
-            importTarget.targetNamespace.id,
+            getIdFromGraphQLId(importTarget.targetNamespace.id),
             {
               cancelToken: importTarget.cancellationToken?.token,
             },
@@ -482,9 +488,13 @@ export default {
         validationErrors: [],
       });
 
-      getGroupPathAvailability(importTarget.newName, importTarget.targetNamespace.id, {
-        cancelToken: cancellationToken.token,
-      })
+      getGroupPathAvailability(
+        importTarget.newName,
+        getIdFromGraphQLId(importTarget.targetNamespace.id),
+        {
+          cancelToken: cancellationToken.token,
+        },
+      )
         .then(({ data: { exists, suggests: suggestions } }) => {
           if (!exists) return;
 
@@ -692,7 +702,6 @@ export default {
           <template #cell(importTarget)="{ item: group }">
             <import-target-cell
               :group="group"
-              :available-namespaces="availableNamespaces"
               :group-path-regex="groupPathRegex"
               @update-target-namespace="updateImportTarget(group, { targetNamespace: $event })"
               @update-new-name="updateImportTarget(group, { newName: $event })"
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
index 4fbbd5b239c..04a90d9c20c 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
@@ -22,10 +22,6 @@ export default {
       type: Object,
       required: true,
     },
-    availableNamespaces: {
-      type: Array,
-      required: true,
-    },
   },
 
   computed: {
@@ -53,7 +49,6 @@ export default {
         #default="{ namespaces }"
         :text="fullPath"
         :disabled="!group.flags.isAvailableForImport"
-        :namespaces="availableNamespaces"
         toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
         class="gl-h-7 gl-flex-grow-1"
         data-qa-selector="target_namespace_selector_dropdown"
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
index 36da996ea17..913a5a659b3 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
@@ -10,7 +10,6 @@ import typeDefs from './typedefs.graphql';
 export const clientTypenames = {
   BulkImportSourceGroupConnection: 'ClientBulkImportSourceGroupConnection',
   BulkImportSourceGroup: 'ClientBulkImportSourceGroup',
-  AvailableNamespace: 'ClientAvailableNamespace',
   BulkImportPageInfo: 'ClientBulkImportPageInfo',
   BulkImportTarget: 'ClientBulkImportTarget',
   BulkImportProgress: 'ClientBulkImportProgress',
@@ -110,15 +109,6 @@ export function createResolvers({ endpoints }) {
         };
         return response;
       },
-
-      availableNamespaces: () =>
-        axios.get(endpoints.availableNamespaces).then(({ data }) =>
-          data.map((namespace) => ({
-            __typename: clientTypenames.AvailableNamespace,
-            id: namespace.id,
-            fullPath: namespace.full_path,
-          })),
-        ),
     },
     Mutation: {
       async updateImportStatus(_, { id, status: newStatus }, { client, getCacheKey }) {
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/queries/available_namespaces.query.graphql b/app/assets/javascripts/import_entities/import_groups/graphql/queries/available_namespaces.query.graphql
deleted file mode 100644
index b0741dfbe5c..00000000000
--- a/app/assets/javascripts/import_entities/import_groups/graphql/queries/available_namespaces.query.graphql
+++ /dev/null
@@ -1,6 +0,0 @@
-query availableNamespaces {
-  availableNamespaces @client {
-    id
-    fullPath
-  }
-}
diff --git a/app/assets/javascripts/import_entities/import_groups/index.js b/app/assets/javascripts/import_entities/import_groups/index.js
index 5d7e7911f5a..494a845b1f9 100644
--- a/app/assets/javascripts/import_entities/import_groups/index.js
+++ b/app/assets/javascripts/import_entities/import_groups/index.js
@@ -12,7 +12,6 @@ export function mountImportGroupsApp(mountElement) {
 
   const {
     statusPath,
-    availableNamespacesPath,
     createBulkImportPath,
     jobsPath,
     historyPath,
@@ -25,7 +24,6 @@ export function mountImportGroupsApp(mountElement) {
       sourceUrl,
       endpoints: {
         status: statusPath,
-        availableNamespaces: availableNamespacesPath,
         createBulkImport: createBulkImportPath,
       },
     }),
diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index 97a7ed4bf55..701384f14a7 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -58,9 +58,8 @@ export default {
   },
 
   computed: {
-    ...mapState(['filter', 'repositories', 'namespaces', 'defaultTargetNamespace', 'pageInfo']),
+    ...mapState(['filter', 'repositories', 'defaultTargetNamespace', 'pageInfo', 'isLoadingRepos']),
     ...mapGetters([
-      'isLoading',
       'isImportingAnyRepo',
       'importingRepoCount',
       'hasImportableRepos',
@@ -196,7 +195,6 @@ export default {
             <provider-repo-table-row
               :key="repo.importSource.providerLink"
               :repo="repo"
-              :available-namespaces="namespaces"
               :user-namespace="defaultTargetNamespace"
               :optional-stages="optionalStagesSelection"
             />
@@ -209,9 +207,9 @@ export default {
       :key="pagePaginationStateKey"
       @appear="fetchRepos"
     />
-    <gl-loading-icon v-if="isLoading" class="gl-mt-7" size="lg" />
+    <gl-loading-icon v-if="isLoadingRepos" class="gl-mt-7" size="lg" />
 
-    <div v-if="!isLoading && repositories.length === 0" class="gl-text-center">
+    <div v-if="!isLoadingRepos && repositories.length === 0" class="gl-text-center">
       <strong>{{ emptyStateText }}</strong>
     </div>
   </div>
diff --git a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
index 458e0fb1cb1..371373d9f2b 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
@@ -39,10 +39,6 @@ export default {
       type: String,
       required: true,
     },
-    availableNamespaces: {
-      type: Array,
-      required: true,
-    },
     optionalStages: {
       type: Object,
       required: true,
@@ -127,11 +123,7 @@ export default {
       <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template>
       <template v-else-if="isImportNotStarted">
         <div class="import-entities-target-select gl-display-flex gl-align-items-stretch gl-w-full">
-          <import-group-dropdown
-            #default="{ namespaces }"
-            :text="importTarget.targetNamespace"
-            :namespaces="availableNamespaces"
-          >
+          <import-group-dropdown #default="{ namespaces }" :text="importTarget.targetNamespace">
             <template v-if="namespaces.length">
               <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
               <gl-dropdown-item
diff --git a/app/assets/javascripts/import_entities/import_projects/index.js b/app/assets/javascripts/import_entities/import_projects/index.js
index df26d6ac4f6..c7e5a424add 100644
--- a/app/assets/javascripts/import_entities/import_projects/index.js
+++ b/app/assets/javascripts/import_entities/import_projects/index.js
@@ -1,10 +1,14 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import Translate from '~/vue_shared/translate';
+import createDefaultClient from '~/lib/graphql';
 import ImportProjectsTable from './components/import_projects_table.vue';
+
 import createStore from './store';
 
 Vue.use(Translate);
+Vue.use(VueApollo);
 
 export function initStoreFromElement(element) {
   const {
@@ -15,7 +19,6 @@ export function initStoreFromElement(element) {
     reposPath,
     jobsPath,
     importPath,
-    namespacesPath,
     defaultTargetNamespace,
     paginatable,
   } = element.dataset;
@@ -31,7 +34,6 @@ export function initStoreFromElement(element) {
       reposPath,
       jobsPath,
       importPath,
-      namespacesPath,
     },
     hasPagination: parseBoolean(paginatable),
   });
@@ -46,6 +48,12 @@ export function initPropsFromElement(element) {
   };
 }
 
+const defaultClient = createDefaultClient();
+
+const apolloProvider = new VueApollo({
+  defaultClient,
+});
+
 export default function mountImportProjectsTable(mountElement) {
   if (!mountElement) return undefined;
 
@@ -55,6 +63,7 @@ export default function mountImportProjectsTable(mountElement) {
   return new Vue({
     el: mountElement,
     store,
+    apolloProvider,
     render(createElement) {
       return createElement(ImportProjectsTable, { props });
     },
diff --git a/app/assets/javascripts/import_entities/import_projects/store/actions.js b/app/assets/javascripts/import_entities/import_projects/store/actions.js
index a30c14f9d28..74723ec0e9d 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/actions.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/actions.js
@@ -176,22 +176,6 @@ export const fetchJobsFactory = (jobsPath = isRequired()) => ({ state, commit, d
   });
 };
 
-const fetchNamespacesFactory = (namespacesPath = isRequired()) => ({ commit }) => {
-  commit(types.REQUEST_NAMESPACES);
-  axios
-    .get(namespacesPath)
-    .then(({ data }) =>
-      commit(types.RECEIVE_NAMESPACES_SUCCESS, convertObjectPropsToCamelCase(data, { deep: true })),
-    )
-    .catch(() => {
-      createAlert({
-        message: s__('ImportProjects|Requesting namespaces failed'),
-      });
-
-      commit(types.RECEIVE_NAMESPACES_ERROR);
-    });
-};
-
 const setFilter = ({ commit, dispatch }, filter) => {
   commit(types.SET_FILTER, filter);
 
@@ -208,5 +192,4 @@ export default ({ endpoints = isRequired() }) => ({
   fetchRepos: fetchReposFactory({ reposPath: endpoints.reposPath }),
   fetchImport: fetchImportFactory(endpoints.importPath),
   fetchJobs: fetchJobsFactory(endpoints.jobsPath),
-  fetchNamespaces: fetchNamespacesFactory(endpoints.namespacesPath),
 });
diff --git a/app/assets/javascripts/import_entities/import_projects/store/getters.js b/app/assets/javascripts/import_entities/import_projects/store/getters.js
index ef01a67ec94..31ddffd4eb4 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/getters.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/getters.js
@@ -1,7 +1,5 @@
 import { isProjectImportable, isIncompatible, isImporting } from '../utils';
 
-export const isLoading = (state) => state.isLoadingRepos || state.isLoadingNamespaces;
-
 export const importingRepoCount = (state) => state.repositories.filter(isImporting).length;
 
 export const isImportingAnyRepo = (state) => state.repositories.some(isImporting);
diff --git a/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js b/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
index 6adf5e59cff..43dcd54c239 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
@@ -2,10 +2,6 @@ export const REQUEST_REPOS = 'REQUEST_REPOS';
 export const RECEIVE_REPOS_SUCCESS = 'RECEIVE_REPOS_SUCCESS';
 export const RECEIVE_REPOS_ERROR = 'RECEIVE_REPOS_ERROR';
 
-export const REQUEST_NAMESPACES = 'REQUEST_NAMESPACES';
-export const RECEIVE_NAMESPACES_SUCCESS = 'RECEIVE_NAMESPACES_SUCCESS';
-export const RECEIVE_NAMESPACES_ERROR = 'RECEIVE_NAMESPACES_ERROR';
-
 export const REQUEST_IMPORT = 'REQUEST_IMPORT';
 export const RECEIVE_IMPORT_SUCCESS = 'RECEIVE_IMPORT_SUCCESS';
 export const RECEIVE_IMPORT_ERROR = 'RECEIVE_IMPORT_ERROR';
diff --git a/app/assets/javascripts/import_entities/import_projects/store/mutations.js b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
index 163a19976de..fda0ed47c0f 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/mutations.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
@@ -122,19 +122,6 @@ export default {
     });
   },
 
-  [types.REQUEST_NAMESPACES](state) {
-    state.isLoadingNamespaces = true;
-  },
-
-  [types.RECEIVE_NAMESPACES_SUCCESS](state, namespaces) {
-    state.isLoadingNamespaces = false;
-    state.namespaces = namespaces;
-  },
-
-  [types.RECEIVE_NAMESPACES_ERROR](state) {
-    state.isLoadingNamespaces = false;
-  },
-
   [types.SET_IMPORT_TARGET](state, { repoId, importTarget }) {
     const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
 
diff --git a/app/assets/javascripts/import_entities/import_projects/store/state.js b/app/assets/javascripts/import_entities/import_projects/store/state.js
index ecd93561d52..010f462e385 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/state.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/state.js
@@ -1,10 +1,8 @@
 export default () => ({
   provider: '',
   repositories: [],
-  namespaces: [],
   customImportTargets: {},
   isLoadingRepos: false,
-  isLoadingNamespaces: false,
   ciCdOnly: false,
   filter: '',
   pageInfo: {