Merge branch 'mvrachni-OKR-button-migration' into 'master'

Update Tooltip in Groups to use gl-tooltip

See merge request gitlab-org/gitlab!45305

app/assets/javascripts/groups/components/item_actions.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import eventHub from '../event_hub';
 import { COMMON_STR } from '../constants';
 
@@ -9,7 +8,7 @@ export default {
     GlIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     parentGroup: {
@@ -47,12 +46,10 @@ export default {
   <div class="controls d-flex justify-content-end">
     <a
       v-if="group.canLeave"
-      v-tooltip
+      v-gl-tooltip.top
       :href="group.leavePath"
       :title="leaveBtnTitle"
       :aria-label="leaveBtnTitle"
-      data-container="body"
-      data-placement="bottom"
       data-testid="leave-group-btn"
       class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
       @click.prevent="onLeaveGroup"
@@ -61,12 +58,10 @@ export default {
     </a>
     <a
       v-if="group.canEdit"
-      v-tooltip
+      v-gl-tooltip.top
       :href="group.editPath"
       :title="editBtnTitle"
       :aria-label="editBtnTitle"
-      data-container="body"
-      data-placement="bottom"
       data-testid="edit-group-btn"
       class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
     >

changelogs/unreleased/mvrachni-OKR-button-migration.yml

+---
+title: Update Tooltip in Groups to use gl-tooltip
+merge_request: 45305
+author:
+type: other

spec/frontend/groups/components/item_actions_spec.js

@@ -50,7 +50,7 @@ describe('ItemActions', () => {
       expect(findEditGroupBtn().classes()).toContain('no-expand');
       expect(findEditGroupBtn().attributes('href')).toBe(group.editPath);
       expect(findEditGroupBtn().attributes('aria-label')).toBe('Edit group');
-      expect(findEditGroupBtn().attributes('data-original-title')).toBe('Edit group');
+      expect(findEditGroupBtn().attributes('title')).toBe('Edit group');
       expect(findEditGroupIcon().exists()).toBe(true);
       expect(findEditGroupIcon().props('name')).toBe('settings');
     });
@@ -70,7 +70,7 @@ describe('ItemActions', () => {
         expect(findLeaveGroupBtn().classes()).toContain('no-expand');
         expect(findLeaveGroupBtn().attributes('href')).toBe(group.leavePath);
         expect(findLeaveGroupBtn().attributes('aria-label')).toBe('Leave this group');
-        expect(findLeaveGroupBtn().attributes('data-original-title')).toBe('Leave this group');
+        expect(findLeaveGroupBtn().attributes('title')).toBe('Leave this group');
         expect(findLeaveGroupIcon().exists()).toBe(true);
         expect(findLeaveGroupIcon().props('name')).toBe('leave');
       });