Merge branch '435808-add-ai-tooltip-split-button' into 'master'

Add tooltip to resolve with ai split button

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/140198



Merged-by: David Pisek <dpisek@gitlab.com>
Approved-by: Zamir Martins <zfilho@gitlab.com>
Approved-by: David Pisek <dpisek@gitlab.com>
Reviewed-by: David Pisek <dpisek@gitlab.com>
Co-authored-by: Samantha Ming <sming@gitlab.com>

ee/app/assets/javascripts/vue_shared/security_reports/components/split_button.vue

 <script>
-import { GlButtonGroup, GlButton, GlCollapsibleListbox, GlIcon, GlBadge } from '@gitlab/ui';
+import {
+  GlButtonGroup,
+  GlButton,
+  GlCollapsibleListbox,
+  GlIcon,
+  GlBadge,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
 import { __ } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -11,6 +18,9 @@ export default {
     GlIcon,
     GlBadge,
   },
+  directives: {
+    GlTooltip,
+  },
   props: {
     buttons: {
       type: Array,
@@ -59,7 +69,13 @@ export default {
   <!--TODO: Replace button-group workaround once `split` option for new dropdowns is implemented.-->
   <!-- See issue at https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2263-->
   <gl-button-group v-if="selectedButton">
+    <!-- Must set a unique "key" to force re-rendering. -->
+    <!-- This ensures the tooltip is reset correctly when selectedButton changes. -->
     <gl-button
+      :key="selectedButton.name"
+      v-gl-tooltip
+      :title="selectedButton.tooltip"
+      :aria-label="selectedButton.tooltip"
       :disabled="disabled"
       variant="confirm"
       :href="selectedButton.href"

ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js

 import { GlButton, GlButtonGroup, GlCollapsibleListbox, GlListboxItem, GlBadge } from '@gitlab/ui';
 import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
 import * as urlUtility from '~/lib/utils/url_utility';
 
@@ -33,6 +34,9 @@ describe('Split Button', () => {
 
   const createComponent = (props, mountFn = shallowMountExtended) => {
     wrapper = mountFn(SplitButton, {
+      directives: {
+        GlTooltip: createMockDirective('gl-tooltip'),
+      },
       propsData: {
         ...defaultProps,
         ...props,
@@ -99,6 +103,19 @@ describe('Split Button', () => {
       expect(findButtonBadge().text()).toBe(badge);
       expect(findButtonBadge().props('size')).toBe('sm');
     });
+
+    it('renders the tooltip', () => {
+      const tooltipText = 'some tooltip message';
+      const { buttons } = defaultProps;
+      createComponent({ buttons: [{ ...buttons[0], tooltip: tooltipText }] }, mountExtended);
+
+      const selectedButton = findButton();
+      const tooltip = getBinding(selectedButton.element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
+      expect(selectedButton.attributes('title')).toBe(tooltipText);
+      expect(selectedButton.attributes('aria-label')).toBe(tooltipText);
+    });
   });
 
   describe('dropdown listbox', () => {