Merge branch '214766-fix-license-compliance-counts' into 'master'

Fix tab counts for license compliance

Closes #214766

See merge request gitlab-org/gitlab!30568

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

@@ -49,7 +49,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(LICENSE_LIST, ['initialized', 'licenses', 'reportInfo', 'listTypes']),
+    ...mapState(LICENSE_LIST, ['initialized', 'licenses', 'reportInfo', 'listTypes', 'pageInfo']),
     ...mapState(LICENSE_MANAGEMENT, ['managedLicenses']),
     ...mapGetters(LICENSE_LIST, ['isJobSetUp', 'isJobFailed', 'hasPolicyViolations']),
     hasEmptyState() {
@@ -59,7 +59,7 @@ export default {
       return Boolean(this.glFeatures.licensePolicyList);
     },
     licenseCount() {
-      return this.licenses.length;
+      return this.pageInfo.total;
     },
     policyCount() {
       return this.managedLicenses.length;

ee/changelogs/unreleased/30568-fix-license-compliance-counts.yml

+---
+title: Add sort and order for policy violations
+merge_request: 30568
+author:
+type: fixed

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

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert, GlBadge } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 
 import { REPORT_STATUS } from 'ee/license_compliance/store/modules/list/constants';
@@ -41,6 +41,15 @@ const createComponent = ({ state, props, options }) => {
         state: {
           managedLicenses,
         },
+        getters: {
+          isAddingNewLicense: () => false,
+          hasPendingLicenses: () => false,
+          isLicenseBeingUpdated: () => () => false,
+        },
+        actions: {
+          fetchManagedLicenses: noop,
+          setLicenseApproval: noop,
+        },
       },
       licenseList: {
         namespaced: true,
@@ -60,7 +69,9 @@ const createComponent = ({ state, props, options }) => {
     },
   });
 
-  wrapper = shallowMount(LicenseComplianceApp, {
+  const mountFunc = options && options.mount ? mount : shallowMount;
+
+  wrapper = mountFunc(LicenseComplianceApp, {
     propsData: {
       emptyStateSvgPath,
       documentationPath,
@@ -184,6 +195,58 @@ describe('Project Licenses', () => {
       expect(wrapper.find(PipelineInfo).exists()).toBe(true);
     });
 
+    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: [],
+              },
+            ],
+            reportInfo: {
+              jobPath: '/',
+              generatedAt: '',
+              status: REPORT_STATUS.ok,
+            },
+            pageInfo,
+          },
+          options: {
+            provide: {
+              glFeatures: { licensePolicyList: true },
+            },
+            mount: true,
+          },
+        });
+      });
+
+      it('it renders the correct count in "Detected in project" tab', () => {
+        expect(
+          wrapper
+            .findAll(GlBadge)
+            .at(0)
+            .text(),
+        ).toBe(pageInfo.total.toString());
+      });
+
+      it('it renders the correct count in "Policies" tab', () => {
+        expect(
+          wrapper
+            .findAll(GlBadge)
+            .at(1)
+            .text(),
+        ).toBe(managedLicenses.length.toString());
+      });
+    });
+
     describe('when there are policy violations', () => {
       beforeEach(() => {
         createComponent({