Add ability to pass in fields to new vulnerability list component

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/constants.js

+import { __, s__ } from '~/locale';
+
+export const FIELDS = {
+  CHECKBOX: {
+    key: 'checkbox',
+    class: 'checkbox',
+  },
+  DETECTED: {
+    key: 'detected',
+    label: s__('Vulnerability|Detected'),
+    class: 'detected',
+    sortable: true,
+  },
+  STATUS: {
+    key: 'state',
+    label: s__('Vulnerability|Status'),
+    class: 'status',
+    sortable: true,
+  },
+  SEVERITY: {
+    key: 'severity',
+    label: s__('Vulnerability|Severity'),
+    class: 'severity',
+    sortable: true,
+  },
+  DESCRIPTION: {
+    key: 'title',
+    label: __('Description'),
+    class: 'description gl-word-break-all',
+    sortable: true,
+  },
+  IDENTIFIER: {
+    key: 'identifier',
+    label: s__('Vulnerability|Identifier'),
+    class: 'identifier gl-word-break-all',
+  },
+  TOOL: {
+    key: 'reportType',
+    label: s__('Reports|Tool'),
+    class: 'scanner',
+    sortable: true,
+  },
+  ACTIVITY: {
+    key: 'activity',
+    label: s__('Vulnerability|Activity'),
+    thClass: 'gl-text-right ',
+    class: 'activity',
+  },
+};

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue

@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import DashboardHasNoVulnerabilities from 'ee/security_dashboard/components/shared/empty_states/dashboard_has_no_vulnerabilities.vue';
 import FiltersProducedNoResults from 'ee/security_dashboard/components/shared/empty_states/filters_produced_no_results.vue';
-import { VULNERABILITIES_PER_PAGE, DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import { VULNERABILITIES_PER_PAGE } from 'ee/security_dashboard/store/constants';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
 import getPrimaryIdentifier from 'ee/vue_shared/security_reports/store/utils/get_primary_identifier';
@@ -19,7 +19,6 @@ import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue'
 import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
-import { s__, __ } from '~/locale';
 import AutoFixHelpText from '../auto_fix_help_text.vue';
 import IssuesBadge from '../issues_badge.vue';
 import SelectionSummary from '../selection_summary.vue';
@@ -53,16 +52,11 @@ export default {
     hasJiraVulnerabilitiesIntegrationEnabled: {
       default: false,
     },
-    canAdminVulnerability: {
-      default: false,
-    },
-    dashboardType: {},
   },
   props: {
-    filters: {
-      type: Object,
-      required: false,
-      default: () => ({}),
+    fields: {
+      type: Array,
+      required: true,
     },
     vulnerabilities: {
       type: Array,
@@ -87,12 +81,6 @@ export default {
     };
   },
   computed: {
-    isSortable() {
-      return Boolean(this.$listeners['sort-changed']);
-    },
-    isPipelineDashboard() {
-      return this.dashboardType === DASHBOARD_TYPES.PIPELINE;
-    },
     hasAnyScannersOtherThanGitLab() {
       return this.vulnerabilities.some(
         (v) => v.scanner?.vendor !== 'GitLab' && v.scanner?.vendor !== '',
@@ -108,75 +96,13 @@ export default {
       return Object.keys(this.selectedVulnerabilities).length;
     },
     shouldShowSelectionSummary() {
-      return this.canAdminVulnerability && this.numOfSelectedVulnerabilities > 0;
+      return this.numOfSelectedVulnerabilities > 0;
     },
     theadClass() {
       return this.shouldShowSelectionSummary ? 'below-selection-summary' : '';
     },
-    fields() {
-      const baseFields = [
-        {
-          key: 'checkbox',
-          class: 'checkbox',
-          skip: !this.canAdminVulnerability,
-        },
-        {
-          key: 'detected',
-          label: s__('Vulnerability|Detected'),
-          class: 'detected',
-          sortable: this.isSortable,
-          skip: this.isPipelineDashboard,
-        },
-        {
-          key: 'state',
-          label: s__('Vulnerability|Status'),
-          class: 'status',
-          sortable: this.isSortable,
-        },
-        {
-          key: 'severity',
-          label: s__('Vulnerability|Severity'),
-          class: 'severity',
-          sortable: this.isSortable,
-        },
-        {
-          key: 'title',
-          label: __('Description'),
-          class: 'description gl-word-break-all',
-          sortable: this.isSortable,
-        },
-        {
-          key: 'identifier',
-          label: s__('Vulnerability|Identifier'),
-          class: 'identifier gl-word-break-all',
-        },
-        {
-          key: 'reportType',
-          label: s__('Reports|Tool'),
-          class: 'scanner',
-          sortable: this.isSortable,
-        },
-        {
-          key: 'activity',
-          label: s__('Vulnerability|Activity'),
-          thClass: 'gl-text-right',
-          class: 'activity',
-          skip: this.isPipelineDashboard,
-        },
-      ].filter((f) => !f.skip);
-
-      // Apply gl-bg-white! to every header.
-      baseFields.forEach((field) => {
-        field.thClass = [field.thClass, 'gl-bg-white!']; // eslint-disable-line no-param-reassign
-      });
-
-      return baseFields;
-    },
   },
   watch: {
-    filters() {
-      this.selectedVulnerabilities = {};
-    },
     vulnerabilities() {
       const ids = new Set(this.vulnerabilities.map((v) => v.id));
 
@@ -282,10 +208,11 @@ export default {
     useConvertReportType(reportType) {
       return convertReportType(reportType);
     },
-    handleSortChange(args) {
-      if (args.sortBy) {
-        this.$emit('sort-changed', { ...args, sortBy: convertToSnakeCase(args.sortBy) });
-      }
+    handleSortChange(context) {
+      const fieldName = convertToSnakeCase(context.sortBy);
+      const direction = context.sortDesc ? 'desc' : 'asc';
+
+      this.$emit('sort-changed', `${fieldName}_${direction}`);
     },
     getVulnerabilityState(state = '') {
       const stateName = state.toLowerCase();
@@ -306,7 +233,6 @@ export default {
       @vulnerability-updated="deselectVulnerability"
     />
     <gl-table
-      v-if="filters"
       :busy="isLoading"
       :fields="fields"
       :items="vulnerabilities"
@@ -316,12 +242,12 @@ export default {
       sort-icon-left
       no-local-sorting
       stacked="sm"
-      class="vulnerability-list"
       show-empty
       responsive
       hover
       primary-key="id"
       :tbody-tr-class="{ 'gl-cursor-pointer': vulnerabilities.length }"
+      head-variant="white"
       @sort-changed="handleSortChange"
       @row-clicked="toggleVulnerability"
     >