Commit b215d66a authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera

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
parents d58e8168 607f1b01
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
export default { export default {
computed: { computed: {
canSeeDescriptionVersion() {}, canSeeDescriptionVersion() {},
canDeleteDescriptionVersion() {}, displayDeleteButton() {},
shouldShowDescriptionVersion() {}, shouldShowDescriptionVersion() {},
descriptionVersionToggleIcon() {}, descriptionVersionToggleIcon() {},
}, },
......
...@@ -630,6 +630,10 @@ export const softDeleteDescriptionVersion = ( ...@@ -630,6 +630,10 @@ export const softDeleteDescriptionVersion = (
.catch(error => { .catch(error => {
dispatch('receiveDeleteDescriptionVersionError', error); dispatch('receiveDeleteDescriptionVersionError', error);
Flash(__('Something went wrong while deleting description changes. Please try again.')); 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();
}); });
}; };
......
...@@ -132,7 +132,7 @@ export default { ...@@ -132,7 +132,7 @@ export default {
</pre> </pre>
<pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre> <pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre>
<gl-deprecated-button <gl-deprecated-button
v-if="canDeleteDescriptionVersion" v-if="displayDeleteButton"
ref="deleteDescriptionVersionButton" ref="deleteDescriptionVersionButton"
v-gl-tooltip v-gl-tooltip
:title="__('Remove description history')" :title="__('Remove description history')"
......
...@@ -2,6 +2,7 @@ export default { ...@@ -2,6 +2,7 @@ export default {
data() { data() {
return { return {
isDescriptionVersionExpanded: false, isDescriptionVersionExpanded: false,
deleteInProgress: false,
}; };
}, },
computed: { computed: {
...@@ -12,8 +13,12 @@ export default { ...@@ -12,8 +13,12 @@ export default {
!this.note.description_version_deleted, !this.note.description_version_deleted,
); );
}, },
canDeleteDescriptionVersion() { displayDeleteButton() {
return this.note.can_delete_description_version; return (
this.note.can_delete_description_version &&
!this.deleteInProgress &&
!this.note.description_version_deleted
);
}, },
shouldShowDescriptionVersion() { shouldShowDescriptionVersion() {
return this.canSeeDescriptionVersion && this.isDescriptionVersionExpanded; return this.canSeeDescriptionVersion && this.isDescriptionVersionExpanded;
...@@ -40,8 +45,12 @@ export default { ...@@ -40,8 +45,12 @@ export default {
const endpoint = this.note.delete_description_version_path; const endpoint = this.note.delete_description_version_path;
const startingVersion = this.note.start_description_version_id; const startingVersion = this.note.start_description_version_id;
const versionId = this.note.description_version_id; const versionId = this.note.description_version_id;
this.deleteInProgress = true;
return this.softDeleteDescriptionVersion({ endpoint, startingVersion, versionId }); return this.softDeleteDescriptionVersion({ endpoint, startingVersion, versionId }).catch(
() => {
this.deleteInProgress = false;
},
);
}, },
}, },
}; };
---
title: Fix description diff delete button not hidden after clicked
merge_request: 33127
author:
type: fixed
...@@ -16,14 +16,17 @@ describe('system note component', () => { ...@@ -16,14 +16,17 @@ describe('system note component', () => {
mock.onGet('/path/to/diff').replyOnce(200, diffData); mock.onGet('/path/to/diff').replyOnce(200, diffData);
} }
function mockDeleteDiff() { function mockDeleteDiff(statusCode = 200) {
mock.onDelete('/path/to/diff/1').replyOnce(200); mock.onDelete('/path/to/diff/1').replyOnce(statusCode);
} }
const findBlankBtn = () => wrapper.find('.note-headline-light .btn-blank'); const findBlankBtn = () => wrapper.find('.note-headline-light .btn-blank');
const findDescriptionVersion = () => wrapper.find('.description-version'); const findDescriptionVersion = () => wrapper.find('.description-version');
const findDeleteDescriptionVersionButton = () =>
wrapper.find({ ref: 'deleteDescriptionVersionButton' });
beforeEach(() => { beforeEach(() => {
props = { props = {
note: { note: {
...@@ -94,22 +97,29 @@ describe('system note component', () => { ...@@ -94,22 +97,29 @@ describe('system note component', () => {
}); });
}); });
it('click on delete icon button deletes description diff', done => { describe('click on delete icon button', () => {
mockFetchDiff(); beforeEach(() => {
mockDeleteDiff(); mockFetchDiff();
const button = findBlankBtn(); const button = findBlankBtn();
button.trigger('click'); button.trigger('click');
return wrapper.vm return waitForPromises();
.$nextTick() });
.then(() => waitForPromises())
.then(() => { it('does not delete description diff if the delete request fails', () => {
const deleteButton = wrapper.find({ ref: 'deleteDescriptionVersionButton' }); mockDeleteDiff(503);
deleteButton.trigger('click'); findDeleteDescriptionVersionButton().trigger('click');
}) return waitForPromises().then(() => {
.then(() => waitForPromises()) expect(findDeleteDescriptionVersionButton().exists()).toBe(true);
.then(() => { });
});
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'); expect(findDescriptionVersion().text()).toContain('Deleted');
done();
}); });
});
}); });
}); });
...@@ -1083,4 +1083,62 @@ describe('Actions Notes Store', () => { ...@@ -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();
});
});
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment