From 8918433af66b77ab101bd5ba3b4a3c716be0f864 Mon Sep 17 00:00:00 2001
From: Regis Boudinot <boudinot.regis@yahoo.com>
Date: Sat, 15 Apr 2017 15:11:04 +0000
Subject: [PATCH] Issue Title Vue: convert to .vue - use 'render' with
 'createElement' in index

---
 app/assets/javascripts/issue_show/index.js    | 36 ++++++++-----------
 .../{issue_title.js => issue_title.vue}       |  9 +++--
 app/views/projects/issues/show.html.haml      |  1 +
 config/webpack.config.js                      |  1 +
 .../issue_show/issue_title_spec.js            |  2 +-
 5 files changed, 24 insertions(+), 25 deletions(-)
 rename app/assets/javascripts/issue_show/{issue_title.js => issue_title.vue} (95%)

diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index b6ce8e83729..4d491e70d83 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,26 +1,20 @@
 import Vue from 'vue';
-import IssueTitle from './issue_title';
+import IssueTitle from './issue_title.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-const vueOptions = () => ({
-  el: '.issue-title-entrypoint',
-  components: {
-    IssueTitle,
-  },
-  data() {
-    const issueTitleData = document.querySelector('.issue-title-data').dataset;
+(() => {
+  const issueTitleData = document.querySelector('.issue-title-data').dataset;
+  const { initialTitle, endpoint } = issueTitleData;
 
-    return {
-      initialTitle: issueTitleData.initialTitle,
-      endpoint: issueTitleData.endpoint,
-    };
-  },
-  template: `
-    <IssueTitle
-      :initialTitle="initialTitle"
-      :endpoint="endpoint"
-    />
-  `,
-});
+  const vm = new Vue({
+    el: '.issue-title-entrypoint',
+    render: createElement => createElement(IssueTitle, {
+      props: {
+        initialTitle,
+        endpoint,
+      },
+    }),
+  });
 
-(() => new Vue(vueOptions()))();
+  return vm;
+})();
diff --git a/app/assets/javascripts/issue_show/issue_title.js b/app/assets/javascripts/issue_show/issue_title.vue
similarity index 95%
rename from app/assets/javascripts/issue_show/issue_title.js
rename to app/assets/javascripts/issue_show/issue_title.vue
index 1184c8956dc..ba54178a310 100644
--- a/app/assets/javascripts/issue_show/issue_title.js
+++ b/app/assets/javascripts/issue_show/issue_title.vue
@@ -1,3 +1,4 @@
+<script>
 import Visibility from 'visibilityjs';
 import Poll from './../lib/utils/poll';
 import Service from './services/index';
@@ -72,7 +73,9 @@ export default {
   created() {
     this.fetch();
   },
-  template: `
-    <h2 class='title' v-html='title'></h2>
-  `,
 };
+</script>
+
+<template>
+  <h2 class="title" v-html="title"></h2>
+</template>
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 885795ccb5c..fcbd8829595 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -79,4 +79,5 @@
 
 = render 'shared/issuable/sidebar', issuable: @issue
 
+= page_specific_javascript_bundle_tag('common_vue')
 = page_specific_javascript_bundle_tag('issue_show')
diff --git a/config/webpack.config.js b/config/webpack.config.js
index ffb16190093..64a04dc342e 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -125,6 +125,7 @@ var config = {
         'notebook_viewer',
         'pdf_viewer',
         'vue_pipelines',
+        'issue_show',
       ],
       minChunks: function(module, count) {
         return module.resource && (/vue_shared/).test(module.resource);
diff --git a/spec/javascripts/issue_show/issue_title_spec.js b/spec/javascripts/issue_show/issue_title_spec.js
index 806d728a874..03edbf9f947 100644
--- a/spec/javascripts/issue_show/issue_title_spec.js
+++ b/spec/javascripts/issue_show/issue_title_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import issueTitle from '~/issue_show/issue_title';
+import issueTitle from '~/issue_show/issue_title.vue';
 
 describe('Issue Title', () => {
   let IssueTitleComponent;