Show Allow/Deny descriptions

* Include feature flag for related backend work

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

@@ -14,8 +14,18 @@ export default {
   },
   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 +52,9 @@ export default {
     submitDisabled() {
       return this.isInvalidLicense || this.licenseName.trim() === '' || this.approvalStatus === '';
     },
+    isDescriptionEnabled() {
+      return gon.features.licenseComplianceDeniesMr;
+    },
   },
   methods: {
     addLicense() {
@@ -72,7 +85,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"
+        v-bind:class="{ 'mb-3': isDescriptionEnabled }"
+      >
         <input
           :id="`js-${option.value}-license-radio`"
           v-model="approvalStatus"
@@ -81,9 +99,12 @@ export default {
           :data-qa-selector="`${option.value}_license_radio`"
           :value="option.value"
         />
-        <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