Improve Submit requirements for multiple labels - Fix bug where more labels introduce more horizontal space caused by .separator class - Add labels when there is more than 1 label voted on in 1 submit requirement Release-Notes: skip Google-Bug-Id: b/296450377 Change-Id: I10d1c0668396c58aea365ea1c2a9e37f756f4c0d
diff --git a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts index 640b9d0..29a22a3 100644 --- a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts +++ b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
@@ -42,7 +42,6 @@ import {submitRequirementsStyles} from '../../../styles/gr-submit-requirements-styles'; import {resolve} from '../../../models/dependency'; import {checksModelToken} from '../../../models/checks/checks-model'; -import {join} from 'lit/directives/join.js'; import {map} from 'lit/directives/map.js'; /** @@ -111,14 +110,15 @@ white-space: nowrap; vertical-align: top; } - .votes-cell { + .votes { + display: flex; + flex-flow: column; + row-gap: var(--spacing-s); + } + .votes-line { display: flex; flex-flow: wrap; } - .votes-cell .separator { - width: 100%; - margin-top: var(--spacing-s); - } gr-vote-chip { margin-right: var(--spacing-s); } @@ -280,16 +280,21 @@ hasVotes(allLabels[label]) ); - return html`${join( - map( + return html`<div class="votes"> + ${map( associatedLabelsWithVotes, label => - html`${this.renderLabelVote(label, allLabels)} - ${this.renderOverrideLabels(requirement, label)}` - ), - html`<span class="separator"></span>` - )} - ${this.renderChecks(requirement)}`; + html`<div class="votes-line"> + ${this.renderLabelVote(label, allLabels)} + ${this.renderOverrideLabels( + requirement, + label, + associatedLabelsWithVotes.length > 1 + )} + ${this.renderChecks(requirement, label)} + </div>` + )} + </div> `; } renderLabelVote(label: string, labels: LabelNameToInfoMap) { @@ -317,12 +322,17 @@ renderOverrideLabels( requirement: SubmitRequirementResultInfo, - forLabel: string + forLabel: string, + showForAllLabel: boolean ) { - if (requirement.status !== SubmitRequirementStatus.OVERRIDDEN) return; + if ( + !showForAllLabel && + requirement.status !== SubmitRequirementStatus.OVERRIDDEN + ) + return; const requirementLabels = extractAssociatedLabels( requirement, - 'onlyOverride' + showForAllLabel ? 'all' : 'onlyOverride' ) .filter(label => label === forLabel) .filter(label => { @@ -334,13 +344,17 @@ ); } - renderChecks(requirement: SubmitRequirementResultInfo) { + renderChecks(requirement: SubmitRequirementResultInfo, labelName?: string) { const requirementLabels = extractAssociatedLabels(requirement); const errorRuns = this.runs .filter(run => hasResultsOf(run, Category.ERROR)) - .filter( - run => run.labelName && requirementLabels.includes(run.labelName) - ); + .filter(run => { + if (labelName) { + return labelName === run.labelName; + } else { + return run.labelName && requirementLabels.includes(run.labelName); + } + }); const errorRunsCount = errorRuns.reduce( (sum, run) => sum + getResultsOf(run, Category.ERROR).length, 0 @@ -357,9 +371,13 @@ .filter( r => r.status === RunStatus.RUNNING || r.status === RunStatus.SCHEDULED ) - .filter( - run => run.labelName && requirementLabels.includes(run.labelName) - ); + .filter(run => { + if (labelName) { + return labelName === run.labelName; + } else { + return run.labelName && requirementLabels.includes(run.labelName); + } + }); const runningRunsCount = runningRuns.length; if (runningRunsCount > 0) {
diff --git a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts index 212394c..a5a336c 100644 --- a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts +++ b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts
@@ -102,7 +102,11 @@ > <gr-endpoint-param name="change"></gr-endpoint-param> <gr-endpoint-param name="requirement"></gr-endpoint-param> - <gr-vote-chip></gr-vote-chip> + <div class="votes"> + <div class="votes-line"> + <gr-vote-chip> </gr-vote-chip> + </div> + </div> </gr-endpoint-decorator> </td> </tr> @@ -125,7 +129,11 @@ votesCell?.[0], /* HTML */ ` <div class="votes-cell"> - <gr-vote-chip> </gr-vote-chip> + <div class="votes"> + <div class="votes-line"> + <gr-vote-chip> </gr-vote-chip> + </div> + </div> </div> ` ); @@ -174,8 +182,12 @@ votesCell?.[0], /* HTML */ ` <div class="votes-cell"> - <gr-vote-chip></gr-vote-chip> - <gr-checks-chip></gr-checks-chip> + <div class="votes"> + <div class="votes-line"> + <gr-vote-chip> </gr-vote-chip> + <gr-checks-chip> </gr-checks-chip> + </div> + </div> </div> ` ); @@ -196,8 +208,12 @@ votesCell?.[0], /* HTML */ ` <div class="votes-cell"> - <gr-vote-chip></gr-vote-chip> - <gr-checks-chip></gr-checks-chip> + <div class="votes"> + <div class="votes-line"> + <gr-vote-chip> </gr-vote-chip> + <gr-checks-chip> </gr-checks-chip> + </div> + </div> </div> ` ); @@ -231,8 +247,12 @@ assert.dom.equal( votesCell?.[0], /* HTML */ `<div class="votes-cell"> - <gr-vote-chip> </gr-vote-chip> - <span class="overrideLabel"> Override </span> + <div class="votes"> + <div class="votes-line"> + <gr-vote-chip> </gr-vote-chip> + <span class="overrideLabel"> Override </span> + </div> + </div> </div>` ); }); @@ -274,11 +294,16 @@ assert.dom.equal( votesCell?.[0], /* HTML */ `<div class="votes-cell"> - <gr-vote-chip> </gr-vote-chip> - <span class="overrideLabel"> Override </span> - <span class="separator"></span> - <gr-vote-chip> </gr-vote-chip> - <span class="overrideLabel"> Override2 </span> + <div class="votes"> + <div class="votes-line"> + <gr-vote-chip> </gr-vote-chip> + <span class="overrideLabel"> Override </span> + </div> + <div class="votes-line"> + <gr-vote-chip> </gr-vote-chip> + <span class="overrideLabel"> Override2 </span> + </div> + </div> </div>` ); });