Merge branch 'issue-edit-inline' into issue-edit-inline-description-template

5 files changed, 75 insertions, 63 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 34171c22c0a..e5dd9a747de 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -7,7 +7,7 @@ import Service from '../services/index';
 import Store from '../stores';
 import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
-import editActions from './edit_actions.vue';
+import formComponent from './form.vue';
 
 export default {
   props: {
@@ -61,14 +61,14 @@ export default {
     };
   },
   computed: {
-    elementType() {
-      return this.showForm ? 'form' : 'div';
+    formState() {
+      return this.store.formState;
     },
   },
   components: {
     descriptionComponent,
     titleComponent,
-    editActions,
+    formComponent,
   },
   methods: {
     openForm() {
@@ -145,23 +145,23 @@ export default {
 </script>
 
 <template>
-  <div :is="elementType">
-    <title-component
-      :store="store"
-      :show-form="showForm"
-      :issuable-ref="issuableRef"
-      :title-html="state.titleHtml"
-      :title-text="state.titleText"
-      :issuable-templates="issuableTemplates" />
-    <description-component
-      v-if="state.descriptionHtml"
-      :can-update="canUpdate"
-      :description-html="state.descriptionHtml"
-      :description-text="state.descriptionText"
-      :updated-at="state.updatedAt"
-      :task-status="state.taskStatus" />
-    <edit-actions
+  <div>
+    <form-component
       v-if="canUpdate && showForm"
+      :form-state="formState"
       :can-destroy="canDestroy" />
+    <div v-else>
+      <title-component
+        :issuable-ref="issuableRef"
+        :title-html="state.titleHtml"
+        :title-text="state.titleText" />
+      <description-component
+        v-if="state.descriptionHtml"
+        :can-update="canUpdate"
+        :description-html="state.descriptionHtml"
+        :description-text="state.descriptionText"
+        :updated-at="state.updatedAt"
+        :task-status="state.taskStatus" />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index 41accdec37f..f55a7c34f4e 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -3,7 +3,7 @@
 
   export default {
     props: {
-      store: {
+      formState: {
         type: Object,
         required: true,
       },
@@ -13,11 +13,6 @@
         default: () => [],
       },
     },
-    data() {
-      return {
-        state: this.store.formState,
-      };
-    },
     components: {
       descriptionTemplate,
     },
@@ -42,7 +37,7 @@
         type="text"
         placeholder="Issue title"
         aria-label="Issue title"
-        v-model="state.title" />
+        v-model="formState.title" />
     </div>
   </fieldset>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
new file mode 100644
index 00000000000..f7461c8d05b
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -0,0 +1,41 @@
+<script>
+  import titleField from './fields/title.vue';
+  import editActions from './edit_actions.vue';
+
+  export default {
+    props: {
+      canDestroy: {
+        type: Boolean,
+        required: true,
+      },
+      formState: {
+        type: Object,
+        required: true,
+      },
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+    components: {
+      titleField,
+      editActions,
+    },
+    issuableTemplates: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  };
+</script>
+
+<template>
+  <form>
+    <title-field
+      :form-state="formState"
+      :issuable-templates="issuableTemplates" />
+    <edit-actions
+      :can-destroy="canDestroy" />
+  </form>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index 18e8d6b696d..a9dabd4cff1 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -1,12 +1,8 @@
 <script>
   import animateMixin from '../mixins/animate';
-  import titleField from './fields/title.vue';
 
   export default {
     mixins: [animateMixin],
-    components: {
-      titleField,
-    },
     data() {
       return {
         preAnimation: false,
@@ -27,19 +23,6 @@
         type: String,
         required: true,
       },
-      store: {
-        type: Object,
-        required: true,
-      },
-      showForm: {
-        type: Boolean,
-        required: true,
-      },
-      issuableTemplates: {
-        type: Array,
-        required: true,
-        default: () => [],
-      },
     },
     watch: {
       titleHtml() {
@@ -58,20 +41,13 @@
 </script>
 
 <template>
-  <div>
-    <title-field
-      v-if="showForm"
-      :store="store"
-      :issuable-templates="issuableTemplates" />
-    <h2
-      v-else
-      class="title"
-      :class="{
-        'issue-realtime-pre-pulse': preAnimation,
-        'issue-realtime-trigger-pulse': pulseAnimation
-      }"
-      v-html="titleHtml"
-    >
-    </h2>
-  </div>
+  <h2
+    class="title"
+    :class="{
+      'issue-realtime-pre-pulse': preAnimation,
+      'issue-realtime-trigger-pulse': pulseAnimation
+    }"
+    v-html="titleHtml"
+  >
+  </h2>
 </template>
diff --git a/app/assets/javascripts/issue_show/services/index.js b/app/assets/javascripts/issue_show/services/index.js
index 5da15882c25..0ceff34cf8b 100644
--- a/app/assets/javascripts/issue_show/services/index.js
+++ b/app/assets/javascripts/issue_show/services/index.js
@@ -8,15 +8,15 @@ export default class Service {
     this.endpoint = endpoint;
 
     this.resource = Vue.resource(this.endpoint, {}, {
-      rendered_title: {
+      realtimeChanges: {
         method: 'GET',
-        url: `${this.endpoint}/rendered_title`,
+        url: `${this.endpoint}/realtime_changes`,
       },
     });
   }
 
   getData() {
-    return this.resource.rendered_title();
+    return this.resource.realtimeChanges();
   }
 
   deleteIssuable() {