Improve vulnerability project GraphQL queries and error message

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

@@ -4,7 +4,7 @@ import GroupSecurityVulnerabilities from 'ee/security_dashboard/components/first
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import { vulnerabilitiesSeverityCountScopes } from '../constants';
-import vulnerableProjectsQuery from '../graphql/queries/vulnerable_projects.query.graphql';
+import groupProjectsQuery from '../graphql/queries/group_projects.query.graphql';
 import CsvExportButton from './csv_export_button.vue';
 import DashboardNotConfigured from './empty_states/group_dashboard_not_configured.vue';
 import VulnerabilitiesCountList from './vulnerability_count_list.vue';
@@ -22,7 +22,7 @@ export default {
   inject: ['groupFullPath'],
   apollo: {
     projects: {
-      query: vulnerableProjectsQuery,
+      query: groupProjectsQuery,
       variables() {
         return { fullPath: this.groupFullPath };
       },

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

 <script>
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
-import projectsQuery from 'ee/security_dashboard/graphql/queries/get_instance_security_dashboard_projects.query.graphql';
+import instanceProjectsQuery from 'ee/security_dashboard/graphql/queries/instance_projects.query.graphql';
 import createFlash from '~/flash';
 import { vulnerabilitiesSeverityCountScopes } from '../constants';
-import { createProjectLoadingError } from '../helpers';
+import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
 import CsvExportButton from './csv_export_button.vue';
 import DashboardNotConfigured from './empty_states/instance_dashboard_not_configured.vue';
 import InstanceSecurityVulnerabilities from './first_class_instance_security_dashboard_vulnerabilities.vue';
@@ -21,12 +21,12 @@ export default {
   },
   apollo: {
     projects: {
-      query: projectsQuery,
+      query: instanceProjectsQuery,
       update(data) {
         return data.instanceSecurityDashboard.projects.nodes;
       },
       error() {
-        createFlash({ message: createProjectLoadingError() });
+        createFlash({ message: PROJECT_LOADING_ERROR_MESSAGE });
       },
     },
   },

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

 <script>
 import { GlAlert } from '@gitlab/ui';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
-import projectsQuery from 'ee/security_dashboard/graphql/queries/get_instance_security_dashboard_projects.query.graphql';
-import { createProjectLoadingError } from '../helpers';
+import instanceProjectsQuery from 'ee/security_dashboard/graphql/queries/instance_projects.query.graphql';
+import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
 import ProjectManager from './first_class_project_manager/project_manager.vue';
 
 export default {
@@ -13,7 +13,7 @@ export default {
   },
   apollo: {
     projects: {
-      query: projectsQuery,
+      query: instanceProjectsQuery,
       update(data) {
         return data.instanceSecurityDashboard.projects.nodes;
       },
@@ -28,18 +28,14 @@ export default {
       hasError: false,
     };
   },
-  computed: {
-    errorMessage() {
-      return createProjectLoadingError();
-    },
-  },
+  PROJECT_LOADING_ERROR_MESSAGE,
 };
 </script>
 
 <template>
   <security-dashboard-layout>
     <gl-alert v-if="hasError" variant="danger">
-      {{ errorMessage }}
+      {{ $options.PROJECT_LOADING_ERROR_MESSAGE }}
     </gl-alert>
     <div v-else class="gl-display-flex gl-justify-content-center">
       <project-manager :projects="projects" />

ee/app/assets/javascripts/security_dashboard/components/first_class_project_manager/project_manager.vue

@@ -3,8 +3,8 @@ import { GlButton } from '@gitlab/ui';
 import produce from 'immer';
 import addProjectToSecurityDashboard from 'ee/security_dashboard/graphql/mutations/add_project_to_security_dashboard.mutation.graphql';
 import deleteProjectFromSecurityDashboard from 'ee/security_dashboard/graphql/mutations/delete_project_from_security_dashboard.mutation.graphql';
-import projectsQuery from 'ee/security_dashboard/graphql/queries/get_instance_security_dashboard_projects.query.graphql';
 import getProjects from 'ee/security_dashboard/graphql/queries/get_projects.query.graphql';
+import instanceProjectsQuery from 'ee/security_dashboard/graphql/queries/instance_projects.query.graphql';
 import { createInvalidProjectMessage } from 'ee/security_dashboard/utils/first_class_project_manager_utils';
 import createFlash from '~/flash';
 import { __, s__, sprintf } from '~/locale';
@@ -78,7 +78,7 @@ export default {
                 return;
               }
 
-              const sourceData = store.readQuery({ query: projectsQuery });
+              const sourceData = store.readQuery({ query: instanceProjectsQuery });
               const newProject = results.addProjectToSecurityDashboard.project;
 
               const data = produce(sourceData, (draftData) => {
@@ -91,7 +91,7 @@ export default {
                 ];
               });
 
-              store.writeQuery({ query: projectsQuery, data });
+              store.writeQuery({ query: instanceProjectsQuery, data });
             },
           })
           .then(({ data }) => {
@@ -155,7 +155,7 @@ export default {
           mutation: deleteProjectFromSecurityDashboard,
           variables: { id },
           update(store) {
-            const sourceData = store.readQuery({ query: projectsQuery });
+            const sourceData = store.readQuery({ query: instanceProjectsQuery });
 
             const data = produce(sourceData, (draftData) => {
               draftData.instanceSecurityDashboard.projects.nodes = draftData.instanceSecurityDashboard.projects.nodes.filter(
@@ -163,7 +163,7 @@ export default {
               );
             });
 
-            store.writeQuery({ query: projectsQuery, data });
+            store.writeQuery({ query: instanceProjectsQuery, data });
           },
         })
         .then(() => {

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

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import createFlash from '~/flash';
+import groupProjectsQuery from '../graphql/queries/group_projects.query.graphql';
 import vulnerabilityGradesQuery from '../graphql/queries/group_vulnerability_grades.query.graphql';
 import vulnerabilityHistoryQuery from '../graphql/queries/group_vulnerability_history.query.graphql';
-import vulnerableProjectsQuery from '../graphql/queries/vulnerable_projects.query.graphql';
-import { createProjectLoadingError } from '../helpers';
+import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
 import DashboardNotConfigured from './empty_states/group_dashboard_not_configured.vue';
 import VulnerabilityChart from './first_class_vulnerability_chart.vue';
 import VulnerabilitySeverities from './first_class_vulnerability_severities.vue';
@@ -21,7 +21,7 @@ export default {
   inject: ['groupFullPath'],
   apollo: {
     projects: {
-      query: vulnerableProjectsQuery,
+      query: groupProjectsQuery,
       variables() {
         return { fullPath: this.groupFullPath };
       },
@@ -29,7 +29,7 @@ export default {
         return data?.group?.projects?.nodes ?? [];
       },
       error() {
-        createFlash({ message: createProjectLoadingError() });
+        createFlash({ message: PROJECT_LOADING_ERROR_MESSAGE });
       },
     },
   },

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

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import createFlash from '~/flash';
-import projectsQuery from '../graphql/queries/get_instance_security_dashboard_projects.query.graphql';
+import instanceProjectsQuery from '../graphql/queries/instance_projects.query.graphql';
 import vulnerabilityGradesQuery from '../graphql/queries/instance_vulnerability_grades.query.graphql';
 import vulnerabilityHistoryQuery from '../graphql/queries/instance_vulnerability_history.query.graphql';
-import { createProjectLoadingError } from '../helpers';
+import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
 import DashboardNotConfigured from './empty_states/instance_dashboard_not_configured.vue';
 import VulnerabilityChart from './first_class_vulnerability_chart.vue';
 import VulnerabilitySeverities from './first_class_vulnerability_severities.vue';
@@ -20,12 +20,12 @@ export default {
   },
   apollo: {
     projects: {
-      query: projectsQuery,
+      query: instanceProjectsQuery,
       update(data) {
         return data?.instanceSecurityDashboard?.projects?.nodes ?? [];
       },
       error() {
-        createFlash({ message: createProjectLoadingError() });
+        createFlash({ message: PROJECT_LOADING_ERROR_MESSAGE });
       },
     },
   },

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

@@ -6,7 +6,7 @@ import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { s__, __ } from '~/locale';
 import projectsHistoryQuery from '../graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
-import { createProjectLoadingError } from '../helpers';
+import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
 import DashboardNotConfigured from './empty_states/reports_not_configured.vue';
 import SecurityChartsLayout from './security_charts_layout.vue';
 
@@ -59,7 +59,7 @@ export default {
         return data?.project?.vulnerabilitiesCountByDay?.nodes ?? [];
       },
       error() {
-        createFlash({ message: createProjectLoadingError() });
+        createFlash({ message: PROJECT_LOADING_ERROR_MESSAGE });
       },
       skip() {
         return !this.hasVulnerabilities;

ee/app/assets/javascripts/security_dashboard/graphql/queries/get_instance_security_dashboard_projects.query.graphql

-#import "ee/security_dashboard/graphql/fragments/project.fragment.graphql"
-#import "ee/security_dashboard/graphql/fragments/project_vulnerability_severities_count.fragment.graphql"
-
-query projectsQuery {
-  instanceSecurityDashboard {
-    projects {
-      nodes {
-        ...Project
-        ...ProjectVulnerabilitySeveritiesCount
-      }
-    }
-  }
-}

ee/app/assets/javascripts/security_dashboard/graphql/queries/vulnerable_projects.query.graphql → ee/app/assets/javascripts/security_dashboard/graphql/queries/group_projects.query.graphql

-#import "../fragments/project.fragment.graphql"
-
-query group($fullPath: ID!) {
+query groupProjects($fullPath: ID!) {
   group(fullPath: $fullPath) {
     projects(includeSubgroups: true) {
       nodes {
-        ...Project
+        id
+        name
       }
     }
   }

ee/app/assets/javascripts/security_dashboard/graphql/queries/instance_projects.query.graphql

+query instanceProjects {
+  instanceSecurityDashboard {
+    projects {
+      nodes {
+        id
+        name
+        nameWithNamespace
+      }
+    }
+  }
+}

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

@@ -134,6 +134,6 @@ export const preparePageInfo = (pageInfo) => {
   return { ...pageInfo, hasNextPage: Boolean(pageInfo?.endCursor) };
 };
 
-export const createProjectLoadingError = () => __('An error occurred while retrieving projects.');
+export const PROJECT_LOADING_ERROR_MESSAGE = __('An error occurred while retrieving projects.');
 
 export default () => ({});