Make delete button conditionally appear

Add test for delete button

Make a direct initialization

Add local state/computed property

Synchronize CE counterpart

Handle unsuccessful DELETE request

app/assets/javascripts/notes/mixins/description_version_history.js

@@ -3,7 +3,7 @@
 export default {
   computed: {
     canSeeDescriptionVersion() {},
-    canDeleteDescriptionVersion() {},
+    displayDeleteButton() {},
     shouldShowDescriptionVersion() {},
     descriptionVersionToggleIcon() {},
   },

app/assets/javascripts/notes/stores/actions.js

@@ -587,6 +587,10 @@ export const softDeleteDescriptionVersion = (
     .catch(error => {
       dispatch('receiveDeleteDescriptionVersionError', error);
       Flash(__('Something went wrong while deleting description changes. Please try again.'));
+
+      // Throw an error here because a component like SystemNote -
+      //  needs to know if the request failed to reset its internal state.
+      throw new Error();
     });
 };
 

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -132,7 +132,7 @@ export default {
           </pre>
           <pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre>
           <gl-deprecated-button
-            v-if="canDeleteDescriptionVersion"
+            v-if="displayDeleteButton"
             ref="deleteDescriptionVersionButton"
             v-gl-tooltip
             :title="__('Remove description history')"

ee/app/assets/javascripts/notes/mixins/description_version_history.js

@@ -2,6 +2,7 @@ export default {
   data() {
     return {
       isDescriptionVersionExpanded: false,
+      deleteInProgress: false,
     };
   },
   computed: {
@@ -12,8 +13,12 @@ export default {
           !this.note.description_version_deleted,
       );
     },
-    canDeleteDescriptionVersion() {
-      return this.note.can_delete_description_version;
+    displayDeleteButton() {
+      return (
+        this.note.can_delete_description_version &&
+        !this.deleteInProgress &&
+        !this.note.description_version_deleted
+      );
     },
     shouldShowDescriptionVersion() {
       return this.canSeeDescriptionVersion && this.isDescriptionVersionExpanded;
@@ -40,8 +45,12 @@ export default {
       const endpoint = this.note.delete_description_version_path;
       const startingVersion = this.note.start_description_version_id;
       const versionId = this.note.description_version_id;
-
-      return this.softDeleteDescriptionVersion({ endpoint, startingVersion, versionId });
+      this.deleteInProgress = true;
+      return this.softDeleteDescriptionVersion({ endpoint, startingVersion, versionId }).catch(
+        () => {
+          this.deleteInProgress = false;
+        },
+      );
     },
   },
 };

ee/changelogs/unreleased/207102-description-diff-delete-button-not-hidden-after-clicked.yml

+---
+title: Fix description diff delete button not hidden after clicked
+merge_request: 33127
+author:
+type: fixed

ee/spec/frontend/vue_shared/components/notes/system_note_spec.js

@@ -16,8 +16,8 @@ describe('system note component', () => {
     mock.onGet('/path/to/diff').replyOnce(200, diffData);
   }
 
-  function mockDeleteDiff() {
-    mock.onDelete('/path/to/diff/1').replyOnce(200);
+  function mockDeleteDiff(statusCode = 200) {
+    mock.onDelete('/path/to/diff/1').replyOnce(statusCode);
   }
 
   const findBlankBtn = () => wrapper.find('.note-headline-light .btn-blank');
@@ -108,8 +108,30 @@ describe('system note component', () => {
       })
       .then(() => waitForPromises())
       .then(() => {
+        const deleteButton = wrapper.find({ ref: 'deleteDescriptionVersionButton' });
+        expect(deleteButton.exists()).toBe(false);
         expect(findDescriptionVersion().text()).toContain('Deleted');
         done();
       });
   });
+
+  it('click on delete icon button does not delete description diff if the delete request fails', done => {
+    mockFetchDiff();
+    mockDeleteDiff(503);
+    const button = findBlankBtn();
+    button.trigger('click');
+    return wrapper.vm
+      .$nextTick()
+      .then(() => waitForPromises())
+      .then(() => {
+        const deleteButton = wrapper.find({ ref: 'deleteDescriptionVersionButton' });
+        deleteButton.trigger('click');
+      })
+      .then(() => waitForPromises())
+      .then(() => {
+        const deleteButton = wrapper.find({ ref: 'deleteDescriptionVersionButton' });
+        expect(deleteButton.exists()).toBe(true);
+        done();
+      });
+  });
 });