Merge branch 'update-license-compliance-ui-classifcations' into 'master'

Update license compliance policy classifications text in the UI and refactor

See merge request gitlab-org/gitlab!27058

ee/app/assets/javascripts/vue_shared/license_management/components/add_license_form.vue

@@ -14,8 +14,8 @@ export default {
   },
   LICENSE_APPROVAL_STATUS,
   approvalStatusOptions: [
-    { value: LICENSE_APPROVAL_STATUS.APPROVED, label: s__('LicenseCompliance|Allow') },
-    { value: LICENSE_APPROVAL_STATUS.BLACKLISTED, label: s__('LicenseCompliance|Deny') },
+    { value: LICENSE_APPROVAL_STATUS.ALLOWED, label: s__('LicenseCompliance|Allow') },
+    { value: LICENSE_APPROVAL_STATUS.DENIED, label: s__('LicenseCompliance|Deny') },
   ],
   props: {
     managedLicenses: {

ee/app/assets/javascripts/vue_shared/license_management/components/admin_license_management_row.vue

@@ -6,7 +6,7 @@ import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import IssueStatusIcon from '~/reports/components/issue_status_icon.vue';
 
-import { LICENSE_APPROVAL_STATUS } from '../constants';
+import { LICENSE_APPROVAL_STATUS, LICENSE_APPROVAL_ACTION } from '../constants';
 import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_management/store/constants';
 
 const visibleClass = 'visible';
@@ -36,16 +36,19 @@ export default {
     },
   },
   LICENSE_APPROVAL_STATUS,
-  [LICENSE_APPROVAL_STATUS.APPROVED]: s__('LicenseCompliance|Allowed'),
-  [LICENSE_APPROVAL_STATUS.BLACKLISTED]: s__('LicenseCompliance|Denied'),
+  LICENSE_APPROVAL_ACTION,
+  [LICENSE_APPROVAL_ACTION.ALLOW]: s__('LicenseCompliance|Allow'),
+  [LICENSE_APPROVAL_ACTION.DENY]: s__('LicenseCompliance|Deny'),
+  [LICENSE_APPROVAL_STATUS.ALLOWED]: s__('LicenseCompliance|Allowed'),
+  [LICENSE_APPROVAL_STATUS.DENIED]: s__('LicenseCompliance|Denied'),
   computed: {
     approveIconClass() {
-      return this.license.approvalStatus === LICENSE_APPROVAL_STATUS.APPROVED
+      return this.license.approvalStatus === LICENSE_APPROVAL_STATUS.ALLOWED
         ? visibleClass
         : invisibleClass;
     },
     blacklistIconClass() {
-      return this.license.approvalStatus === LICENSE_APPROVAL_STATUS.BLACKLISTED
+      return this.license.approvalStatus === LICENSE_APPROVAL_STATUS.DENIED
         ? visibleClass
         : invisibleClass;
     },
@@ -57,7 +60,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(LICENSE_MANAGEMENT, ['setLicenseInModal', 'approveLicense', 'blacklistLicense']),
+    ...mapActions(LICENSE_MANAGEMENT, ['setLicenseInModal', 'allowLicense', 'denyLicense']),
   },
 };
 </script>
