Merge branch '228995-replace-tooltip-keys-components' into 'master'

Update tooltips for deploy keys page components

See merge request gitlab-org/gitlab!45936

app/assets/javascripts/deploy_keys/components/key.vue

 <script>
 import { head, tail } from 'lodash';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 import actionBtn from './action_btn.vue';
@@ -13,7 +12,7 @@ export default {
     GlIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
   props: {
@@ -125,7 +124,7 @@ export default {
       <div class="table-mobile-content deploy-project-list">
         <template v-if="projects.length > 0">
           <a
-            v-tooltip
+            v-gl-tooltip
             :title="projectTooltipTitle(firstProject)"
             class="label deploy-project-label"
           >
@@ -134,7 +133,7 @@ export default {
           </a>
           <a
             v-if="isExpandable"
-            v-tooltip
+            v-gl-tooltip
             :title="restProjectsTooltip"
             class="label deploy-project-label"
             @click="toggleExpanded"
@@ -145,7 +144,7 @@ export default {
             v-for="deployKeysProject in restProjects"
             v-else-if="isExpanded"
             :key="deployKeysProject.project.full_path"
-            v-tooltip
+            v-gl-tooltip
             :href="deployKeysProject.project.full_path"
             :title="projectTooltipTitle(deployKeysProject)"
             class="label deploy-project-label"
@@ -160,7 +159,7 @@ export default {
     <div class="table-section section-15 text-right">
       <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
       <div class="table-mobile-content text-secondary key-created-at">
-        <span v-tooltip :title="tooltipTitle(deployKey.created_at)">
+        <span v-gl-tooltip :title="tooltipTitle(deployKey.created_at)">
           <gl-icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span>
         </span>
       </div>
@@ -172,7 +171,7 @@ export default {
         </action-btn>
         <a
           v-if="deployKey.can_edit"
-          v-tooltip
+          v-gl-tooltip
           :href="editDeployKeyPath"
           :title="__('Edit')"
           class="btn btn-default text-secondary"
@@ -182,7 +181,7 @@ export default {
         </a>
         <action-btn
           v-if="isRemovable"
-          v-tooltip
+          v-gl-tooltip
           :deploy-key="deployKey"
           :title="__('Remove')"
           btn-css-class="btn-danger"
@@ -193,7 +192,7 @@ export default {
         </action-btn>
         <action-btn
           v-else-if="isEnabled"
-          v-tooltip
+          v-gl-tooltip
           :deploy-key="deployKey"
           :title="__('Disable')"
           btn-css-class="btn-warning"

spec/frontend/deploy_keys/components/key_spec.js

@@ -79,7 +79,7 @@ describe('Deploy keys key', () => {
       deployKeysProjects[0] = { ...deployKeysProjects[0], can_push: true };
       createComponent({ deployKey: { ...deployKey, deploy_keys_projects: deployKeysProjects } });
 
-      expect(wrapper.find('.deploy-project-label').attributes('data-original-title')).toBe(
+      expect(wrapper.find('.deploy-project-label').attributes('title')).toBe(
         'Write access allowed',
       );
     });
@@ -88,9 +88,7 @@ describe('Deploy keys key', () => {
       deployKeysProjects[0] = { ...deployKeysProjects[0], can_push: false };
       createComponent({ deployKey: { ...deployKey, deploy_keys_projects: deployKeysProjects } });
 
-      expect(wrapper.find('.deploy-project-label').attributes('data-original-title')).toBe(
-        'Read access only',
-      );
+      expect(wrapper.find('.deploy-project-label').attributes('title')).toBe('Read access only');
     });
 
     it('shows expandable button if more than two projects', () => {
@@ -99,7 +97,7 @@ describe('Deploy keys key', () => {
 
       expect(labels.length).toBe(2);
       expect(labels.at(1).text()).toContain('others');
-      expect(labels.at(1).attributes('data-original-title')).toContain('Expand');
+      expect(labels.at(1).attributes('title')).toContain('Expand');
     });
 
     it('expands all project labels after click', () => {
@@ -115,7 +113,7 @@ describe('Deploy keys key', () => {
 
         expect(labels.length).toBe(length);
         expect(labels.at(1).text()).not.toContain(`+${length} others`);
-        expect(labels.at(1).attributes('data-original-title')).not.toContain('Expand');
+        expect(labels.at(1).attributes('title')).not.toContain('Expand');
       });
     });