Display correct approval status icon next to license

ee/app/assets/javascripts/vue_shared/license_management/store/utils.js

@@ -2,6 +2,7 @@ import { n__, sprintf } from '~/locale';
 import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '~/reports/constants';
 import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_management/constants';
 
+const toLowerCase = name => name.toLowerCase();
 /**
  *
  * Converts the snake case in license objects to camel case
@@ -32,8 +33,8 @@ export const normalizeLicense = license => {
  *
  */
 export const byLicenseNameComparator = (a, b) => {
-  const x = (a.name || '').toLowerCase();
-  const y = (b.name || '').toLowerCase();
+  const x = toLowerCase(a.name || '');
+  const y = toLowerCase(b.name || '');
   if (x === y) {
     return 0;
   }
@@ -49,11 +50,14 @@ export const getIssueStatusFromLicenseStatus = approvalStatus => {
   return STATUS_NEUTRAL;
 };
 
+const caseInsensitiveMatch = (name, otherName) => toLowerCase(name) === toLowerCase(otherName);
 const getLicenseStatusByName = (managedLicenses = [], licenseName) =>
-  managedLicenses.find(license => license.name === licenseName) || {};
+  managedLicenses.find(license => caseInsensitiveMatch(license.name, licenseName)) || {};
 
 const getDependenciesByLicenseName = (dependencies = [], licenseName) =>
-  dependencies.filter(dependencyItem => dependencyItem.license.name === licenseName);
+  dependencies.filter(dependencyItem =>
+    caseInsensitiveMatch(dependencyItem.license.name, licenseName),
+  );
 
 /**
  *
@@ -89,8 +93,8 @@ export const parseLicenseReportMetrics = (headMetrics, baseMetrics, managedLicen
 
   if (!headLicenses.length && !headDependencies.length) return [];
 
-  const knownLicenses = baseLicenses.map(license => license.name.toLowerCase());
-  const identityMap = license => knownLicenses.includes(license.name.toLowerCase());
+  const knownLicenses = baseLicenses.map(license => toLowerCase(license.name));
+  const identityMap = license => knownLicenses.includes(toLowerCase(license.name));
   const mapper = license => {
     const { name, count } = license;
     const { id, approvalStatus } = getLicenseStatusByName(managedLicenseList, name);

ee/changelogs/unreleased/7968-case-insensitive-diff.yml

+---
+title: Display appropriate approval status icon next to license
+merge_request: 17613
+author:
+type: fixed

ee/spec/javascripts/license_management/store/utils_spec.js

@@ -69,6 +69,31 @@ describe('utils', () => {
 
       expect(result.length).toBe(0);
     });
+
+    it('applies the correct approval status', () => {
+      const policies = [{ id: 1, name: 'LGPL', approvalStatus: 'blacklisted' }];
+      const dependency = {
+        license: { name: 'lgpl', url: 'http://example.org' },
+        dependency: { name: 'geoip' },
+      };
+      const headReport = {
+        licenses: [{ count: 1, name: 'BSD' }, { count: 1, name: 'lgpl' }],
+        dependencies: [dependency],
+      };
+      const baseReport = { licenses: [{ count: 1, name: 'bsd' }], dependencies: [] };
+      const result = parseLicenseReportMetrics(headReport, baseReport, policies);
+
+      expect(result.length).toBe(1);
+      expect(result[0]).toEqual(
+        jasmine.objectContaining({
+          approvalStatus: 'blacklisted',
+          count: 1,
+          status: 'failed',
+          name: 'lgpl',
+          packages: [{ name: 'geoip' }],
+        }),
+      );
+    });
   });
 
   describe('byLicenseNameComparator', () => {