2 files changed, 38 insertions, 8 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/components/import_status.vue b/app/assets/javascripts/import_entities/components/import_status.vue
index 5455a034106..bd69165f0ca 100644
--- a/app/assets/javascripts/import_entities/components/import_status.vue
+++ b/app/assets/javascripts/import_entities/components/import_status.vue
@@ -49,7 +49,7 @@ const STATUS_MAP = {
     text: __('Timeout'),
     variant: 'danger',
   },
-  [STATUSES.CANCELLED]: {
+  [STATUSES.CANCELED]: {
     icon: 'status-stopped',
     text: __('Cancelled'),
     variant: 'neutral',