deleting legacy notes cancels Edit mode

4 files changed, 68 insertions, 2 deletions

diff --git a/app/assets/javascripts/notes/components/note_attachment.vue b/app/assets/javascripts/notes/components/note_attachment.vue
index 618b807b9cc..f057ad22ea1 100644
--- a/app/assets/javascripts/notes/components/note_attachment.vue
+++ b/app/assets/javascripts/notes/components/note_attachment.vue
@@ -1,12 +1,48 @@
 <script>
+  import axios from '~/lib/utils/axios_utils';
+  import Modal from '~/vue_shared/components/modal.vue';
+
   export default {
     name: 'NoteAttachment',
+    components: {
+      Modal,
+    },
     props: {
       attachment: {
         type: Object,
         required: true,
       },
+      deleteAttachmentPath: {
+        type: String,
+        required: true,
+      },
     },
+    data() {
+      return {
+        showModal: false,
+        loading: false,
+      };
+    },
+    methods: {
+      removeAttachment() {
+        this.loading = true;
+
+        axios({
+          url: this.deleteAttachmentPath,
+          method: 'delete',
+        })
+          .then((res) => {
+            this.showModal = false;
+            this.loading = false;
+            this.$emit('disableEditing');
+          })
+          .catch((err) => {
+            this.loading = false;
+            throw err;
+          });
+
+      }
+    }
   };
 </script>
 
@@ -34,6 +70,23 @@
         </i>
         {{ attachment.filename }}
       </a>
+      <button
+        type="button"
+        class="btn btn-transparent"
+        title="Delete this attachment"
+        @click.prevent="showModal = true"
+      >
+        <i class="fa fa-trash-o cred" />
+      </button>
+      <modal
+        v-if="showModal"
+        kind="danger"
+        text="Are you sure you want to remove the attachment?"
+        primary-button-label="Remove attachment"
+        :submitDisabled="loading"
+        @submit="removeAttachment"
+        @cancel="showModal = false"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index ca12df9db64..0732f7c07fb 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -40,6 +40,8 @@
       this.renderGFM();
       this.initTaskList();
 
+      console.error(this.note)
+
       if (this.isEditing) {
         this.initAutoSave(this.note.noteable_type);
       }
@@ -75,6 +77,9 @@
       formCancelHandler(shouldConfirm, isDirty) {
         this.$emit('cancelFormEdition', shouldConfirm, isDirty);
       },
+      disableEditing() {
+        this.$emit('disableEditing');
+      },
     },
   };
 </script>
@@ -117,6 +122,8 @@
     <note-attachment
       v-if="note.attachment"
       :attachment="note.attachment"
+      :delete-attachment-path="note.delete_attachment_path"
+      @disableEditing="disableEditing"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 4d17bd5acc2..cba13d76766 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -78,6 +78,9 @@
       editHandler() {
         this.isEditing = true;
       },
+      disableEditing() {
+        this.isEditing = false;
+      },
       deleteHandler() {
         // eslint-disable-next-line no-alert
         if (confirm('Are you sure you want to delete this comment?')) {
@@ -194,6 +197,7 @@
           :is-editing="isEditing"
           @handleFormUpdate="formUpdateHandler"
           @cancelFormEdition="formCancelHandler"
+          @disableEditing="disableEditing"
           ref="noteBody"
         />
       </div>
diff --git a/spec/features/merge_request/user_posts_notes_spec.rb b/spec/features/merge_request/user_posts_notes_spec.rb
index b54addce993..a4867313a5c 100644
--- a/spec/features/merge_request/user_posts_notes_spec.rb
+++ b/spec/features/merge_request/user_posts_notes_spec.rb
@@ -153,12 +153,14 @@ describe 'Merge request > User posts notes', :js do
 
       it 'shows the delete link' do
         page.within('.note-attachment') do
-          is_expected.to have_css('.js-note-attachment-delete')
+          is_expected.to have_css('button[title="Delete this attachment"]')
         end
       end
 
       it 'removes the attachment div and resets the edit form' do
-        accept_confirm { find('.js-note-attachment-delete').click }
+        find('button[title="Delete this attachment"]').click
+        click_button('Remove attachment')
+
         is_expected.not_to have_css('.note-attachment')
         is_expected.not_to have_css('.current-note-edit-form')
         wait_for_requests