Merge branch '420055-create-group-by-button' into 'master'

Draft: Display a group by dropdown

See merge request gitlab-org/gitlab!129709



Merged-by: Savas Vedova <svedova@gitlab.com>

config/feature_flags/development/vulnerability_report_grouping.yml

+---
+name: vulnerability_report_grouping
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/129709
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/422509
+milestone: '16.3'
+type: development
+group: group::threat insights
+default_enabled: false

ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue

@@ -25,6 +25,9 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   inject: ['fullPath', 'pipeline', 'sbomPipeline', 'hasVulnerabilities'],
+  provide: {
+    isProjectVulnerabilityReport: true,
+  },
   data() {
     return {
       scannerAlertDismissed: false,

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

 <script>
 import { debounce, cloneDeep, isEqual } from 'lodash';
+import { GlCollapsibleListbox } from '@gitlab/ui';
+import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ActivityFilter from '../filters/activity_filter.vue';
 import ProjectFilter from '../filters/project_filter.vue';
@@ -13,7 +15,15 @@ import StatusWithDismissalFilter from '../filters/status_with_dismissal_filter.v
 import { FILTERS } from './constants';
 
 export default {
+  components: {
+    GlCollapsibleListbox,
+  },
   mixins: [glFeatureFlagsMixin()],
+  inject: {
+    isProjectVulnerabilityReport: {
+      default: false,
+    },
+  },
   props: {
     filters: {
       type: Array,
@@ -22,6 +32,7 @@ export default {
   },
   data() {
     return {
+      selectedGroup: '',
       filterQuery: {},
       // When this component is first shown, every filter will emit its own @filter-changed event at
       // the same time, which will trigger this method multiple times. We'll debounce it so that it
@@ -32,6 +43,11 @@ export default {
       }),
     };
   },
+  computed: {
+    shouldShowGroupByButton() {
+      return this.glFeatures.vulnerabilityReportGrouping && this.isProjectVulnerabilityReport;
+    },
+  },
   methods: {
     getComponentType(filter) {
       switch (filter) {
@@ -66,6 +82,11 @@ export default {
       }
     },
   },
+  groupByOptions: [
+    { value: '', text: __('None') },
+    { value: 'status', text: __('Status') },
+    { value: 'severity', text: __('Severity') },
+  ],
 };
 </script>
 
@@ -79,5 +100,17 @@ export default {
       :key="filter"
       @filter-changed="updateFilterQuery"
     />
+    <div
+      v-if="shouldShowGroupByButton"
+      class="vulnerability-group-by gl-display-flex gl-align-items-center"
+    >
+      <label class="gl-m-0">{{ __('Group by:') }}</label>
+      <gl-collapsible-listbox
+        v-model="selectedGroup"
+        category="tertiary"
+        class="gl-ml-2"
+        :items="$options.groupByOptions"
+      />
+    </div>
   </div>
 </template>

ee/app/assets/stylesheets/pages/security/vulnerability_report.scss

@@ -2,6 +2,8 @@
   @include gl-display-grid;
   grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
   grid-gap: $gl-spacing-scale-5;
+  container-name: vulnerability-report-filters;
+  container-type: inline-size;
 }
 
 .vulnerability-counts {
@@ -10,6 +12,13 @@
   grid-gap: $gl-spacing-scale-7;
 }
 
+/* stylelint-disable scss/at-rule-no-unknown */
+@container vulnerability-report-filters (min-width: 1020px) {
+  .vulnerability-group-by {
+    justify-content: flex-end;
+  }
+}
+
 .vulnerability-state-dropdown .gl-dropdown-contents {
   overflow: visible;
 }

ee/app/controllers/projects/security/vulnerability_report_controller.rb

@@ -8,6 +8,7 @@ class VulnerabilityReportController < Projects::ApplicationController
       before_action do
         authorize_read_vulnerability!
         push_frontend_feature_flag(:expose_dismissal_reason, @project)
+        push_frontend_feature_flag(:vulnerability_report_grouping, @project)
       end
 
       feature_category :vulnerability_management

locale/gitlab.pot

@@ -22204,6 +22204,9 @@ msgstr ""
 msgid "Group by"
 msgstr ""
+msgid "Group by:"
+msgstr ""
+
 msgid "Group description (optional)"
 msgstr ""