Changed all data to come through the JSON script element

[ci skip]

app/assets/javascripts/issue_show/components/app.vue

@@ -32,7 +32,11 @@ export default {
       type: String,
       required: true,
     },
-    initialTitle: {
+    initialTitleHtml: {
+      type: String,
+      required: true,
+    },
+    initialTitleText: {
       type: String,
       required: true,
     },
@@ -78,7 +82,8 @@ export default {
   },
   data() {
     const store = new Store({
-      titleHtml: this.initialTitle,
+      titleHtml: this.initialTitleHtml,
+      titleText: this.initialTitleText,
       descriptionHtml: this.initialDescriptionHtml,
       descriptionText: this.initialDescriptionText,
     });
@@ -107,6 +112,7 @@ export default {
           title: this.state.titleText,
           confidential: this.isConfidential,
           description: this.state.descriptionText,
+          lockedWarningVisible: false,
           move_to_project_id: 0,
         });
       }

app/assets/javascripts/issue_show/index.js

@@ -6,6 +6,7 @@ import '../vue_shared/vue_resource_interceptor';
 document.addEventListener('DOMContentLoaded', () => {
   const initialDataEl = document.getElementById('js-issuable-app-initial-data');
   const initialData = JSON.parse(initialDataEl.innerHTML.replace(/"/g, '"'));
+
   $('.issuable-edit').on('click', (e) => {
     e.preventDefault();
 
@@ -18,38 +19,8 @@ document.addEventListener('DOMContentLoaded', () => {
       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,
-        canDestroy,
-        canMove,
-        endpoint,
-        issuableRef,
-        isConfidential,
-        markdownPreviewUrl,
-        markdownDocs,
-        projectsAutocompleteUrl,
-      } = issuableElement.dataset;
-
       return {
-        canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
-        canDestroy: gl.utils.convertPermissionToBoolean(canDestroy),
-        canMove: gl.utils.convertPermissionToBoolean(canMove),
-        endpoint,
-        issuableRef,
-        initialTitle: issuableTitleElement.innerHTML,
-        initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
-        initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
-        isConfidential: gl.utils.convertPermissionToBoolean(isConfidential),
-        markdownPreviewUrl,
-        markdownDocs,
-        projectPath: initialData.project_path,
-        projectNamespace: initialData.namespace_path,
-        projectsAutocompleteUrl,
-        issuableTemplates: initialData.templates,
+        ...initialData,
       };
     },
     render(createElement) {
@@ -60,7 +31,8 @@ document.addEventListener('DOMContentLoaded', () => {
           canMove: this.canMove,
           endpoint: this.endpoint,
           issuableRef: this.issuableRef,
-          initialTitle: this.initialTitle,
+          initialTitleHtml: this.initialTitleHtml,
+          initialTitleText: this.initialTitleText,
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
           issuableTemplates: this.issuableTemplates,

app/assets/javascripts/issue_show/stores/index.js

@@ -1,12 +1,13 @@
 export default class Store {
   constructor({
     titleHtml,
+    titleText,
     descriptionHtml,
     descriptionText,
   }) {
     this.state = {
       titleHtml,
-      titleText: '',
+      titleText,
       descriptionHtml,
       descriptionText,
       taskStatus: '',

app/helpers/issuables_helper.rb

@@ -201,9 +201,22 @@ module IssuablesHelper
 
   def issuable_initial_data(issuable)
     {
+      endpoint: namespace_project_issue_path(@project.namespace, @project, issuable),
+      canUpdate: can?(current_user, :update_issue, issuable),
+      canDestroy: can?(current_user, :destroy_issue, issuable),
+      canMove: issuable.can_move?(current_user),
+      issuableRef: issuable.to_reference,
+      isConfidential: issuable.confidential,
+      markdownPreviewUrl: preview_markdown_path(@project),
+      markdownDocs: help_page_path('user/markdown'),
+      projectsAutocompleteUrl: autocomplete_projects_path(project_id: @project.id),
       templates: issuable_templates(issuable),
-      project_path: ref_project.path,
-      namespace_path: ref_project.namespace.full_path
+      projectPath: ref_project.path,
+      projectNamespace: ref_project.namespace.full_path,
+      initialTitleHtml: markdown_field(issuable, :title),
+      initialTitleText: issuable.title,
+      initialDescriptionHtml: markdown_field(issuable, :description),
+      initialDescriptionText: issuable.description
     }.to_json
   end
 

app/views/projects/issues/show.html.haml

@@ -52,16 +52,7 @@
 .issue-details.issuable-details
   .detail-page-description.content-block
     %script#js-issuable-app-initial-data{ type: "application/json" }= issuable_initial_data(@issue)
-    #js-issuable-app{ "data" => { "endpoint" => namespace_project_issue_path(@project.namespace, @project, @issue),
-      "can-update" => can?(current_user, :update_issue, @issue).to_s,
-      "can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,
-      "can-move" => @issue.can_move?(current_user).to_s,
-      "issuable-ref" => @issue.to_reference,
-      "is-confidential" => @issue.confidential.to_s,
-      "markdown-preview-url" => preview_markdown_path(@project),
-      "markdown-docs" => help_page_path('user/markdown'),
-      "projects-autocomplete-url" => autocomplete_projects_path(project_id: @project.id),
-    } }
+    #js-issuable-app
       %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?
         .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }