From f98dce9d0dc88b9046d0b10c811f7663f126234e Mon Sep 17 00:00:00 2001 From: Milutin Kristofic Date: Wed, 23 Sep 2020 09:43:42 +0200 Subject: [PATCH] Convert gr-change-requirements to typescript The change converts the following files to typescript: * elements/change/gr-change-requirements/gr-change-requirements.ts Change-Id: I8fd35b48f40b0a23af8a8a17384159dcc7ac3c0c --- .../gr-change-requirements.ts | 204 ++++++++++-------- 1 file changed, 118 insertions(+), 86 deletions(-) diff --git a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.ts b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.ts index 8dfee819e3..7a9908631e 100644 --- a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.ts +++ b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.ts @@ -14,102 +14,126 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import '../../../styles/shared-styles.js'; -import '../../shared/gr-button/gr-button.js'; -import '../../shared/gr-icons/gr-icons.js'; -import '../../shared/gr-label/gr-label.js'; -import '../../shared/gr-label-info/gr-label-info.js'; -import '../../shared/gr-limited-text/gr-limited-text.js'; -import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; -import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js'; -import {PolymerElement} from '@polymer/polymer/polymer-element.js'; -import {htmlTemplate} from './gr-change-requirements_html.js'; +import '../../../styles/shared-styles'; +import '../../shared/gr-button/gr-button'; +import '../../shared/gr-icons/gr-icons'; +import '../../shared/gr-label/gr-label'; +import '../../shared/gr-label-info/gr-label-info'; +import '../../shared/gr-limited-text/gr-limited-text'; +import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners'; +import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin'; +import {PolymerElement} from '@polymer/polymer/polymer-element'; +import {htmlTemplate} from './gr-change-requirements_html'; +import {customElement, property, observe} from '@polymer/decorators'; +import { + ChangeInfo, + AccountInfo, + QuickLabelInfo, + Requirement, + RequirementType, + LabelNameToInfoMap, + LabelInfo, +} from '../../../types/common'; +import {hasOwnProperty} from '../../../utils/common-util'; +import {PolymerDeepPropertyChange} from '@polymer/polymer/interfaces'; -/** - * @extends PolymerElement - */ +interface ChangeRequirement extends Requirement { + satisfied: boolean; + style: string; +} + +interface ChangeWIP { + type: RequirementType; + fallback_text: string; + tooltip: string; +} + +interface Label { + labelInfo: LabelInfo; + icon: string; + style: string; +} + +@customElement('gr-change-requirements') class GrChangeRequirements extends GestureEventListeners( - LegacyElementMixin(PolymerElement)) { - static get template() { return htmlTemplate; } - - static get is() { return 'gr-change-requirements'; } - - static get properties() { - return { - /** @type {?} */ - change: Object, - account: Object, - mutable: Boolean, - _requirements: { - type: Array, - computed: '_computeRequirements(change)', - }, - _requiredLabels: { - type: Array, - value: () => [], - }, - _optionalLabels: { - type: Array, - value: () => [], - }, - _showWip: { - type: Boolean, - computed: '_computeShowWip(change)', - }, - _showOptionalLabels: { - type: Boolean, - value: true, - }, - }; + LegacyElementMixin(PolymerElement) +) { + static get template() { + return htmlTemplate; } - static get observers() { - return [ - '_computeLabels(change.labels.*)', - ]; - } + @property({type: Object}) + change?: ChangeInfo; - _computeShowWip(change) { + @property({type: Object}) + account?: AccountInfo; + + @property({type: Boolean}) + mutable?: boolean; + + @property({type: Array, computed: '_computeRequirements(change)'}) + _requirements?: Array; + + @property({type: Array}) + _requiredLabels: Label[] = []; + + @property({type: Array}) + _optionalLabels: Label[] = []; + + @property({type: Boolean, computed: '_computeShowWip(change)'}) + _showWip?: boolean; + + @property({type: Boolean}) + _showOptionalLabels = true; + + _computeShowWip(change: ChangeInfo) { return change.work_in_progress; } - _computeRequirements(change) { - const _requirements = []; + _computeRequirements(change: ChangeInfo) { + const _requirements: Array = []; if (change.requirements) { for (const requirement of change.requirements) { - requirement.satisfied = requirement.status === 'OK'; - requirement.style = - this._computeRequirementClass(requirement.satisfied); - _requirements.push(requirement); + const satisfied = requirement.status === 'OK'; + const style = this._computeRequirementClass(satisfied); + _requirements.push({...requirement, satisfied, style}); } } if (change.work_in_progress) { _requirements.push({ - type: 'wip', + type: 'wip' as RequirementType, fallback_text: 'Work-in-progress', - tooltip: 'Change must not be in \'Work in Progress\' state.', + tooltip: "Change must not be in 'Work in Progress' state.", }); } return _requirements; } - _computeRequirementClass(requirementStatus) { + _computeRequirementClass(requirementStatus: boolean) { return requirementStatus ? 'approved' : ''; } - _computeRequirementIcon(requirementStatus) { + _computeRequirementIcon(requirementStatus: boolean) { return requirementStatus ? 'gr-icons:check' : 'gr-icons:schedule'; } - _computeLabels(labelsRecord) { + @observe('change.labels.*') + _computeLabels( + labelsRecord: PolymerDeepPropertyChange< + LabelNameToInfoMap, + LabelNameToInfoMap + > + ) { const labels = labelsRecord.base; this._optionalLabels = []; this._requiredLabels = []; for (const label in labels) { - if (!labels.hasOwnProperty(label)) { continue; } + if (!hasOwnProperty(labels, label)) { + continue; + } const labelInfo = labels[label]; const icon = this._computeLabelIcon(labelInfo); @@ -121,50 +145,58 @@ class GrChangeRequirements extends GestureEventListeners( } /** - * @param {Object} labelInfo - * @return {string} The icon name, or undefined if no icon should - * be used. + * @return The icon name, or undefined if no icon should + * be used. */ - _computeLabelIcon(labelInfo) { - if (labelInfo.approved) { return 'gr-icons:check'; } - if (labelInfo.rejected) { return 'gr-icons:close'; } + _computeLabelIcon(labelInfo: QuickLabelInfo) { + if (labelInfo.approved) { + return 'gr-icons:check'; + } + if (labelInfo.rejected) { + return 'gr-icons:close'; + } return 'gr-icons:schedule'; } - /** - * @param {Object} labelInfo - */ - _computeLabelClass(labelInfo) { - if (labelInfo.approved) { return 'approved'; } - if (labelInfo.rejected) { return 'rejected'; } + _computeLabelClass(labelInfo: QuickLabelInfo) { + if (labelInfo.approved) { + return 'approved'; + } + if (labelInfo.rejected) { + return 'rejected'; + } return ''; } - _computeShowOptional(optionalFieldsRecord) { + _computeShowOptional( + optionalFieldsRecord: PolymerDeepPropertyChange + ) { return optionalFieldsRecord.base.length ? '' : 'hidden'; } - _computeLabelValue(value) { - return (value > 0 ? '+' : '') + value; + _computeLabelValue(value: number) { + return `${value > 0 ? '+' : ''}${value}`; } - _computeShowHideIcon(showOptionalLabels) { - return showOptionalLabels ? - 'gr-icons:expand-less' : - 'gr-icons:expand-more'; + _computeShowHideIcon(showOptionalLabels: boolean) { + return showOptionalLabels ? 'gr-icons:expand-less' : 'gr-icons:expand-more'; } - _computeSectionClass(show) { + _computeSectionClass(show: boolean) { return show ? '' : 'hidden'; } - _handleShowHide(e) { + _handleShowHide() { this._showOptionalLabels = !this._showOptionalLabels; } - _computeSubmitRequirementEndpoint(item) { + _computeSubmitRequirementEndpoint(item: ChangeRequirement | ChangeWIP) { return `submit-requirement-item-${item.type}`; } } -customElements.define(GrChangeRequirements.is, GrChangeRequirements); +declare global { + interface HTMLElementTagNameMap { + 'gr-change-requirements': GrChangeRequirements; + } +}