Handle starring API calls in parent component
Removing the rest API as a dependency of the change-list and all of its
children allows it to be reused in more circumstances.
With this change, the gr-change-star fires a bubbling event to toggle
starred state instead of making the API request directly.
Change-Id: I3b2ecfe261db7c264b86db1ab6d9ff814e7f70e6
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.html b/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.html
index 3a7ff10..fc00299 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.html
@@ -86,7 +86,8 @@
changes="{{_changes}}"
preferences="[[preferences]]"
selected-index="{{viewState.selectedChangeIndex}}"
- show-star="[[_loggedIn]]"></gr-change-list>
+ show-star="[[_loggedIn]]"
+ on-toggle-star="_handleToggleStar"></gr-change-list>
<nav class$="[[_computeNavClass(_loading)]]">
Page [[_computePage(_offset, _changesPerPage)]]
<a id="prevArrow"
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.js b/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.js
index 2a05a2f..9b099cd 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.js
@@ -263,5 +263,10 @@
_computeLoggedIn(account) {
return !!(account && Object.keys(account).length > 0);
},
+
+ _handleToggleStar(e) {
+ this.$.restAPI.saveChangeStarred(e.detail.change._number,
+ e.detail.starred);
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
index 9930bf5..e2cb4e7 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
@@ -306,10 +306,7 @@
}
const changeEl = changeEls[index];
- const change = changeEl.change;
- const newVal = !change.starred;
- changeEl.set('change.starred', newVal);
- this.$.restAPI.saveChangeStarred(change._number, newVal);
+ changeEl.$$('gr-change-star').toggleStar();
},
_changeForIndex(index) {
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
index 1935962..1b21543 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
@@ -60,7 +60,8 @@
account="[[account]]"
preferences="[[preferences]]"
selected-index="{{viewState.selectedChangeIndex}}"
- sections="[[_results]]"></gr-change-list>
+ sections="[[_results]]"
+ on-toggle-star="_handleToggleStar"></gr-change-list>
</div>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
<gr-reporting id="reporting"></gr-reporting>
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js
index f86c98c..9cf76da 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js
@@ -241,5 +241,10 @@
_computeUserHeaderClass(userParam) {
return userParam === 'self' ? 'hide' : '';
},
+
+ _handleToggleStar(e) {
+ this.$.restAPI.saveChangeStarred(e.detail.change._number,
+ e.detail.starred);
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
index 70b2635..a14c652 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
@@ -17,7 +17,6 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../shared/gr-icons/gr-icons.html">
-<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../../styles/shared-styles.html">
<dom-module id="gr-change-star">
@@ -36,7 +35,6 @@
class$="[[_computeStarClass(change.starred)]]"
icon$="[[_computeStarIcon(change.starred)]]"></iron-icon>
</button>
- <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template>
<script src="gr-change-star.js"></script>
</dom-module>
diff --git a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.js b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.js
index 9646735..3c46d1b 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.js
+++ b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.js
@@ -20,14 +20,18 @@
Polymer({
is: 'gr-change-star',
+ /**
+ * Fired when star state is toggled.
+ *
+ * @event toggle-star
+ */
+
properties: {
/** @type {?} */
change: {
type: Object,
notify: true,
},
-
- _xhrPromise: Object, // Used for testing.
},
_computeStarClass(starred) {
@@ -42,8 +46,10 @@
toggleStar() {
const newVal = !this.change.starred;
this.set('change.starred', newVal);
- this._xhrPromise = this.$.restAPI.saveChangeStarred(this.change._number,
- newVal);
+ this.dispatchEvent(new CustomEvent('toggle-star', {
+ bubbles: true,
+ detail: {change: this.change, starred: newVal},
+ }));
},
});
})();
diff --git a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star_test.html b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star_test.html
index f24b45c..0ca9368 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star_test.html
@@ -37,9 +37,6 @@
let element;
setup(() => {
- stub('gr-rest-api-interface', {
- saveChangeStarred() { return Promise.resolve({ok: true}); },
- });
element = fixture('basic');
element.change = {
_number: 2,
@@ -60,23 +57,21 @@
});
test('starring', done => {
- element.set('change.starred', false);
- MockInteractions.tap(element.$$('button'));
-
- element._xhrPromise.then(req => {
+ element.addEventListener('toggle-star', () => {
assert.equal(element.change.starred, true);
done();
});
+ element.set('change.starred', false);
+ MockInteractions.tap(element.$$('button'));
});
test('unstarring', done => {
- element.set('change.starred', true);
- MockInteractions.tap(element.$$('button'));
-
- element._xhrPromise.then(req => {
+ element.addEventListener('toggle-star', () => {
assert.equal(element.change.starred, false);
done();
});
+ element.set('change.starred', true);
+ MockInteractions.tap(element.$$('button'));
});
});
</script>