Merge branch...

Merge branch '433178-frontend-preserve-ci-catalog-page-when-navigating-to-details-page' into 'master' 

Preserve CI Catalog page when navigating to details page

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/138225



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Serhii Yarynovskyi <syarynovskyi@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Co-authored-by: Frédéric Caplette <fcaplette@gitlab.com>

app/assets/javascripts/ci/catalog/components/pages/ci_resources_page.vue

@@ -8,6 +8,8 @@ import CatalogListSkeletonLoader from '../list/catalog_list_skeleton_loader.vue'
 import CatalogHeader from '../list/catalog_header.vue';
 import EmptyState from '../list/empty_state.vue';
 import getCatalogResources from '../../graphql/queries/get_ci_catalog_resources.query.graphql';
+import getCurrentPage from '../../graphql/queries/client/get_current_page.query.graphql';
+import updateCurrentPageMutation from '../../graphql/mutations/client/update_current_page.mutation.graphql';
 
 export default {
   components: {
@@ -46,6 +48,12 @@ export default {
         createAlert({ message: e.message || this.$options.i18n.fetchError, variant: 'danger' });
       },
     },
+    currentPage: {
+      query: getCurrentPage,
+      update(data) {
+        return data?.page?.current || 1;
+      },
+    },
   },
   computed: {
     hasResources() {
@@ -72,7 +80,7 @@ export default {
           },
         });
 
-        this.currentPage -= 1;
+        this.decrementPage();
       } catch (e) {
         // Ensure that the current query is properly stoped if an error occurs.
         this.$apollo.queries.catalogResources.stop();
@@ -87,7 +95,7 @@ export default {
           },
         });
 
-        this.currentPage += 1;
+        this.incrementPage();
       } catch (e) {
         // Ensure that the current query is properly stoped if an error occurs.
         this.$apollo.queries.catalogResources.stop();
@@ -95,6 +103,20 @@ export default {
         createAlert({ message: e?.message || this.$options.i18n.fetchError, variant: 'danger' });
       }
     },
+    updatePageCount(pageNumber) {
+      this.$apollo.mutate({
+        mutation: updateCurrentPageMutation,
+        variables: {
+          pageNumber,
+        },
+      });
+    },
+    decrementPage() {
+      this.updatePageCount(this.currentPage - 1);
+    },
+    incrementPage() {
+      this.updatePageCount(this.currentPage + 1);
+    },
     onUpdateSearchTerm(searchTerm) {
       this.searchTerm = !searchTerm.length ? null : searchTerm;
       this.resetPageCount();
@@ -109,7 +131,7 @@ export default {
       });
     },
     resetPageCount() {
-      this.currentPage = 1;
+      this.updatePageCount(1);
     },
   },
   i18n: {

app/assets/javascripts/ci/catalog/graphql/mutations/client/update_current_page.mutation.graphql

+mutation updateCurrentPage($pageNumber: Int!) {
+  updateCurrentPage(pageNumber: $pageNumber) @client {
+    page {
+      current
+    }
+  }
+}

app/assets/javascripts/ci/catalog/graphql/queries/client/get_current_page.query.graphql

+query getCurrentPage {
+  page @client {
+    current
+  }
+}

app/assets/javascripts/ci/catalog/graphql/settings.js

 import { componentsMockData } from '../constants';
+import getCurrentPage from './queries/client/get_current_page.query.graphql';
 
 export const ciCatalogResourcesItemsCount = 20;
 export const CI_CATALOG_RESOURCE_TYPE = 'Ci::Catalog::Resource';
 
 export const cacheConfig = {
-  cacheConfig: {
-    typePolicies: {
-      Query: {
-        fields: {
-          ciCatalogResource(_, { args, toReference }) {
-            return toReference({
-              __typename: 'CiCatalogResource',
-              // Webpath is the fullpath with a leading slash
-              webPath: `/${args.fullPath}`,
-            });
-          },
-          ciCatalogResources: {
-            keyArgs: false,
-          },
+  typePolicies: {
+    Query: {
+      fields: {
+        ciCatalogResource(_, { args, toReference }) {
+          return toReference({
+            __typename: 'CiCatalogResource',
+            // Webpath is the fullpath with a leading slash
+            webPath: `/${args.fullPath}`,
+          });
+        },
+        ciCatalogResources: {
+          keyArgs: false,
         },
       },
-      CiCatalogResource: {
-        keyFields: ['webPath'],
-      },
+    },
+    CiCatalogResource: {
+      keyFields: ['webPath'],
     },
   },
 };
 
 export const resolvers = {
+  Mutation: {
+    updateCurrentPage: (_, { pageNumber }, { cache }) => {
+      cache.writeQuery({
+        query: getCurrentPage,
+        data: {
+          page: {
+            __typename: 'CatalogPage',
+            current: pageNumber,
+          },
+        },
+      });
+    },
+  },
   CiCatalogResource: {
     components() {
       return componentsMockData;

app/assets/javascripts/ci/catalog/graphql/typedefs.graphql

+type CatalogPage {
+  current: Int
+}
+
+extend type Query {
+  page: CatalogPage
+}
+
+extend type Mutation {
+  updateCurrentPage(pageNumber: Int!): CatalogPage
+}

app/assets/javascripts/ci/catalog/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { cacheConfig, resolvers } from '~/ci/catalog/graphql/settings';
+import typeDefs from '~/ci/catalog/graphql/typedefs.graphql';
 
 import GlobalCatalog from './global_catalog.vue';
 import CiResourcesPage from './components/pages/ci_resources_page.vue';
@@ -19,7 +20,7 @@ export const initCatalog = (selector = '#js-ci-cd-catalog') => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(resolvers, cacheConfig),
+    defaultClient: createDefaultClient(resolvers, { cacheConfig, typeDefs }),
   });
 
   return new Vue({

spec/frontend/ci/catalog/components/pages/ci_resources_page_spec.js

@@ -11,7 +11,8 @@ import CatalogSearch from '~/ci/catalog/components/list/catalog_search.vue';
 import CiResourcesList from '~/ci/catalog/components/list/ci_resources_list.vue';
 import CatalogListSkeletonLoader from '~/ci/catalog/components/list/catalog_list_skeleton_loader.vue';
 import EmptyState from '~/ci/catalog/components/list/empty_state.vue';
-import { cacheConfig } from '~/ci/catalog/graphql/settings';
+import { cacheConfig, resolvers } from '~/ci/catalog/graphql/settings';
+import typeDefs from '~/ci/catalog/graphql/typedefs.graphql';
 import ciResourcesPage from '~/ci/catalog/components/pages/ci_resources_page.vue';
 
 import getCatalogResources from '~/ci/catalog/graphql/queries/get_ci_catalog_resources.query.graphql';
@@ -29,7 +30,7 @@ describe('CiResourcesPage', () => {
 
   const createComponent = () => {
     const handlers = [[getCatalogResources, catalogResourcesResponse]];
-    const mockApollo = createMockApollo(handlers, {}, cacheConfig);
+    const mockApollo = createMockApollo(handlers, resolvers, { cacheConfig, typeDefs });
 
     wrapper = shallowMountExtended(ciResourcesPage, {
       apolloProvider: mockApollo,
@@ -217,7 +218,7 @@ describe('CiResourcesPage', () => {
   });
 
   describe('pages count', () => {
-    describe('when the fetchMore call suceeds', () => {
+    describe('when the fetchMore call succeeds', () => {
       beforeEach(async () => {
         catalogResourcesResponse.mockResolvedValue(catalogResponseBody);