Merge branch 'show-loading-icon-in-status-badge' into 'master'

Show loading icon in vulnerability status badge

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/135804



Merged-by: Samantha Ming <sming@gitlab.com>
Approved-by: Samantha Ming <sming@gitlab.com>
Approved-by: Becka Lippert <rlippert@gitlab.com>
Reviewed-by: David Pisek <dpisek@gitlab.com>
Co-authored-by: David Pisek <dpisek@gitlab.com>
Co-authored-by: lorenzvanherwaarden <lvanherwaarden@gitlab.com>

ee/app/assets/javascripts/vue_shared/security_reports/components/status_badge.vue

 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlLoadingIcon } from '@gitlab/ui';
 
 import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
 
@@ -13,6 +13,7 @@ export const VARIANTS = {
 export default {
   components: {
     GlBadge,
+    GlLoadingIcon,
   },
   props: {
     state: {
@@ -20,6 +21,11 @@ export default {
       required: true,
       validator: (state) => Object.keys(VARIANTS).includes(state),
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     stateName() {
@@ -34,6 +40,7 @@ export default {
 
 <template>
   <gl-badge :variant="stateVariant">
-    {{ stateName }}
+    <gl-loading-icon v-if="loading" size="sm" class="gl-mx-5" />
+    <template v-else>{{ stateName }}</template>
   </gl-badge>
 </template>

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

@@ -218,8 +218,11 @@ export default {
     />
     <div class="detail-page-header">
       <div class="detail-page-header-body" data-testid="vulnerability-detail-body">
-        <gl-loading-icon v-if="isLoadingVulnerability" size="sm" class="gl-mr-3" />
-        <status-badge v-else :state="vulnerability.state" class="gl-mr-3" />
+        <status-badge
+          :state="vulnerability.state"
+          :loading="isLoadingVulnerability"
+          class="gl-mr-3"
+        />
         <status-description
           :vulnerability="vulnerability"
           :user="user"

ee/spec/frontend/vue_shared/security_reports/components/status_badge_spec.js

 import { mount } from '@vue/test-utils';
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlLoadingIcon } from '@gitlab/ui';
 import StatusBadge, { VARIANTS } from 'ee/vue_shared/security_reports/components/status_badge.vue';
 import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
 import { assertProps } from 'helpers/assert_props';
@@ -8,11 +8,13 @@ describe('StatusBadge', () => {
   let wrapper;
 
   const findBadge = () => wrapper.findComponent(GlBadge);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
-  const createWrapper = (state) => {
+  const createWrapper = ({ state, loading }) => {
     wrapper = mount(StatusBadge, {
       propsData: {
         state,
+        loading,
       },
     });
   };
@@ -20,7 +22,7 @@ describe('StatusBadge', () => {
   it.each(Object.entries(VARIANTS))(
     'the vulnerability state badge has the correct style for the %s state',
     (state, variant) => {
-      createWrapper(state);
+      createWrapper({ state });
       const badge = findBadge();
 
       expect(badge.props('variant')).toBe(variant);
@@ -33,4 +35,10 @@ describe('StatusBadge', () => {
       assertProps(StatusBadge, { state: 'invalid-prop' });
     }).toThrow('Invalid prop: custom validator check failed for prop');
   });
+
+  it.each([true, false])('renders the loading icon: "%s"', (loading) => {
+    createWrapper({ state: 'detected', loading });
+
+    expect(findLoadingIcon().exists()).toBe(loading);
+  });
 });

ee/spec/frontend/vulnerabilities/header_spec.js

@@ -134,12 +134,12 @@ describe('Vulnerability Header', () => {
         createWrapper({ apolloProvider });
       });
 
-      it('shows the loading spinner but not the status badge', async () => {
+      it('shows the loading icon and passes the correct "loading" prop to the status badge', async () => {
         changeStatus(action);
         await nextTick();
 
         expect(findGlLoadingIcon().exists()).toBe(true);
-        expect(findStatusBadge().exists()).toBe(false);
+        expect(findStatusBadge().props('loading')).toBe(true);
       });
 
       it(`emits the updated vulnerability properly - ${action}`, async () => {
@@ -158,12 +158,12 @@ describe('Vulnerability Header', () => {
         expect(wrapper.emitted()['vulnerability-state-change']).toHaveLength(1);
       });
 
-      it('hides the loading spinner and shows the status badge', async () => {
+      it('does not show the loading icon and passes the correct "loading" prop to the status badge', async () => {
         changeStatus(action);
         await waitForPromises();
 
         expect(findGlLoadingIcon().exists()).toBe(false);
-        expect(findStatusBadge().exists()).toBe(true);
+        expect(findStatusBadge().props('loading')).toBe(false);
       });
     });