1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
new file mode 100644
index 00000000000..a9dabd4cff1
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -0,0 +1,53 @@
+<script>
+  import animateMixin from '../mixins/animate';
+
+  export default {
+    mixins: [animateMixin],
+    data() {
+      return {
+        preAnimation: false,
+        pulseAnimation: false,
+        titleEl: document.querySelector('title'),
+      };
+    },
+    props: {
+      issuableRef: {
+        type: String,
+        required: true,
+      },
+      titleHtml: {
+        type: String,
+        required: true,
+      },
+      titleText: {
+        type: String,
+        required: true,
+      },
+    },
+    watch: {
+      titleHtml() {
+        this.setPageTitle();
+        this.animateChange();
+      },
+    },
+    methods: {
+      setPageTitle() {
+        const currentPageTitleScope = this.titleEl.innerText.split('·');
+        currentPageTitleScope[0] = `${this.titleText} (${this.issuableRef}) `;
+        this.titleEl.textContent = currentPageTitleScope.join('·');
+      },
+    },
+  };
+</script>
+
+<template>
+  <h2
+    class="title"
+    :class="{
+      'issue-realtime-pre-pulse': preAnimation,
+      'issue-realtime-trigger-pulse': pulseAnimation
+    }"
+    v-html="titleHtml"
+  >
+  </h2>
+</template>