Show warning if realtime data has changed since the form has opened

4 files changed, 50 insertions, 3 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 47d9a27e99e..3d5b0cb18f8 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -81,11 +81,11 @@ export default {
     openForm() {
       if (!this.showForm) {
         this.showForm = true;
-        this.store.formState = {
+        this.store.formState = Object.assign(this.store.formState, {
           title: this.state.titleText,
           confidential: this.isConfidential,
           description: this.state.descriptionText,
-        };
+        });
       }
     },
     closeForm() {
@@ -128,7 +128,14 @@ export default {
       resource: this.service,
       method: 'getData',
       successCallback: (res) => {
-        this.store.updateState(res.json());
+        const data = res.json();
+        const shouldUpdate = this.store.stateShouldUpdate(data);
+
+        this.store.updateState(data);
+
+        if (this.showForm && (shouldUpdate.title || shouldUpdate.description)) {
+          this.store.formState.lockedWarningVisible = true;
+        }
       },
       errorCallback(err) {
         throw new Error(err);
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 4288c5f8d90..e53860a77af 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -1,4 +1,6 @@
 <script>
+  import eventHub from '../event_hub';
+  import lockedWarning from './locked_warning.vue';
   import titleField from './fields/title.vue';
   import descriptionField from './fields/description.vue';
   import editActions from './edit_actions.vue';
@@ -24,16 +26,26 @@
       },
     },
     components: {
+      lockedWarning,
       titleField,
       descriptionField,
       editActions,
       confidentialCheckbox,
     },
+    methods: {
+      closeForm() {
+        eventHub.$emit('close.form');
+        this.formState.lockedWarningVisible = false;
+      },
+    },
   };
 </script>
 
 <template>
   <form>
+    <locked-warning
+      v-if="formState.lockedWarningVisible"
+      @closeForm="closeForm" />
     <title-field
       :form-state="formState" />
     <confidential-checkbox
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
new file mode 100644
index 00000000000..b9960b4e5f2
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -0,0 +1,20 @@
+<script>
+  export default {
+    methods: {
+      closeForm() {
+        this.$emit('closeForm');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="alert alert-danger">
+    Someone edited the issue the same time you did. Please check out
+    <a
+      href="#"
+      role="button"
+      @click.prevent="closeForm">the issue</a>
+    and make sure your changes will not unintentionally remove theirs.
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index d90716bef80..2afa5b18726 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -16,6 +16,7 @@ export default class Store {
       title: '',
       confidential: false,
       description: '',
+      lockedWarningVisible: false,
     };
   }
 
@@ -27,4 +28,11 @@ export default class Store {
     this.state.taskStatus = data.task_status;
     this.state.updatedAt = data.updated_at;
   }
+
+  stateShouldUpdate(data) {
+    return {
+      title: this.state.titleText !== data.title_text,
+      description: this.state.descriptionText !== data.description_text,
+    };
+  }
 }