1 files changed, 44 insertions, 37 deletions

diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index f06e33dee60..faf79471946 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -1,42 +1,49 @@
 import Vue from 'vue';
+import eventHub from './event_hub';
 import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-document.addEventListener('DOMContentLoaded', () => new Vue({
-  el: document.getElementById('js-issuable-app'),
-  components: {
-    issuableApp,
-  },
-  data() {
-    const issuableElement = this.$options.el;
-    const issuableTitleElement = issuableElement.querySelector('.title');
-    const issuableDescriptionElement = issuableElement.querySelector('.wiki');
-    const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
-    const {
-      canUpdate,
-      endpoint,
-      issuableRef,
-    } = issuableElement.dataset;
+document.addEventListener('DOMContentLoaded', () => {
+  const initialDataEl = document.getElementById('js-issuable-app-initial-data');
+  const initialData = JSON.parse(initialDataEl.innerHTML.replace(/"/g, '"'));
 
-    return {
-      canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
-      endpoint,
-      issuableRef,
-      initialTitle: issuableTitleElement.innerHTML,
-      initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
-      initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
-    };
-  },
-  render(createElement) {
-    return createElement('issuable-app', {
-      props: {
-        canUpdate: this.canUpdate,
-        endpoint: this.endpoint,
-        issuableRef: this.issuableRef,
-        initialTitle: this.initialTitle,
-        initialDescriptionHtml: this.initialDescriptionHtml,
-        initialDescriptionText: this.initialDescriptionText,
-      },
-    });
-  },
-}));
+  $('.issuable-edit').on('click', (e) => {
+    e.preventDefault();
+
+    eventHub.$emit('open.form');
+  });
+
+  return new Vue({
+    el: document.getElementById('js-issuable-app'),
+    components: {
+      issuableApp,
+    },
+    data() {
+      return {
+        ...initialData,
+      };
+    },
+    render(createElement) {
+      return createElement('issuable-app', {
+        props: {
+          canUpdate: this.canUpdate,
+          canDestroy: this.canDestroy,
+          canMove: this.canMove,
+          endpoint: this.endpoint,
+          issuableRef: this.issuableRef,
+          initialTitleHtml: this.initialTitleHtml,
+          initialTitleText: this.initialTitleText,
+          initialDescriptionHtml: this.initialDescriptionHtml,
+          initialDescriptionText: this.initialDescriptionText,
+          issuableTemplates: this.issuableTemplates,
+          isConfidential: this.isConfidential,
+          markdownPreviewUrl: this.markdownPreviewUrl,
+          markdownDocs: this.markdownDocs,
+          projectPath: this.projectPath,
+          projectNamespace: this.projectNamespace,
+          projectsAutocompleteUrl: this.projectsAutocompleteUrl,
+        },
+      });
+    },
+  });
+});