Add latest changes from gitlab-org/gitlab@master

1 files changed, 39 insertions, 6 deletions

diff --git a/app/assets/javascripts/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_projects/components/import_projects_table.vue
index 00eb0afb3bf..e5ac3cbafe5 100644
--- a/app/assets/javascripts/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_projects/components/import_projects_table.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'underscore';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
@@ -7,6 +8,8 @@ import ImportedProjectTableRow from './imported_project_table_row.vue';
 import ProviderRepoTableRow from './provider_repo_table_row.vue';
 import eventHub from '../event_hub';
 
+const reposFetchThrottleDelay = 1000;
+
 export default {
   name: 'ImportProjectsTable',
   components: {
@@ -23,11 +26,11 @@ export default {
   },
 
   computed: {
-    ...mapState(['importedProjects', 'providerRepos', 'isLoadingRepos']),
+    ...mapState(['importedProjects', 'providerRepos', 'isLoadingRepos', 'filter']),
     ...mapGetters(['isImportingAnyRepo', 'hasProviderRepos', 'hasImportedProjects']),
 
     emptyStateText() {
-      return sprintf(__('No %{providerTitle} repositories available to import'), {
+      return sprintf(__('No %{providerTitle} repositories found'), {
         providerTitle: this.providerTitle,
       });
     },
@@ -47,21 +50,38 @@ export default {
   },
 
   methods: {
-    ...mapActions(['fetchRepos', 'fetchJobs', 'stopJobsPolling', 'clearJobsEtagPoll']),
+    ...mapActions([
+      'fetchRepos',
+      'fetchReposFiltered',
+      'fetchJobs',
+      'stopJobsPolling',
+      'clearJobsEtagPoll',
+      'setFilter',
+    ]),
 
     importAll() {
       eventHub.$emit('importAll');
     },
+
+    handleFilterInput({ target }) {
+      this.setFilter(target.value);
+    },
+
+    throttledFetchRepos: _.throttle(function fetch() {
+      eventHub.$off('importAll');
+      this.fetchRepos();
+    }, reposFetchThrottleDelay),
   },
 };
 </script>
 
 <template>
   <div>
+    <p class="light text-nowrap mt-2">
+      {{ s__('ImportProjects|Select the projects you want to import') }}
+    </p>
+
     <div class="d-flex justify-content-between align-items-end flex-wrap mb-3">
-      <p class="light text-nowrap mt-2 my-sm-0">
-        {{ s__('ImportProjects|Select the projects you want to import') }}
-      </p>
       <loading-button
         container-class="btn btn-success js-import-all"
         :loading="isImportingAnyRepo"
@@ -70,6 +90,19 @@ export default {
         type="button"
         @click="importAll"
       />
+      <form novalidate @submit.prevent>
+        <input
+          :value="filter"
+          data-qa-selector="githubish_import_filter_field"
+          class="form-control"
+          name="filter"
+          :placeholder="__('Filter your projects by name')"
+          autofocus
+          size="40"
+          @input="handleFilterInput($event)"
+          @keyup.enter="throttledFetchRepos"
+        />
+      </form>
     </div>
     <gl-loading-icon
       v-if="isLoadingRepos"