Disable loading hasNextPage value for Security Dashboards

This change disables loading hasNextPage for Vulnerabilities as this is
causing Internal Server Error caused by timeouts on database. This is
the temporary solution to solve that problem.

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,
+      });
+    });
+  });
+});