diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry')
5 files changed, 83 insertions, 70 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue index 0cf49b25bf2..1020cd0c533 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue @@ -6,9 +6,7 @@ import { TOKEN_TITLE_TYPE, TOKEN_TYPE_TYPE, } from '~/vue_shared/components/filtered_search_bar/constants'; -import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; -import UrlSync from '~/vue_shared/components/url_sync.vue'; -import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils'; +import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import { LIST_KEY_CREATED_AT } from '~/packages_and_registries/package_registry/constants'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import PackageTypeToken from './tokens/package_type_token.vue'; @@ -24,7 +22,10 @@ export default { operators: OPERATORS_IS, }, ], - components: { RegistrySearch, UrlSync, LocalStorageSync }, + components: { + LocalStorageSync, + PersistedSearch, + }, inject: ['isGroupPage'], data() { return { @@ -40,17 +41,25 @@ export default { sortableFields() { return sortableFields(this.isGroupPage); }, - parsedSorting() { - const cleanOrderBy = this.sorting?.orderBy.replace('_at', ''); - return `${cleanOrderBy}_${this.sorting?.sort}`.toUpperCase(); - }, - parsedFilters() { + }, + mounted() { + // local-storage-sync does not emit `input` + // event when key is not found, so set the + // flag if it hasn't been updated + this.$nextTick(() => { + if (!this.mountRegistrySearch) { + this.mountRegistrySearch = true; + } + }); + }, + methods: { + formatFilters(filters) { const parsed = { packageName: '', packageType: undefined, }; - return this.filters.reduce((acc, filter) => { + return filters.reduce((acc, filter) => { if (filter.type === TOKEN_TYPE_TYPE && filter.value?.data) { return { ...acc, @@ -68,28 +77,17 @@ export default { return acc; }, parsed); }, - }, - mounted() { - const queryParams = getQueryParams(window.document.location.search); - const { sorting, filters } = extractFilterAndSorting(queryParams); - this.updateSorting(sorting); - this.updateFilters(filters); - this.mountRegistrySearch = true; - this.emitUpdate(); - }, - methods: { - updateFilters(newValue) { - this.filters = newValue; - }, updateSorting(newValue) { this.sorting = { ...this.sorting, ...newValue }; }, - updateSortingAndEmitUpdate(newValue) { + updateSortingFromLocalStorage(newValue) { this.updateSorting(newValue); - this.emitUpdate(); + this.mountRegistrySearch = true; }, - emitUpdate() { - this.$emit('update', { sort: this.parsedSorting, filters: this.parsedFilters }); + emitUpdate(values) { + const { filters, sorting } = values; + this.updateSorting(sorting); + this.$emit('update', { ...values, filters: this.formatFilters(filters) }); }, }, }; @@ -99,22 +97,15 @@ export default { <local-storage-sync storage-key="package_registry_list_sorting" :value="sorting" - @input="updateSorting" + @input="updateSortingFromLocalStorage" > - <url-sync> - <template #default="{ updateQuery }"> - <registry-search - v-if="mountRegistrySearch" - :filters="filters" - :sorting="sorting" - :tokens="$options.tokens" - :sortable-fields="sortableFields" - @sorting:changed="updateSortingAndEmitUpdate" - @filter:changed="updateFilters" - @filter:submit="emitUpdate" - @query:changed="updateQuery" - /> - </template> - </url-sync> + <persisted-search + v-if="mountRegistrySearch" + :sortable-fields="sortableFields" + :default-order="sorting.orderBy" + :default-sort="sorting.sort" + :tokens="$options.tokens" + @update="emitUpdate" + /> </local-storage-sync> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue index a7831ef2588..b892305055c 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue @@ -48,10 +48,6 @@ export default { required: false, default: false, }, - pageInfo: { - type: Object, - required: true, - }, groupSettings: { type: Object, required: false, @@ -179,11 +175,8 @@ export default { :hidden-delete="!canDeletePackages" :is-loading="isLoading" :items="list" - :pagination="pageInfo" :title="listTitle" @delete="setItemsToBeDeleted" - @prev-page="$emit('prev-page')" - @next-page="$emit('next-page')" > <template #default="{ selectItem, isSelected, item, first }"> <packages-list-row diff --git a/app/assets/javascripts/packages_and_registries/package_registry/index.js b/app/assets/javascripts/packages_and_registries/package_registry/index.js index ae0f6d18d99..1a9b192e2c8 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/index.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/index.js @@ -4,7 +4,7 @@ import { parseBoolean } from '~/lib/utils/common_utils'; import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index'; import PackageRegistry from '~/packages_and_registries/package_registry/pages/index.vue'; import RegistryBreadcrumb from '~/packages_and_registries/shared/components/registry_breadcrumb.vue'; -import { renderBreadcrumb } from '~/packages_and_registries/shared/utils'; +import { injectVueAppBreadcrumbs } from '~/lib/utils/breadcrumbs'; import createRouter from './router'; Vue.use(Translate); @@ -60,7 +60,7 @@ export default () => { }); return { - attachBreadcrumb: renderBreadcrumb(router, apolloProvider, RegistryBreadcrumb), + attachBreadcrumb: () => injectVueAppBreadcrumbs(router, RegistryBreadcrumb, apolloProvider), attachMainComponent, }; }; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue index 6de89748708..a187c7a70d2 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue @@ -18,6 +18,12 @@ import DeletePackages from '~/packages_and_registries/package_registry/component import PackageTitle from '~/packages_and_registries/package_registry/components/list/package_title.vue'; import PackageSearch from '~/packages_and_registries/package_registry/components/list/package_search.vue'; import PackageList from '~/packages_and_registries/package_registry/components/list/packages_list.vue'; +import PersistedPagination from '~/packages_and_registries/shared/components/persisted_pagination.vue'; +import { + getPageParams, + getNextPageParams, + getPreviousPageParams, +} from '~/packages_and_registries/package_registry/utils'; export default { components: { @@ -28,6 +34,7 @@ export default { PackageList, PackageTitle, PackageSearch, + PersistedPagination, DeletePackages, }, directives: { @@ -39,7 +46,7 @@ export default { packagesResource: {}, sort: '', filters: {}, - mutationLoading: false, + isDeleteInProgress: false, pageParams: {}, }; }, @@ -100,7 +107,7 @@ export default { : this.$options.i18n.noResultsTitle; }, isLoading() { - return this.$apollo.queries.packagesResource.loading || this.mutationLoading; + return this.$apollo.queries.packagesResource.loading || this.isDeleteInProgress; }, refetchQueriesData() { return [ @@ -124,23 +131,16 @@ export default { historyReplaceState(cleanUrl); } }, - handleSearchUpdate({ sort, filters }) { - this.pageParams = {}; + handleSearchUpdate({ sort, filters, pageInfo }) { + this.pageParams = getPageParams(pageInfo); this.sort = sort; this.filters = { ...filters }; }, fetchNextPage() { - this.pageParams = { - first: GRAPHQL_PAGE_SIZE, - after: this.pageInfo?.endCursor, - }; + this.pageParams = getNextPageParams(this.pageInfo.endCursor); }, fetchPreviousPage() { - this.pageParams = { - first: null, - last: GRAPHQL_PAGE_SIZE, - before: this.pageInfo?.startCursor, - }; + this.pageParams = getPreviousPageParams(this.pageInfo.startCursor); }, }, i18n: { @@ -176,17 +176,14 @@ export default { <delete-packages :refetch-queries="refetchQueriesData" show-success-alert - @start="mutationLoading = true" - @end="mutationLoading = false" + @start="isDeleteInProgress = true" + @end="isDeleteInProgress = false" > <template #default="{ deletePackages }"> <package-list :group-settings="groupSettings" :list="packages.nodes" :is-loading="isLoading" - :page-info="pageInfo" - @prev-page="fetchPreviousPage" - @next-page="fetchNextPage" @delete="deletePackages" > <template #empty-state> @@ -210,5 +207,13 @@ export default { </package-list> </template> </delete-packages> + <div v-if="!isDeleteInProgress" class="gl-display-flex gl-justify-content-center"> + <persisted-pagination + class="gl-mt-3" + :pagination="pageInfo" + @prev="fetchPreviousPage" + @next="fetchNextPage" + /> + </div> </div> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/utils.js b/app/assets/javascripts/packages_and_registries/package_registry/utils.js index 4ff8edb8f66..35ff3d5ea63 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/utils.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/utils.js @@ -1,6 +1,7 @@ import { capitalize } from 'lodash'; import { s__ } from '~/locale'; import { + GRAPHQL_PAGE_SIZE, PACKAGE_TYPE_CONAN, PACKAGE_TYPE_MAVEN, PACKAGE_TYPE_NPM, @@ -46,3 +47,26 @@ export const packageTypeToTrackCategory = (type) => `UI::${capitalize(type)}Pack export const sortableFields = (isGroupPage) => SORT_FIELDS.filter((f) => f.orderBy !== LIST_KEY_PROJECT || isGroupPage); + +export const getNextPageParams = (cursor) => ({ + after: cursor, + first: GRAPHQL_PAGE_SIZE, +}); + +export const getPreviousPageParams = (cursor) => ({ + first: null, + before: cursor, + last: GRAPHQL_PAGE_SIZE, +}); + +export const getPageParams = (pageInfo = {}) => { + if (pageInfo.before) { + return getPreviousPageParams(pageInfo.before); + } + + if (pageInfo.after) { + return getNextPageParams(pageInfo.after); + } + + return {}; +}; |