Merge branch '207102-description-diff-delete-button-not-hidden-after-clicked' into 'master'

Resolves "Description diff delete button not hidden after clicked"

See merge request gitlab-org/gitlab!33127

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

@@ -630,6 +630,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,14 +16,17 @@ 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');
 
   const findDescriptionVersion = () => wrapper.find('.description-version');
 
+  const findDeleteDescriptionVersionButton = () =>
+    wrapper.find({ ref: 'deleteDescriptionVersionButton' });
+
   beforeEach(() => {
     props = {
       note: {
@@ -94,22 +97,29 @@ describe('system note component', () => {
       });
   });
 
-  it('click on delete icon button deletes description diff', done => {
-    mockFetchDiff();
-    mockDeleteDiff();
-    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(() => {
+  describe('click on delete icon button', () => {
+    beforeEach(() => {
+      mockFetchDiff();
+      const button = findBlankBtn();
+      button.trigger('click');
+      return waitForPromises();
+    });
+
+    it('does not delete description diff if the delete request fails', () => {
+      mockDeleteDiff(503);
+      findDeleteDescriptionVersionButton().trigger('click');
+      return waitForPromises().then(() => {
+        expect(findDeleteDescriptionVersionButton().exists()).toBe(true);
+      });
+    });
+
+    it('deletes description diff if the delete request succeeds', () => {
+      mockDeleteDiff();
+      findDeleteDescriptionVersionButton().trigger('click');
+      return waitForPromises().then(() => {
+        expect(findDeleteDescriptionVersionButton().exists()).toBe(false);
         expect(findDescriptionVersion().text()).toContain('Deleted');
-        done();
       });
+    });
   });
 });

spec/frontend/notes/stores/actions_spec.js

@@ -1083,4 +1083,62 @@ describe('Actions Notes Store', () => {
       );
     });
   });
+
+  describe('softDeleteDescriptionVersion', () => {
+    const endpoint = '/path/to/diff/1';
+    const payload = {
+      endpoint,
+      startingVersion: undefined,
+      versionId: 1,
+    };
+
+    describe('if response contains no errors', () => {
+      it('dispatches requestDeleteDescriptionVersion', done => {
+        axiosMock.onDelete(endpoint).replyOnce(200);
+        testAction(
+          actions.softDeleteDescriptionVersion,
+          payload,
+          {},
+          [],
+          [
+            {
+              type: 'requestDeleteDescriptionVersion',
+            },
+            {
+              type: 'receiveDeleteDescriptionVersion',
+              payload: payload.versionId,
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('if response contains errors', () => {
+      const errorMessage = 'Request failed with status code 503';
+      it('dispatches receiveDeleteDescriptionVersionError and throws an error', done => {
+        axiosMock.onDelete(endpoint).replyOnce(503);
+        testAction(
+          actions.softDeleteDescriptionVersion,
+          payload,
+          {},
+          [],
+          [
+            {
+              type: 'requestDeleteDescriptionVersion',
+            },
+            {
+              type: 'receiveDeleteDescriptionVersionError',
+              payload: new Error(errorMessage),
+            },
+          ],
+        )
+          .then(() => done.fail('Expected error to be thrown'))
+          .catch(() => {
+            expect(Flash).toHaveBeenCalled();
+            done();
+          });
+      });
+    });
+  });
 });