opendev/gerrit
Code Issues Proposed changes

Convert files to typescript

Browse Source 
The change converts the following files to typescript:

* elements/change-list/gr-change-list-view/gr-change-list-view.ts

Change-Id: I002d430831f586c7c0e1d73c371e456fb989edcc
This commit is contained in:
Dmitrii Filippov
2020-10-10 16:31:21 +02:00
parent 079f3a47f5
commit 8814de118c
6 changed files with 213 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
View File

@@ -68,6 +68,11 @@ export enum LabelCategory {
REJECTED = 'REJECTED', REJECTED = 'REJECTED',
} }
export interface ChangeListToggleReviewedDetail {
change: ChangeInfo;
reviewed: boolean;
}
// How many reviewers should be shown with an account-label? // How many reviewers should be shown with an account-label?
const PRIMARY_REVIEWERS_COUNT = 2; const PRIMARY_REVIEWERS_COUNT = 2;
@@ -393,13 +398,18 @@ export class GrChangeListItem extends ChangeTableMixin(
} }
toggleReviewed() { toggleReviewed() {
if (!this.change) return;
const newVal = !this.change?.reviewed; const newVal = !this.change?.reviewed;
this.set('change.reviewed', newVal); this.set('change.reviewed', newVal);
const detail: ChangeListToggleReviewedDetail = {
change: this.change,
reviewed: newVal,
};
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('toggle-reviewed', { new CustomEvent('toggle-reviewed', {
bubbles: true, bubbles: true,
composed: true, composed: true,
detail: {change: this.change, reviewed: newVal}, detail,
}) })
); );
} }

306
polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.ts
View File

