Add Unsaved to header if save draft request fails
Currently if users try to save a draft and the request fail, we show
a toast saying the request failed, but the draft itself looks exactly
the same as if it the request succeeded.
We now add an Unsaved header to the comment to show the draft save
request was not successful.
Screenshots: https://imgur.com/a/slLRdVA
Change-Id: I9558e07483093c5560a037aea04d3d4ccaff0b36
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
index 4026fa3..a1334a7 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
@@ -46,6 +46,7 @@
const DRAFT_SINGULAR = 'draft...';
const DRAFT_PLURAL = 'drafts...';
const SAVED_MESSAGE = 'All changes saved';
+const UNSAVED_MESSAGE = 'Unable to save draft';
const REPORT_CREATE_DRAFT = 'CreateDraftComment';
const REPORT_UPDATE_DRAFT = 'UpdateDraftComment';
@@ -53,6 +54,8 @@
const FILE = 'FILE';
+export const __testOnly_UNSAVED_MESSAGE = UNSAVED_MESSAGE;
+
/**
* All candidates tips to show, will pick randomly.
*/
@@ -219,6 +222,10 @@
value: false,
},
_serverConfig: Object,
+ _unableToSave: {
+ type: Boolean,
+ value: false,
+ },
};
}
@@ -373,6 +380,16 @@
return this.$.restAPI.getIsAdmin();
}
+ _computeDraftTooltip(unableToSave) {
+ return unableToSave ? `Unable to save draft. Please try to save again.` :
+ `This draft is only visible to you. To publish drafts, click the 'Reply'`
+ + `or 'Start review' button at the top of the change or press the 'A' key.`;
+ }
+
+ _computeDraftText(unableToSave) {
+ return 'DRAFT' + (unableToSave ? '(Failed to save)' : '');
+ }
+
/**
* @param {*=} opt_comment
*/
@@ -710,7 +727,10 @@
this._closeOverlay(this.confirmDiscardOverlay);
}
- _getSavingMessage(numPending) {
+ _getSavingMessage(numPending, requestFailed) {
+ if (requestFailed) {
+ return UNSAVED_MESSAGE;
+ }
if (numPending === 0) {
return SAVED_MESSAGE;
}
@@ -737,10 +757,12 @@
// Cancel the debouncer so that error toasts from the error-manager will
// not be overridden.
this.cancelDebouncer('draft-toast');
+ this._updateRequestToast(this._numPendingDraftRequests.number,
+ /* requestFailed=*/true);
}
- _updateRequestToast(numPending) {
- const message = this._getSavingMessage(numPending);
+ _updateRequestToast(numPending, requestFailed) {
+ const message = this._getSavingMessage(numPending, requestFailed);
this.debounce('draft-toast', () => {
// Note: the event is fired on the body rather than this element because
// this element may not be attached by the time this executes, in which
@@ -754,9 +776,13 @@
this._showStartRequest();
return this.$.restAPI.saveDiffDraft(this.changeNum, this.patchNum, draft)
.then(result => {
- if (result.ok) {
+ if (result.ok) { // remove
+ this._unableToSave = false;
+ this.$.container.classList.remove('unableToSave');
this._showEndRequest();
} else {
+ this.$.container.classList.add('unableToSave');
+ this._unableToSave = true;
this._handleFailedDraftRequest();
}
return result;
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
index a9d2491..5087977 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
@@ -112,7 +112,7 @@
.draft .draftTooltip {
display: inline;
}
- .draft:not(.editing) .save,
+ .draft:not(.editing):not(.unableToSave) .save,
.draft:not(.editing) .cancel {
display: none;
}
@@ -245,11 +245,11 @@
<gr-tooltip-content
class="draftTooltip"
has-tooltip=""
- title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'A' key."
+ title="[[_computeDraftTooltip(_unableToSave)]]"
max-width="20em"
show-icon=""
>
- <span class="draftLabel">DRAFT</span>
+ <span class="draftLabel">[[_computeDraftText(_unableToSave)]]</span>
</gr-tooltip-content>
</div>
<div class="headerMiddle">
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.js b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.js
index eb82daa..5696cee 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.js
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.js
@@ -18,6 +18,7 @@
import '../../../test/common-test-setup-karma.js';
import './gr-comment.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+import {__testOnly_UNSAVED_MESSAGE} from './gr-comment.js';
const basicFixture = fixtureFromElement('gr-comment');
@@ -354,6 +355,40 @@
.querySelector('.discard'));
assert.isTrue(reportStub.calledOnce);
});
+
+ test('failed save draft request', done => {
+ element.draft = true;
+ const updateRequestStub = sinon.stub(element, '_updateRequestToast');
+ const diffDraftStub =
+ sinon.stub(element.$.restAPI, 'saveDiffDraft').returns(
+ Promise.resolve({ok: false}));
+ element._saveDraft();
+ flush(() => {
+ let args = updateRequestStub.lastCall.args;
+ assert.deepEqual(args, [0, true]);
+ assert.equal(element._getSavingMessage(...args),
+ __testOnly_UNSAVED_MESSAGE);
+ assert.equal(element.shadowRoot.querySelector('.draftLabel').innerText,
+ 'DRAFT(Failed to save)');
+ assert.isTrue(isVisible(element.shadowRoot
+ .querySelector('.save')), 'save is visible');
+ diffDraftStub.returns(
+ Promise.resolve({ok: true}));
+ element._saveDraft();
+ flush(() => {
+ args = updateRequestStub.lastCall.args;
+ assert.deepEqual(args, [0]);
+ assert.equal(element._getSavingMessage(...args),
+ 'All changes saved');
+ assert.equal(element.shadowRoot.querySelector('.draftLabel')
+ .innerText, 'DRAFT');
+ assert.isFalse(isVisible(element.shadowRoot
+ .querySelector('.save')), 'save is not visible');
+ assert.isFalse(element._unableToSave);
+ done();
+ });
+ });
+ });
});
suite('gr-comment draft tests', () => {
