Merge branch '356485-refactor-detected-licenses' into 'master'

Change license compliance to use warning alert

* Change warning alert to warning count badge

Changelog: changed
EE: true
MR: gitlab-org/gitlab!83831

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,7 +233,13 @@ describe('Project Licenses', () => {
       },
     );
 
-    describe('when the tabs are rendered', () => {
+    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,
         };
@@ -245,7 +252,7 @@ describe('Project Licenses', () => {
               licenses: [
                 {
                   name: 'MIT',
-                classification: LICENSE_APPROVAL_CLASSIFICATION.DENIED,
+                  classification,
                   components: [],
                 },
               ],
@@ -277,40 +284,24 @@ describe('Project Licenses', () => {
         );
 
         it('it renders the correct count in "Detected in project" tab', () => {
-        expect(wrapper.findAllComponents(GlBadge).at(0).text()).toBe(pageInfo.total.toString());
+          expect(findAllGlBadges().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(),
-        );
+          expect(findAllGlBadges().at(1).text()).toBe(managedLicenses.length.toString());
         });
 
         it('it renders the correct type of badge styling', () => {
-        const badges = [
-          wrapper.findAllComponents(GlBadge).at(0),
-          wrapper.findAllComponents(GlBadge).at(1),
-        ];
+          const badges = [findAllGlBadges().at(0), findAllGlBadges().at(1)];
           badges.forEach((badge) => expect(badge.classes()).toContain('gl-tab-counter-badge'));
         });
-    });
 
-    describe('when there are policy violations', () => {
-      beforeEach(() => {
-        createComponent({
-          state: {
-            initialized: true,
-            licenses: [{ classification: LICENSE_APPROVAL_CLASSIFICATION.DENIED }],
-          },
+        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);
         });
-      });
-
-      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",
+      },
     );
   });
-    });
-  });
 });

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}."