diff options
Diffstat (limited to 'app/assets/javascripts/import_projects/components/import_projects_table.vue')
-rw-r--r-- | app/assets/javascripts/import_projects/components/import_projects_table.vue | 45 |
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" |