opendev/gerrit
Code Issues Proposed changes

Convert legacy Polyemer elements to class-based

Browse Source 
This commit converts almost all Polymer elements from Polymer-function
based components to class-based components. There are few files which
should be converted manually after this commit.

Change-Id: I9e597e79053e0a6b5d5c0f1b54676d11b9d81db7
This commit is contained in:
Dmitrii Filippov
2019-11-15 16:16:46 +01:00
parent f0d5b6e49c
commit 3fd2b102e1
162 changed files with 9120 additions and 7751 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
View File

@@ -22,9 +22,25 @@
const LABEL_PREFIX_INVALID_PROLOG = 'Invalid-Prolog-Rules-Label-Name--';
const MAX_SHORTCUT_CHARS = 5;
Polymer({
is: 'gr-change-list',
/**
* @appliesMixin Gerrit.BaseUrlMixin
* @appliesMixin Gerrit.ChangeTableMixin
* @appliesMixin Gerrit.FireMixin
* @appliesMixin Gerrit.KeyboardShortcutMixin
* @appliesMixin Gerrit.RESTClientMixin
* @appliesMixin Gerrit.URLEncodingMixin
*/
class GrChangeList extends Polymer.mixinBehaviors( [
Gerrit.BaseUrlBehavior,
Gerrit.ChangeTableBehavior,
Gerrit.FireBehavior,
Gerrit.KeyboardShortcutBehavior,
Gerrit.RESTClientBehavior,
Gerrit.URLEncodingBehavior,
], Polymer.GestureEventListeners(
Polymer.LegacyElementMixin(
Polymer.Element))) {
static get is() { return 'gr-change-list'; }
/**
* Fired when next page key shortcut was pressed.
*
@@ -37,28 +53,25 @@
* @event previous-page
*/
hostAttributes: {
tabindex: 0,
},
properties: {
static get properties() {
return {
/**
* The logged-in user's account, or an empty object if no user is logged
* in.
*/
account: {
type: Object,
value: null,
},
/**
account: {
type: Object,
value: null,
},
/**
* An array of ChangeInfo objects to render.
* https://gerrit-review.googlesource.com/Documentation/rest-api-changes.html#change-info
*/
changes: {
type: Array,
observer: '_changesChanged',
},
/**
changes: {
type: Array,
observer: '_changesChanged',
},
/**
* ChangeInfo objects grouped into arrays. The sections and changes
* properties should not be used together.
*
@@ -68,56 +81,46 @@
* results: !Array<!Object>
* }>}
*/
sections: {
type: Array,
value() { return []; },
},
labelNames: {
type: Array,
computed: '_computeLabelNames(sections)',
},
_dynamicHeaderEndpoints: {
type: Array,
},
selectedIndex: {
type: Number,
notify: true,
},
showNumber: Boolean, // No default value to prevent flickering.
showStar: {
type: Boolean,
value: false,
},
showReviewedState: {
type: Boolean,
value: false,
},
keyEventTarget: {
type: Object,
value() { return document.body; },
},
changeTableColumns: Array,
visibleChangeTableColumns: Array,
preferences: Object,
},
sections: {
type: Array,
value() { return []; },
},
labelNames: {
type: Array,
computed: '_computeLabelNames(sections)',
},
_dynamicHeaderEndpoints: {
type: Array,
},
selectedIndex: {
type: Number,
notify: true,
},
showNumber: Boolean, // No default value to prevent flickering.
showStar: {
type: Boolean,
value: false,
},
showReviewedState: {
type: Boolean,
value: false,
},
keyEventTarget: {
type: Object,
value() { return document.body; },
},
changeTableColumns: Array,
visibleChangeTableColumns: Array,
preferences: Object,
};
}
behaviors: [
Gerrit.BaseUrlBehavior,
Gerrit.ChangeTableBehavior,
Gerrit.FireBehavior,
Gerrit.KeyboardShortcutBehavior,
Gerrit.RESTClientBehavior,
Gerrit.URLEncodingBehavior,
],
listeners: {
keydown: '_scopedKeydownHandler',
},
observers: [
'_sectionsChanged(sections.*)',
'_computePreferences(account, preferences)',
],
static get observers() {
return [
'_sectionsChanged(sections.*)',
'_computePreferences(account, preferences)',
];
}
keyboardShortcuts() {
return {
@@ -130,14 +133,26 @@
[this.Shortcut.TOGGLE_CHANGE_STAR]: '_toggleChangeStar',
[this.Shortcut.REFRESH_CHANGE_LIST]: '_refreshChangeList',
};
},
}
created() {
super.created();
this.addEventListener('keydown',
e => this._scopedKeydownHandler(e));
}
ready() {
super.ready();
this._ensureAttribute('tabindex', 0);
}
attached() {
super.attached();
Gerrit.awaitPluginsLoaded().then(() => {
this._dynamicHeaderEndpoints = Gerrit._endpoints.getDynamicEndpoints(
'change-list-header');
});
},
}
/**
* Iron-a11y-keys-behavior catches keyboard events globally. Some keyboard
@@ -151,11 +166,11 @@
// Enter.
this._openChange(e);
}
},
}
_lowerCase(column) {
return column.toLowerCase();
},
}
_computePreferences(account, preferences) {
// Polymer 2: check for undefined
@@ -175,13 +190,13 @@
this.showNumber = false;
this.visibleChangeTableColumns = this.columnNames;
}
},
}
_computeColspan(changeTableColumns, labelNames) {
if (!changeTableColumns || !labelNames) return;
return changeTableColumns.length + labelNames.length +
NUMBER_FIXED_COLUMNS;
},
}
_computeLabelNames(sections) {
if (!sections) { return []; }
@@ -198,7 +213,7 @@
}
}
return labels.sort();
},
}
_computeLabelShortcut(labelName) {
if (labelName.startsWith(LABEL_PREFIX_INVALID_PROLOG)) {
@@ -210,11 +225,11 @@
return a + i[0].toUpperCase();
}, '')
.slice(0, MAX_SHORTCUT_CHARS);
},
}
_changesChanged(changes) {
this.sections = changes ? [{results: changes}] : [];
},
}
_processQuery(query) {
let tokens = query.split(' ');
@@ -225,11 +240,11 @@
});
});
return tokens.join(' ');
},
}
_sectionHref(query) {
return Gerrit.Nav.getUrlForSearchQuery(this._processQuery(query));
},
}
/**
* Maps an index local to a particular section to the absolute index
@@ -245,19 +260,19 @@
idx += this.sections[i].results.length;
}
return idx + localIndex;
},
}
_computeItemSelected(sectionIndex, index, selectedIndex) {
const idx = this._computeItemAbsoluteIndex(sectionIndex, index);
return idx == selectedIndex;
},
}
_computeItemNeedsReview(account, change, showReviewedState) {
return showReviewedState && !change.reviewed &&
!change.work_in_progress &&
this.changeIsOpen(change) &&
(!account || account._account_id != change.owner._account_id);
},
}
_computeItemHighlight(account, change) {
// Do not show the assignee highlight if the change is not open.
@@ -267,7 +282,7 @@
return false;
}
return account._account_id === change.assignee._account_id;
},
}
_nextChange(e) {
if (this.shouldSuppressKeyboardShortcut(e) ||
@@ -275,7 +290,7 @@
e.preventDefault();
this.$.cursor.next();
},
}
_prevChange(e) {
if (this.shouldSuppressKeyboardShortcut(e) ||
@@ -283,7 +298,7 @@
e.preventDefault();
this.$.cursor.previous();
},
}
_openChange(e) {
if (this.shouldSuppressKeyboardShortcut(e) ||
@@ -291,7 +306,7 @@
e.preventDefault();
Gerrit.Nav.navigateToChange(this._changeForIndex(this.selectedIndex));
},
}
_nextPage(e) {
if (this.shouldSuppressKeyboardShortcut(e) ||
@@ -301,7 +316,7 @@
e.preventDefault();
this.fire('next-page');
},
}
_prevPage(e) {
if (this.shouldSuppressKeyboardShortcut(e) ||
@@ -311,7 +326,7 @@
e.preventDefault();
this.fire('previous-page');
},
}
_toggleChangeReviewed(e) {
if (this.shouldSuppressKeyboardShortcut(e) ||
@@ -319,7 +334,7 @@
e.preventDefault();
this._toggleReviewedForIndex(this.selectedIndex);
},
}
_toggleReviewedForIndex(index) {
const changeEls = this._getListItems();
@@ -329,18 +344,18 @@
const changeEl = changeEls[index];
changeEl.toggleReviewed();
},
}
_refreshChangeList(e) {
if (this.shouldSuppressKeyboardShortcut(e)) { return; }
e.preventDefault();
this._reloadWindow();
},
}
_reloadWindow() {
window.location.reload();
},
}
_toggleChangeStar(e) {
if (this.shouldSuppressKeyboardShortcut(e) ||
@@ -348,7 +363,7 @@
e.preventDefault();
this._toggleStarForIndex(this.selectedIndex);
},
}
_toggleStarForIndex(index) {
const changeEls = this._getListItems();
@@ -358,7 +373,7 @@
const changeEl = changeEls[index];
changeEl.$$('gr-change-star').toggleStar();
},
}
_changeForIndex(index) {
const changeEls = this._getListItems();
@@ -366,12 +381,12 @@
return changeEls[index].change;
}
return null;
},
}
_getListItems() {
return Array.from(
Polymer.dom(this.root).querySelectorAll('gr-change-list-item'));
},
}
_sectionsChanged() {
// Flush DOM operations so that the list item elements will be loaded.
@@ -379,14 +394,16 @@
this.$.cursor.stops = this._getListItems();
this.$.cursor.moveToStart();
});
},
}
_isOutgoing(section) {
return !!section.isOutgoing;
},
}
_isEmpty(section) {
return !section.results.length;
},
});
}
}
customElements.define(GrChangeList.is, GrChangeList);
})();