Do not show new topics or hashtags in the value of the gr-editable-label
Setting topics and hashtags in PG is done through gr-editable-label
inputs. Once entered, topics and hashtags are displayed in linked chips.
As such, the non-placeholder text of the editable label is never
supposed to appear -- the placeholder instead serves as a trigger for
the pop-out input box.
However, if the API calls to save topics or hashtags respond slowly,
there would be an intermediate window where the value entered in the
editable label could appear as its label rather than the chip. With this
change, the editable labels do not show the input.
Bug: Issue 7651
Change-Id: I47a8a9b494adf6454aa5f5056f9b0fef86800d8a
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
index e5dd952..c59f222 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
@@ -214,15 +214,19 @@
<section class="topic">
<span class="title">Topic</span>
<span class="value">
- <template is="dom-if" if="[[change.topic]]">
+ <template
+ is="dom-if"
+ if="[[_showTopicChip(change.*, _settingTopic)]]">
<gr-linked-chip
text="[[change.topic]]"
limit="40"
- href="[[_computeTopicURL(change.topic)]]"
+ href="[[_computeTopicURL(change.*)]]"
removable="[[!_topicReadOnly]]"
on-remove="_handleTopicRemoved"></gr-linked-chip>
</template>
- <template is="dom-if" if="[[!change.topic]]">
+ <template
+ is="dom-if"
+ if="[[_showAddTopic(change.*, _settingTopic)]]">
<gr-editable-label
uppercase
label-text="Add a topic"
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js
index 32fa7a6..db6c44c 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js
@@ -66,6 +66,11 @@
computed: '_computeIsWip(change)',
},
_newHashtag: String,
+
+ _settingTopic: {
+ type: Boolean,
+ value: false,
+ },
},
behaviors: [
@@ -169,8 +174,10 @@
_handleTopicChanged(e, topic) {
const lastTopic = this.change.topic;
if (!topic.length) { topic = null; }
+ this._settingTopic = true;
this.$.restAPI.setChangeTopic(this.change._number, topic)
.then(newTopic => {
+ this._settingTopic = false;
this.set(['change', 'topic'], newTopic);
if (newTopic !== lastTopic) {
this.dispatchEvent(
@@ -179,17 +186,28 @@
});
},
+ _showAddTopic(changeRecord, settingTopic) {
+ const hasTopic = !!changeRecord && !!changeRecord.base.topic;
+ return !hasTopic && !settingTopic;
+ },
+
+ _showTopicChip(changeRecord, settingTopic) {
+ const hasTopic = !!changeRecord && !!changeRecord.base.topic;
+ return hasTopic && !settingTopic;
+ },
+
_handleHashtagChanged(e) {
const lastHashtag = this.change.hashtag;
if (!this._newHashtag.length) { return; }
+ const newHashtag = this._newHashtag;
+ this._newHashtag = '';
this.$.restAPI.setChangeHashtag(
- this.change._number, {add: [this._newHashtag]}).then(newHashtag => {
+ this.change._number, {add: [newHashtag]}).then(newHashtag => {
this.set(['change', 'hashtags'], newHashtag);
if (newHashtag !== lastHashtag) {
this.dispatchEvent(
new CustomEvent('hashtag-changed', {bubbles: true}));
}
- this._newHashtag = '';
});
},
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_test.html b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_test.html
index 58188cd..522d34e 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_test.html
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_test.html
@@ -303,6 +303,22 @@
assert.equal(actual, '');
});
+ test('_showAddTopic', () => {
+ assert.isTrue(element._showAddTopic(null, false));
+ assert.isTrue(element._showAddTopic({base: {topic: null}}, false));
+ assert.isFalse(element._showAddTopic({base: {topic: null}}, true));
+ assert.isFalse(element._showAddTopic({base: {topic: 'foo'}}, true));
+ assert.isFalse(element._showAddTopic({base: {topic: 'foo'}}, false));
+ });
+
+ test('_showTopicChip', () => {
+ assert.isFalse(element._showTopicChip(null, false));
+ assert.isFalse(element._showTopicChip({base: {topic: null}}, false));
+ assert.isFalse(element._showTopicChip({base: {topic: null}}, true));
+ assert.isFalse(element._showTopicChip({base: {topic: 'foo'}}, true));
+ assert.isTrue(element._showTopicChip({base: {topic: 'foo'}}, false));
+ });
+
suite('Topic removal', () => {
let change;
setup(() => {
