Merge branch '214992-update-text-copy-license-compliance' into 'master'

Show Allow/Deny descriptions

See merge request gitlab-org/gitlab!34036

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

 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { GlDeprecatedButton } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { LICENSE_APPROVAL_STATUS } from '../constants';
@@ -12,10 +13,21 @@ export default {
     GlDeprecatedButton,
     LoadingButton,
   },
+  mixins: [glFeatureFlagsMixin()],
   LICENSE_APPROVAL_STATUS,
   approvalStatusOptions: [
-    { value: LICENSE_APPROVAL_STATUS.ALLOWED, label: s__('LicenseCompliance|Allow') },
-    { value: LICENSE_APPROVAL_STATUS.DENIED, label: s__('LicenseCompliance|Deny') },
+    {
+      value: LICENSE_APPROVAL_STATUS.ALLOWED,
+      label: s__('LicenseCompliance|Allow'),
+      description: s__('LicenseCompliance|Acceptable license to be used in the project'),
+    },
+    {
+      value: LICENSE_APPROVAL_STATUS.DENIED,
+      label: s__('LicenseCompliance|Deny'),
+      description: s__(
+        'LicenseCompliance|Disallow merge request if detected and will instruct developer to remove',
+      ),
+    },
   ],
   props: {
     managedLicenses: {
@@ -42,6 +54,9 @@ export default {
     submitDisabled() {
       return this.isInvalidLicense || this.licenseName.trim() === '' || this.approvalStatus === '';
     },
+    isDescriptionEnabled() {
+      return Boolean(this.glFeatures.licenseComplianceDeniesMr);
+    },
   },
   methods: {
     addLicense() {
@@ -72,7 +87,12 @@ export default {
       </div>
     </div>
     <div class="form-group">
-      <div v-for="option in $options.approvalStatusOptions" :key="option.value" class="form-check">
+      <div
+        v-for="option in $options.approvalStatusOptions"
+        :key="option.value"
+        class="form-check"
+        :class="{ 'mb-3': isDescriptionEnabled }"
+      >
         <input
           :id="`js-${option.value}-license-radio`"
           v-model="approvalStatus"
@@ -80,10 +100,14 @@ export default {
           type="radio"
           :data-qa-selector="`${option.value}_license_radio`"
           :value="option.value"
+          :aria-describedby="`js-${option.value}-license-radio`"
         />
-        <label :for="`js-${option.value}-license-radio`" class="form-check-label">
+        <label :for="`js-${option.value}-license-radio`" class="form-check-label pt-1">
           {{ option.label }}
         </label>
+        <div v-if="isDescriptionEnabled" class="text-secondary">
+          {{ option.description }}
+        </div>
       </div>
     </div>
     <loading-button

ee/spec/frontend/vue_shared/license_compliance/components/__snapshots__/add_license_form_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddLicenseForm template does not show radio button descriptions, if licenseComplianceDeniesMr feature flag is disabled 1`] = `
+<div
+  class="form-check"
+>
+  <input
+    aria-describedby="js-approved-license-radio"
+    class="form-check-input"
+    data-qa-selector="approved_license_radio"
+    id="js-approved-license-radio"
+    type="radio"
+    value="approved"
+  />
+   
+  <label
+    class="form-check-label pt-1"
+    for="js-approved-license-radio"
+  >
+    
+        Allow
+      
+  </label>
+   
+  <!---->
+</div>
+`;
+
+exports[`AddLicenseForm template does not show radio button descriptions, if licenseComplianceDeniesMr feature flag is disabled 2`] = `
+<div
+  class="form-check"
+>
+  <input
+    aria-describedby="js-blacklisted-license-radio"
+    class="form-check-input"
+    data-qa-selector="blacklisted_license_radio"
+    id="js-blacklisted-license-radio"
+    type="radio"
+    value="blacklisted"
+  />
+   
+  <label
+    class="form-check-label pt-1"
+    for="js-blacklisted-license-radio"
+  >
+    
+        Deny
+      
+  </label>
+   
+  <!---->
+</div>
+`;

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

 import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import LicenseIssueBody from 'ee/vue_shared/license_compliance/components/add_license_form.vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_compliance/constants';
@@ -121,6 +122,43 @@ describe('AddLicenseForm', () => {
       });
     });
 
+    it('shows radio button descriptions, if licenseComplianceDeniesMr feature flag is enabled', done => {
+      const wrapper = shallowMount(LicenseIssueBody, {
+        propsData: {
+          managedLicenses: [{ name: 'FOO' }],
+        },
+        provide: {
+          glFeatures: { licenseComplianceDeniesMr: true },
+        },
+      });
+
+      Vue.nextTick(() => {
+        const descriptionElement = wrapper.findAll('.text-secondary');
+
+        expect(descriptionElement.at(0).text()).toBe(
+          'Acceptable license to be used in the project',
+        );
+
+        expect(descriptionElement.at(1).text()).toBe(
+          'Disallow merge request if detected and will instruct developer to remove',
+        );
+
+        done();
+      });
+    });
+
+    it('does not show radio button descriptions, if licenseComplianceDeniesMr feature flag is disabled', done => {
+      vm = mountComponent(Component, { managedLicenses: [{ name: 'FOO' }] });
+      vm.licenseName = 'FOO';
+      Vue.nextTick(() => {
+        const formCheckElements = vm.$el.querySelectorAll('.form-check');
+
+        expect(formCheckElements[0]).toMatchSnapshot();
+        expect(formCheckElements[1]).toMatchSnapshot();
+        done();
+      });
+    });
+
     it('disables submit, if the form is invalid', done => {
       vm.licenseName = '';
       Vue.nextTick(() => {

locale/gitlab.pot

@@ -13455,6 +13455,9 @@ msgstr ""
 msgid "LicenseCompliance|%{docLinkStart}License Approvals%{docLinkEnd} are inactive"
 msgstr ""
 
+msgid "LicenseCompliance|Acceptable license to be used in the project"
+msgstr ""
+
 msgid "LicenseCompliance|Add a license"
 msgstr ""
 
@@ -13476,6 +13479,9 @@ msgstr ""
 msgid "LicenseCompliance|Deny"
 msgstr ""
 
+msgid "LicenseCompliance|Disallow merge request if detected and will instruct developer to remove"
+msgstr ""
+
 msgid "LicenseCompliance|Learn more about %{linkStart}License Approvals%{linkEnd}"
 msgstr ""