Add info tooltip to sec primary config

This commit adds an info icon with a tooltip to the configuration
to set a primary security training provider.

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

 <script>
-import { GlAlert, GlCard, GlToggle, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlTooltipDirective,
+  GlCard,
+  GlToggle,
+  GlLink,
+  GlSkeletonLoader,
+  GlIcon,
+} from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import Tracking from '~/tracking';
 import { __, s__ } from '~/locale';
@@ -25,6 +33,9 @@ const i18n = {
     'Could not save configuration. Please refresh the page, or try again later.',
   ),
   primaryTraining: s__('SecurityTraining|Primary Training'),
+  primaryTrainingDescription: s__(
+    'SecurityTraining|Training from this partner takes precedence when more than one training partner is enabled.',
+  ),
 };
 
 export default {
@@ -34,6 +45,10 @@ export default {
     GlToggle,
     GlLink,
     GlSkeletonLoader,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [Tracking.mixin()],
   inject: ['projectFullPath'],
@@ -236,7 +251,6 @@ export default {
                   :id="`security-training-provider-${provider.id}`"
                   type="radio"
                   :checked="provider.isPrimary"
-                  name="radio-group-name"
                   class="custom-control-input"
                   :disabled="!provider.isEnabled"
                   @change="setPrimaryProvider(provider)"
@@ -247,6 +261,11 @@ export default {
                 >
                   {{ $options.i18n.primaryTraining }}
                 </label>
+                <gl-icon
+                  v-gl-tooltip="$options.i18n.primaryTrainingDescription"
+                  name="information-o"
+                  class="gl-ml-2 gl-cursor-help"
+                />
               </div>
             </div>
           </div>

locale/gitlab.pot

@@ -33115,6 +33115,9 @@ msgstr ""
 msgid "SecurityTraining|Primary Training"
 msgstr ""
 
+msgid "SecurityTraining|Training from this partner takes precedence when more than one training partner is enabled."
+msgstr ""
+
 msgid "See example DevOps Score page in our documentation."
 msgstr ""
 

spec/frontend/security_configuration/components/training_provider_list_spec.js

 import * as Sentry from '@sentry/browser';
-import { GlAlert, GlLink, GlToggle, GlCard, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlLink, GlToggle, GlCard, GlSkeletonLoader, GlIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import {
   TRACK_TOGGLE_TRAINING_PROVIDER_ACTION,
   TRACK_TOGGLE_TRAINING_PROVIDER_LABEL,
@@ -69,6 +70,9 @@ describe('TrainingProviderList component', () => {
       provide: {
         projectFullPath: testProjectPath,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
       apolloProvider,
     });
   };
@@ -172,6 +176,16 @@ describe('TrainingProviderList component', () => {
             );
           });
 
+          it('shows a info-tooltip that describes the purpose of a primary provider', () => {
+            const infoIcon = findPrimaryProviderRadios().at(index).find(GlIcon);
+            const tooltip = getBinding(infoIcon.element, 'gl-tooltip');
+
+            expect(infoIcon.props()).toMatchObject({
+              name: 'information-o',
+            });
+            expect(tooltip.value).toBe(TrainingProviderList.i18n.primaryTrainingDescription);
+          });
+
           it('does not show loader when query is populated', () => {
             expect(findLoader().exists()).toBe(false);
           });