Add latest changes from gitlab-org/gitlab@master

1 files changed, 12 insertions, 19 deletions

diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
index bb540303cfd..ef50d085ae8 100644
--- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue
+++ b/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>