Fix the icons of RUNNING chips
The primary icon should be RUNNING, but if there are results already,
then we want to also show the intermediate the result state as an icon.
Change-Id: I50d9452f12c739f94aad343cf79c1c20fe54aa1b
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
index 1b49f8a..31f17724 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {html} from 'lit-html';
+import {html, nothing} from 'lit-html';
import {classMap} from 'lit-html/directives/class-map';
import {
css,
@@ -29,8 +29,10 @@
import {
compareByWorstCategory,
fireActionTriggered,
+ iconForCategory,
iconForRun,
primaryRunAction,
+ worstCategory,
} from '../../services/checks/checks-util';
import {
allRuns$,
@@ -114,16 +116,16 @@
.chip.placeholder iron-icon {
display: none;
}
- .chip.error iron-icon {
+ iron-icon.error {
color: var(--error-foreground);
}
- .chip.warning iron-icon {
+ iron-icon.warning {
color: var(--warning-foreground);
}
- .chip.info-outline iron-icon {
+ iron-icon.info-outline {
color: var(--info-foreground);
}
- .chip.check-circle-outline iron-icon {
+ iron-icon.check-circle-outline {
color: var(--success-foreground);
}
/* Additional 'div' for increased specificity. */
@@ -198,7 +200,8 @@
return html`
<div @click="${this.handleChipClick}" class="${classMap(classes)}">
<div class="left">
- <iron-icon icon="gr-icons:${icon}"></iron-icon>
+ <iron-icon class="${icon}" icon="gr-icons:${icon}"></iron-icon>
+ ${this.renderAdditionalIcon()}
<span class="name">${this.run.checkName}</span>
</div>
<div class="right">
@@ -215,6 +218,20 @@
`;
}
+ /**
+ * For RUNNING we also want to render an icon representing the worst result
+ * that has been reported until now - if there are any results already.
+ */
+ renderAdditionalIcon() {
+ if (this.run.status !== RunStatus.RUNNING) return nothing;
+ const category = worstCategory(this.run);
+ if (!category) return nothing;
+ const icon = iconForCategory(category);
+ return html`
+ <iron-icon class="${icon}" icon="gr-icons:${icon}"></iron-icon>
+ `;
+ }
+
private handleChipClick(e: MouseEvent) {
e.stopPropagation();
e.preventDefault();
diff --git a/polygerrit-ui/app/services/checks/checks-util.ts b/polygerrit-ui/app/services/checks/checks-util.ts
index 1613359..ea532ea 100644
--- a/polygerrit-ui/app/services/checks/checks-util.ts
+++ b/polygerrit-ui/app/services/checks/checks-util.ts
@@ -76,8 +76,12 @@
}
export function iconForRun(run: CheckRun) {
- const category = worstCategory(run);
- return category ? iconForCategory(category) : iconForStatus(run.status);
+ if (run.status !== RunStatus.COMPLETED) {
+ return iconForStatus(run.status);
+ } else {
+ const category = worstCategory(run);
+ return category ? iconForCategory(category) : iconForStatus(run.status);
+ }
}
export function iconForStatus(status: RunStatus) {