@@ -74,13 +77,13 @@ export default {
           toggle-class="d-flex justify-content-between align-items-center"
           right
         >
-          <gl-dropdown-item @click="approveLicense(license)">
+          <gl-dropdown-item @click="allowLicense(license)">
             <icon :class="approveIconClass" name="mobile-issue-close" />
-            {{ $options[$options.LICENSE_APPROVAL_STATUS.APPROVED] }}
+            {{ $options[$options.LICENSE_APPROVAL_ACTION.ALLOW] }}
           </gl-dropdown-item>
-          <gl-dropdown-item @click="blacklistLicense(license)">
+          <gl-dropdown-item @click="denyLicense(license)">
             <icon :class="blacklistIconClass" name="mobile-issue-close" />
-            {{ $options[$options.LICENSE_APPROVAL_STATUS.BLACKLISTED] }}
+            {{ $options[$options.LICENSE_APPROVAL_ACTION.DENY] }}
           </gl-dropdown-item>
         </gl-dropdown>
         <button

ee/app/assets/javascripts/vue_shared/license_management/components/set_approval_status_modal.vue

@@ -22,23 +22,19 @@ export default {
       return (
         this.canManageLicenses &&
         this.currentLicenseInModal &&
-        this.currentLicenseInModal.approvalStatus !== LICENSE_APPROVAL_STATUS.APPROVED
+        this.currentLicenseInModal.approvalStatus !== LICENSE_APPROVAL_STATUS.ALLOWED
       );
     },
     canBlacklist() {
       return (
         this.canManageLicenses &&
         this.currentLicenseInModal &&
-        this.currentLicenseInModal.approvalStatus !== LICENSE_APPROVAL_STATUS.BLACKLISTED
+        this.currentLicenseInModal.approvalStatus !== LICENSE_APPROVAL_STATUS.DENIED
       );
     },
   },
   methods: {
-    ...mapActions(LICENSE_MANAGEMENT, [
-      'resetLicenseInModal',
-      'approveLicense',
-      'blacklistLicense',
-    ]),
+    ...mapActions(LICENSE_MANAGEMENT, ['resetLicenseInModal', 'allowLicense', 'denyLicense']),
   },
 };
 </script>
