diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-18 18:06:03 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-18 18:06:03 +0300 |
commit | 4584eb0e07d372d6014de16ab359965475184c99 (patch) | |
tree | 586f35b77fac7ddfb8a05aa57b4fb6aa3d98212e /app/assets | |
parent | bdbded586beb38e2ee4642c6a1e78ccbebc094dc (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
7 files changed, 69 insertions, 12 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" diff --git a/app/assets/javascripts/import_projects/index.js b/app/assets/javascripts/import_projects/index.js index 2d99d716609..b069dcb7766 100644 --- a/app/assets/javascripts/import_projects/index.js +++ b/app/assets/javascripts/import_projects/index.js @@ -38,7 +38,7 @@ export default function mountImportProjectsTable(mountElement) { }, methods: { - ...mapActions(['setInitialData']), + ...mapActions(['setInitialData', 'setFilter']), }, render(createElement) { diff --git a/app/assets/javascripts/import_projects/store/actions.js b/app/assets/javascripts/import_projects/store/actions.js index c44500937cc..0fb9a4cdfd4 100644 --- a/app/assets/javascripts/import_projects/store/actions.js +++ b/app/assets/javascripts/import_projects/store/actions.js @@ -5,6 +5,7 @@ import Poll from '~/lib/utils/poll'; import createFlash from '~/flash'; import { s__, sprintf } from '~/locale'; import axios from '~/lib/utils/axios_utils'; +import { jobsPathWithFilter, reposPathWithFilter } from './getters'; let eTagPoll; @@ -19,16 +20,20 @@ export const restartJobsPolling = () => { }; export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data); +export const setFilter = ({ commit }, filter) => commit(types.SET_FILTER, filter); export const requestRepos = ({ commit }, repos) => commit(types.REQUEST_REPOS, repos); export const receiveReposSuccess = ({ commit }, repos) => commit(types.RECEIVE_REPOS_SUCCESS, repos); export const receiveReposError = ({ commit }) => commit(types.RECEIVE_REPOS_ERROR); export const fetchRepos = ({ state, dispatch }) => { + dispatch('stopJobsPolling'); dispatch('requestRepos'); + const { provider } = state; + return axios - .get(state.reposPath) + .get(reposPathWithFilter(state)) .then(({ data }) => dispatch('receiveReposSuccess', convertObjectPropsToCamelCase(data, { deep: true })), ) @@ -36,7 +41,7 @@ export const fetchRepos = ({ state, dispatch }) => { .catch(() => { createFlash( sprintf(s__('ImportProjects|Requesting your %{provider} repositories failed'), { - provider: state.provider, + provider, }), ); @@ -77,16 +82,23 @@ export const fetchImport = ({ state, dispatch }, { newName, targetNamespace, rep export const receiveJobsSuccess = ({ commit }, updatedProjects) => commit(types.RECEIVE_JOBS_SUCCESS, updatedProjects); export const fetchJobs = ({ state, dispatch }) => { - if (eTagPoll) return; + const { filter } = state; + + if (eTagPoll) { + stopJobsPolling(); + clearJobsEtagPoll(); + } eTagPoll = new Poll({ resource: { - fetchJobs: () => axios.get(state.jobsPath), + fetchJobs: () => axios.get(jobsPathWithFilter(state)), }, method: 'fetchJobs', successCallback: ({ data }) => dispatch('receiveJobsSuccess', convertObjectPropsToCamelCase(data, { deep: true })), - errorCallback: () => createFlash(s__('ImportProjects|Updating the imported projects failed')), + errorCallback: () => + createFlash(s__('ImportProjects|Update of imported projects with realtime changes failed')), + data: { filter }, }); if (!Visibility.hidden()) { diff --git a/app/assets/javascripts/import_projects/store/getters.js b/app/assets/javascripts/import_projects/store/getters.js index 727b80765bd..b107c293181 100644 --- a/app/assets/javascripts/import_projects/store/getters.js +++ b/app/assets/javascripts/import_projects/store/getters.js @@ -20,3 +20,8 @@ export const isImportingAnyRepo = state => state.reposBeingImported.length > 0; export const hasProviderRepos = state => state.providerRepos.length > 0; export const hasImportedProjects = state => state.importedProjects.length > 0; + +export const reposPathWithFilter = ({ reposPath, filter = '' }) => + filter ? `${reposPath}?filter=${filter}` : reposPath; +export const jobsPathWithFilter = ({ jobsPath, filter = '' }) => + filter ? `${jobsPath}?filter=${filter}` : jobsPath; diff --git a/app/assets/javascripts/import_projects/store/mutation_types.js b/app/assets/javascripts/import_projects/store/mutation_types.js index 6ba3fd6f29e..16574f4450f 100644 --- a/app/assets/javascripts/import_projects/store/mutation_types.js +++ b/app/assets/javascripts/import_projects/store/mutation_types.js @@ -9,3 +9,5 @@ export const RECEIVE_IMPORT_SUCCESS = 'RECEIVE_IMPORT_SUCCESS'; export const RECEIVE_IMPORT_ERROR = 'RECEIVE_IMPORT_ERROR'; export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS'; + +export const SET_FILTER = 'SET_FILTER'; diff --git a/app/assets/javascripts/import_projects/store/mutations.js b/app/assets/javascripts/import_projects/store/mutations.js index b88de0268e7..6c56cfa8298 100644 --- a/app/assets/javascripts/import_projects/store/mutations.js +++ b/app/assets/javascripts/import_projects/store/mutations.js @@ -6,6 +6,10 @@ export default { Object.assign(state, data); }, + [types.SET_FILTER](state, filter) { + state.filter = filter; + }, + [types.REQUEST_REPOS](state) { state.isLoadingRepos = true; }, diff --git a/app/assets/javascripts/import_projects/store/state.js b/app/assets/javascripts/import_projects/store/state.js index 637fef6e53c..829f3aa4fbb 100644 --- a/app/assets/javascripts/import_projects/store/state.js +++ b/app/assets/javascripts/import_projects/store/state.js @@ -12,4 +12,5 @@ export default () => ({ isLoadingRepos: false, canSelectNamespace: false, ciCdOnly: false, + filter: '', }); |