Merge "gr-label-info to lit element"
diff --git a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info.ts b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info.ts
index dba36a4..67f84a5 100644
--- a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info.ts
+++ b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info.ts
@@ -24,23 +24,26 @@
import '../gr-label/gr-label';
import '../gr-tooltip-content/gr-tooltip-content';
import {dom, EventApi} from '@polymer/polymer/lib/legacy/polymer.dom';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-label-info_html';
import {GerritNav} from '../../core/gr-navigation/gr-navigation';
-import {customElement, property} from '@polymer/decorators';
import {
- ChangeInfo,
AccountInfo,
LabelInfo,
ApprovalInfo,
AccountId,
isQuickLabelInfo,
isDetailedLabelInfo,
+ LabelNameToInfoMap,
} from '../../../types/common';
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators';
import {GrButton} from '../gr-button/gr-button';
import {getVotingRangeOrDefault} from '../../../utils/label-util';
import {appContext} from '../../../services/app-context';
import {ParsedChangeInfo} from '../../../types/types';
+import {fontStyles} from '../../../styles/gr-font-styles';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {votingStyles} from '../../../styles/gr-voting-styles';
+import {ifDefined} from 'lit/directives/if-defined';
declare global {
interface HTMLElementTagNameMap {
@@ -57,16 +60,12 @@
interface FormattedLabel {
className?: LabelClassName;
- account: ApprovalInfo;
+ account: ApprovalInfo | AccountInfo;
value: string;
}
@customElement('gr-label-info')
-export class GrLabelInfo extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
-
+export class GrLabelInfo extends LitElement {
@property({type: Object})
labelInfo?: LabelInfo;
@@ -89,11 +88,148 @@
// TODO(TS): not used, remove later
_xhrPromise?: Promise<void>;
+ static override get styles() {
+ return [
+ sharedStyles,
+ fontStyles,
+ votingStyles,
+ css`
+ .placeholder {
+ color: var(--deemphasized-text-color);
+ }
+ .hidden {
+ display: none;
+ }
+ /* Note that most of the .voteChip styles are coming from the
+ gr-voting-styles include. */
+ .voteChip {
+ display: flex;
+ justify-content: center;
+ margin-right: var(--spacing-s);
+ padding: 1px;
+ }
+ .max {
+ background-color: var(--vote-color-approved);
+ }
+ .min {
+ background-color: var(--vote-color-rejected);
+ }
+ .positive {
+ background-color: var(--vote-color-recommended);
+ border-radius: 12px;
+ border: 1px solid var(--vote-outline-recommended);
+ color: var(--chip-color);
+ }
+ .negative {
+ background-color: var(--vote-color-disliked);
+ border-radius: 12px;
+ border: 1px solid var(--vote-outline-disliked);
+ color: var(--chip-color);
+ }
+ .hidden {
+ display: none;
+ }
+ td {
+ vertical-align: top;
+ }
+ tr {
+ min-height: var(--line-height-normal);
+ }
+ gr-tooltip-content {
+ display: block;
+ }
+ gr-button {
+ vertical-align: top;
+ }
+ gr-button::part(paper-button) {
+ height: var(--line-height-normal);
+ width: var(--line-height-normal);
+ padding: 0;
+ }
+ gr-button[disabled] iron-icon {
+ color: var(--border-color);
+ }
+ gr-account-link {
+ --account-max-length: 100px;
+ margin-right: var(--spacing-xs);
+ }
+ iron-icon {
+ height: calc(var(--line-height-normal) - 2px);
+ width: calc(var(--line-height-normal) - 2px);
+ }
+ .labelValueContainer:not(:first-of-type) td {
+ padding-top: var(--spacing-s);
+ }
+ `,
+ ];
+ }
+
+ override render() {
+ return html` <p
+ class="placeholder ${this.computeShowPlaceholder(
+ this.labelInfo,
+ this.change?.labels
+ )}"
+ >
+ No votes
+ </p>
+ <table>
+ ${this.mapLabelInfo(
+ this.labelInfo,
+ this.account,
+ this.change?.labels
+ ).map(mappedLabel => this.renderLabel(mappedLabel))}
+ </table>`;
+ }
+
+ renderLabel(mappedLabel: FormattedLabel) {
+ const {labelInfo, change} = this;
+ return html` <tr class="labelValueContainer">
+ <td>
+ <gr-tooltip-content
+ has-tooltip
+ title="${this._computeValueTooltip(labelInfo, mappedLabel.value)}"
+ >
+ <gr-label class="${mappedLabel.className} voteChip font-small">
+ ${mappedLabel.value}
+ </gr-label>
+ </gr-tooltip-content>
+ </td>
+ <td>
+ <gr-account-link
+ .account="${mappedLabel.account}"
+ .change="${change}"
+ ></gr-account-link>
+ </td>
+ <td>
+ <gr-tooltip-content has-tooltip title="Remove vote">
+ <gr-button
+ link
+ aria-label="Remove vote"
+ @click="${this.onDeleteVote}"
+ data-account-id="${ifDefined(mappedLabel.account._account_id)}"
+ class="deleteBtn ${this.computeDeleteClass(
+ mappedLabel.account,
+ this.mutable,
+ change
+ )}"
+ >
+ <iron-icon icon="gr-icons:delete"></iron-icon>
+ </gr-button>
+ </gr-tooltip-content>
+ </td>
+ </tr>`;
+ }
+
/**
* This method also listens on change.labels.*,
* to trigger computation when a label is removed from the change.
*/
- _mapLabelInfo(labelInfo?: LabelInfo, account?: AccountInfo) {
+ private mapLabelInfo(
+ labelInfo?: LabelInfo,
+ account?: AccountInfo,
+ _?: LabelNameToInfoMap
+ ): FormattedLabel[] {
const result: FormattedLabel[] = [];
if (!labelInfo) {
return result;
@@ -108,7 +244,8 @@
{
value: ok ? '👍️' : '👎️',
className: ok ? LabelClassName.POSITIVE : LabelClassName.NEGATIVE,
- account: ok ? labelInfo.approved : labelInfo.rejected,
+ // executed only if approved or rejected is not undefined
+ account: ok ? labelInfo.approved! : labelInfo.rejected!,
},
];
}
@@ -143,7 +280,7 @@
labelClassName = LabelClassName.NEGATIVE;
}
}
- const formattedLabel = {
+ const formattedLabel: FormattedLabel = {
value: `${labelValPrefix}${label.value}`,
className: labelClassName,
account: label,
@@ -167,10 +304,10 @@
* @param reviewer An object describing the reviewer that left the
* vote.
*/
- _computeDeleteClass(
+ private computeDeleteClass(
reviewer: ApprovalInfo,
mutable: boolean,
- change: ChangeInfo
+ change?: ParsedChangeInfo
) {
if (!mutable || !change || !change.removable_reviewers) {
return 'hidden';
@@ -186,7 +323,7 @@
* Closure annotation for Polymer.prototype.splice is off.
* For now, suppressing annotations.
*/
- _onDeleteVote(e: MouseEvent) {
+ private onDeleteVote(e: MouseEvent) {
if (!this.change) return;
e.preventDefault();
@@ -220,7 +357,7 @@
});
}
- _computeValueTooltip(labelInfo: LabelInfo, score: string) {
+ _computeValueTooltip(labelInfo: LabelInfo | undefined, score: string) {
if (
!labelInfo ||
!isDetailedLabelInfo(labelInfo) ||
@@ -235,7 +372,10 @@
* This method also listens change.labels.* in
* order to trigger computation when a label is removed from the change.
*/
- _computeShowPlaceholder(labelInfo?: LabelInfo) {
+ private computeShowPlaceholder(
+ labelInfo?: LabelInfo,
+ _?: LabelNameToInfoMap
+ ) {
if (!labelInfo) {
return '';
}
diff --git a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts
deleted file mode 100644
index 1186ee1..0000000
--- a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <style include="gr-font-styles">
- /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
- </style>
- <style include="gr-voting-styles">
- /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
- </style>
- <style include="shared-styles">
- .placeholder {
- color: var(--deemphasized-text-color);
- }
- .hidden {
- display: none;
- }
- /* Note that most of the .voteChip styles are coming from the
- gr-voting-styles include. */
- .voteChip {
- display: flex;
- justify-content: center;
- margin-right: var(--spacing-s);
- padding: 1px;
- }
- .max {
- background-color: var(--vote-color-approved);
- }
- .min {
- background-color: var(--vote-color-rejected);
- }
- .positive {
- background-color: var(--vote-color-recommended);
- border-radius: 12px;
- border: 1px solid var(--vote-outline-recommended);
- color: var(--chip-color);
- }
- .negative {
- background-color: var(--vote-color-disliked);
- border-radius: 12px;
- border: 1px solid var(--vote-outline-disliked);
- color: var(--chip-color);
- }
- .hidden {
- display: none;
- }
- td {
- vertical-align: top;
- }
- tr {
- min-height: var(--line-height-normal);
- }
- gr-tooltip-content {
- display: block;
- }
- gr-button {
- display: block;
- vertical-align: top;
- --gr-button-padding: 1px;
- }
- gr-button[disabled] iron-icon {
- color: var(--border-color);
- }
- gr-account-link {
- --account-max-length: 100px;
- margin-right: var(--spacing-xs);
- }
- iron-icon {
- height: calc(var(--line-height-normal) - 2px);
- width: calc(var(--line-height-normal) - 2px);
- }
- .labelValueContainer:not(:first-of-type) td {
- padding-top: var(--spacing-s);
- }
- </style>
- <p
- class$="placeholder [[_computeShowPlaceholder(labelInfo, change.labels.*)]]"
- >
- No votes
- </p>
- <table>
- <template
- is="dom-repeat"
- items="[[_mapLabelInfo(labelInfo, account, change.labels.*)]]"
- as="mappedLabel"
- >
- <tr class="labelValueContainer">
- <td>
- <gr-tooltip-content
- has-tooltip
- title="[[_computeValueTooltip(labelInfo, mappedLabel.value)]]"
- >
- <gr-label class$="[[mappedLabel.className]] voteChip font-small">
- [[mappedLabel.value]]
- </gr-label>
- </gr-tooltip-content>
- </td>
- <td>
- <gr-account-link
- account="[[mappedLabel.account]]"
- change="[[change]]"
- ></gr-account-link>
- </td>
- <td>
- <gr-tooltip-content has-tooltip title="Remove vote">
- <gr-button
- link=""
- aria-label="Remove vote"
- on-click="_onDeleteVote"
- data-account-id$="[[mappedLabel.account._account_id]]"
- class$="deleteBtn [[_computeDeleteClass(mappedLabel.account, mutable, change)]]"
- >
- <iron-icon icon="gr-icons:delete"></iron-icon>
- </gr-button>
- </gr-tooltip-content>
- </td>
- </tr>
- </template>
- </table>
-`;
diff --git a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_test.ts b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_test.ts
index b1bd6fa..cad1f69 100644
--- a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_test.ts
@@ -66,15 +66,17 @@
element.labelInfo = label;
element.label = 'Code-Review';
- await flush();
+ await element.updateComplete;
});
- test('_computeCanDeleteVote', () => {
+ test('_computeCanDeleteVote', async () => {
element.mutable = false;
+ await element.updateComplete;
const removeButton = queryAndAssert<GrButton>(element, 'gr-button');
assert.isTrue(isHidden(removeButton));
element.change!.removable_reviewers = [account];
element.mutable = true;
+ await element.updateComplete;
assert.isFalse(isHidden(removeButton));
});
@@ -109,14 +111,14 @@
suite('label color and order', () => {
test('valueless label rejected', async () => {
element.labelInfo = {rejected: {name: 'someone'}};
- await flush();
+ await element.updateComplete;
const labels = queryAll<GrLabel>(element, 'gr-label');
assert.isTrue(labels[0].classList.contains('negative'));
});
test('valueless label approved', async () => {
element.labelInfo = {approved: {name: 'someone'}};
- await flush();
+ await element.updateComplete;
const labels = queryAll<GrLabel>(element, 'gr-label');
assert.isTrue(labels[0].classList.contains('positive'));
});
@@ -137,7 +139,7 @@
'+2': 'Ready to submit',
},
};
- await flush();
+ await element.updateComplete;
const labels = queryAll<GrLabel>(element, 'gr-label');
assert.isTrue(labels[0].classList.contains('max'));
assert.isTrue(labels[1].classList.contains('positive'));
@@ -157,7 +159,7 @@
'+1': 'Looks good to me',
},
};
- await flush();
+ await element.updateComplete;
const labels = queryAll<GrLabel>(element, 'gr-label');
assert.isTrue(labels[0].classList.contains('max'));
assert.isTrue(labels[1].classList.contains('min'));
@@ -175,7 +177,7 @@
'+2': 'Looks good to me',
},
};
- await flush();
+ await element.updateComplete;
const labels = queryAll<GrLabel>(element, 'gr-label');
assert.isTrue(labels[0].classList.contains('max'));
assert.isTrue(labels[1].classList.contains('positive'));
@@ -195,7 +197,7 @@
'+1': 'Looks good to me',
},
};
- await flush();
+ await element.updateComplete;
const chips = queryAll<GrAccountLink>(element, 'gr-account-link');
assert.equal(chips[0].account!._account_id, element.account._account_id);
});
@@ -217,7 +219,7 @@
assert.equal(element._computeValueTooltip(labelInfo, score), '');
});
- test('placeholder', () => {
+ test('placeholder', async () => {
const values = {
'0': 'No score',
'+1': 'good',
@@ -226,30 +228,37 @@
'-2': 'terrible',
};
element.labelInfo = {};
+ await element.updateComplete;
assert.isFalse(
isHidden(queryAndAssert<HTMLParagraphElement>(element, '.placeholder'))
);
element.labelInfo = {all: [], values};
+ await element.updateComplete;
assert.isFalse(
isHidden(queryAndAssert<HTMLParagraphElement>(element, '.placeholder'))
);
element.labelInfo = {all: [{value: 1}], values};
+ await element.updateComplete;
assert.isTrue(
isHidden(queryAndAssert<HTMLParagraphElement>(element, '.placeholder'))
);
element.labelInfo = {rejected: account};
+ await element.updateComplete;
assert.isTrue(
isHidden(queryAndAssert<HTMLParagraphElement>(element, '.placeholder'))
);
element.labelInfo = {rejected: account, all: [{value: 1}], values};
+ await element.updateComplete;
assert.isTrue(
isHidden(queryAndAssert<HTMLParagraphElement>(element, '.placeholder'))
);
element.labelInfo = {approved: account};
+ await element.updateComplete;
assert.isTrue(
isHidden(queryAndAssert<HTMLParagraphElement>(element, '.placeholder'))
);
element.labelInfo = {approved: account, all: [{value: 1}], values};
+ await element.updateComplete;
assert.isTrue(
isHidden(queryAndAssert<HTMLParagraphElement>(element, '.placeholder'))
);
