Merge branch '233017-do-not-use-has-next-page-from-graphql-in-vulnerabilities' into 'master'

Disable loading hasNextPage value for Security Dashboards

See merge request gitlab-org/gitlab!39261

app/assets/javascripts/graphql_shared/fragments/pageInfoCursorsOnly.fragment.graphql

+fragment PageInfo on PageInfo {
+  startCursor
+  endCursor
+}

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue

@@ -3,6 +3,7 @@ import { GlAlert, GlButton, GlIntersectionObserver } from '@gitlab/ui';
 import VulnerabilityList from './vulnerability_list.vue';
 import vulnerabilitiesQuery from '../graphql/group_vulnerabilities.graphql';
 import { VULNERABILITIES_PER_PAGE } from '../store/constants';
+import { preparePageInfo } from '../helpers';
 
 export default {
   components: {
@@ -41,7 +42,7 @@ export default {
       },
       update: ({ group }) => group.vulnerabilities.nodes,
       result({ data }) {
-        this.pageInfo = data.group.vulnerabilities.pageInfo;
+        this.pageInfo = preparePageInfo(data?.group?.vulnerabilities?.pageInfo);
       },
       error() {
         this.errorLoadingVulnerabilities = true;

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue

@@ -4,6 +4,7 @@ import { fetchPolicies } from '~/lib/graphql';
 import VulnerabilityList from './vulnerability_list.vue';
 import vulnerabilitiesQuery from '../graphql/instance_vulnerabilities.graphql';
 import { VULNERABILITIES_PER_PAGE } from '../store/constants';
+import { preparePageInfo } from '../helpers';
 
 export default {
   components: {
@@ -46,7 +47,7 @@ export default {
       update: ({ vulnerabilities }) => vulnerabilities.nodes,
       result({ data, loading }) {
         this.isFirstResultLoading = loading;
-        this.pageInfo = data.vulnerabilities.pageInfo;
+        this.pageInfo = preparePageInfo(data?.vulnerabilities?.pageInfo);
       },
       error() {
         this.errorLoadingVulnerabilities = true;

ee/app/assets/javascripts/security_dashboard/components/project_vulnerabilities.vue

@@ -6,6 +6,7 @@ import VulnerabilityList from './vulnerability_list.vue';
 import vulnerabilitiesQuery from '../graphql/project_vulnerabilities.graphql';
 import securityScannersQuery from '../graphql/project_security_scanners.graphql';
 import { VULNERABILITIES_PER_PAGE } from '../store/constants';
+import { preparePageInfo } from '../helpers';
 
 export default {
   name: 'ProjectVulnerabilitiesApp',
@@ -47,7 +48,7 @@ export default {
       },
       update: ({ project }) => project.vulnerabilities.nodes,
       result({ data }) {
-        this.pageInfo = data.project.vulnerabilities.pageInfo;
+        this.pageInfo = preparePageInfo(data?.project?.vulnerabilities?.pageInfo);
       },
       error() {
         this.errorLoadingVulnerabilities = true;

ee/app/assets/javascripts/security_dashboard/graphql/group_vulnerabilities.graphql

-#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "~/graphql_shared/fragments/pageInfoCursorsOnly.fragment.graphql"
 #import "./vulnerability.fragment.graphql"
 
 query group(

ee/app/assets/javascripts/security_dashboard/graphql/instance_vulnerabilities.graphql

-#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "~/graphql_shared/fragments/pageInfoCursorsOnly.fragment.graphql"
 #import "./vulnerability.fragment.graphql"
 
 query instance(

ee/app/assets/javascripts/security_dashboard/graphql/project_vulnerabilities.graphql

-#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "~/graphql_shared/fragments/pageInfoCursorsOnly.fragment.graphql"
 #import "./vulnerability.fragment.graphql"
 
 query project(

ee/app/assets/javascripts/security_dashboard/helpers.js

@@ -95,4 +95,16 @@ export const getFormattedSummary = (rawSummary = {}) => {
   return formattedEntries.filter(entry => entry !== null);
 };
 
+/**
+ * We have disabled loading hasNextPage from GraphQL as it causes timeouts in database,
+ * instead we have to calculate that value based on the existence of endCursor. When endCursor
+ * is empty or has null value, that means that there is no next page to be loaded from GraphQL API.
+ *
+ * @param {Object} pageInfo
+ * @returns {Object}
+ */
+export const preparePageInfo = pageInfo => {
+  return { ...pageInfo, hasNextPage: Boolean(pageInfo?.endCursor) };
+};
+
 export default () => ({});

ee/changelogs/unreleased/233017-do-not-use-has-next-page-from-graphql-in-vulnerabilities.yml

+---
+title: Disable loading hasNextPage value for Security Dashboards
+merge_request: 39261
+author:
+type: performance

ee/spec/frontend/security_dashboard/helpers_spec.js

-import { getFormattedSummary } from 'ee/security_dashboard/helpers';
+import { getFormattedSummary, preparePageInfo } from 'ee/security_dashboard/helpers';
 
 describe('getFormattedSummary', () => {
   it('returns a properly formatted array given a valid, non-empty summary', () => {
@@ -41,3 +41,26 @@ describe('getFormattedSummary', () => {
     },
   );
 });
+
+describe('preparePageInfo', () => {
+  describe('when pageInfo is empty', () => {
+    it('returns pageInfo object with hasNextPage set to false', () => {
+      expect(preparePageInfo(null)).toEqual({ hasNextPage: false });
+    });
+  });
+
+  describe('when pageInfo.endCursor is NULL', () => {
+    it('returns pageInfo object with hasNextPage set to false', () => {
+      expect(preparePageInfo({ endCursor: null })).toEqual({ endCursor: null, hasNextPage: false });
+    });
+  });
+
+  describe('when pageInfo.endCursor is provided', () => {
+    it('returns pageInfo object with hasNextPage set to true', () => {
+      expect(preparePageInfo({ endCursor: 'ENDCURSORVALUE' })).toEqual({
+        endCursor: 'ENDCURSORVALUE',
+        hasNextPage: true,
+      });
+    });
+  });
+});