:sparkles: use pre-existing components for title and descriptionide-merge-request-info

2 files changed, 70 insertions, 70 deletions

diff --git a/app/assets/javascripts/ide/components/merge_requests/info.vue b/app/assets/javascripts/ide/components/merge_requests/info.vue
index 398d324f19f..62cfa4f9af5 100644
--- a/app/assets/javascripts/ide/components/merge_requests/info.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/info.vue
@@ -3,6 +3,8 @@ import { mapGetters } from 'vuex';
 import Icon from '../../../vue_shared/components/icon.vue';
 import timeago from '../../../vue_shared/mixins/timeago';
 import tooltip from '../../../vue_shared/directives/tooltip';
+import TitleComponent from '../../../issue_show/components/title.vue';
+import DescriptionComponent from '../../../issue_show/components/description.vue';
 
 const states = {
   open: 'open',
@@ -15,6 +17,8 @@ export default {
   },
   components: {
     Icon,
+    TitleComponent,
+    DescriptionComponent,
   },
   mixins: [timeago],
   computed: {
@@ -72,20 +76,16 @@ export default {
         </div>
       </div>
     </div>
-    <div class="detail-page-description">
-      <h2 class="title">
-        {{ currentMergeRequest.title }}
-      </h2>
-      <div
-        v-if="currentMergeRequest.description"
-        class="description"
-      >
-        <div class="wiki">
-          <p dir="auto">
-            {{ currentMergeRequest.description }}
-          </p>
-        </div>
-      </div>
+    <div class="issuable-details">
+      <title-component
+        :issuable-ref="currentMergeRequest.iid"
+        :title-html="currentMergeRequest.title"
+        :title-text="currentMergeRequest.title"
+      />
+      <description-component
+        :description-html="currentMergeRequest.description"
+        :description-text="currentMergeRequest.description"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index 12101c0daa5..b5e8e0ea44b 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -1,67 +1,67 @@
 <script>
-  import animateMixin from '../mixins/animate';
-  import eventHub from '../event_hub';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import { spriteIcon } from '../../lib/utils/common_utils';
+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 {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  mixins: [animateMixin],
+  props: {
+    issuableRef: {
+      type: [String, Number],
+      required: true,
     },
-    mixins: [animateMixin],
-    props: {
-      issuableRef: {
-        type: String,
-        required: true,
-      },
-      canUpdate: {
-        required: false,
-        type: Boolean,
-        default: false,
-      },
-      titleHtml: {
-        type: String,
-        required: true,
-      },
-      titleText: {
-        type: String,
-        required: true,
-      },
-      showInlineEditButton: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    canUpdate: {
+      required: false,
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        preAnimation: false,
-        pulseAnimation: false,
-        titleEl: document.querySelector('title'),
-      };
+    titleHtml: {
+      type: String,
+      required: true,
     },
-    computed: {
-      pencilIcon() {
-        return spriteIcon('pencil', 'link-highlight');
-      },
+    titleText: {
+      type: String,
+      required: true,
     },
-    watch: {
-      titleHtml() {
-        this.setPageTitle();
-        this.animateChange();
-      },
+    showInlineEditButton: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    methods: {
-      setPageTitle() {
-        const currentPageTitleScope = this.titleEl.innerText.split('·');
-        currentPageTitleScope[0] = `${this.titleText} (${this.issuableRef}) `;
-        this.titleEl.textContent = currentPageTitleScope.join('·');
-      },
-      edit() {
-        eventHub.$emit('open.form');
-      },
+  },
+  data() {
+    return {
+      preAnimation: false,
+      pulseAnimation: false,
+      titleEl: document.querySelector('title'),
+    };
+  },
+  computed: {
+    pencilIcon() {
+      return spriteIcon('pencil', 'link-highlight');
     },
-  };
+  },
+  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('·');
+    },
+    edit() {
+      eventHub.$emit('open.form');
+    },
+  },
+};
 </script>
 
 <template>