Merge branch '196725-fix-status-badge-styling' into 'master'

Fix vulnerability status header style to be more in-line with other headers

See merge request gitlab-org/gitlab!27485

app/assets/stylesheets/pages/detail_page.scss

@@ -7,6 +7,10 @@
 
   a {
     color: $gl-text-color;
+
+    &.link {
+      color: $blue-600;
+    }
   }
 
   .author-link {

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

 <script>
-import { GlLoadingIcon, GlBadge, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlLoadingIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import Api from 'ee/api';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import axios from '~/lib/utils/axios_utils';
@@ -14,7 +14,6 @@ export default {
   name: 'VulnerabilityManagementApp',
   components: {
     GlLoadingIcon,
-    GlBadge,
     GlLink,
     GlSprintf,
     TimeAgoTooltip,
@@ -51,9 +50,9 @@ export default {
   },
 
   computed: {
-    variant() {
-      // Get the badge variant based on the vulnerability state, defaulting to 'warning'.
-      return VULNERABILITY_STATES[this.state]?.variant || 'warning';
+    statusBoxStyle() {
+      // Get the badge variant based on the vulnerability state, defaulting to 'expired'.
+      return VULNERABILITY_STATES[this.state]?.statusBoxStyle || 'expired';
     },
   },
 
@@ -102,37 +101,49 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex align-items-center border-bottom pt-2 pb-2">
-    <gl-loading-icon v-if="isLoadingVulnerability" />
-    <gl-badge v-else ref="badge" class="text-capitalize" :variant="variant">{{ state }}</gl-badge>
+  <div class="detail-page-header">
+    <div class="detail-page-header-body lh-4 align-items-center">
+      <gl-loading-icon v-if="isLoadingVulnerability" class="mr-2" />
+      <span
+        v-else
+        ref="badge"
+        :class="
+          `text-capitalize align-self-center issuable-status-box status-box status-box-${statusBoxStyle}`
+        "
+      >
+        {{ state }}
+      </span>
 
-    <span v-if="pipeline" class="mx-2">
-      <gl-sprintf :message="__('Detected %{timeago} in pipeline %{pipelineLink}')">
-        <template #timeago>
-          <time-ago-tooltip :time="pipeline.created_at" />
-        </template>
-        <template v-if="pipeline.id" #pipelineLink>
-          <gl-link :href="pipeline.url" target="_blank">{{ pipeline.id }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </span>
+      <span v-if="pipeline" class="issuable-meta">
+        <gl-sprintf :message="__('Detected %{timeago} in pipeline %{pipelineLink}')">
+          <template #timeago>
+            <time-ago-tooltip :time="pipeline.created_at" />
+          </template>
+          <template v-if="pipeline.id" #pipelineLink>
+            <gl-link :href="pipeline.url" class="link" target="_blank">{{ pipeline.id }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </span>
 
-    <time-ago-tooltip v-else class="ml-2" :time="vulnerability.created_at" />
+      <time-ago-tooltip v-else class="issuable-meta" :time="vulnerability.created_at" />
+    </div>
 
-    <label class="mb-0 ml-auto mr-2">{{ __('Status') }}</label>
-    <gl-loading-icon v-if="isLoadingVulnerability" />
-    <vulnerability-state-dropdown
-      v-else
-      :initial-state="state"
-      @change="onVulnerabilityStateChange"
-    />
-    <loading-button
-      ref="create-issue-btn"
-      class="align-items-center d-inline-flex ml-2"
-      :loading="isCreatingIssue"
-      :label="s__('VulnerabilityManagement|Create issue')"
-      container-class="btn btn-success btn-inverted"
-      @click="createIssue"
-    />
+    <div class="detail-page-header-actions align-items-center">
+      <label class="mb-0 mx-2">{{ __('Status') }}</label>
+      <gl-loading-icon v-if="isLoadingVulnerability" class="d-inline" />
+      <vulnerability-state-dropdown
+        v-else
+        :initial-state="state"
+        @change="onVulnerabilityStateChange"
+      />
+      <loading-button
+        ref="create-issue-btn"
+        class="ml-2"
+        :loading="isCreatingIssue"
+        :label="s__('VulnerabilityManagement|Create issue')"
+        container-class="btn btn-success btn-inverted"
+        @click="createIssue"
+      />
+    </div>
   </div>
 </template>

ee/app/assets/javascripts/vulnerabilities/constants.js

@@ -4,19 +4,19 @@ import { s__ } from '~/locale';
 export const VULNERABILITY_STATES = {
   dismissed: {
     action: 'dismiss',
-    variant: 'light',
+    statusBoxStyle: 'upcoming',
     displayName: s__('VulnerabilityManagement|Dismiss'),
     description: s__('VulnerabilityManagement|Will not fix or a false-positive'),
   },
   confirmed: {
     action: 'confirm',
-    variant: 'danger',
+    statusBoxStyle: 'closed',
     displayName: s__('VulnerabilityManagement|Confirm'),
     description: s__('VulnerabilityManagement|A true-positive and will fix'),
   },
   resolved: {
     action: 'resolve',
-    variant: 'success',
+    statusBoxStyle: 'open',
     displayName: s__('VulnerabilityManagement|Resolved'),
     description: s__('VulnerabilityManagement|Verified as fixed or mitigated'),
   },

ee/spec/frontend/vulnerabilities/app_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlBadge } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
@@ -34,6 +33,7 @@ describe('Vulnerability management app', () => {
   };
 
   const findCreateIssueButton = () => wrapper.find({ ref: 'create-issue-btn' });
+  const findBadge = () => wrapper.find({ ref: 'badge' });
 
   const createWrapper = (state = 'detected') => {
     wrapper = shallowMount(App, {
@@ -125,13 +125,12 @@ describe('Vulnerability management app', () => {
 
   describe('state badge', () => {
     test.each(vulnerabilityStateEntries)(
-      'the vulnerability state badge has the correct variant for the %s state',
+      'the vulnerability state badge has the correct style for the %s state',
       (stateString, stateObject) => {
         createWrapper(stateString);
-        const badge = wrapper.find(GlBadge);
 
-        expect(badge.attributes('variant')).toBe(stateObject.variant);
-        expect(badge.text()).toBe(stateString);
+        expect(findBadge().classes()).toContain(`status-box-${stateObject.statusBoxStyle}`);
+        expect(findBadge().text()).toBe(stateString);
       },
     );
   });