Add latest changes from gitlab-org/gitlab@master

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',