Abstract out tooltips in DAST Scanner Profile

ee/app/assets/javascripts/security_configuration/dast_scanner_profiles/components/dast_scanner_profile_form.vue

@@ -8,8 +8,6 @@ import {
   GlFormInput,
   GlFormInputGroup,
   GlModal,
-  GlIcon,
-  GlTooltipDirective,
   GlInputGroupText,
   GlFormCheckbox,
   GlFormRadioGroup,
@@ -20,6 +18,7 @@ import { redirectTo } from '~/lib/utils/url_utility';
 import { serializeFormObject, isEmptyValue } from '~/lib/utils/forms';
 import dastScannerProfileCreateMutation from '../graphql/dast_scanner_profile_create.mutation.graphql';
 import dastScannerProfileUpdateMutation from '../graphql/dast_scanner_profile_update.mutation.graphql';
+import tooltipIcon from './tooltip_icon.vue';
 import { SCAN_TYPE, SCAN_TYPE_OPTIONS } from '../constants';
 
 const initField = (value, isRequired = true) => ({
@@ -44,13 +43,10 @@ export default {
     GlFormInput,
     GlFormInputGroup,
     GlModal,
-    GlIcon,
     GlInputGroupText,
     GlFormCheckbox,
     GlFormRadioGroup,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    tooltipIcon,
   },
   props: {
     projectFullPath: {
@@ -265,12 +261,7 @@ export default {
     <gl-form-group>
       <template #label>
         {{ s__('DastProfiles|Scan mode') }}
-        <gl-icon
-          v-gl-tooltip.hover
-          name="information-o"
-          class="gl-vertical-align-text-bottom gl-text-gray-400 gl-ml-2"
-          :title="i18n.tooltips.scanMode"
-        />
+        <tooltip-icon :title="i18n.tooltips.scanMode" />
       </template>
 
       <gl-form-radio-group
@@ -288,12 +279,7 @@ export default {
       >
         <template #label>
           {{ s__('DastProfiles|Spider timeout') }}
-          <gl-icon
-            v-gl-tooltip.hover
-            name="information-o"
-            class="gl-vertical-align-text-bottom gl-text-gray-400 gl-ml-2"
-            :title="i18n.tooltips.spiderTimeout"
-          />
+          <tooltip-icon :title="i18n.tooltips.spiderTimeout" />
         </template>
         <gl-form-input-group
           v-model.number="form.spiderTimeout.value"
@@ -320,12 +306,7 @@ export default {
       >
         <template #label>
           {{ s__('DastProfiles|Target timeout') }}
-          <gl-icon
-            v-gl-tooltip.hover
-            name="information-o"
-            class="gl-vertical-align-text-bottom gl-text-gray-400 gl-ml-2"
-            :title="i18n.tooltips.targetTimeout"
-          />
+          <tooltip-icon :title="i18n.tooltips.targetTimeout" />
         </template>
         <gl-form-input-group
           v-model.number="form.targetTimeout.value"
@@ -352,12 +333,7 @@ export default {
       <gl-form-group class="col-md-6 mb-0">
         <template #label>
           {{ s__('DastProfiles|AJAX spider') }}
-          <gl-icon
-            v-gl-tooltip.hover
-            name="information-o"
-            class="gl-vertical-align-text-bottom gl-text-gray-400 gl-ml-2"
-            :title="i18n.tooltips.ajaxSpider"
-          />
+          <tooltip-icon :title="i18n.tooltips.ajaxSpider" />
         </template>
         <gl-form-checkbox v-model="form.useAjaxSpider.value">{{
           s__('DastProfiles|Turn on AJAX spider')
@@ -367,12 +343,7 @@ export default {
       <gl-form-group class="col-md-6 mb-0">
         <template #label>
           {{ s__('DastProfiles|Debug messages') }}
-          <gl-icon
-            v-gl-tooltip.hover
-            name="information-o"
-            class="gl-vertical-align-text-bottom gl-text-gray-400 gl-ml-2"
-            :title="i18n.tooltips.debugMessage"
-          />
+          <tooltip-icon :title="i18n.tooltips.debugMessage" />
         </template>
         <gl-form-checkbox v-model="form.showDebugMessages.value">{{
           s__('DastProfiles|Show debug messages')

ee/app/assets/javascripts/security_configuration/dast_scanner_profiles/components/tooltip_icon.vue

+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-icon
+    v-gl-tooltip.hover="title"
+    name="information-o"
+    class="gl-vertical-align-text-bottom gl-text-gray-400 gl-ml-2"
+  />
+</template>

ee/spec/frontend/security_configuration/dast_scanner_profiles_form/components/tooltip_icon_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { GlIcon } from '@gitlab/ui';
+import TooltipIcon from 'ee/security_configuration/dast_scanner_profiles/components/tooltip_icon.vue';
+
+describe('Tooltip Icon', () => {
+  let wrapper;
+
+  const findIcon = () => wrapper.find(GlIcon);
+  const title = 'Hello world';
+
+  const createComponent = (props = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(TooltipIcon, {
+      propsData: {
+        title,
+        ...props,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders icon correctly', () => {
+    expect(findIcon().exists()).toBe(true);
+  });
+
+  it('renders tooltip correctly', () => {
+    const tooltip = getBinding(findIcon().element, 'gl-tooltip').value;
+    expect(tooltip).toBeDefined();
+    expect(tooltip).toBe(title);
+  });
+});