Merge branch '230381-activity-column-on-security-dashboards' into 'master'

Move the remediated badge to the activity column

See merge request gitlab-org/gitlab!42599

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

@@ -164,6 +164,12 @@ export default {
           thClass: 'scanner',
           tdClass: 'scanner',
         },
+        {
+          key: 'activity',
+          label: s__('Vulnerability|Activity'),
+          thClass: 'gl-text-right',
+          tdClass: 'gl-text-right',
+        },
       ];
 
       if (this.shouldShowSelection) {
@@ -363,7 +369,6 @@ export default {
           </gl-link>
           <issue-link v-if="issue(item)" :issue="issue(item)" />
           <vulnerability-comment-icon v-if="hasComments(item)" :vulnerability="item" />
-          <remediated-badge v-if="item.resolvedOnDefaultBranch" class="gl-ml-3" />
         </div>
         <div
           v-if="item.location"
@@ -409,6 +414,10 @@ export default {
         </div>
       </template>
 
+      <template #cell(activity)="{ item }">
+        <remediated-badge v-if="item.resolvedOnDefaultBranch" class="gl-ml-3" />
+      </template>
+
       <template #table-busy>
         <gl-skeleton-loading
           v-for="n in $options.VULNERABILITIES_PER_PAGE"

ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue

 <script>
-import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
+import { GlIcon, GlPopover } from '@gitlab/ui';
 
 export default {
-  name: 'RemediatedBadge',
   components: {
-    GlBadge,
+    GlIcon,
     GlPopover,
   },
 };
 </script>
 
 <template>
-  <div class="d-inline-block">
-    <gl-badge ref="badge" variant="info">{{ __('Remediated: needs review') }}</gl-badge>
+  <div class="gl-display-inline-block">
+    <span class="gl-display-inline-block gl-rounded-lg gl-bg-blue-200 gl-text-blue-500 gl-px-3">
+      <gl-icon ref="badge" name="admin" />
+    </span>
     <gl-popover
       ref="popover"
       :content="

ee/changelogs/unreleased/230381-activity-column-on-security-dashboards.yml

+---
+title: Move the remediated badge to the activity column
+merge_request: 42599
+author:
+type: changed

ee/spec/frontend/security_dashboard/components/mock_data.js

@@ -16,6 +16,7 @@ export const generateVulnerabilities = () => [
     severity: 'critical',
     state: 'dismissed',
     reportType: 'SAST',
+    resolvedOnDefaultBranch: true,
     location: {
       image:
         'registry.gitlab.com/groulot/container-scanning-test/master:5f21de6956aee99ddb68ae49498662d9872f50ff',

ee/spec/frontend/security_dashboard/components/vulnerability_list_spec.js

@@ -42,6 +42,7 @@ describe('Vulnerability list component', () => {
   const findSortableColumn = () => wrapper.find('[aria-sort="descending"]');
   const findCell = label => wrapper.find(`.js-${label}`);
   const findRow = (index = 0) => wrapper.findAll('tbody tr').at(index);
+  const findRemediatedBadge = () => wrapper.find(RemediatedBadge);
   const findSecurityScannerAlert = () => wrapper.find(SecurityScannerAlert);
   const findDismissalButton = () => findSecurityScannerAlert().find('button[aria-label="Dismiss"]');
   const findSelectionSummary = () => wrapper.find(SelectionSummary);
@@ -83,10 +84,13 @@ describe('Vulnerability list component', () => {
 
     it('should correctly render the description', () => {
       const cell = findCell('description');
-
       expect(cell.text()).toBe(newVulnerabilities[0].title);
     });
 
+    it('should display the remediated badge', () => {
+      expect(findRemediatedBadge().exists()).toBe(true);
+    });
+
     it('should correctly render the identifier cell', () => {
       const identifiers = findDataCells('vulnerability-identifier');
       const extraIdentifierCounts = findDataCells('vulnerability-more-identifiers');

ee/spec/frontend/vulnerabilities/remediated_badge_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
+import { GlIcon, GlPopover } from '@gitlab/ui';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 
 const POPOVER_TITLE = 'Vulnerability remediated. Review before resolving.';
@@ -9,6 +9,8 @@ const POPOVER_CONTENT =
 describe('Remediated badge component', () => {
   let wrapper;
 
+  const findIcon = () => wrapper.find(GlIcon);
+
   const createWrapper = () => {
     return shallowMount(RemediatedBadge);
   };
@@ -19,11 +21,13 @@ describe('Remediated badge component', () => {
 
   afterEach(() => wrapper.destroy());
 
+  it('should display the correct icon', () => {
+    expect(findIcon().props('name')).toBe('admin');
+  });
+
   it('should link the badge and the popover', () => {
-    const badge = wrapper.find(GlBadge);
     const { popover } = wrapper.vm.$refs;
-
-    expect(popover.$attrs.target()).toEqual(badge.element);
+    expect(popover.$attrs.target()).toEqual(findIcon().element);
   });
 
   it('should pass down the data to the popover', () => {

locale/gitlab.pot

@@ -21061,9 +21061,6 @@ msgstr ""
 msgid "Release|Something went wrong while saving the release details"
 msgstr ""
 
-msgid "Remediated: needs review"
-msgstr ""
-
 msgid "Remediations"
 msgstr ""
 
@@ -28329,6 +28326,9 @@ msgstr ""
 msgid "Vulnerability|%{scannerName} (version %{scannerVersion})"
 msgstr ""
 
+msgid "Vulnerability|Activity"
+msgstr ""
+
 msgid "Vulnerability|Class"
 msgstr ""