@@ -15,18 +15,34 @@
* limitations under the License. * limitations under the License.
*/ */
import '../../shared/gr-icons/gr-icons.js'; import '../../shared/gr-icons/gr-icons';
import '../../shared/gr-rest-api-interface/gr-rest-api-interface.js'; import '../../shared/gr-rest-api-interface/gr-rest-api-interface';
import '../gr-change-list/gr-change-list.js'; import '../gr-change-list/gr-change-list';
import '../gr-repo-header/gr-repo-header.js'; import '../gr-repo-header/gr-repo-header';
import '../gr-user-header/gr-user-header.js'; import '../gr-user-header/gr-user-header';
import '../../../styles/shared-styles.js'; import '../../../styles/shared-styles';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js'; import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element.js'; import {PolymerElement} from '@polymer/polymer/polymer-element';
import {htmlTemplate} from './gr-change-list-view_html.js'; import {htmlTemplate} from './gr-change-list-view_html';
import {page} from '../../../utils/page-wrapper-utils.js'; import {page} from '../../../utils/page-wrapper-utils';
import {GerritNav} from '../../core/gr-navigation/gr-navigation.js'; import {GerritNav, GerritView} from '../../core/gr-navigation/gr-navigation';
import {customElement, property} from '@polymer/decorators';
import {AppElementParams} from '../../gr-app-types';
import {
AccountDetailInfo,
AccountId,
ChangeId,
ChangeInfo,
EmailAddress,
PatchRange,
PreferencesInput,
} from '../../../types/common';
import {RestApiService} from '../../../services/services/gr-rest-api/gr-rest-api';
import {ChangeListToggleReviewedDetail} from '../gr-change-list-item/gr-change-list-item';
import {ChangeStarToggleStarDetail} from '../../shared/gr-change-star/gr-change-star';
import {hasOwnProperty} from '../../../utils/common-util';
import {DiffViewMode} from '../../../constants/constants';
const LookupQueryPatterns = { const LookupQueryPatterns = {
CHANGE_ID: /^\s*i?[0-9a-f]{7,40}\s*$/i, CHANGE_ID: /^\s*i?[0-9a-f]{7,40}\s*$/i,
@@ -36,118 +52,86 @@ const LookupQueryPatterns = {
const USER_QUERY_PATTERN = /^owner:\s?("[^"]+"|[^ ]+)$/; const USER_QUERY_PATTERN = /^owner:\s?("[^"]+"|[^ ]+)$/;
const REPO_QUERY_PATTERN = const REPO_QUERY_PATTERN = /^project:\s?("[^"]+"|[^ ]+)(\sstatus\s?:(open|"open"))?$/;
/^project:\s?("[^"]+"|[^ ]+)(\sstatus\s?:(open|"open"))?$/;
const LIMIT_OPERATOR_PATTERN = /\blimit:(\d+)/i; const LIMIT_OPERATOR_PATTERN = /\blimit:(\d+)/i;
/** export interface ChangeListViewState {
* @extends PolymerElement changeNum?: ChangeId;
*/ patchRange?: PatchRange;
class GrChangeListView extends GestureEventListeners( selectedFileIndex?: number;
LegacyElementMixin( showReplyDialog?: boolean;
PolymerElement)) { showDownloadDialog?: boolean;
static get template() { return htmlTemplate; } diffMode?: DiffViewMode;
numFilesShown?: number;
scrollTop?: number;
query?: string;
offset?: number;
}
export interface GrChangeListView {
$: {
restAPI: RestApiService & Element;
prevArrow: HTMLAnchorElement;
nextArrow: HTMLAnchorElement;
};
}
@customElement('gr-change-list-view')
export class GrChangeListView extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
) {
static get template() {
return htmlTemplate;
}
static get is() { return 'gr-change-list-view'; }
/** /**
* Fired when the title of the page should change. * Fired when the title of the page should change.
* *
* @event title-change * @event title-change
*/ */
static get properties() { @property({type: Object, observer: '_paramsChanged'})
return { params?: AppElementParams;
/**
* URL params passed from the router.
*/
params: {
type: Object,
observer: '_paramsChanged',
},
/** @property({type: Boolean, computed: '_computeLoggedIn(account)'})
* True when user is logged in. _loggedIn?: boolean;
*/
_loggedIn: {
type: Boolean,
computed: '_computeLoggedIn(account)',
},
account: { @property({type: Object})
type: Object, account: AccountDetailInfo | null = null;
value: null,
},
/** @property({type: Object, notify: true})
* State persisted across restamps of the element. viewState: ChangeListViewState = {};
*
* Need sub-property declaration since it is used in template before
* assignment.
*
* @type {{ selectedChangeIndex: (number|undefined) }}
*
*/
viewState: {
type: Object,
notify: true,
value() { return {}; },
},
preferences: Object, @property({type: Object})
preferences?: PreferencesInput;
_changesPerPage: Number, @property({type: Number})
_changesPerPage?: number;
/** @property({type: String})
* Currently active query. _query = '';
*/
_query: {
type: String,
value: '',
},
/** @property({type: Number})
* Offset of currently visible query results. _offset?: number;
*/
_offset: Number,
/** @property({type: Array, observer: '_changesChanged'})
* Change objects loaded from the server. _changes?: ChangeInfo[];
*/
_changes: {
type: Array,
observer: '_changesChanged',
},
/** @property({type: Boolean})
* For showing a "loading..." string during ajax requests. _loading = true;
*/
_loading: {
type: Boolean,
value: true,
},
/** @type {?string} */ @property({type: String})
_userId: { _userId: AccountId | EmailAddress | null = null;
type: String,
value: null,
},
/** @type {?string} */ @property({type: String})
_repo: { _repo: string | null = null;
type: String,
value: null,
},
};
}
/** @override */ /** @override */
created() { created() {
super.created(); super.created();
this.addEventListener('next-page', this.addEventListener('next-page', () => this._handleNextPage());
() => this._handleNextPage()); this.addEventListener('previous-page', () => this._handlePreviousPage());
this.addEventListener('previous-page',
() => this._handlePreviousPage());
} }
/** @override */ /** @override */
@@ -156,14 +140,17 @@ class GrChangeListView extends GestureEventListeners(
this._loadPreferences(); this._loadPreferences();
} }
_paramsChanged(value) { _paramsChanged(value: AppElementParams) {
if (value.view !== GerritNav.View.SEARCH) { return; } if (value.view !== GerritView.SEARCH) return;
this._loading = true; this._loading = true;
this._query = value.query; this._query = value.query;
this._offset = value.offset || 0; const offset = Number(value.offset);
if (this.viewState.query != this._query || this._offset = isNaN(offset) ? 0 : offset;
this.viewState.offset != this._offset) { if (
this.viewState.query !== this._query ||
this.viewState.offset !== this._offset
) {
this.set('viewState.selectedChangeIndex', 0); this.set('viewState.selectedChangeIndex', 0);
this.set('viewState.query', this._query); this.set('viewState.query', this._query);
this.set('viewState.offset', this._offset); this.set('viewState.offset', this._offset);
@@ -171,25 +158,43 @@ class GrChangeListView extends GestureEventListeners(
// NOTE: This method may be called before attachment. Fire title-change // NOTE: This method may be called before attachment. Fire title-change
// in an async so that attachment to the DOM can take place first. // in an async so that attachment to the DOM can take place first.
this.async(() => this.dispatchEvent(new CustomEvent('title-change', { this.async(() =>
this.dispatchEvent(
new CustomEvent('title-change', {
detail: {title: this._query}, detail: {title: this._query},
composed: true, bubbles: true, composed: true,
}))); bubbles: true,
})
)
);
this._getPreferences() this.$.restAPI
.getPreferences()
.then(prefs => { .then(prefs => {
if (!prefs) {
throw new Error('getPreferences returned undefined');
}
this._changesPerPage = prefs.changes_per_page; this._changesPerPage = prefs.changes_per_page;
return this._getChanges(); return this._getChanges();
}) })
.then(changes => { .then(changes => {
changes = changes || []; changes = changes || [];
if (this._query && changes.length === 1) { if (this._query && changes.length === 1) {
for (const query in LookupQueryPatterns) { let query: keyof typeof LookupQueryPatterns;
if (LookupQueryPatterns.hasOwnProperty(query) && for (query in LookupQueryPatterns) {
this._query.match(LookupQueryPatterns[query])) { if (
hasOwnProperty(LookupQueryPatterns, query) &&
this._query.match(LookupQueryPatterns[query])
) {
// "Back"/"Forward" buttons work correctly only with // "Back"/"Forward" buttons work correctly only with
// opt_redirect options // opt_redirect options
GerritNav.navigateToChange(changes[0], null, null, null, true); GerritNav.navigateToChange(
changes[0],
undefined,
undefined,
undefined,
true
);
return; return;
} }
} }
@@ -202,7 +207,7 @@ class GrChangeListView extends GestureEventListeners(
_loadPreferences() { _loadPreferences() {
return this.$.restAPI.getLoggedIn().then(loggedIn => { return this.$.restAPI.getLoggedIn().then(loggedIn => {
if (loggedIn) { if (loggedIn) {
this._getPreferences().then(preferences => { this.$.restAPI.getPreferences().then(preferences => {
this.preferences = preferences; this.preferences = preferences;
}); });
} else { } else {
@@ -212,15 +217,14 @@ class GrChangeListView extends GestureEventListeners(
} }
_getChanges() { _getChanges() {
return this.$.restAPI.getChanges(this._changesPerPage, this._query, return this.$.restAPI.getChanges(
this._offset); this._changesPerPage,
this._query,
this._offset
);
} }
_getPreferences() { _limitFor(query: string, defaultLimit: number) {
return this.$.restAPI.getPreferences();
}
_limitFor(query, defaultLimit) {
const match = query.match(LIMIT_OPERATOR_PATTERN); const match = query.match(LIMIT_OPERATOR_PATTERN);
if (!match) { if (!match) {
return defaultLimit; return defaultLimit;
@@ -228,40 +232,46 @@ class GrChangeListView extends GestureEventListeners(
return parseInt(match[1], 10); return parseInt(match[1], 10);
} }
_computeNavLink(query, offset, direction, changesPerPage) { _computeNavLink(
// Offset could be a string when passed from the router. query: string,
offset = +(offset || 0); offset: number | undefined,
direction: number,
changesPerPage: number
) {
offset = offset ?? 0;
const limit = this._limitFor(query, changesPerPage); const limit = this._limitFor(query, changesPerPage);
const newOffset = Math.max(0, offset + (limit * direction)); const newOffset = Math.max(0, offset + limit * direction);
return GerritNav.getUrlForSearchQuery(query, newOffset); return GerritNav.getUrlForSearchQuery(query, newOffset);
} }
_computePrevArrowClass(offset) { _computePrevArrowClass(offset?: number) {
return offset === 0 ? 'hide' : ''; return offset === 0 ? 'hide' : '';
} }
_computeNextArrowClass(changes) { _computeNextArrowClass(changes?: ChangeInfo[]) {
const more = changes.length && changes[changes.length - 1]._more_changes; const more = changes?.length && changes[changes.length - 1]._more_changes;
return more ? '' : 'hide'; return more ? '' : 'hide';
} }
_computeNavClass(loading) { _computeNavClass(loading?: boolean) {
return loading || !this._changes || !this._changes.length ? 'hide' : ''; return loading || !this._changes || !this._changes.length ? 'hide' : '';
} }
_handleNextPage() { _handleNextPage() {
if (this.$.nextArrow.hidden) { return; } if (this.$.nextArrow.hidden || !this._changesPerPage) return;
page.show(this._computeNavLink( page.show(
this._query, this._offset, 1, this._changesPerPage)); this._computeNavLink(this._query, this._offset, 1, this._changesPerPage)
);
} }
_handlePreviousPage() { _handlePreviousPage() {
if (this.$.prevArrow.hidden) { return; } if (this.$.prevArrow.hidden || !this._changesPerPage) return;
page.show(this._computeNavLink( page.show(
this._query, this._offset, -1, this._changesPerPage)); this._computeNavLink(this._query, this._offset, -1, this._changesPerPage)
);
} }
_changesChanged(changes) { _changesChanged(changes?: ChangeInfo[]) {
this._userId = null; this._userId = null;
this._repo = null; this._repo = null;
if (!changes || !changes.length) { if (!changes || !changes.length) {
@@ -280,27 +290,33 @@ class GrChangeListView extends GestureEventListeners(
} }
} }
_computeHeaderClass(id) { _computeHeaderClass(id?: string) {
return id ? '' : 'hide'; return id ? '' : 'hide';
} }
_computePage(offset, changesPerPage) { _computePage(offset?: number, changesPerPage?: number) {
if (offset === undefined || changesPerPage === undefined) return;
return offset / changesPerPage + 1; return offset / changesPerPage + 1;
} }
_computeLoggedIn(account) { _computeLoggedIn(account?: AccountDetailInfo) {
return !!(account && Object.keys(account).length > 0); return !!(account && Object.keys(account).length > 0);
} }
_handleToggleStar(e) { _handleToggleStar(e: CustomEvent<ChangeStarToggleStarDetail>) {
this.$.restAPI.saveChangeStarred(e.detail.change._number, this.$.restAPI.saveChangeStarred(e.detail.change._number, e.detail.starred);
e.detail.starred);
} }
_handleToggleReviewed(e) { _handleToggleReviewed(e: CustomEvent<ChangeListToggleReviewedDetail>) {
this.$.restAPI.saveChangeReviewed(e.detail.change._number, this.$.restAPI.saveChangeReviewed(
e.detail.reviewed); e.detail.change._number,
e.detail.reviewed
);
} }
} }
customElements.define(GrChangeListView.is, GrChangeListView); declare global {
interface HTMLElementTagNameMap {
'gr-change-list-view': GrChangeListView;
}
}

2
polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view_test.js
View File

@@ -109,6 +109,7 @@ suite('gr-change-list-view tests', () => {
test('_handleNextPage', () => { test('_handleNextPage', () => {
const showStub = sinon.stub(page, 'show'); const showStub = sinon.stub(page, 'show');
element._changesPerPage = 10;
element.$.nextArrow.hidden = true; element.$.nextArrow.hidden = true;
element._handleNextPage(); element._handleNextPage();
assert.isFalse(showStub.called); assert.isFalse(showStub.called);
@@ -119,6 +120,7 @@ suite('gr-change-list-view tests', () => {
test('_handlePreviousPage', () => { test('_handlePreviousPage', () => {
const showStub = sinon.stub(page, 'show'); const showStub = sinon.stub(page, 'show');
element._changesPerPage = 10;
element.$.prevArrow.hidden = true; element.$.prevArrow.hidden = true;
element._handlePreviousPage(); element._handlePreviousPage();
assert.isFalse(showStub.called); assert.isFalse(showStub.called);

11
polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.ts
View File

@@ -30,6 +30,11 @@ declare global {
} }
} }
export interface ChangeStarToggleStarDetail {
change: ChangeInfo;
starred: boolean;
}
@customElement('gr-change-star') @customElement('gr-change-star')
export class GrChangeStar extends KeyboardShortcutMixin( export class GrChangeStar extends KeyboardShortcutMixin(
GestureEventListeners(LegacyElementMixin(PolymerElement)) GestureEventListeners(LegacyElementMixin(PolymerElement))
@@ -69,11 +74,15 @@ export class GrChangeStar extends KeyboardShortcutMixin(
} }
const newVal = !this.change.starred; const newVal = !this.change.starred;
this.set('change.starred', newVal); this.set('change.starred', newVal);
const detail: ChangeStarToggleStarDetail = {
change: this.change,
starred: newVal,
};
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('toggle-star', { new CustomEvent('toggle-star', {
bubbles: true, bubbles: true,
composed: true, composed: true,
detail: {change: this.change, starred: newVal}, detail,
}) })
); );
} }

5
polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.ts
View File

@@ -2424,7 +2424,10 @@ export class GrRestApiInterface
}); });
} }
saveChangeStarred(changeNum: NumericChangeId, starred: boolean) { saveChangeStarred(
changeNum: NumericChangeId,
starred: boolean
): Promise<Response> {
// Some servers may require the project name to be provided // Some servers may require the project name to be provided
// alongside the change number, so resolve the project name // alongside the change number, so resolve the project name
// first. // first.

10
polygerrit-ui/app/services/services/gr-rest-api/gr-rest-api.ts
View File

@@ -777,4 +777,14 @@ export interface RestApiService {
email: string, email: string,
errFn?: ErrorCallback errFn?: ErrorCallback
): Promise<Response | undefined>; ): Promise<Response | undefined>;
saveChangeReviewed(
changeNum: NumericChangeId,
reviewed: boolean
): Promise<Response | undefined>;
saveChangeStarred(
changeNum: NumericChangeId,
starred: boolean
): Promise<Response>;
} }