Change license compliance to use warning alert

* Change warning alert to warning count badge

Changelog: changed

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

 <script>
-import {
-  GlEmptyState,
-  GlLoadingIcon,
-  GlLink,
-  GlIcon,
-  GlTab,
-  GlTabs,
-  GlBadge,
-  GlAlert,
-} from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlLink, GlIcon, GlTab, GlTabs, GlBadge } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import LicenseManagement from 'ee/vue_shared/license_compliance/license_management.vue';
 import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/constants';
@@ -30,7 +21,6 @@ export default {
     GlTab,
     GlTabs,
     GlBadge,
-    GlAlert,
     LicenseManagement,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -48,6 +38,9 @@ export default {
     hasEmptyState() {
       return Boolean(!this.isJobSetUp || this.isJobFailed);
     },
+    pillVariant() {
+      return this.hasPolicyViolations ? 'warning' : 'muted';
+    },
     licenseCount() {
       return this.pageInfo.total;
     },
@@ -103,14 +96,6 @@ export default {
   </gl-empty-state>
 
   <div v-else>
-    <gl-alert v-if="hasPolicyViolations" class="mt-3" variant="warning" :dismissible="false">
-      {{
-        s__(
-          "Licenses|Detected licenses that are out-of-compliance with the project's assigned policies",
-        )
-      }}
-    </gl-alert>
-
     <header class="my-3">
       <h2 class="h4 mb-1 gl-display-flex gl-align-items-center">
         {{ s__('Licenses|License Compliance') }}
@@ -131,7 +116,9 @@ export default {
       <gl-tab data-testid="licensesTab">
         <template #title>
           <span data-testid="licensesTabTitle">{{ s__('Licenses|Detected in Project') }}</span>
-          <gl-badge size="sm" class="gl-tab-counter-badge">{{ licenseCount }}</gl-badge>
+          <gl-badge size="sm" :variant="pillVariant" class="gl-tab-counter-badge">{{
+            licenseCount
+          }}</gl-badge>
         </template>
 
         <detected-licenses-table />

ee/app/assets/javascripts/license_compliance/components/pipeline_info.vue

@@ -26,7 +26,7 @@ export default {
     pipelineText() {
       const { path } = this;
       const body = s__(
-        'Licenses|Displays licenses detected in the project, based on the %{linkStart}latest successful%{linkEnd} scan',
+        "Licenses|Displays licenses detected in the project that are out of compliance with the project's policies, based on the %{linkStart}latest successful%{linkEnd} scan",
       );
 
       const linkStart = path

ee/spec/frontend/license_compliance/components/app_spec.js

@@ -83,6 +83,7 @@ const createComponent = ({ state, props, options }) => {
 };
 
 const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+const findAllGlBadges = () => wrapper.findAllComponents(GlBadge);
 
 describe('Project Licenses', () => {
   afterEach(() => {
@@ -232,85 +233,75 @@ describe('Project Licenses', () => {
       },
     );
 
-    describe('when the tabs are rendered', () => {
-      const pageInfo = {
-        total: 1,
-      };
-
-      beforeEach(() => {
-        createComponent({
-          state: {
-            initialized: true,
-            isLoading: false,
-            licenses: [
-              {
-                name: 'MIT',
-                classification: LICENSE_APPROVAL_CLASSIFICATION.DENIED,
-                components: [],
+    describe.each`
+      classification                             | warning
+      ${LICENSE_APPROVAL_CLASSIFICATION.DENIED}  | ${true}
+      ${LICENSE_APPROVAL_CLASSIFICATION.ALLOWED} | ${false}
+    `(
+      'when the tabs are rendered with a $classification vulnerability',
+      ({ classification, warning }) => {
+        const pageInfo = {
+          total: 1,
+        };
+
+        beforeEach(() => {
+          createComponent({
+            state: {
+              initialized: true,
+              isLoading: false,
+              licenses: [
+                {
+                  name: 'MIT',
+                  classification,
+                  components: [],
+                },
+              ],
+              reportInfo: {
+                jobPath: '/',
+                generatedAt: '',
+                status: REPORT_STATUS.ok,
               },
-            ],
-            reportInfo: {
-              jobPath: '/',
-              generatedAt: '',
-              status: REPORT_STATUS.ok,
+              pageInfo,
             },
-            pageInfo,
-          },
-          options: {
-            mount: true,
-          },
+            options: {
+              mount: true,
+            },
+          });
         });
-      });
-
-      it.each`
-        givenActiveTab | expectedLocationHash
-        ${'policies'}  | ${'#policies'}
-        ${'licenses'}  | ${'#licenses'}
-      `(
-        'sets the location hash to "$expectedLocationHash" when the "$givenTab" tab is activate',
-        async ({ givenActiveTab, expectedLocationHash }) => {
-          findByTestId(`${givenActiveTab}TabTitle`).trigger('click');
-
-          await nextTick();
-          expect(window.location.hash).toBe(expectedLocationHash);
-        },
-      );
-
-      it('it renders the correct count in "Detected in project" tab', () => {
-        expect(wrapper.findAllComponents(GlBadge).at(0).text()).toBe(pageInfo.total.toString());
-      });
 
-      it('it renders the correct count in "Policies" tab', () => {
-        expect(wrapper.findAllComponents(GlBadge).at(1).text()).toBe(
-          managedLicenses.length.toString(),
+        it.each`
+          givenActiveTab | expectedLocationHash
+          ${'policies'}  | ${'#policies'}
+          ${'licenses'}  | ${'#licenses'}
+        `(
+          'sets the location hash to "$expectedLocationHash" when the "$givenTab" tab is activate',
+          async ({ givenActiveTab, expectedLocationHash }) => {
+            findByTestId(`${givenActiveTab}TabTitle`).trigger('click');
+
+            await nextTick();
+            expect(window.location.hash).toBe(expectedLocationHash);
+          },
         );
-      });
 
-      it('it renders the correct type of badge styling', () => {
-        const badges = [
-          wrapper.findAllComponents(GlBadge).at(0),
-          wrapper.findAllComponents(GlBadge).at(1),
-        ];
-        badges.forEach((badge) => expect(badge.classes()).toContain('gl-tab-counter-badge'));
-      });
-    });
+        it('it renders the correct count in "Detected in project" tab', () => {
+          expect(findAllGlBadges().at(0).text()).toBe(pageInfo.total.toString());
+        });
 
-    describe('when there are policy violations', () => {
-      beforeEach(() => {
-        createComponent({
-          state: {
-            initialized: true,
-            licenses: [{ classification: LICENSE_APPROVAL_CLASSIFICATION.DENIED }],
-          },
+        it('it renders the correct count in "Policies" tab', () => {
+          expect(findAllGlBadges().at(1).text()).toBe(managedLicenses.length.toString());
         });
-      });
 
-      it('renders a policy violations alert', () => {
-        expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
-        expect(wrapper.findComponent(GlAlert).text()).toContain(
-          "Detected licenses that are out-of-compliance with the project's assigned policies",
-        );
-      });
-    });
+        it('it renders the correct type of badge styling', () => {
+          const badges = [findAllGlBadges().at(0), findAllGlBadges().at(1)];
+          badges.forEach((badge) => expect(badge.classes()).toContain('gl-tab-counter-badge'));
+        });
+
+        it(`it ${
+          warning ? 'does' : 'does not'
+        } render the Detected in Project tab with warning pill`, () => {
+          expect(findAllGlBadges().at(0).find('.badge-warning').exists()).toBe(warning);
+        });
+      },
+    );
   });
 });

locale/gitlab.pot

@@ -22506,10 +22506,7 @@ msgstr ""
 msgid "Licenses|Detected in Project"
 msgstr ""
 
-msgid "Licenses|Detected licenses that are out-of-compliance with the project's assigned policies"
-msgstr ""
-
-msgid "Licenses|Displays licenses detected in the project, based on the %{linkStart}latest successful%{linkEnd} scan"
+msgid "Licenses|Displays licenses detected in the project that are out of compliance with the project's policies, based on the %{linkStart}latest successful%{linkEnd} scan"
 msgstr ""
 
 msgid "Licenses|Drag your license file here or %{linkStart}click to upload%{linkEnd}."