Merge branch 'dj-refactor-licenses' into 'master'

Refactor License Form to use GlFormRadio

See merge request gitlab-org/gitlab!45661

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

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFormRadioGroup, GlFormRadio } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { LICENSE_APPROVAL_STATUS } from '../constants';
 import AddLicenseFormDropdown from './add_license_form_dropdown.vue';
@@ -10,6 +10,8 @@ export default {
   components: {
     AddLicenseFormDropdown,
     GlButton,
+    GlFormRadioGroup,
+    GlFormRadio,
   },
   mixins: [glFeatureFlagsMixin()],
   LICENSE_APPROVAL_STATUS,
@@ -90,28 +92,21 @@ export default {
       </div>
     </div>
     <div class="form-group">
-      <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"
-          class="form-check-input"
-          type="radio"
-          :data-qa-selector="`${option.value}_license_radio`"
+      <gl-form-radio-group v-model="approvalStatus" name="approvalStatus">
+        <gl-form-radio
+          v-for="option in $options.approvalStatusOptions"
+          :key="option.value"
           :value="option.value"
+          :data-qa-selector="`${option.value}_license_radio`"
           :aria-describedby="`js-${option.value}-license-radio`"
-        />
-        <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>
+          :class="{ 'mb-3': isDescriptionEnabled }"
+        >
+          <template>{{ option.label }}</template>
+          <div v-if="isDescriptionEnabled" class="text-secondary">
+            {{ option.description }}
+          </div>
+        </gl-form-radio>
+      </gl-form-radio-group>
     </div>
     <div class="gl-display-flex">
       <gl-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"
+<gl-form-radio-stub
+  aria-describedby="js-approved-license-radio"
+  class=""
+  data-qa-selector="approved_license_radio"
+  value="approved"
 >
-  <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>
-   
+  Allow 
   <!---->
-</div>
+</gl-form-radio-stub>
 `;
 
 exports[`AddLicenseForm template does not show radio button descriptions, if licenseComplianceDeniesMr feature flag is disabled 2`] = `
-<div
-  class="form-check"
+<gl-form-radio-stub
+  aria-describedby="js-blacklisted-license-radio"
+  class=""
+  data-qa-selector="blacklisted_license_radio"
+  value="blacklisted"
 >
-  <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>
-   
+  Deny 
   <!---->
-</div>
+</gl-form-radio-stub>
 `;

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

 import Vue from 'vue';
+import { GlFormRadio, GlFormRadioGroup } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
 import LicenseIssueBody from 'ee/vue_shared/license_compliance/components/add_license_form.vue';
 import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_compliance/constants';
@@ -16,6 +17,7 @@ const createComponent = (props = {}, mountFn = shallowMount) => {
 describe('AddLicenseForm', () => {
   const findSubmitButton = () => wrapper.find('.js-submit');
   const findCancelButton = () => wrapper.find('.js-cancel');
+  const findRadioInputs = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio);
 
   beforeEach(() => {
     createComponent();
@@ -102,23 +104,11 @@ describe('AddLicenseForm', () => {
     });
 
     it('renders the license approval radio buttons dropdown', () => {
-      const radioButtonParents = wrapper.findAll('.form-check');
-
-      expect(radioButtonParents).toHaveLength(2);
-      expect(radioButtonParents.at(0).text()).toBe('Allow');
-      expect(
-        radioButtonParents
-          .at(0)
-          .find('.form-check-input')
-          .exists(),
-      ).toBe(true);
-      expect(radioButtonParents.at(1).text()).toBe('Deny');
-      expect(
-        radioButtonParents
-          .at(1)
-          .find('.form-check-input')
-          .exists(),
-      ).toBe(true);
+      const approvalOptions = findRadioInputs();
+
+      expect(approvalOptions).toHaveLength(2);
+      expect(approvalOptions.at(0).text()).toBe('Allow');
+      expect(approvalOptions.at(1).text()).toBe('Deny');
     });
 
     it('renders error text, if there is a duplicate license', async () => {
@@ -159,10 +149,8 @@ describe('AddLicenseForm', () => {
       createComponent({ managedLicenses: [{ name: 'FOO' }] });
       wrapper.setData({ licenseName: 'FOO' });
       return Vue.nextTick().then(() => {
-        const formCheckElements = wrapper.findAll('.form-check');
-
-        expect(formCheckElements.at(0).element).toMatchSnapshot();
-        expect(formCheckElements.at(1).element).toMatchSnapshot();
+        expect(findRadioInputs().at(0).element).toMatchSnapshot();
+        expect(findRadioInputs().at(1).element).toMatchSnapshot();
       });
     });