Pass SPDX licenses from backend to frontend

* Store in Vuex Store and use to render license dropdown list

ee/app/assets/javascripts/license_compliance/index.js

@@ -17,6 +17,7 @@ export default () => {
     settingsPath,
     approvalsDocumentationPath,
     lockedApprovalsRuleName,
+    softwareLicenses,
   } = el.dataset;
 
   const storeSettings = {
@@ -33,6 +34,8 @@ export default () => {
   store.dispatch('licenseManagement/setAPISettings', {
     apiUrlManageLicenses: readLicensePoliciesEndpoint,
   });
+  store.dispatch('licenseManagement/setKnownLicenses', JSON.parse(softwareLicenses));
+
   store.dispatch(`${LICENSE_LIST}/setLicensesEndpoint`, projectLicensesEndpoint);
 
   return new Vue({

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

@@ -33,6 +33,10 @@ export default {
       required: false,
       default: () => [],
     },
+    knownLicenses: {
+      type: Array,
+      required: true,
+    },
     loading: {
       type: Boolean,
       required: false,
@@ -78,6 +82,7 @@ export default {
       <add-license-form-dropdown
         id="js-license-dropdown"
         v-model="licenseName"
+        :known-licenses="knownLicenses"
         :placeholder="s__('LicenseCompliance|License name')"
       />
       <div class="invalid-feedback" :class="{ 'd-block': isInvalidLicense }">

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

@@ -2,7 +2,6 @@
 /* eslint-disable no-unused-vars */
 import $ from 'jquery';
 import select2 from 'select2/select2';
-import { KNOWN_LICENSES } from '../constants';
 
 export default {
   name: 'AddLicenseFormDropdown',
@@ -17,6 +16,10 @@ export default {
       required: false,
       default: '',
     },
+    knownLicenses: {
+      type: Array,
+      required: true,
+    },
   },
   mounted() {
     $(this.$refs.dropdownInput)
@@ -26,7 +29,10 @@ export default {
         placeholder: this.placeholder,
         createSearchChoice: term => ({ id: term, text: term }),
         createSearchChoicePosition: 'bottom',
-        data: KNOWN_LICENSES.map(license => ({ id: license, text: license })),
+        data: this.knownLicenses.map(license => ({
+          id: license,
+          text: license,
+        })),
       })
       .on('change', e => {
         this.$emit('input', e.target.value);

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

@@ -24,36 +24,6 @@ export const LICENSE_APPROVAL_ACTION = {
   DENY: 'deny',
 };
 
-/* eslint-disable @gitlab/require-i18n-strings */
-export const KNOWN_LICENSES = [
-  'AGPL-1.0',
-  'AGPL-3.0',
-  'Apache 2.0',
-  'Artistic-2.0',
-  'BSD',
-  'CC0 1.0 Universal',
-  'CDDL-1.0',
-  'CDDL-1.1',
-  'EPL-1.0',
-  'EPL-2.0',
-  'GPLv2',
-  'GPLv3',
-  'ISC',
-  'LGPL',
-  'LGPL-2.1',
-  'MIT',
-  'Mozilla Public License 2.0',
-  'MS-PL',
-  'MS-RL',
-  'New BSD',
-  'Python Software Foundation License',
-  'ruby',
-  'Simplified BSD',
-  'WTFPL',
-  'Zlib',
-];
-/* eslint-enable @gitlab/require-i18n-strings */
-
 export const REPORT_GROUPS = [
   {
     name: s__('LicenseManagement|Denied'),

ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue

@@ -32,7 +32,12 @@ export default {
     };
   },
   computed: {
-    ...mapState(LICENSE_MANAGEMENT, ['managedLicenses', 'isLoadingManagedLicenses', 'isAdmin']),
+    ...mapState(LICENSE_MANAGEMENT, [
+      'managedLicenses',
+      'isLoadingManagedLicenses',
+      'isAdmin',
+      'knownLicenses',
+    ]),
     ...mapGetters(LICENSE_MANAGEMENT, [
       'isLicenseBeingUpdated',
       'hasPendingLicenses',
@@ -146,6 +151,7 @@ export default {
         <div v-if="formIsOpen" class="gl-mt-3 gl-mb-3">
           <add-license-form
             :managed-licenses="managedLicenses"
+            :known-licenses="knownLicenses"
             :loading="isAddingNewLicense"
             @addLicense="setLicenseApproval"
             @closeForm="closeAddLicenseForm"

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

@@ -12,6 +12,15 @@ export const setAPISettings = ({ commit }, data) => {
 export const setLicenseInModal = ({ commit }, license) => {
   commit(types.SET_LICENSE_IN_MODAL, license);
 };
+
+export const setIsAdmin = ({ commit }, payload) => {
+  commit(types.SET_IS_ADMIN, payload);
+};
+
+export const setKnownLicenses = ({ commit }, licenses) => {
+  commit(types.SET_KNOWN_LICENSES, licenses);
+};
+
 export const resetLicenseInModal = ({ commit }) => {
   commit(types.RESET_LICENSE_IN_MODAL);
 };
@@ -153,10 +162,6 @@ export const receiveLicenseCheckApprovalRuleError = ({ commit }, error) => {
   commit(types.RECEIVE_LICENSE_CHECK_APPROVAL_RULE_ERROR, error);
 };
 
-export const setIsAdmin = ({ commit }, payload) => {
-  commit(types.SET_IS_ADMIN, payload);
-};
-
 export const addPendingLicense = ({ state, commit }, id = null) => {
   if (!state.pendingLicenses.includes(id)) {
     commit(types.ADD_PENDING_LICENSE, id);

ee/app/assets/javascripts/vue_shared/license_compliance/store/mutation_types.js

@@ -13,6 +13,7 @@ export const REQUEST_SET_LICENSE_APPROVAL = 'REQUEST_SET_LICENSE_APPROVAL';
 export const RESET_LICENSE_IN_MODAL = 'RESET_LICENSE_IN_MODAL';
 export const SET_API_SETTINGS = 'SET_API_SETTINGS';
 export const SET_LICENSE_IN_MODAL = 'SET_LICENSE_IN_MODAL';
+export const SET_KNOWN_LICENSES = 'SET_KNOWN_LICENSES';
 export const SET_IS_ADMIN = 'SET_IS_ADMIN';
 export const ADD_PENDING_LICENSE = 'ADD_PENDING_LICENSE';
 export const REMOVE_PENDING_LICENSE = 'REMOVE_PENDING_LICENSE';

ee/app/assets/javascripts/vue_shared/license_compliance/store/mutations.js

@@ -20,6 +20,11 @@ export default {
       isAdmin: data,
     });
   },
+  [types.SET_KNOWN_LICENSES](state, data) {
+    Object.assign(state, {
+      knownLicenses: data,
+    });
+  },
   [types.RECEIVE_MANAGED_LICENSES_SUCCESS](state, licenses = []) {
     const managedLicenses = licenses.map(normalizeLicense).reverse();
 

ee/app/assets/javascripts/vue_shared/license_compliance/store/state.js

@@ -17,4 +17,5 @@ export default () => ({
   existingLicenses: [],
   hasLicenseCheckApprovalRule: false,
   isLoadingLicenseCheckApprovalRule: false,
+  knownLicenses: [],
 });

ee/changelogs/unreleased/37999-spdx-dropdown.yml

+---
+title: Show up to date SPDX licenses for license compliance
+merge_request: 36926
+author:
+type: added

ee/spec/frontend/vue_shared/license_compliance/components/add_license_form_dropdown_spec.js

-import Vue from 'vue';
 import $ from 'jquery';
 import Dropdown from 'ee/vue_shared/license_compliance/components/add_license_form_dropdown.vue';
-import { KNOWN_LICENSES } from 'ee/vue_shared/license_compliance/constants';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 
-describe('AddLicenseFormDropdown', () => {
-  const Component = Vue.extend(Dropdown);
-  let vm;
+let vm;
+let wrapper;
+
+const KNOWN_LICENSES = ['AGPL-1.0', 'AGPL-3.0', 'Apache 2.0', 'BSD'];
+
+const createComponent = (props = {}) => {
+  wrapper = shallowMount(Dropdown, { propsData: { knownLicenses: KNOWN_LICENSES, ...props } });
+  vm = wrapper.vm;
+};
 
+describe('AddLicenseFormDropdown', () => {
   afterEach(() => {
-    vm.$destroy();
+    vm = undefined;
+    wrapper.destroy();
   });
 
   it('emits `input` invent on change', () => {
-    vm = mountComponent(Component);
+    createComponent();
+
     jest.spyOn(vm, '$emit').mockImplementation(() => {});
 
     $(vm.$el)
@@ -25,7 +32,7 @@ describe('AddLicenseFormDropdown', () => {
 
   it('sets the placeholder appropriately', () => {
     const placeholder = 'Select a license';
-    vm = mountComponent(Component, { placeholder });
+    createComponent({ placeholder });
 
     const dropdownContainer = $(vm.$el).select2('container')[0];
 
@@ -34,13 +41,13 @@ describe('AddLicenseFormDropdown', () => {
 
   it('sets the initial value correctly', () => {
     const value = 'AWESOME_LICENSE';
-    vm = mountComponent(Component, { value });
+    createComponent({ value });
 
     expect(vm.$el.value).toContain(value);
   });
 
-  it('shows all pre-defined licenses', done => {
-    vm = mountComponent(Component);
+  it('shows all defined licenses', done => {
+    createComponent();
 
     const element = $(vm.$el);
 

ee/spec/frontend/vue_shared/license_compliance/license_management_spec.js

@@ -47,6 +47,7 @@ const createComponent = ({ state, getters, props, actionMocks, isAdmin, options,
           managedLicenses,
           isLoadingManagedLicenses: true,
           isAdmin,
+          knownLicenses: [],
           ...state,
         },
         actions: {

ee/spec/frontend/vue_shared/license_compliance/store/actions_spec.js

@@ -60,6 +60,21 @@ describe('License store actions', () => {
     });
   });
 
+  describe('setKnownLicenses', () => {
+    it('commits SET_KNOWN_LICENSES', done => {
+      const payload = [{ name: 'BSD' }, { name: 'Apache' }];
+      testAction(
+        actions.setKnownLicenses,
+        payload,
+        state,
+        [{ type: mutationTypes.SET_KNOWN_LICENSES, payload }],
+        [],
+      )
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
   describe('setLicenseInModal', () => {
     it('commits SET_LICENSE_IN_MODAL with license', done => {
       testAction(

ee/spec/frontend/vue_shared/license_compliance/store/mutations_spec.js

@@ -20,6 +20,15 @@ describe('License store mutations', () => {
     });
   });
 
+  describe('SET_KNOWN_LICENSES', () => {
+    it('assigns knownLicenses to the store', () => {
+      const licenses = [{ name: 'BSD' }, { name: 'Apache' }];
+      store.commit(`licenseManagement/${types.SET_KNOWN_LICENSES}`, licenses);
+
+      expect(store.state.licenseManagement.knownLicenses).toBe(licenses);
+    });
+  });
+
   describe('RESET_LICENSE_IN_MODAL', () => {
     it('closes modal and deletes licenseInApproval', () => {
       store.replaceState({