From 14073d1b622d9220eb99a2ab2b13a12fbccb4a75 Mon Sep 17 00:00:00 2001
From: Martin Hanzel <mhanzel@gitlab.com>
Date: Wed, 26 Jun 2019 15:04:59 +0200
Subject: Change a tooltip to gl-tooltip

---
 .../components/issue/related_issuable_item.vue     | 53 +++++++++++++---------
 .../components/issue/related_issuable_item_spec.js |  2 +-
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
index 225ee88589c..eb0f666422f 100644
--- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
@@ -1,6 +1,6 @@
 <script>
 import '~/commons/bootstrap';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltip, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf } from '~/locale';
 import IssueMilestone from '../../components/issue/issue_milestone.vue';
 import IssueAssignees from '../../components/issue/issue_assignees.vue';
@@ -13,6 +13,7 @@ export default {
     IssueMilestone,
     IssueAssignees,
     CiIcon,
+    GlTooltip,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -58,16 +59,20 @@ export default {
     <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
       <!-- Title area: Status icon (XL) and title -->
       <div class="item-title d-flex align-items-center mb-xl-0">
-        <icon
-          v-if="hasState"
-          v-tooltip
-          :css-classes="iconClass"
-          :name="iconName"
-          :size="16"
-          :title="stateTitle"
-          :aria-label="state"
-          data-html="true"
-        />
+        <span ref="iconElementXL">
+          <icon
+            v-if="hasState"
+            ref="iconElementXL"
+            :css-classes="iconClass"
+            :name="iconName"
+            :size="16"
+            :title="stateTitle"
+            :aria-label="state"
+          />
+        </span>
+        <gl-tooltip :target="() => $refs.iconElementXL">
+          <span v-html="stateTitle"></span>
+        </gl-tooltip>
         <icon
           v-if="confidential"
           v-gl-tooltip
@@ -92,16 +97,20 @@ export default {
           <div
             class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
           >
-            <icon
-              v-if="hasState"
-              v-tooltip
-              :css-classes="iconClass"
-              :name="iconName"
-              :title="stateTitle"
-              :aria-label="state"
-              data-html="true"
-              class="d-xl-none"
-            />
+            <span ref="iconElement">
+              <icon
+                v-if="hasState"
+                :css-classes="iconClass"
+                :name="iconName"
+                :title="stateTitle"
+                :aria-label="state"
+                data-html="true"
+                class="d-xl-none"
+              />
+            </span>
+            <gl-tooltip :target="() => this.$refs.iconElement">
+              <span v-html="stateTitle"></span>
+            </gl-tooltip>
             <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
               itemPath
             }}</span>
@@ -147,7 +156,7 @@ export default {
     <button
       v-if="canRemove"
       ref="removeButton"
-      v-tooltip
+      v-gl-tooltip
       :disabled="removeDisabled"
       type="button"
       class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button mr-xl-0 align-self-xl-center"
diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
index e6e6d943a76..b85e2673624 100644
--- a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
+++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
@@ -88,7 +88,7 @@ describe('RelatedIssuableItem', () => {
     });
 
     it('renders state title', () => {
-      const stateTitle = tokenState.attributes('data-original-title');
+      const stateTitle = tokenState.attributes('title');
       const formatedCreateDate = formatDate(props.createdAt);
 
       expect(stateTitle).toContain('<span class="bold">Opened</span>');
-- 
cgit v1.2.1