@@ -97,7 +93,7 @@ export default {
         class="btn btn-remove btn-inverted js-modal-secondary-action"
         data-dismiss="modal"
         data-qa-selector="blacklist_license_button"
-        @click="blacklistLicense(currentLicenseInModal)"
+        @click="denyLicense(currentLicenseInModal)"
       >
         {{ s__('LicenseCompliance|Deny') }}
       </button>
@@ -107,7 +103,7 @@ export default {
         class="btn btn-success js-modal-primary-action"
         data-dismiss="modal"
         data-qa-selector="approve_license_button"
-        @click="approveLicense(currentLicenseInModal)"
+        @click="allowLicense(currentLicenseInModal)"
       >
         {{ s__('LicenseCompliance|Allow') }}
       </button>

ee/app/assets/javascripts/vue_shared/license_management/constants.js

 /* eslint-disable @gitlab/i18n/no-non-i18n-strings */
+
+/*
+ * Endpoint still returns 'approved' & 'blacklisted'
+ * even though we adopted 'allowed' & 'denied' in the UI
+ */
 export const LICENSE_APPROVAL_STATUS = {
-  APPROVED: 'approved',
-  BLACKLISTED: 'blacklisted',
+  ALLOWED: 'approved',
+  DENIED: 'blacklisted',
+};
+
+export const LICENSE_APPROVAL_ACTION = {
+  ALLOW: 'allow',
+  DENY: 'deny',
 };
 
 export const KNOWN_LICENSES = [

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

@@ -154,17 +154,17 @@ export const setLicenseApproval = ({ dispatch, state }, payload) => {
       dispatch('removePendingLicense', id);
     });
 };
-export const approveLicense = ({ dispatch }, license) => {
+export const allowLicense = ({ dispatch }, license) => {
   const { approvalStatus } = license;
-  if (approvalStatus !== LICENSE_APPROVAL_STATUS.APPROVED) {
-    dispatch('setLicenseApproval', { license, newStatus: LICENSE_APPROVAL_STATUS.APPROVED });
+  if (approvalStatus !== LICENSE_APPROVAL_STATUS.ALLOWED) {
+    dispatch('setLicenseApproval', { license, newStatus: LICENSE_APPROVAL_STATUS.ALLOWED });
   }
 };
 
-export const blacklistLicense = ({ dispatch }, license) => {
+export const denyLicense = ({ dispatch }, license) => {
   const { approvalStatus } = license;
-  if (approvalStatus !== LICENSE_APPROVAL_STATUS.BLACKLISTED) {
-    dispatch('setLicenseApproval', { license, newStatus: LICENSE_APPROVAL_STATUS.BLACKLISTED });
+  if (approvalStatus !== LICENSE_APPROVAL_STATUS.DENIED) {
+    dispatch('setLicenseApproval', { license, newStatus: LICENSE_APPROVAL_STATUS.DENIED });
   }
 };
 

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

@@ -68,7 +68,7 @@ export const licenseSummaryText = (state, getters) => {
 
 export const reportContainsBlacklistedLicense = (_state, getters) =>
   (getters.licenseReport || []).some(
-    license => license.approvalStatus === LICENSE_APPROVAL_STATUS.BLACKLISTED,
+    license => license.approvalStatus === LICENSE_APPROVAL_STATUS.DENIED,
   );
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests

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

@@ -19,18 +19,18 @@ export const normalizeLicense = license => {
 };
 
 export const getStatusTranslationsFromLicenseStatus = approvalStatus => {
-  if (approvalStatus === LICENSE_APPROVAL_STATUS.APPROVED) {
+  if (approvalStatus === LICENSE_APPROVAL_STATUS.ALLOWED) {
     return s__('LicenseCompliance|Allowed');
-  } else if (approvalStatus === LICENSE_APPROVAL_STATUS.BLACKLISTED) {
+  } else if (approvalStatus === LICENSE_APPROVAL_STATUS.DENIED) {
     return s__('LicenseCompliance|Denied');
   }
   return '';
 };
 
 export const getIssueStatusFromLicenseStatus = approvalStatus => {
-  if (approvalStatus === LICENSE_APPROVAL_STATUS.APPROVED) {
+  if (approvalStatus === LICENSE_APPROVAL_STATUS.ALLOWED) {
     return STATUS_SUCCESS;
-  } else if (approvalStatus === LICENSE_APPROVAL_STATUS.BLACKLISTED) {
+  } else if (approvalStatus === LICENSE_APPROVAL_STATUS.DENIED) {
     return STATUS_FAILED;
   }
   return STATUS_NEUTRAL;

ee/changelogs/unreleased/update-license-compliance-ui-classifcations.yml

+---
+title: Update license compliance policy classifications text in the UI
+merge_request: 27058
+author:
+type: changed

ee/spec/frontend/license_management/components/add_license_form_spec.js

@@ -22,7 +22,7 @@ describe('AddLicenseForm', () => {
     it('clicking the Submit button submits the data and closes the form', done => {
       const name = 'LICENSE_TEST';
       jest.spyOn(vm, '$emit').mockImplementation(() => {});
-      vm.approvalStatus = LICENSE_APPROVAL_STATUS.APPROVED;
+      vm.approvalStatus = LICENSE_APPROVAL_STATUS.ALLOWED;
       vm.licenseName = name;
 
       Vue.nextTick(() => {
@@ -30,7 +30,7 @@ describe('AddLicenseForm', () => {
         linkEl.click();
 
         expect(vm.$emit).toHaveBeenCalledWith('addLicense', {
-          newStatus: LICENSE_APPROVAL_STATUS.APPROVED,
+          newStatus: LICENSE_APPROVAL_STATUS.ALLOWED,
           license: { name },
         });
 
@@ -58,7 +58,7 @@ describe('AddLicenseForm', () => {
 
       it('is true if the licenseName is empty', () => {
         vm.licenseName = '';
-        vm.approvalStatus = LICENSE_APPROVAL_STATUS.APPROVED;
+        vm.approvalStatus = LICENSE_APPROVAL_STATUS.ALLOWED;
 
         expect(vm.submitDisabled).toBe(true);
       });
@@ -66,7 +66,7 @@ describe('AddLicenseForm', () => {
       it('is true if the entered license is duplicated', () => {
         vm = mountComponent(Component, { managedLicenses: [{ name: 'FOO' }] });
         vm.licenseName = 'FOO';
-        vm.approvalStatus = LICENSE_APPROVAL_STATUS.APPROVED;
+        vm.approvalStatus = LICENSE_APPROVAL_STATUS.ALLOWED;
 
         expect(vm.submitDisabled).toBe(true);
       });

ee/spec/frontend/license_management/components/admin_license_management_row_spec.js

@@ -32,8 +32,8 @@ describe('AdminLicenseManagementRow', () => {
   beforeEach(() => {
     actions = {
       setLicenseInModal: jest.fn(),
-      approveLicense: jest.fn(),
-      blacklistLicense: jest.fn(),
+      allowLicense: jest.fn(),
+      denyLicense: jest.fn(),
     };
 
     store = new Vuex.Store({
@@ -55,7 +55,7 @@ describe('AdminLicenseManagementRow', () => {
 
   describe('approved license', () => {
     beforeEach(done => {
-      vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.APPROVED };
+      vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED };
       Vue.nextTick(done);
     });
 
@@ -90,7 +90,7 @@ describe('AdminLicenseManagementRow', () => {
 
   describe('blacklisted license', () => {
     beforeEach(done => {
-      vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.BLACKLISTED };
+      vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.DENIED };
       Vue.nextTick(done);
     });
 
@@ -131,18 +131,18 @@ describe('AdminLicenseManagementRow', () => {
       expect(actions.setLicenseInModal).toHaveBeenCalled();
     });
 
-    it('triggering approveLicense by clicking the first dropdown option', () => {
+    it('triggering allowLicense by clicking the first dropdown option', () => {
       const linkEl = findNthDropdown(0);
       linkEl.click();
 
-      expect(actions.approveLicense).toHaveBeenCalled();
+      expect(actions.allowLicense).toHaveBeenCalled();
     });
 
-    it('triggering approveLicense blacklistLicense by clicking the second dropdown option', () => {
+    it('triggering allowLicense denyLicense by clicking the second dropdown option', () => {
       const linkEl = findNthDropdown(1);
       linkEl.click();
 
-      expect(actions.blacklistLicense).toHaveBeenCalled();
+      expect(actions.denyLicense).toHaveBeenCalled();
     });
   });
 
@@ -176,7 +176,7 @@ describe('AdminLicenseManagementRow', () => {
       expect(dropdownEl.innerText.trim()).toBe(vm.dropdownText);
     });
 
-    it('renders the dropdown with `Allowed` and `Denied` options', () => {
+    it('renders the dropdown with `Allow` and `Deny` options', () => {
       const dropdownEl = vm.$el.querySelector('.dropdown');
 
       expect(dropdownEl).not.toBeNull();
@@ -184,12 +184,12 @@ describe('AdminLicenseManagementRow', () => {
       const firstOption = findNthDropdown(0);
 
       expect(firstOption).not.toBeNull();
-      expect(firstOption.innerText.trim()).toBe('Allowed');
+      expect(firstOption.innerText.trim()).toBe('Allow');
 
       const secondOption = findNthDropdown(1);
 
       expect(secondOption).not.toBeNull();
-      expect(secondOption.innerText.trim()).toBe('Denied');
+      expect(secondOption.innerText.trim()).toBe('Deny');
     });
 
     it('does not show a loading icon and enables both the dropdown and the remove button by default', () => {

ee/spec/frontend/license_management/components/set_approval_status_modal_spec.js

@@ -19,8 +19,8 @@ describe('SetApprovalModal', () => {
   beforeEach(() => {
     actions = {
       resetLicenseInModal: jest.fn(),
-      approveLicense: jest.fn(),
-      blacklistLicense: jest.fn(),
+      allowLicense: jest.fn(),
+      denyLicense: jest.fn(),
     };
 
     store = new Vuex.Store({
@@ -49,7 +49,7 @@ describe('SetApprovalModal', () => {
         licenseManagement: {
           currentLicenseInModal: {
             ...licenseReport[0],
-            approvalStatus: LICENSE_APPROVAL_STATUS.APPROVED,
+            approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED,
           },
           canManageLicenses: true,
         },
@@ -152,7 +152,7 @@ describe('SetApprovalModal', () => {
         licenseManagement: {
           currentLicenseInModal: {
             ...licenseReport[0],
-            approvalStatus: LICENSE_APPROVAL_STATUS.BLACKLISTED,
+            approvalStatus: LICENSE_APPROVAL_STATUS.DENIED,
           },
           canManageLicenses: true,
         },
@@ -292,12 +292,12 @@ describe('SetApprovalModal', () => {
       });
     });
 
-    describe('triggering approveLicense on approving', () => {
+    describe('triggering allowLicense on approving', () => {
       it('by clicking the confirmation button', () => {
         const linkEl = vm.$el.querySelector('.js-modal-primary-action');
         linkEl.click();
 
-        expect(actions.approveLicense).toHaveBeenCalledWith(
+        expect(actions.allowLicense).toHaveBeenCalledWith(
           expect.any(Object),
           store.state.licenseManagement.currentLicenseInModal,
           undefined,
@@ -305,12 +305,12 @@ describe('SetApprovalModal', () => {
       });
     });
 
-    describe('triggering blacklistLicense on blacklisting', () => {
+    describe('triggering denyLicense on blacklisting', () => {
       it('by clicking the confirmation button', () => {
         const linkEl = vm.$el.querySelector('.js-modal-secondary-action');
         linkEl.click();
 
-        expect(actions.blacklistLicense).toHaveBeenCalledWith(
+        expect(actions.denyLicense).toHaveBeenCalledWith(
           expect.any(Object),
           store.state.licenseManagement.currentLicenseInModal,
           undefined,
@@ -328,7 +328,7 @@ describe('SetApprovalModal', () => {
         currentLicenseInModal: {
           ...licenseReport[0],
           url: badURL,
-          approvalStatus: LICENSE_APPROVAL_STATUS.APPROVED,
+          approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED,
         },
       },
     });

ee/spec/frontend/license_management/mock_data.js

@@ -3,13 +3,13 @@ import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_management/consta
 export const approvedLicense = {
   id: 5,
   name: 'MIT',
-  approvalStatus: LICENSE_APPROVAL_STATUS.APPROVED,
+  approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED,
 };
 
 export const blacklistedLicense = {
   id: 6,
   name: 'New BSD',
-  approvalStatus: LICENSE_APPROVAL_STATUS.BLACKLISTED,
+  approvalStatus: LICENSE_APPROVAL_STATUS.DENIED,
 };
 
 export const licenseReport = [

ee/spec/frontend/license_management/store/actions_spec.js

@@ -320,14 +320,14 @@ describe('License store actions', () => {
     });
   });
 
-  describe('approveLicense', () => {
-    const newStatus = LICENSE_APPROVAL_STATUS.APPROVED;
+  describe('allowLicense', () => {
+    const newStatus = LICENSE_APPROVAL_STATUS.ALLOWED;
 
     it('dispatches setLicenseApproval for un-approved licenses', done => {
       const license = { name: 'FOO' };
 
       testAction(
-        actions.approveLicense,
+        actions.allowLicense,
         license,
         state,
         [],
@@ -341,7 +341,7 @@ describe('License store actions', () => {
       const license = blacklistedLicense;
 
       testAction(
-        actions.approveLicense,
+        actions.allowLicense,
         license,
         state,
         [],
@@ -352,20 +352,20 @@ describe('License store actions', () => {
     });
 
     it('does not dispatch setLicenseApproval for approved licenses', done => {
-      testAction(actions.approveLicense, approvedLicense, state, [], [])
+      testAction(actions.allowLicense, approvedLicense, state, [], [])
         .then(done)
         .catch(done.fail);
     });
   });
 
-  describe('blacklistLicense', () => {
-    const newStatus = LICENSE_APPROVAL_STATUS.BLACKLISTED;
+  describe('denyLicense', () => {
+    const newStatus = LICENSE_APPROVAL_STATUS.DENIED;
 
     it('dispatches setLicenseApproval for un-approved licenses', done => {
       const license = { name: 'FOO' };
 
       testAction(
-        actions.blacklistLicense,
+        actions.denyLicense,
         license,
         state,
         [],
@@ -379,7 +379,7 @@ describe('License store actions', () => {
       const license = approvedLicense;
 
       testAction(
-        actions.blacklistLicense,
+        actions.denyLicense,
         license,
         state,
         [],
@@ -390,7 +390,7 @@ describe('License store actions', () => {
     });
 
     it('does not dispatch setLicenseApproval for blacklisted licenses', done => {
-      testAction(actions.blacklistLicense, blacklistedLicense, state, [], [])
+      testAction(actions.denyLicense, blacklistedLicense, state, [], [])
         .then(done)
         .catch(done.fail);
     });
@@ -448,7 +448,7 @@ describe('License store actions', () => {
     });
 
     it('dispatches requestManagedLicenses and receiveManagedLicensesSuccess for successful response', done => {
-      const payload = [{ name: 'foo', approval_status: LICENSE_APPROVAL_STATUS.BLACKLISTED }];
+      const payload = [{ name: 'foo', approval_status: LICENSE_APPROVAL_STATUS.DENIED }];
       endpointMock.replyOnce(() => [200, payload]);
 
       testAction(

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

@@ -48,15 +48,13 @@ describe('utils', () => {
 
   describe('getStatusTranslationsFromLicenseStatus', () => {
     it('returns "Allowed" for allowed license status', () => {
-      expect(getStatusTranslationsFromLicenseStatus(LICENSE_APPROVAL_STATUS.APPROVED)).toBe(
+      expect(getStatusTranslationsFromLicenseStatus(LICENSE_APPROVAL_STATUS.ALLOWED)).toBe(
         'Allowed',
       );
     });
 
     it('returns "Denied" status for denied license status', () => {
-      expect(getStatusTranslationsFromLicenseStatus(LICENSE_APPROVAL_STATUS.BLACKLISTED)).toBe(
-        'Denied',
-      );
+      expect(getStatusTranslationsFromLicenseStatus(LICENSE_APPROVAL_STATUS.DENIED)).toBe('Denied');
     });
 
     it('returns "" for any other status', () => {
@@ -66,15 +64,11 @@ describe('utils', () => {
 
   describe('getIssueStatusFromLicenseStatus', () => {
     it('returns SUCCESS status for approved license status', () => {
-      expect(getIssueStatusFromLicenseStatus(LICENSE_APPROVAL_STATUS.APPROVED)).toBe(
-        STATUS_SUCCESS,
-      );
+      expect(getIssueStatusFromLicenseStatus(LICENSE_APPROVAL_STATUS.ALLOWED)).toBe(STATUS_SUCCESS);
     });
 
-    it('returns FAILED status for blacklisted licensens', () => {
-      expect(getIssueStatusFromLicenseStatus(LICENSE_APPROVAL_STATUS.BLACKLISTED)).toBe(
-        STATUS_FAILED,
-      );
+    it('returns FAILED status for blacklisted licenses', () => {
+      expect(getIssueStatusFromLicenseStatus(LICENSE_APPROVAL_STATUS.DENIED)).toBe(STATUS_FAILED);
     });
 
     it('returns NEUTRAL status for undefined', () => {
@@ -87,7 +81,7 @@ describe('utils', () => {
       name: 'license',
       classification: {
         id: 1,
-        approval_status: LICENSE_APPROVAL_STATUS.APPROVED,
+        approval_status: LICENSE_APPROVAL_STATUS.ALLOWED,
       },
       dependencies: [{ id: 1 }, { id: 2 }, { id: 3 }],
     };