diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-02 03:07:18 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-02 03:07:18 +0300 |
commit | a0e1fa9aada57f1fde912890e96f867ac540ab03 (patch) | |
tree | 12c3c1e7d5dfe8b097cb54929d8d0de7dbf4e448 /app | |
parent | cc77bdd6f5f12bea0f50064f3feadcd9c87009a6 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app')
10 files changed, 149 insertions, 40 deletions
diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue index 3cb0963e561..14ac9e9c9a0 100644 --- a/app/assets/javascripts/header_search/components/app.vue +++ b/app/assets/javascripts/header_search/components/app.vue @@ -225,7 +225,7 @@ export default { v-model="searchText" role="searchbox" class="gl-z-index-1" - data-testid="global_search_input" + data-testid="global-search-input" autocomplete="off" :placeholder="$options.i18n.SEARCH_GITLAB" :aria-activedescendant="currentFocusedId" diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue index 5cf0f4ad5ab..321b12a0050 100644 --- a/app/assets/javascripts/issues/show/components/header_actions.vue +++ b/app/assets/javascripts/issues/show/components/header_actions.vue @@ -518,7 +518,7 @@ export default { <gl-dropdown-item v-gl-modal="$options.deleteModalId" variant="danger" - data-testid="delete_issue_button" + data-testid="delete-issue-button" @click="track('click_dropdown')" > {{ deleteButtonText }} diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue index 9ecb037c257..ffba64f58f8 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue @@ -1,11 +1,9 @@ <script> -import { GlKeysetPagination } from '@gitlab/ui'; import ImageListRow from './image_list_row.vue'; export default { name: 'ImageList', components: { - GlKeysetPagination, ImageListRow, }, props: { @@ -18,10 +16,6 @@ export default { default: false, required: false, }, - pageInfo: { - type: Object, - required: true, - }, expirationPolicy: { type: Object, default: () => ({}), @@ -41,13 +35,5 @@ export default { :expiration-policy="expirationPolicy" @delete="$emit('delete', $event)" /> - <div class="gl-display-flex gl-justify-content-center"> - <gl-keyset-pagination - v-bind="pageInfo" - class="gl-mt-3" - @prev="$emit('prev-page')" - @next="$emit('next-page')" - /> - </div> </div> </template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue index 6881f914e31..d44bdd1bba2 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue @@ -14,6 +14,7 @@ import { createAlert } from '~/alert'; import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants'; import { fetchPolicies } from '~/lib/graphql'; import Tracking from '~/tracking'; +import PersistedPagination from '~/packages_and_registries/shared/components/persisted_pagination.vue'; import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants'; import DeleteImage from '../components/delete_image.vue'; @@ -33,6 +34,7 @@ import { SETTINGS_TEXT, } from '../constants/index'; import getContainerRepositoriesDetails from '../graphql/queries/get_container_repositories_details.query.graphql'; +import { getPageParams, getNextPageParams, getPreviousPageParams } from '../utils'; export default { name: 'RegistryListPage', @@ -62,6 +64,7 @@ export default { GlSkeletonLoader, RegistryHeader, DeleteImage, + PersistedPagination, PersistedSearch, }, directives: { @@ -198,25 +201,18 @@ export default { this.deleteAlertType = null; this.itemToDelete = {}; }, - async fetchNextPage() { - this.pageParams = { - after: this.pageInfo?.endCursor, - first: GRAPHQL_PAGE_SIZE, - }; + fetchNextPage() { + this.pageParams = getNextPageParams(this.pageInfo?.endCursor); }, - async fetchPreviousPage() { - this.pageParams = { - first: null, - before: this.pageInfo?.startCursor, - last: GRAPHQL_PAGE_SIZE, - }; + fetchPreviousPage() { + this.pageParams = getPreviousPageParams(this.pageInfo?.startCursor); }, startDelete() { this.track('confirm_delete'); this.mutationLoading = true; }, - handleSearchUpdate({ sort, filters }) { - this.pageParams = {}; + handleSearchUpdate({ sort, filters, pageInfo }) { + this.pageParams = getPageParams(pageInfo); this.sorting = sort; const search = filters.find((i) => i.type === FILTERED_SEARCH_TERM); @@ -322,11 +318,8 @@ export default { v-if="images.length" :images="images" :metadata-loading="$apollo.queries.additionalDetails.loading" - :page-info="pageInfo" :expiration-policy="config.expirationPolicy" @delete="deleteImage" - @prev-page="fetchPreviousPage" - @next-page="fetchNextPage" /> <gl-empty-state @@ -346,6 +339,15 @@ export default { </template> </template> + <div class="gl-display-flex gl-justify-content-center"> + <persisted-pagination + class="gl-mt-3" + :pagination="pageInfo" + @prev="fetchPreviousPage" + @next="fetchNextPage" + /> + </div> + <delete-image :id="itemToDelete.id" @start="startDelete" diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js index 751ab5180a1..7ed4ff52b06 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/utils.js @@ -1,4 +1,5 @@ import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility'; +import { GRAPHQL_PAGE_SIZE } from './constants/index'; export const getImageName = (image = {}) => { return image.name || image.project?.path; @@ -10,3 +11,26 @@ export const timeTilRun = (time) => { const difference = calculateRemainingMilliseconds(time); return approximateDuration(difference / 1000); }; + +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 {}; +}; diff --git a/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue b/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue new file mode 100644 index 00000000000..01c2c751cac --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue @@ -0,0 +1,56 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import UrlSync from '~/vue_shared/components/url_sync.vue'; + +export default { + name: 'PersistedPagination', + components: { + GlKeysetPagination, + UrlSync, + }, + inheritAttrs: false, + props: { + pagination: { + type: Object, + default: () => ({}), + required: false, + }, + }, + computed: { + attrs() { + return { + ...this.pagination, + ...this.$attrs, + }; + }, + }, + methods: { + onPrev(updateQuery) { + updateQuery({ + before: this.pagination?.startCursor, + after: null, + }); + this.$emit('prev'); + }, + onNext(updateQuery) { + updateQuery({ + after: this.pagination?.endCursor, + before: null, + }); + this.$emit('next'); + }, + }, +}; +</script> + +<template> + <url-sync> + <template #default="{ updateQuery }"> + <gl-keyset-pagination + v-bind="attrs" + @prev="onPrev(updateQuery)" + @next="onNext(updateQuery)" + /> + </template> + </url-sync> +</template> diff --git a/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue index 363304c20ce..95343a3a09b 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue @@ -1,7 +1,11 @@ <script> import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import UrlSync from '~/vue_shared/components/url_sync.vue'; -import { extractFilterAndSorting, getQueryParams } from '~/packages_and_registries/shared/utils'; +import { + extractFilterAndSorting, + extractPageInfo, + getQueryParams, +} from '~/packages_and_registries/shared/utils'; export default { components: { RegistrySearch, UrlSync }, @@ -31,6 +35,7 @@ export default { orderBy: this.defaultOrder, sort: this.defaultSort, }, + pageInfo: {}, mountRegistrySearch: false, }; }, @@ -40,27 +45,49 @@ export default { return `${cleanOrderBy}_${this.sorting?.sort}`.toUpperCase(); }, }, + watch: { + $route(newValue, oldValue) { + if (newValue.fullPath !== oldValue.fullPath) { + this.updateDataFromUrl(); + this.emitUpdate(); + } + }, + }, mounted() { - const queryParams = getQueryParams(window.document.location.search); - const { sorting, filters } = extractFilterAndSorting(queryParams); - this.updateSorting(sorting); - this.updateFilters(filters); + this.updateDataFromUrl(); this.mountRegistrySearch = true; this.emitUpdate(); }, methods: { + updateDataFromUrl() { + const queryParams = getQueryParams(window.location.search); + const { sorting, filters } = extractFilterAndSorting(queryParams); + const pageInfo = extractPageInfo(queryParams); + this.updateSorting(sorting); + this.updateFilters(filters); + this.updatePageInfo(pageInfo); + }, updateFilters(newValue) { + this.updatePageInfo({}); this.filters = newValue; }, updateSorting(newValue) { + this.updatePageInfo({}); this.sorting = { ...this.sorting, ...newValue }; }, + updatePageInfo(newValue) { + this.pageInfo = newValue; + }, updateSortingAndEmitUpdate(newValue) { this.updateSorting(newValue); this.emitUpdate(); }, emitUpdate() { - this.$emit('update', { sort: this.parsedSorting, filters: this.filters }); + this.$emit('update', { + sort: this.parsedSorting, + filters: this.filters, + pageInfo: this.pageInfo, + }); }, }, }; diff --git a/app/assets/javascripts/packages_and_registries/shared/utils.js b/app/assets/javascripts/packages_and_registries/shared/utils.js index adffab277cc..bda0839092e 100644 --- a/app/assets/javascripts/packages_and_registries/shared/utils.js +++ b/app/assets/javascripts/packages_and_registries/shared/utils.js @@ -30,6 +30,14 @@ export const extractFilterAndSorting = (queryObject) => { return { filters, sorting }; }; +export const extractPageInfo = (queryObject) => { + const { before, after } = queryObject; + return { + before, + after, + }; +}; + export const beautifyPath = (path) => (path ? path.split('/').join(' / ') : ''); export const getCommitLink = ({ project_path: projectPath, pipeline = {} }, isGroup = false) => { diff --git a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue index 730e9e1c6cc..e41cd344b3f 100644 --- a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue +++ b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue @@ -60,7 +60,13 @@ export default { methods: { generateQueryData({ sorting = {}, filter = [] } = {}) { // Ensure that we clean up the query when we remove a token from the search - const result = { ...this.baselineQueryStringFilters, ...sorting, search: [] }; + const result = { + ...this.baselineQueryStringFilters, + ...sorting, + search: [], + after: null, + before: null, + }; filter.forEach((f) => { if (f.type === FILTERED_SEARCH_TERM) { diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 1c22a853dd0..68527d4da52 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -92,7 +92,7 @@ - if header_link?(:todos) = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do = link_to dashboard_todos_path, title: _('To-Do List'), aria: { label: _('To-Do List') }, class: 'shortcuts-todos js-prefetch-document', - data: { testid: 'todos_shortcut_button', toggle: 'tooltip', placement: 'bottom', + data: { testid: 'todos-shortcut-button', toggle: 'tooltip', placement: 'bottom', track_label: 'main_navigation', track_action: 'click_to_do_link', track_property: 'navigation_top', |