Apply "Extract dashboard section into its own component"
This reverts commit 543a9f8ce35dee866aba6323d807fbb04c4e7c24 and adds
the fix on top.
Original change had to be reverted because the empty state slot was
not being applied 2 levels up.
Hence add a pass through slot in gr-change-list.
Testing mainly relies on unit tests and manually verifying slots are
rendered on the dashboard.
Specific steps for testing are:
- Verify special empty slots for Your Turn and Outgoing Review section
(screenshot attached)
- Verify generic empty slots for Incoming Review (screenshot attached)
- Add missing test coverage for showStar and showNumber property in
GrChangeList test
- Fix regression in change list navigation Change 329951
- Add Shadow DOM UT for GrChangeList Change 329962
- Add Shadow DOM UT for GrChangeListItem Change 329964
- Hovercard actions from the dashboard (Add to AS / Remove from AS)
- Dashboard when logged out, star column is hidden (screenshot attached)
- Custom dashboard (screenshot attached)
Release-Notes: skip
Screenshots: https://imgur.com/a/IlCH1yc
Change-Id: I7fedb6cc52b819960a17c6f9cfd6bd310deb6e21
diff --git a/polygerrit-ui/app/constants/constants.ts b/polygerrit-ui/app/constants/constants.ts
index 3024597..6ed9646 100644
--- a/polygerrit-ui/app/constants/constants.ts
+++ b/polygerrit-ui/app/constants/constants.ts
@@ -305,3 +305,5 @@
export const RELOAD_DASHBOARD_INTERVAL_MS = 10 * 1000;
export const SHOWN_ITEMS_COUNT = 25;
+
+export const WAITING = 'Waiting';
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
index 73b043a..91e6b77 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
@@ -53,6 +53,7 @@
import {submitRequirementsStyles} from '../../../styles/gr-submit-requirements-styles';
import {ifDefined} from 'lit/directives/if-defined';
import {KnownExperimentId} from '../../../services/flags/flags';
+import {WAITING} from '../../../constants/constants';
enum ChangeSize {
XS = 10,
@@ -501,7 +502,7 @@
}
private renderCellWaiting() {
- if (this.computeIsColumnHidden('Waiting', this.visibleChangeTableColumns))
+ if (this.computeIsColumnHidden(WAITING, this.visibleChangeTableColumns))
return;
return html`
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-section/gr-change-list-section.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-section/gr-change-list-section.ts
new file mode 100644
index 0000000..c537b88
--- /dev/null
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-section/gr-change-list-section.ts
@@ -0,0 +1,311 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators';
+import {ChangeListSection} from '../gr-change-list/gr-change-list';
+import {
+ CLOSED,
+ YOUR_TURN,
+ GerritNav,
+} from '../../core/gr-navigation/gr-navigation';
+import {html} from 'lit-html/static';
+import {KnownExperimentId} from '../../../services/flags/flags';
+import {getAppContext} from '../../../services/app-context';
+import {ChangeInfo, ServerInfo, AccountInfo} from '../../../api/rest-api';
+import {changeListStyles} from '../../../styles/gr-change-list-styles';
+import {fontStyles} from '../../../styles/gr-font-styles';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {css} from '@lit/reactive-element';
+import {Metadata} from '../../../utils/change-metadata-util';
+import {WAITING} from '../../../constants/constants';
+import {ifDefined} from 'lit/directives/if-defined';
+
+const NUMBER_FIXED_COLUMNS = 3;
+const LABEL_PREFIX_INVALID_PROLOG = 'Invalid-Prolog-Rules-Label-Name--';
+const MAX_SHORTCUT_CHARS = 5;
+const INVALID_TOKENS = ['limit:', 'age:', '-age:'];
+
+export function computeLabelShortcut(labelName: string) {
+ if (labelName.startsWith(LABEL_PREFIX_INVALID_PROLOG)) {
+ labelName = labelName.slice(LABEL_PREFIX_INVALID_PROLOG.length);
+ }
+ // Compute label shortcut by splitting token by - and capitalizing first
+ // letter of each token.
+ return labelName
+ .split('-')
+ .reduce((previousValue, currentValue) => {
+ if (!currentValue) {
+ return previousValue;
+ }
+ return previousValue + currentValue[0].toUpperCase();
+ }, '')
+ .slice(0, MAX_SHORTCUT_CHARS);
+}
+
+@customElement('gr-change-list-section')
+export class GrChangeListSection extends LitElement {
+ @property({type: Array})
+ visibleChangeTableColumns?: string[];
+
+ @property({type: Boolean})
+ showStar = false;
+
+ @property({type: Boolean})
+ showNumber?: boolean; // No default value to prevent flickering.
+
+ @property({type: Number})
+ selectedIndex?: number; // The relative index of the change that is selected
+
+ @property({type: Array})
+ labelNames: string[] = [];
+
+ @property({type: Array})
+ dynamicHeaderEndpoints?: string[];
+
+ @property({type: Object})
+ changeSection!: ChangeListSection;
+
+ @property({type: Object})
+ config?: ServerInfo;
+
+ @property({type: Boolean})
+ isCursorMoving = false;
+
+ /**
+ * The logged-in user's account, or an empty object if no user is logged
+ * in.
+ */
+ @property({type: Object})
+ account: AccountInfo | undefined = undefined;
+
+ private readonly flagsService = getAppContext().flagsService;
+
+ static override get styles() {
+ return [
+ changeListStyles,
+ fontStyles,
+ sharedStyles,
+ css`
+ :host {
+ display: contents;
+ }
+ .section-count-label {
+ color: var(--deemphasized-text-color);
+ font-family: var(--font-family);
+ font-size: var(--font-size-small);
+ font-weight: var(--font-weight-normal);
+ line-height: var(--line-height-small);
+ }
+ `,
+ ];
+ }
+
+ override render() {
+ const columns = this.computeColumns();
+ const colSpan = this.computeColspan(columns);
+ return html`
+ ${this.renderSectionHeader(colSpan)}
+ <tbody class="groupContent">
+ ${this.isEmpty()
+ ? this.renderNoChangesRow(colSpan)
+ : this.renderColumnHeaders(columns)}
+ ${this.changeSection.results.map((change, index) =>
+ this.renderChangeRow(change, index, columns)
+ )}
+ </tbody>
+ `;
+ }
+
+ private renderNoChangesRow(colSpan: number) {
+ return html`
+ <tr class="noChanges">
+ <td class="leftPadding" aria-hidden="true"></td>
+ <td
+ class="star"
+ ?aria-hidden=${!this.showStar}
+ ?hidden=${!this.showStar}
+ ></td>
+ <td class="cell" colspan="${colSpan}">
+ ${this.changeSection!.emptyStateSlotName
+ ? html`<slot
+ name="${this.changeSection!.emptyStateSlotName}"
+ ></slot>`
+ : 'No changes'}
+ </td>
+ </tr>
+ `;
+ }
+
+ private renderSectionHeader(colSpan: number) {
+ if (
+ this.changeSection.name === undefined ||
+ this.changeSection.countLabel === undefined ||
+ this.changeSection.query === undefined
+ )
+ return;
+
+ return html`
+ <tbody>
+ <tr class="groupHeader">
+ <td aria-hidden="true" class="leftPadding"></td>
+ ${this.renderSelectionHeader()}
+ <td aria-hidden="true" class="star" ?hidden=${!this.showStar}></td>
+ <td class="cell" colspan="${colSpan}">
+ <h2 class="heading-3">
+ <a
+ href="${this.sectionHref(this.changeSection!.query)}"
+ class="section-title"
+ >
+ <span class="section-name">${this.changeSection!.name}</span>
+ <span class="section-count-label"
+ >${this.changeSection.countLabel}</span
+ >
+ </a>
+ </h2>
+ </td>
+ </tr>
+ </tbody>
+ `;
+ }
+
+ private renderColumnHeaders(columns: string[]) {
+ return html`
+ <tr class="groupTitle">
+ <td class="leftPadding" aria-hidden="true"></td>
+ ${this.renderSelectionHeader()}
+ <td
+ class="star"
+ aria-label="Star status column"
+ ?hidden=${!this.showStar}
+ ></td>
+ <td class="number" ?hidden=${!this.showNumber}>#</td>
+ ${columns.map(item => this.renderHeaderCell(item))}
+ ${this.labelNames?.map(labelName => this.renderLabelHeader(labelName))}
+ ${this.dynamicHeaderEndpoints?.map(pluginHeader =>
+ this.renderEndpointHeader(pluginHeader)
+ )}
+ </tr>
+ `;
+ }
+
+ private renderSelectionHeader() {
+ if (!this.flagsService.isEnabled(KnownExperimentId.BULK_ACTIONS)) return;
+ return html`<td aria-hidden="true" class="selection"></td>`;
+ }
+
+ private renderHeaderCell(item: string) {
+ return html`<td class="${item.toLowerCase()}">${item}</td>`;
+ }
+
+ private renderLabelHeader(labelName: string) {
+ return html`
+ <td class="label" title="${labelName}">
+ ${computeLabelShortcut(labelName)}
+ </td>
+ `;
+ }
+
+ private renderEndpointHeader(pluginHeader: string) {
+ return html`
+ <td class="endpoint">
+ <gr-endpoint-decorator .name="${pluginHeader}"></gr-endpoint-decorator>
+ </td>
+ `;
+ }
+
+ private renderChangeRow(
+ change: ChangeInfo,
+ index: number,
+ columns: string[]
+ ) {
+ const ariaLabel = this.computeAriaLabel(change);
+ const selected = this.computeItemSelected(index);
+ const tabindex = this.computeTabIndex(index);
+ return html`
+ <gr-change-list-item
+ .account=${this.account}
+ ?selected=${selected}
+ .change=${change}
+ .config=${this.config}
+ .sectionName=${this.changeSection!.name}
+ .visibleChangeTableColumns=${columns}
+ .showNumber=${this.showNumber}
+ ?showStar=${this.showStar}
+ tabindex=${ifDefined(tabindex)}
+ .labelNames=${this.labelNames}
+ aria-label="${ariaLabel}"
+ ></gr-change-list-item>
+ `;
+ }
+
+ /**
+ * This methods allows us to customize the columns per section.
+ * Private but used in test
+ *
+ */
+ computeColumns() {
+ const section = this.changeSection;
+ if (!section || !this.visibleChangeTableColumns) return [];
+ const cols = [...this.visibleChangeTableColumns];
+ const updatedIndex = cols.indexOf(Metadata.UPDATED);
+ if (section.name === YOUR_TURN.name && updatedIndex !== -1) {
+ cols[updatedIndex] = WAITING;
+ }
+ if (section.name === CLOSED.name && updatedIndex !== -1) {
+ cols[updatedIndex] = Metadata.SUBMITTED;
+ }
+ return cols;
+ }
+
+ // private but used in test
+ computeItemSelected(index: number) {
+ return index === this.selectedIndex;
+ }
+
+ private computeTabIndex(index: number) {
+ if (this.isCursorMoving) return 0;
+ return this.computeItemSelected(index) ? 0 : undefined;
+ }
+
+ // private but used in test
+ computeColspan(cols: string[]) {
+ if (!cols || !this.labelNames) return 1;
+ return cols.length + this.labelNames.length + NUMBER_FIXED_COLUMNS;
+ }
+
+ // private but used in test
+ processQuery(query: string) {
+ let tokens = query.split(' ');
+ tokens = tokens.filter(
+ token =>
+ !INVALID_TOKENS.some(invalidToken => token.startsWith(invalidToken))
+ );
+ return tokens.join(' ');
+ }
+
+ private sectionHref(query?: string) {
+ if (!query) return;
+ return GerritNav.getUrlForSearchQuery(this.processQuery(query));
+ }
+
+ // private but used in test
+ isEmpty() {
+ return !this.changeSection.results?.length;
+ }
+
+ private computeAriaLabel(change?: ChangeInfo) {
+ const sectionName = this.changeSection.name;
+ if (!change) return '';
+ return change.subject + (sectionName ? `, section: ${sectionName}` : '');
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'gr-change-list-section': GrChangeListSection;
+ }
+}
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-section/gr-change-list-section_test.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-section/gr-change-list-section_test.ts
new file mode 100644
index 0000000..0c76aac
--- /dev/null
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-section/gr-change-list-section_test.ts
@@ -0,0 +1,200 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+ GrChangeListSection,
+ computeLabelShortcut,
+} from './gr-change-list-section';
+import '../../../test/common-test-setup-karma';
+import './gr-change-list-section';
+import {
+ createChange,
+ createAccountDetailWithId,
+ createServerInfo,
+} from '../../../test/test-data-generators';
+import {NumericChangeId} from '../../../api/rest-api';
+import {
+ queryAll,
+ query,
+ queryAndAssert,
+ stubFlags,
+} from '../../../test/test-utils';
+import {GrChangeListItem} from '../gr-change-list-item/gr-change-list-item';
+import {columnNames} from '../gr-change-list/gr-change-list';
+
+const basicFixture = fixtureFromElement('gr-change-list-section');
+
+suite('gr-change-list section', () => {
+ let element: GrChangeListSection;
+
+ setup(async () => {
+ element = basicFixture.instantiate();
+ element.account = createAccountDetailWithId(1);
+ element.config = createServerInfo();
+ element.visibleChangeTableColumns = columnNames;
+ element.changeSection = {
+ name: 'test',
+ query: 'test',
+ results: [createChange()],
+ emptyStateSlotName: 'test',
+ };
+ await element.updateComplete;
+ });
+
+ test('selection checkbox is only shown if experiment is enabled', async () => {
+ assert.isNotOk(query(element, '.selection'));
+
+ stubFlags('isEnabled').returns(true);
+ element.requestUpdate();
+ await element.updateComplete;
+
+ assert.isOk(query(element, '.selection'));
+ });
+
+ test('colspans', async () => {
+ element.visibleChangeTableColumns = [];
+ element.changeSection = {results: [{...createChange()}]};
+ await element.updateComplete;
+ const tdItemCount = queryAll<HTMLTableElement>(element, 'td').length;
+
+ element.labelNames = [];
+ assert.equal(tdItemCount, element.computeColspan(element.computeColumns()));
+ });
+
+ test('computeItemSelected', () => {
+ element.selectedIndex = 1;
+ assert.isTrue(element.computeItemSelected(1));
+ assert.isFalse(element.computeItemSelected(2));
+ });
+
+ test('computed fields', () => {
+ assert.equal(computeLabelShortcut('Code-Review'), 'CR');
+ assert.equal(computeLabelShortcut('Verified'), 'V');
+ assert.equal(computeLabelShortcut('Library-Compliance'), 'LC');
+ assert.equal(computeLabelShortcut('PolyGerrit-Review'), 'PR');
+ assert.equal(computeLabelShortcut('polygerrit-review'), 'PR');
+ assert.equal(
+ computeLabelShortcut('Invalid-Prolog-Rules-Label-Name--Verified'),
+ 'V'
+ );
+ assert.equal(computeLabelShortcut('Some-Special-Label-7'), 'SSL7');
+ assert.equal(computeLabelShortcut('--Too----many----dashes---'), 'TMD');
+ assert.equal(
+ computeLabelShortcut('Really-rather-entirely-too-long-of-a-label-name'),
+ 'RRETL'
+ );
+ });
+
+ suite('empty section slots', () => {
+ test('empty section', async () => {
+ element.changeSection = {results: []};
+ await element.updateComplete;
+ const listItems = queryAll<GrChangeListItem>(
+ element,
+ 'gr-change-list-item'
+ );
+ assert.equal(listItems.length, 0);
+ const noChangesMsg = queryAll<HTMLTableRowElement>(element, '.noChanges');
+ assert.equal(noChangesMsg.length, 1);
+ });
+
+ test('are shown on empty sections with slot name', async () => {
+ const section = {
+ name: 'test',
+ query: 'test',
+ results: [],
+ emptyStateSlotName: 'test',
+ };
+ element.changeSection = section;
+ await element.updateComplete;
+
+ assert.isEmpty(queryAll(element, 'gr-change-list-item'));
+ queryAndAssert(element, 'slot[name="test"]');
+ });
+
+ test('are not shown on empty sections without slot name', async () => {
+ const section = {name: 'test', query: 'test', results: []};
+ element.changeSection = section;
+ await element.updateComplete;
+
+ assert.isEmpty(queryAll(element, 'gr-change-list-item'));
+ assert.notExists(query(element, 'slot[name="test"]'));
+ });
+
+ test('are not shown on non-empty sections with slot name', async () => {
+ const section = {
+ name: 'test',
+ query: 'test',
+ emptyStateSlotName: 'test',
+ results: [
+ {
+ ...createChange(),
+ _number: 0 as NumericChangeId,
+ labels: {Verified: {approved: {}}},
+ },
+ ],
+ };
+ element.changeSection = section;
+ await element.updateComplete;
+
+ assert.isNotEmpty(queryAll(element, 'gr-change-list-item'));
+ assert.notExists(query(element, 'slot[name="test"]'));
+ });
+ });
+});
+
+suite('dashboard queries', () => {
+ let element: GrChangeListSection;
+
+ setup(() => {
+ element = basicFixture.instantiate();
+ });
+
+ teardown(() => {
+ sinon.restore();
+ });
+
+ test('query without age and limit unchanged', () => {
+ const query = 'status:closed owner:me';
+ assert.deepEqual(element.processQuery(query), query);
+ });
+
+ test('query with age and limit', () => {
+ const query = 'status:closed age:1week limit:10 owner:me';
+ const expectedQuery = 'status:closed owner:me';
+ assert.deepEqual(element.processQuery(query), expectedQuery);
+ });
+
+ test('query with age', () => {
+ const query = 'status:closed age:1week owner:me';
+ const expectedQuery = 'status:closed owner:me';
+ assert.deepEqual(element.processQuery(query), expectedQuery);
+ });
+
+ test('query with limit', () => {
+ const query = 'status:closed limit:10 owner:me';
+ const expectedQuery = 'status:closed owner:me';
+ assert.deepEqual(element.processQuery(query), expectedQuery);
+ });
+
+ test('query with age as value and not key', () => {
+ const query = 'status:closed random:age';
+ const expectedQuery = 'status:closed random:age';
+ assert.deepEqual(element.processQuery(query), expectedQuery);
+ });
+
+ test('query with limit as value and not key', () => {
+ const query = 'status:closed random:limit';
+ const expectedQuery = 'status:closed random:limit';
+ assert.deepEqual(element.processQuery(query), expectedQuery);
+ });
+
+ test('query with -age key', () => {
+ const query = 'status:closed -age:1week';
+ const expectedQuery = 'status:closed';
+ assert.deepEqual(element.processQuery(query), expectedQuery);
+ });
+});
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
index 1172409..6da552a 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
@@ -17,14 +17,11 @@
import '../../shared/gr-cursor-manager/gr-cursor-manager';
import '../gr-change-list-item/gr-change-list-item';
+import '../gr-change-list-section/gr-change-list-section';
import {GrChangeListItem} from '../gr-change-list-item/gr-change-list-item';
import '../../plugins/gr-endpoint-decorator/gr-endpoint-decorator';
import {getAppContext} from '../../../services/app-context';
-import {
- GerritNav,
- YOUR_TURN,
- CLOSED,
-} from '../../core/gr-navigation/gr-navigation';
+import {GerritNav} from '../../core/gr-navigation/gr-navigation';
import {getPluginEndpoints} from '../../shared/gr-js-api-interface/gr-plugin-endpoints';
import {getPluginLoader} from '../../shared/gr-js-api-interface/gr-plugin-loader';
import {GrCursorManager} from '../../shared/gr-cursor-manager/gr-cursor-manager';
@@ -45,17 +42,14 @@
import {changeListStyles} from '../../../styles/gr-change-list-styles';
import {fontStyles} from '../../../styles/gr-font-styles';
import {sharedStyles} from '../../../styles/shared-styles';
-import {LitElement, PropertyValues, html, css} from 'lit';
+import {LitElement, PropertyValues, html, css, nothing} from 'lit';
import {customElement, property, state} from 'lit/decorators';
import {ShortcutController} from '../../lit/shortcut-controller';
import {Shortcut} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
import {queryAll} from '../../../utils/common-util';
import {ValueChangedEvent} from '../../../types/events';
import {KnownExperimentId} from '../../../services/flags/flags';
-
-const NUMBER_FIXED_COLUMNS = 3;
-const LABEL_PREFIX_INVALID_PROLOG = 'Invalid-Prolog-Rules-Label-Name--';
-const MAX_SHORTCUT_CHARS = 5;
+import {GrChangeListSection} from '../gr-change-list-section/gr-change-list-section';
export const columnNames = [
'Subject',
@@ -79,6 +73,36 @@
results: ChangeInfo[];
}
+/**
+ * Calculate the relative index of the currently selected change wrt to the
+ * section it belongs to.
+ * The 10th change in the overall list may be the 4th change in it's section
+ * so this method maps 10 to 4.
+ * selectedIndex contains the index of the change wrt the entire change list.
+ * Private but used in test
+ *
+ */
+export function computeRelativeIndex(
+ selectedIndex?: number,
+ sectionIndex?: number,
+ sections?: ChangeListSection[]
+) {
+ if (
+ selectedIndex === undefined ||
+ sectionIndex === undefined ||
+ sections === undefined
+ )
+ return;
+ for (let i = 0; i < sectionIndex; i++)
+ selectedIndex -= sections[i].results.length;
+ if (selectedIndex < 0) return; // selected change lies in previous sections
+
+ // the selectedIndex lies in the current section
+ if (selectedIndex < sections[sectionIndex].results.length)
+ return selectedIndex;
+ return; // selected change lies in future sections
+}
+
@customElement('gr-change-list')
export class GrChangeList extends LitElement {
/**
@@ -222,177 +246,41 @@
return html`
<table id="changeList">
${this.sections.map((changeSection, sectionIndex) =>
- this.renderSections(changeSection, sectionIndex, labelNames)
+ this.renderSection(changeSection, sectionIndex, labelNames)
)}
</table>
`;
}
- private renderSections(
+ private renderSection(
changeSection: ChangeListSection,
sectionIndex: number,
labelNames: string[]
) {
return html`
- ${this.renderSectionHeader(changeSection, labelNames)}
- <tbody class="groupContent">
- ${this.isEmpty(changeSection)
- ? this.renderNoChangesRow(changeSection, labelNames)
- : this.renderColumnHeaders(changeSection, labelNames)}
- ${changeSection.results.map((change, index) =>
- this.renderChangeRow(
- changeSection,
- change,
- index,
- sectionIndex,
- labelNames
- )
- )}
- </tbody>
- `;
- }
-
- private renderSelectionHeader() {
- if (!this.flagsService.isEnabled(KnownExperimentId.BULK_ACTIONS)) return;
- return html`<td aria-hidden="true" class="selection"></td>`;
- }
-
- private renderSectionHeader(
- changeSection: ChangeListSection,
- labelNames: string[]
- ) {
- if (!changeSection.name) return;
-
- return html`
- <tbody>
- <tr class="groupHeader">
- <td aria-hidden="true" class="leftPadding"></td>
- ${this.renderSelectionHeader()}
- <td aria-hidden="true" class="star" ?hidden=${!this.showStar}></td>
- <td
- class="cell"
- colspan="${this.computeColspan(changeSection, labelNames)}"
- >
- <h2 class="heading-3">
- <a
- href="${this.sectionHref(changeSection.query)}"
- class="section-title"
- >
- <span class="section-name">${changeSection.name}</span>
- <span class="section-count-label"
- >${changeSection.countLabel}</span
- >
- </a>
- </h2>
- </td>
- </tr>
- </tbody>
- `;
- }
-
- private renderNoChangesRow(
- changeSection: ChangeListSection,
- labelNames: string[]
- ) {
- return html`
- <tr class="noChanges">
- <td class="leftPadding" aria-hidden="true"></td>
- <td
- class="star"
- ?aria-hidden=${!this.showStar}
- ?hidden=${!this.showStar}
- ></td>
- <td
- class="cell"
- colspan="${this.computeColspan(changeSection, labelNames)}"
- >
- ${changeSection.emptyStateSlotName
- ? html`<slot name="${changeSection.emptyStateSlotName}"></slot>`
- : 'No changes'}
- </td>
- </tr>
- `;
- }
-
- private renderColumnHeaders(
- changeSection: ChangeListSection,
- labelNames: string[]
- ) {
- return html`
- <tr class="groupTitle">
- <td class="leftPadding" aria-hidden="true"></td>
- ${this.renderSelectionHeader()}
- <td
- class="star"
- aria-label="Star status column"
- ?hidden=${!this.showStar}
- ></td>
- <td class="number" ?hidden=${!this.showNumber}>#</td>
- ${this.computeColumns(changeSection).map(item =>
- this.renderHeaderCell(item)
- )}
- ${labelNames?.map(labelName => this.renderLabelHeader(labelName))}
- ${this.dynamicHeaderEndpoints?.map(pluginHeader =>
- this.renderEndpointHeader(pluginHeader)
- )}
- </tr>
- `;
- }
-
- private renderHeaderCell(item: string) {
- return html`<td class="${item.toLowerCase()}">${item}</td>`;
- }
-
- private renderLabelHeader(labelName: string) {
- return html`
- <td class="label" title="${labelName}">
- ${this.computeLabelShortcut(labelName)}
- </td>
- `;
- }
-
- private renderEndpointHeader(pluginHeader: string) {
- return html`
- <td class="endpoint">
- <gr-endpoint-decorator .name="${pluginHeader}"></gr-endpoint-decorator>
- </td>
- `;
- }
-
- private renderChangeRow(
- changeSection: ChangeListSection,
- change: ChangeInfo,
- index: number,
- sectionIndex: number,
- labelNames: string[]
- ) {
- const ariaLabel = this.computeAriaLabel(change, changeSection.name);
- const selected = this.computeItemSelected(
- sectionIndex,
- index,
- this.selectedIndex
- );
- const tabindex = this.computeTabIndex(
- sectionIndex,
- index,
- this.isCursorMoving,
- this.selectedIndex
- );
- const visibleChangeTableColumns = this.computeColumns(changeSection);
- return html`
- <gr-change-list-item
- .account=${this.account}
- ?selected=${selected}
- .change=${change}
- .config=${this.config}
- .sectionName=${changeSection.name}
- .visibleChangeTableColumns=${visibleChangeTableColumns}
- .showNumber=${this.showNumber}
- .showStar=${this.showStar}
- ?tabindex=${tabindex}
+ <gr-change-list-section
+ .changeSection=${changeSection}
.labelNames=${labelNames}
- aria-label=${ariaLabel}
- ></gr-change-list-item>
+ .dynamicHeaderEndpoints=${this.dynamicHeaderEndpoints}
+ .isCursorMoving=${this.isCursorMoving}
+ .config=${this.config}
+ .account=${this.account}
+ .selectedIndex=${computeRelativeIndex(
+ this.selectedIndex,
+ sectionIndex,
+ this.sections
+ )}
+ ?showStar=${this.showStar}
+ .showNumber=${this.showNumber}
+ .visibleChangeTableColumns=${this.visibleChangeTableColumns}
+ >
+ ${changeSection.emptyStateSlotName
+ ? html`<slot
+ slot="${changeSection.emptyStateSlotName}"
+ name="${changeSection.emptyStateSlotName}"
+ ></slot>`
+ : nothing}
+ </gr-change-list-section>
`;
}
@@ -468,31 +356,6 @@
return true;
}
- /**
- * This methods allows us to customize the columns per section.
- *
- * @param visibleColumns are the columns according to configs and user prefs
- */
- private computeColumns(section?: ChangeListSection): string[] {
- if (!section || !this.visibleChangeTableColumns) return [];
- const cols = [...this.visibleChangeTableColumns];
- const updatedIndex = cols.indexOf('Updated');
- if (section.name === YOUR_TURN.name && updatedIndex !== -1) {
- cols[updatedIndex] = 'Waiting';
- }
- if (section.name === CLOSED.name && updatedIndex !== -1) {
- cols[updatedIndex] = 'Submitted';
- }
- return cols;
- }
-
- // private but used in test
- computeColspan(section?: ChangeListSection, labelNames?: string[]) {
- const cols = this.computeColumns(section);
- if (!cols || !labelNames) return 1;
- return cols.length + labelNames.length + NUMBER_FIXED_COLUMNS;
- }
-
// private but used in test
computeLabelNames(sections: ChangeListSection[]) {
if (!sections) return [];
@@ -528,81 +391,10 @@
return labels.sort();
}
- // private but used in test
- computeLabelShortcut(labelName: string) {
- if (labelName.startsWith(LABEL_PREFIX_INVALID_PROLOG)) {
- labelName = labelName.slice(LABEL_PREFIX_INVALID_PROLOG.length);
- }
- return labelName
- .split('-')
- .reduce((a, i) => {
- if (!i) {
- return a;
- }
- return a + i[0].toUpperCase();
- }, '')
- .slice(0, MAX_SHORTCUT_CHARS);
- }
-
private changesChanged() {
this.sections = this.changes ? [{results: this.changes}] : [];
}
- // private but used in test
- processQuery(query: string) {
- let tokens = query.split(' ');
- const invalidTokens = ['limit:', 'age:', '-age:'];
- tokens = tokens.filter(
- token =>
- !invalidTokens.some(invalidToken => token.startsWith(invalidToken))
- );
- return tokens.join(' ');
- }
-
- private sectionHref(query?: string) {
- if (!query) return;
- return GerritNav.getUrlForSearchQuery(this.processQuery(query));
- }
-
- /**
- * Maps an index local to a particular section to the absolute index
- * across all the changes on the page.
- *
- * private but used in test
- *
- * @param sectionIndex index of section
- * @param localIndex index of row within section
- * @return absolute index of row in the aggregate dashboard
- */
- computeItemAbsoluteIndex(sectionIndex: number, localIndex: number) {
- let idx = 0;
- for (let i = 0; i < sectionIndex; i++) {
- idx += this.sections[i].results.length;
- }
- return idx + localIndex;
- }
-
- private computeItemSelected(
- sectionIndex: number,
- index: number,
- selectedIndex?: number
- ) {
- const idx = this.computeItemAbsoluteIndex(sectionIndex, index);
- return idx === selectedIndex;
- }
-
- private computeTabIndex(
- sectionIndex: number,
- index: number,
- isCursorMoving: boolean,
- selectedIndex?: number
- ) {
- if (isCursorMoving) return 0;
- return this.computeItemSelected(sectionIndex, index, selectedIndex)
- ? 0
- : undefined;
- }
-
private nextChange() {
this.isCursorMoving = true;
this.cursor.next();
@@ -619,8 +411,8 @@
fire(this, 'selected-index-changed', {value: this.cursor.index});
}
- private openChange() {
- const change = this.changeForIndex(this.selectedIndex);
+ private async openChange() {
+ const change = await this.changeForIndex(this.selectedIndex);
if (change) GerritNav.navigateToChange(change);
}
@@ -640,8 +432,8 @@
this.toggleStarForIndex(this.selectedIndex);
}
- private toggleStarForIndex(index?: number) {
- const changeEls = this.getListItems();
+ private async toggleStarForIndex(index?: number) {
+ const changeEls = await this.getListItems();
if (index === undefined || index >= changeEls.length || !changeEls[index]) {
return;
}
@@ -651,33 +443,41 @@
if (grChangeStar) grChangeStar.toggleStar();
}
- private changeForIndex(index?: number) {
- const changeEls = this.getListItems();
+ private async changeForIndex(index?: number) {
+ const changeEls = await this.getListItems();
if (index !== undefined && index < changeEls.length && changeEls[index]) {
return changeEls[index].change;
}
return null;
}
- private getListItems() {
- const items = queryAll<GrChangeListItem>(this, 'gr-change-list-item');
- return !items ? [] : Array.from(items);
+ // Private but used in tests
+ async getListItems() {
+ const items: GrChangeListItem[] = [];
+ const sections = queryAll<GrChangeListSection>(
+ this,
+ 'gr-change-list-section'
+ );
+ await Promise.all(Array.from(sections).map(s => s.updateComplete));
+ for (const section of sections) {
+ // getListItems() is triggered when sectionsChanged observer is triggered
+ // In some cases <gr-change-list-item> has not been attached to the DOM
+ // yet and hence queryAll returns []
+ // Once the items have been attached, sectionsChanged() is not called
+ // again and the cursor stops are not updated to have the correct value
+ // hence wait for section to render before querying for items
+ const res = queryAll<GrChangeListItem>(section, 'gr-change-list-item');
+ items.push(...res);
+ }
+ return items;
}
- private sectionsChanged() {
- this.cursor.stops = this.getListItems();
+ // Private but used in tests
+ async sectionsChanged() {
+ this.cursor.stops = await this.getListItems();
this.cursor.moveToStart();
if (this.selectedIndex) this.cursor.setCursorAtIndex(this.selectedIndex);
}
-
- private isEmpty(section: ChangeListSection) {
- return !section.results?.length;
- }
-
- private computeAriaLabel(change?: ChangeInfo, sectionName?: string) {
- if (!change) return '';
- return change.subject + (sectionName ? `, section: ${sectionName}` : '');
- }
}
declare global {
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.ts b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.ts
index 099abdb..365ba72 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.ts
@@ -16,7 +16,7 @@
*/
import '../../../test/common-test-setup-karma';
import './gr-change-list';
-import {GrChangeList} from './gr-change-list';
+import {GrChangeList, computeRelativeIndex} from './gr-change-list';
import {GerritNav} from '../../core/gr-navigation/gr-navigation';
import {
pressKey,
@@ -24,6 +24,7 @@
queryAll,
queryAndAssert,
stubFlags,
+ waitUntil,
} from '../../../test/test-utils';
import {Key} from '../../../utils/dom-util';
import {TimeFormat} from '../../../constants/constants';
@@ -33,6 +34,7 @@
createServerInfo,
} from '../../../test/test-data-generators';
import {GrChangeListItem} from '../gr-change-list-item/gr-change-list-item';
+import {GrChangeListSection} from '../gr-change-list-section/gr-change-list-section';
const basicFixture = fixtureFromElement('gr-change-list');
@@ -60,27 +62,8 @@
];
await element.updateComplete;
expect(element).shadowDom.to.equal(/* HTML */ `
- <gr-change-list-item aria-label="Test subject" selected="">
- </gr-change-list-item>
- <gr-change-list-item aria-label="Test subject"> </gr-change-list-item>
- <gr-change-list-item aria-label="Test subject"> </gr-change-list-item>
- <table id="changeList">
- <tbody class="groupContent">
- <tr class="groupTitle">
- <td aria-hidden="true" class="leftPadding"></td>
- <td aria-label="Star status column" class="star" hidden=""></td>
- <td class="number">#</td>
- <td class="subject">Subject</td>
- <td class="status">Status</td>
- <td class="owner">Owner</td>
- <td class="reviewers">Reviewers</td>
- <td class="repo">Repo</td>
- <td class="branch">Branch</td>
- <td class="updated">Updated</td>
- <td class="size">Size</td>
- </tr>
- </tbody>
- </table>
+ <gr-change-list-section> </gr-change-list-section>
+ <table id="changeList"></table>
`);
});
@@ -134,6 +117,36 @@
});
});
+ test('computeRelativeIndex', () => {
+ element.sections = [{results: new Array(1)}, {results: new Array(2)}];
+
+ let selectedChangeIndex = 0;
+ assert.equal(
+ computeRelativeIndex(selectedChangeIndex, 0, element.sections),
+ 0
+ );
+
+ // index lies outside the first section
+ assert.equal(
+ computeRelativeIndex(selectedChangeIndex, 1, element.sections),
+ undefined
+ );
+
+ selectedChangeIndex = 2;
+
+ // index lies outside the first section
+ assert.equal(
+ computeRelativeIndex(selectedChangeIndex, 0, element.sections),
+ undefined
+ );
+
+ // 3rd change belongs to the second section
+ assert.equal(
+ computeRelativeIndex(selectedChangeIndex, 1, element.sections),
+ 1
+ );
+ });
+
test('computed fields', () => {
assert.equal(
element.computeLabelNames([
@@ -175,61 +188,55 @@
]).length,
3
);
-
- assert.equal(element.computeLabelShortcut('Code-Review'), 'CR');
- assert.equal(element.computeLabelShortcut('Verified'), 'V');
- assert.equal(element.computeLabelShortcut('Library-Compliance'), 'LC');
- assert.equal(element.computeLabelShortcut('PolyGerrit-Review'), 'PR');
- assert.equal(element.computeLabelShortcut('polygerrit-review'), 'PR');
- assert.equal(
- element.computeLabelShortcut('Invalid-Prolog-Rules-Label-Name--Verified'),
- 'V'
- );
- assert.equal(element.computeLabelShortcut('Some-Special-Label-7'), 'SSL7');
- assert.equal(
- element.computeLabelShortcut('--Too----many----dashes---'),
- 'TMD'
- );
- assert.equal(
- element.computeLabelShortcut(
- 'Really-rather-entirely-too-long-of-a-label-name'
- ),
- 'RRETL'
- );
- });
-
- test('colspans', async () => {
- element.sections = [{results: [{...createChange()}]}];
- await element.updateComplete;
- const tdItemCount = queryAll<HTMLTableElement>(element, 'td').length;
-
- element.visibleChangeTableColumns = [];
- const labelNames: string[] | undefined = [];
- assert.equal(
- tdItemCount,
- element.computeColspan({results: [{...createChange()}]}, labelNames)
- );
});
test('keyboard shortcuts', async () => {
sinon.stub(element, 'computeLabelNames');
element.sections = [{results: new Array(1)}, {results: new Array(2)}];
element.selectedIndex = 0;
+ element.preferences = {
+ legacycid_in_change_table: true,
+ time_format: TimeFormat.HHMM_12,
+ change_table: [
+ 'Subject',
+ 'Status',
+ 'Owner',
+ 'Reviewers',
+ 'Comments',
+ 'Repo',
+ 'Branch',
+ 'Updated',
+ 'Size',
+ ' Status ',
+ ],
+ };
+ element.config = createServerInfo();
element.changes = [
{...createChange(), _number: 0 as NumericChangeId},
{...createChange(), _number: 1 as NumericChangeId},
{...createChange(), _number: 2 as NumericChangeId},
];
+ // explicitly trigger sectionsChanged so that cursor stops are properly
+ // updated
+ await element.sectionsChanged();
await element.updateComplete;
- const elementItems = queryAll<GrChangeListItem>(
+ const section = queryAndAssert<GrChangeListSection>(
element,
+ 'gr-change-list-section'
+ );
+ await section.updateComplete;
+ const elementItems = queryAll<GrChangeListItem>(
+ section,
'gr-change-list-item'
);
assert.equal(elementItems.length, 3);
assert.isTrue(elementItems[0].hasAttribute('selected'));
+ await element.updateComplete;
pressKey(element, 'j');
await element.updateComplete;
+ await section.updateComplete;
+
assert.equal(element.selectedIndex, 1);
assert.isTrue(elementItems[1].hasAttribute('selected'));
pressKey(element, 'j');
@@ -240,6 +247,7 @@
const navStub = sinon.stub(GerritNav, 'navigateToChange');
assert.equal(element.selectedIndex, 2);
pressKey(element, Key.ENTER);
+ await waitUntil(() => navStub.callCount > 1);
await element.updateComplete;
assert.deepEqual(
navStub.lastCall.args[0],
@@ -249,9 +257,14 @@
pressKey(element, 'k');
await element.updateComplete;
+ await section.updateComplete;
+
assert.equal(element.selectedIndex, 1);
+
+ const prevCount = navStub.callCount;
pressKey(element, Key.ENTER);
- await element.updateComplete;
+
+ await waitUntil(() => navStub.callCount > prevCount);
assert.deepEqual(
navStub.lastCall.args[0],
{...createChange(), _number: 1 as NumericChangeId},
@@ -272,8 +285,9 @@
'gr-change-list-item'
);
assert.equal(listItems.length, 0);
+ const section = queryAndAssert(element, 'gr-change-list-section');
const noChangesMsg = queryAndAssert<HTMLTableRowElement>(
- element,
+ section,
'.noChanges'
);
assert.ok(noChangesMsg);
@@ -287,88 +301,13 @@
'gr-change-list-item'
);
assert.equal(listItems.length, 0);
- const noChangesMsg = queryAll<HTMLTableRowElement>(element, '.noChanges');
- assert.equal(noChangesMsg.length, 2);
- });
-
- suite('empty section slots', () => {
- test('are shown on empty sections with slot name', async () => {
- const section = {
- name: 'test',
- query: 'test',
- results: [],
- emptyStateSlotName: 'test',
- };
- element.sections = [section];
- await element.updateComplete;
-
- assert.isEmpty(queryAll(element, 'gr-change-list-item'));
- queryAndAssert(element, 'slot[name="test"]');
+ const sections = queryAll<GrChangeListSection>(
+ element,
+ 'gr-change-list-section'
+ );
+ sections.forEach(section => {
+ assert.isOk(query(section, '.noChanges'));
});
-
- test('are not shown on empty sections without slot name', async () => {
- const section = {name: 'test', query: 'test', results: []};
- element.sections = [section];
- await element.updateComplete;
-
- assert.isEmpty(queryAll(element, 'gr-change-list-item'));
- assert.notExists(query(element, 'slot[name="test"]'));
- });
-
- test('are not shown on non-empty sections with slot name', async () => {
- const section = {
- name: 'test',
- query: 'test',
- emptyStateSlotName: 'test',
- results: [
- {
- ...createChange(),
- _number: 0 as NumericChangeId,
- labels: {Verified: {approved: {}}},
- },
- ],
- };
- element.sections = [section];
- await element.updateComplete;
-
- assert.isNotEmpty(queryAll(element, 'gr-change-list-item'));
- assert.notExists(query(element, 'slot[name="test"]'));
- });
- });
-
- test('selection checkbox is only shown if experiment is enabled', async () => {
- function propertiesSetup(element: GrChangeList) {
- element.sections = [{results: [{...createChange()}]}];
- element.account = {_account_id: 1001 as AccountId};
- element.preferences = {
- legacycid_in_change_table: true,
- time_format: TimeFormat.HHMM_12,
- change_table: [
- 'Subject',
- 'Status',
- 'Owner',
- 'Reviewers',
- 'Comments',
- 'Repo',
- 'Branch',
- 'Updated',
- 'Size',
- ' Status ',
- ],
- };
- element.config = createServerInfo();
- }
-
- element = basicFixture.instantiate();
- propertiesSetup(element);
- await element.updateComplete;
- assert.isNotOk(query(element, '.selection'));
-
- stubFlags('isEnabled').returns(true);
- element = basicFixture.instantiate();
- propertiesSetup(element);
- await element.updateComplete;
- assert.isOk(query(element, '.selection'));
});
suite('empty column preference', () => {
@@ -395,8 +334,9 @@
test('all columns visible', () => {
for (const column of element.changeTableColumns!) {
const elementClass = '.' + column.trim().toLowerCase();
+ const section = queryAndAssert(element, 'gr-change-list-section');
assert.isFalse(
- queryAndAssert<HTMLElement>(element, elementClass)!.hidden
+ queryAndAssert<HTMLElement>(section, elementClass)!.hidden
);
}
});
@@ -433,8 +373,9 @@
test('all columns visible', () => {
for (const column of element.changeTableColumns!) {
const elementClass = '.' + column.trim().toLowerCase();
+ const section = queryAndAssert(element, 'gr-change-list-section');
assert.isFalse(
- queryAndAssert<HTMLElement>(element, elementClass).hidden
+ queryAndAssert<HTMLElement>(section, elementClass).hidden
);
}
});
@@ -470,10 +411,11 @@
test('all columns except repo visible', () => {
for (const column of element.changeTableColumns!) {
const elementClass = '.' + column.trim().toLowerCase();
+ const section = queryAndAssert(element, 'gr-change-list-section');
if (column === 'Repo') {
- assert.isNotOk(query<HTMLElement>(element, elementClass));
+ assert.isNotOk(query<HTMLElement>(section, elementClass));
} else {
- assert.isOk(queryAndAssert<HTMLElement>(element, elementClass));
+ assert.isOk(queryAndAssert<HTMLElement>(section, elementClass));
}
}
});
@@ -484,6 +426,52 @@
assert.isFalse(element._isColumnEnabled('Assignee'));
});
+ test('showStar and showNumber', async () => {
+ element = basicFixture.instantiate();
+ element.sections = [{results: [{...createChange()}], name: 'a'}];
+ element.account = {_account_id: 1001 as AccountId};
+ element.preferences = {
+ legacycid_in_change_table: false, // sets showNumber false
+ time_format: TimeFormat.HHMM_12,
+ change_table: [
+ 'Subject',
+ 'Status',
+ 'Owner',
+ 'Reviewers',
+ 'Comments',
+ 'Branch',
+ 'Updated',
+ 'Size',
+ ' Status ',
+ ],
+ };
+ element.config = createServerInfo();
+ await element.updateComplete;
+ const section = query<GrChangeListSection>(
+ element,
+ 'gr-change-list-section'
+ )!;
+ await section.updateComplete;
+
+ const items = await element.getListItems();
+ assert.equal(items.length, 1);
+
+ assert.isNotOk(query(query(section, 'gr-change-list-item'), '.star'));
+ assert.isNotOk(query(query(section, 'gr-change-list-item'), '.number'));
+
+ element.showStar = true;
+ await element.updateComplete;
+ await section.updateComplete;
+ assert.isOk(query(query(section, 'gr-change-list-item'), '.star'));
+ assert.isNotOk(query(query(section, 'gr-change-list-item'), '.number'));
+
+ element.showNumber = true;
+ await element.updateComplete;
+ await section.updateComplete;
+ assert.isOk(query(query(section, 'gr-change-list-item'), '.star'));
+ assert.isOk(query(query(section, 'gr-change-list-item'), '.number'));
+ });
+
suite('random column does not exist', () => {
let element: GrChangeList;
@@ -504,151 +492,4 @@
assert.isNotOk(query<HTMLElement>(element, '.bad'));
});
});
-
- suite('dashboard queries', () => {
- let element: GrChangeList;
-
- setup(() => {
- element = basicFixture.instantiate();
- });
-
- teardown(() => {
- sinon.restore();
- });
-
- test('query without age and limit unchanged', () => {
- const query = 'status:closed owner:me';
- assert.deepEqual(element.processQuery(query), query);
- });
-
- test('query with age and limit', () => {
- const query = 'status:closed age:1week limit:10 owner:me';
- const expectedQuery = 'status:closed owner:me';
- assert.deepEqual(element.processQuery(query), expectedQuery);
- });
-
- test('query with age', () => {
- const query = 'status:closed age:1week owner:me';
- const expectedQuery = 'status:closed owner:me';
- assert.deepEqual(element.processQuery(query), expectedQuery);
- });
-
- test('query with limit', () => {
- const query = 'status:closed limit:10 owner:me';
- const expectedQuery = 'status:closed owner:me';
- assert.deepEqual(element.processQuery(query), expectedQuery);
- });
-
- test('query with age as value and not key', () => {
- const query = 'status:closed random:age';
- const expectedQuery = 'status:closed random:age';
- assert.deepEqual(element.processQuery(query), expectedQuery);
- });
-
- test('query with limit as value and not key', () => {
- const query = 'status:closed random:limit';
- const expectedQuery = 'status:closed random:limit';
- assert.deepEqual(element.processQuery(query), expectedQuery);
- });
-
- test('query with -age key', () => {
- const query = 'status:closed -age:1week';
- const expectedQuery = 'status:closed';
- assert.deepEqual(element.processQuery(query), expectedQuery);
- });
- });
-
- suite('gr-change-list sections', () => {
- let element: GrChangeList;
-
- setup(() => {
- element = basicFixture.instantiate();
- });
-
- test('keyboard shortcuts', async () => {
- element.selectedIndex = 0;
- element.sections = [
- {
- results: [
- {...createChange(), _number: 0 as NumericChangeId},
- {...createChange(), _number: 1 as NumericChangeId},
- {...createChange(), _number: 2 as NumericChangeId},
- ],
- },
- {
- results: [
- {...createChange(), _number: 3 as NumericChangeId},
- {...createChange(), _number: 4 as NumericChangeId},
- {...createChange(), _number: 5 as NumericChangeId},
- ],
- },
- {
- results: [
- {...createChange(), _number: 6 as NumericChangeId},
- {...createChange(), _number: 7 as NumericChangeId},
- {...createChange(), _number: 8 as NumericChangeId},
- ],
- },
- ];
- await element.updateComplete;
- const elementItems = queryAll<GrChangeListItem>(
- element,
- 'gr-change-list-item'
- );
- assert.equal(elementItems.length, 9);
-
- pressKey(element, 'j');
- assert.equal(element.selectedIndex, 1);
- pressKey(element, 'j');
-
- const navStub = sinon.stub(GerritNav, 'navigateToChange');
- assert.equal(element.selectedIndex, 2);
-
- pressKey(element, Key.ENTER);
- assert.deepEqual(
- navStub.lastCall.args[0],
- {...createChange(), _number: 2 as NumericChangeId},
- 'Should navigate to /c/2/'
- );
-
- pressKey(element, 'k');
- assert.equal(element.selectedIndex, 1);
- pressKey(element, Key.ENTER);
- assert.deepEqual(
- navStub.lastCall.args[0],
- {...createChange(), _number: 1 as NumericChangeId},
- 'Should navigate to /c/1/'
- );
-
- pressKey(element, 'j');
- pressKey(element, 'j');
- pressKey(element, 'j');
- assert.equal(element.selectedIndex, 4);
- pressKey(element, Key.ENTER);
- assert.deepEqual(
- navStub.lastCall.args[0],
- {...createChange(), _number: 4 as NumericChangeId},
- 'Should navigate to /c/4/'
- );
- });
-
- test('computeItemAbsoluteIndex', () => {
- sinon.stub(element, 'computeLabelNames');
- element.sections = [
- {results: new Array(1)},
- {results: new Array(2)},
- {results: new Array(3)},
- ];
-
- assert.equal(element.computeItemAbsoluteIndex(0, 0), 0);
- // Out of range but no matter.
- assert.equal(element.computeItemAbsoluteIndex(0, 1), 1);
-
- assert.equal(element.computeItemAbsoluteIndex(1, 0), 1);
- assert.equal(element.computeItemAbsoluteIndex(1, 1), 2);
- assert.equal(element.computeItemAbsoluteIndex(1, 2), 3);
- assert.equal(element.computeItemAbsoluteIndex(2, 0), 3);
- assert.equal(element.computeItemAbsoluteIndex(3, 0), 6);
- });
- });
});
