Add latest changes from gitlab-org/gitlab@13-4-stable-ee

1 files changed, 12 insertions, 18 deletions

diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index 1e1dce5f4fc..b03a91716fe 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -1,12 +1,15 @@
 <script>
+import { GlButton, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import animateMixin from '../mixins/animate';
 import eventHub from '../event_hub';
-import tooltip from '../../vue_shared/directives/tooltip';
-import { spriteIcon } from '../../lib/utils/common_utils';
 
 export default {
+  components: {
+    GlButton,
+  },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
+    SafeHtml,
   },
   mixins: [animateMixin],
   props: {
@@ -40,11 +43,6 @@ export default {
       titleEl: document.querySelector('title'),
     };
   },
-  computed: {
-    pencilIcon() {
-      return spriteIcon('pencil', 'link-highlight');
-    },
-  },
   watch: {
     titleHtml() {
       this.setPageTitle();
@@ -67,25 +65,21 @@ export default {
 <template>
   <div class="title-container">
     <h2
+      v-safe-html="titleHtml"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation,
       }"
       class="title qa-title"
       dir="auto"
-      v-html="titleHtml"
     ></h2>
-    <button
+    <gl-button
       v-if="showInlineEditButton && canUpdate"
-      v-tooltip
-      type="button"
-      class="btn btn-default btn-edit btn-svg js-issuable-edit
-      qa-edit-button"
+      v-gl-tooltip.bottom
+      icon="pencil"
+      class="btn-edit js-issuable-edit qa-edit-button"
       title="Edit title and description"
-      data-placement="bottom"
-      data-container="body"
       @click="edit"
-      v-html="pencilIcon"
-    ></button>
+    />
   </div>
 </template>