Merge branch 'dpisek-use-gl-form-for-primary-sec-provider-selection' into 'master'

Use gl-form-radio for setting primary security training provider

See merge request gitlab-org/gitlab!83563

app/assets/javascripts/security_configuration/components/training_provider_list.vue

@@ -3,6 +3,7 @@ import {
   GlAlert,
   GlTooltipDirective,
   GlCard,
+  GlFormRadio,
   GlToggle,
   GlLink,
   GlSkeletonLoader,
@@ -44,6 +45,7 @@ export default {
   components: {
     GlAlert,
     GlCard,
+    GlFormRadio,
     GlToggle,
     GlLink,
     GlSkeletonLoader,
@@ -79,6 +81,9 @@ export default {
     };
   },
   computed: {
+    primaryProviderId() {
+      return this.securityTrainingProviders.find(({ isPrimary }) => isPrimary)?.id;
+    },
     enabledProviders() {
       return this.securityTrainingProviders.filter(({ isEnabled }) => isEnabled);
     },
@@ -256,31 +261,19 @@ export default {
                   {{ __('Learn more.') }}
                 </gl-link>
               </p>
-              <!-- Note: The following `div` and it's content will be replaced by 'GlFormRadio' once https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1720#note_857342988 is resolved -->
-              <div
-                class="gl-form-radio custom-control custom-radio"
-                data-testid="primary-provider-radio"
+              <gl-form-radio
+                :checked="primaryProviderId"
+                :disabled="!provider.isEnabled"
+                :value="provider.id"
+                @change="setPrimaryProvider(provider)"
               >
-                <input
-                  :id="`security-training-provider-${provider.id}`"
-                  type="radio"
-                  :checked="provider.isPrimary"
-                  class="custom-control-input"
-                  :disabled="!provider.isEnabled"
-                  @change="setPrimaryProvider(provider)"
-                />
-                <label
-                  class="custom-control-label"
-                  :for="`security-training-provider-${provider.id}`"
-                >
-                  {{ $options.i18n.primaryTraining }}
-                </label>
+                {{ $options.i18n.primaryTraining }}
                 <gl-icon
                   v-gl-tooltip="$options.i18n.primaryTrainingDescription"
                   name="information-o"
                   class="gl-ml-2 gl-cursor-help"
                 />
-              </div>
+              </gl-form-radio>
             </div>
           </div>
         </gl-card>

spec/frontend/security_configuration/components/training_provider_list_spec.js

 import * as Sentry from '@sentry/browser';
-import { GlAlert, GlLink, GlToggle, GlCard, GlSkeletonLoader, GlIcon } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlLink,
+  GlFormRadio,
+  GlToggle,
+  GlCard,
+  GlSkeletonLoader,
+  GlIcon,
+} from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -87,7 +95,7 @@ describe('TrainingProviderList component', () => {
   const findLinks = () => wrapper.findAllComponents(GlLink);
   const findToggles = () => wrapper.findAllComponents(GlToggle);
   const findFirstToggle = () => findToggles().at(0);
-  const findPrimaryProviderRadios = () => wrapper.findAllByTestId('primary-provider-radio');
+  const findPrimaryProviderRadios = () => wrapper.findAllComponents(GlFormRadio);
   const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findErrorAlert = () => wrapper.findComponent(GlAlert);
   const findLogos = () => wrapper.findAllByTestId('provider-logo');
@@ -177,8 +185,8 @@ describe('TrainingProviderList component', () => {
           const primaryProviderRadioForCurrentCard = findPrimaryProviderRadios().at(index);
 
           // if the given provider is not enabled it should not be possible select it as primary
-          expect(primaryProviderRadioForCurrentCard.find('input').attributes('disabled')).toBe(
-            isEnabled ? undefined : 'disabled',
+          expect(primaryProviderRadioForCurrentCard.attributes('disabled')).toBe(
+            isEnabled ? undefined : 'true',
           );
 
           expect(primaryProviderRadioForCurrentCard.text()).toBe(