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 11724096..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);
-    });
-  });
 });