diff --git a/static_src/elements/ezt/ezt-app-base.js b/static_src/elements/ezt/ezt-app-base.js
new file mode 100644
index 0000000..0dc3eae
--- /dev/null
+++ b/static_src/elements/ezt/ezt-app-base.js
@@ -0,0 +1,62 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement} from 'lit-element';
+import qs from 'qs';
+import {store, connectStore} from 'reducers/base.js';
+import * as userV0 from 'reducers/userV0.js';
+import * as projectV0 from 'reducers/projectV0.js';
+import * as sitewide from 'reducers/sitewide.js';
+
+/**
+ * `<ezt-app-base>`
+ *
+ * Base component meant to simulate a subset of the work mr-app does on
+ * EZT pages in order to allow us to more easily glue web components
+ * on EZT pages to SPA web components.
+ *
+ */
+export class EztAppBase extends connectStore(LitElement) {
+  /** @override */
+  static get properties() {
+    return {
+      projectName: {type: String},
+      userDisplayName: {type: String},
+    };
+  }
+
+  /** @override */
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.mapUrlToQueryParams();
+  }
+
+  /** @override */
+  updated(changedProperties) {
+    if (changedProperties.has('userDisplayName') && this.userDisplayName) {
+      this.fetchUserData(this.userDisplayName);
+    }
+
+    if (changedProperties.has('projectName') && this.projectName) {
+      this.fetchProjectData(this.projectName);
+    }
+  }
+
+  fetchUserData(displayName) {
+    store.dispatch(userV0.fetch(displayName));
+  }
+
+  fetchProjectData(projectName) {
+    store.dispatch(projectV0.select(projectName));
+    store.dispatch(projectV0.fetch(projectName));
+  }
+
+  mapUrlToQueryParams() {
+    const params = qs.parse((window.location.search || '').substr(1));
+
+    store.dispatch(sitewide.setQueryParams(params));
+  }
+}
+customElements.define('ezt-app-base', EztAppBase);
diff --git a/static_src/elements/ezt/ezt-app-base.test.js b/static_src/elements/ezt/ezt-app-base.test.js
new file mode 100644
index 0000000..86eb5b1
--- /dev/null
+++ b/static_src/elements/ezt/ezt-app-base.test.js
@@ -0,0 +1,65 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+import sinon from 'sinon';
+import {EztAppBase} from './ezt-app-base.js';
+
+
+let element;
+
+describe('ezt-app-base', () => {
+  beforeEach(() => {
+    element = document.createElement('ezt-app-base');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, EztAppBase);
+  });
+
+  it('fetches user data when userDisplayName set', async () => {
+    sinon.stub(element, 'fetchUserData');
+
+    element.userDisplayName = 'test@example.com';
+
+    await element.updateComplete;
+
+    sinon.assert.calledOnce(element.fetchUserData);
+    sinon.assert.calledWith(element.fetchUserData, 'test@example.com');
+  });
+
+  it('does not fetch data when userDisplayName is empty', async () => {
+    sinon.stub(element, 'fetchUserData');
+    element.userDisplayName = '';
+
+    await element.updateComplete;
+
+    sinon.assert.notCalled(element.fetchUserData);
+  });
+
+  it('fetches project data when projectName set', async () => {
+    sinon.stub(element, 'fetchProjectData');
+
+    element.projectName = 'chromium';
+
+    await element.updateComplete;
+
+    sinon.assert.calledOnce(element.fetchProjectData);
+    sinon.assert.calledWith(element.fetchProjectData, 'chromium');
+  });
+
+  it('does not fetch data when projectName is empty', async () => {
+    sinon.stub(element, 'fetchProjectData');
+    element.projectName = '';
+
+    await element.updateComplete;
+
+    sinon.assert.notCalled(element.fetchProjectData);
+  });
+});
diff --git a/static_src/elements/ezt/ezt-element-package.js b/static_src/elements/ezt/ezt-element-package.js
new file mode 100644
index 0000000..90ffadb
--- /dev/null
+++ b/static_src/elements/ezt/ezt-element-package.js
@@ -0,0 +1,29 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This file bundles together all web components elements used on the
+// legacy EZT pages. This is to avoid having issues with registering
+// duplicate versions of dependencies.
+
+import page from 'page';
+
+import 'elements/framework/mr-dropdown/mr-account-dropdown.js';
+import 'elements/ezt/mr-bulk-approval-update/mr-bulk-approval-update.js';
+import 'elements/framework/links/mr-user-link/mr-user-link.js';
+import 'elements/chops/chops-timestamp/chops-timestamp.js';
+
+import 'elements/framework/mr-header/mr-header.js';
+import 'elements/issue-list/mr-chart/mr-chart.js';
+import 'elements/issue-detail/mr-flipper/mr-flipper.js';
+import 'elements/framework/mr-pref-toggle/mr-pref-toggle.js';
+import 'elements/ezt/ezt-show-columns-connector.js';
+import 'elements/ezt/ezt-app-base.js';
+
+// Register an empty set of page.js routes to allow the page() navigation
+// function to work.
+// Note: The EZT pages should NOT register the routes used by the SPA pages
+// without significant refactoring because doing so will lead to unexpected
+// routing behavior where the SPA is loaded on top of a server-rendered page
+// rather than instead of.
+page();
diff --git a/static_src/elements/ezt/ezt-footer-scripts-package.js b/static_src/elements/ezt/ezt-footer-scripts-package.js
new file mode 100644
index 0000000..85eeaa0
--- /dev/null
+++ b/static_src/elements/ezt/ezt-footer-scripts-package.js
@@ -0,0 +1,14 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This file bundles together scripts to be loaded through the legacy
+// EZT footer.
+
+import 'monitoring/client-logger.js';
+import 'monitoring/track-copy.js';
+
+// Allow EZT pages to import AutoRefreshPrpcClient.
+import AutoRefreshPrpcClient from 'prpc.js';
+
+window.AutoRefreshPrpcClient = AutoRefreshPrpcClient;
diff --git a/static_src/elements/ezt/ezt-show-columns-connector.js b/static_src/elements/ezt/ezt-show-columns-connector.js
new file mode 100644
index 0000000..c6b3347
--- /dev/null
+++ b/static_src/elements/ezt/ezt-show-columns-connector.js
@@ -0,0 +1,117 @@
+/**
+ * @fileoverview Description of this file.
+ */
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html} from 'lit-element';
+import {store, connectStore} from 'reducers/base.js';
+import qs from 'qs';
+import * as sitewide from 'reducers/sitewide.js';
+import 'elements/framework/mr-issue-list/mr-show-columns-dropdown.js';
+import {parseColSpec} from 'shared/issue-fields.js';
+import {equalsIgnoreCase} from 'shared/helpers.js';
+import {DEFAULT_ISSUE_FIELD_LIST} from 'shared/issue-fields.js';
+
+/**
+ * `<ezt-show-columns-connector>`
+ *
+ * Glue component to make "Show columns" dropdown work on EZT.
+ *
+ */
+export class EztShowColumnsConnector extends connectStore(LitElement) {
+  /** @override */
+  render() {
+    return html`
+      <mr-show-columns-dropdown
+        .defaultFields=${DEFAULT_ISSUE_FIELD_LIST}
+        .columns=${this.columns}
+        .phaseNames=${this.phaseNames}
+        .onHideColumn=${(name) => this.onHideColumn(name)}
+        .onShowColumn=${(name) => this.onShowColumn(name)}
+      ></mr-show-columns-dropdown>
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      initialColumns: {type: Array},
+      hiddenColumns: {type: Object},
+      queryParams: {type: Object},
+      colspec: {type: String},
+      phasespec: {type: String},
+    };
+  }
+
+  /** @override */
+  constructor() {
+    super();
+    this.hiddenColumns = new Set();
+    this.queryParams = {};
+  }
+
+  /** @override */
+  stateChanged(state) {
+    this.queryParams = sitewide.queryParams(state);
+  }
+
+  get columns() {
+    return this.initialColumns.filter((_, i) =>
+      !this.hiddenColumns.has(i));
+  }
+
+  get initialColumns() {
+    // EZT will always pass in a colspec.
+    return parseColSpec(this.colspec);
+  }
+
+  get phaseNames() {
+    return parseColSpec(this.phasespec);
+  }
+
+  onHideColumn(colName) {
+    // Custom column hiding logic to avoid reloading the
+    // EZT list page when a user hides a column.
+    const colIndex = this.initialColumns.findIndex(
+        (col) => equalsIgnoreCase(col, colName));
+
+    // Legacy code integration.
+    TKR_toggleColumn('hide_col_' + colIndex);
+
+    this.hiddenColumns.add(colIndex);
+
+    this.reflectColumnsToQueryParams();
+    this.requestUpdate();
+
+    // Don't continue navigation.
+    return false;
+  }
+
+  onShowColumn(colName) {
+    const colIndex = this.initialColumns.findIndex(
+        (col) => equalsIgnoreCase(col, colName));
+    if (colIndex >= 0) {
+      this.hiddenColumns.delete(colIndex);
+      TKR_toggleColumn('hide_col_' + colIndex);
+
+      this.reflectColumnsToQueryParams();
+      this.requestUpdate();
+      return false;
+    }
+    // Reload the page if this column is not part of the initial
+    // table render.
+    return true;
+  }
+
+  reflectColumnsToQueryParams() {
+    this.queryParams.colspec = this.columns.join(' ');
+
+    // Make sure the column changes in the URL.
+    window.history.replaceState({}, '', '?' + qs.stringify(this.queryParams));
+
+    store.dispatch(sitewide.setQueryParams(this.queryParams));
+  }
+}
+customElements.define('ezt-show-columns-connector', EztShowColumnsConnector);
diff --git a/static_src/elements/ezt/ezt-show-columns-connector.test.js b/static_src/elements/ezt/ezt-show-columns-connector.test.js
new file mode 100644
index 0000000..62bd13b
--- /dev/null
+++ b/static_src/elements/ezt/ezt-show-columns-connector.test.js
@@ -0,0 +1,41 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+import {EztShowColumnsConnector} from './ezt-show-columns-connector.js';
+
+
+let element;
+
+describe('ezt-show-columns-connector', () => {
+  beforeEach(() => {
+    element = document.createElement('ezt-show-columns-connector');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, EztShowColumnsConnector);
+  });
+
+  it('initialColumns parses colspec', () => {
+    element.colspec = 'Summary ID Owner';
+    assert.deepEqual(element.initialColumns, ['Summary', 'ID', 'Owner']);
+  });
+
+  it('filters columns based on column mask', () => {
+    sinon.stub(element, 'initialColumns').get(() => ['ID', 'Summary']);
+    element.hiddenColumns = new Set([1]);
+
+    assert.deepEqual(element.columns, ['ID']);
+  });
+
+  it('phaseNames parses phasespec', () => {
+    element.phasespec = 'stable beta stable-exp';
+    assert.deepEqual(element.phaseNames, ['stable', 'beta', 'stable-exp']);
+  });
+});
diff --git a/static_src/elements/ezt/mr-bulk-approval-update/mr-bulk-approval-update.js b/static_src/elements/ezt/mr-bulk-approval-update/mr-bulk-approval-update.js
new file mode 100644
index 0000000..d9318fc
--- /dev/null
+++ b/static_src/elements/ezt/mr-bulk-approval-update/mr-bulk-approval-update.js
@@ -0,0 +1,283 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html} from 'lit-element';
+import 'elements/issue-detail/metadata/mr-edit-field/mr-edit-field.js';
+import 'elements/framework/mr-error/mr-error.js';
+import 'react/mr-react-autocomplete.tsx';
+import {prpcClient} from 'prpc-client-instance.js';
+import {EMPTY_FIELD_VALUE} from 'shared/issue-fields.js';
+import {TEXT_TO_STATUS_ENUM} from 'shared/consts/approval.js';
+
+
+export const NO_UPDATES_MESSAGE =
+  'User lacks approver perms for approval in all issues.';
+export const NO_APPROVALS_MESSAGE = 'These issues don\'t have any approvals.';
+
+export class MrBulkApprovalUpdate extends LitElement {
+  /** @override */
+  render() {
+    return html`
+      <style>
+        mr-bulk-approval-update {
+          display: block;
+          margin-top: 30px;
+          position: relative;
+        }
+        button.clickable-text {
+          background: none;
+          border: 0;
+          color: hsl(0, 0%, 39%);
+          cursor: pointer;
+          text-decoration: underline;
+        }
+        .hidden {
+          display: none; !important;
+        }
+        .message {
+          background-color: beige;
+          width: 500px;
+        }
+        .note {
+          color: hsl(0, 0%, 25%);
+          font-size: 0.85em;
+          font-style: italic;
+        }
+        mr-bulk-approval-update table {
+          border: 1px dotted black;
+          cellspacing: 0;
+          cellpadding: 3;
+        }
+        #approversInput {
+          border-style: none;
+        }
+      </style>
+      <button
+        class="js-showApprovals clickable-text"
+        ?hidden=${this.approvalsFetched}
+        @click=${this.fetchApprovals}
+      >Show Approvals</button>
+      ${this.approvals.length ? html`
+        <form>
+          <table>
+            <tbody><tr>
+              <th><label for="approvalSelect">Approval:</label></th>
+              <td>
+                <select
+                  id="approvalSelect"
+                  @change=${this._changeHandlers.approval}
+                >
+                  ${this.approvals.map(({fieldRef}) => html`
+                    <option
+                      value=${fieldRef.fieldName}
+                      .selected=${fieldRef.fieldName === this._values.approval}
+                    >
+                      ${fieldRef.fieldName}
+                    </option>
+                  `)}
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <th><label for="approversInput">Approvers:</label></th>
+              <td>
+                <mr-react-autocomplete
+                  label="approversInput"
+                  vocabularyName="member"
+                  .multiple=${true}
+                  .value=${this._values.approvers}
+                  .onChange=${this._changeHandlers.approvers}
+                ></mr-react-autocomplete>
+              </td>
+            </tr>
+            <tr><th><label for="statusInput">Status:</label></th>
+              <td>
+                <select
+                  id="statusInput"
+                  @change=${this._changeHandlers.status}
+                >
+                  <option .selected=${!this._values.status}>
+                    ${EMPTY_FIELD_VALUE}
+                  </option>
+                  ${this.statusOptions.map((status) => html`
+                    <option
+                      value=${status}
+                      .selected=${status === this._values.status}
+                    >${status}</option>
+                  `)}
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <th><label for="commentText">Comment:</label></th>
+              <td colspan="4">
+                <textarea
+                  cols="30"
+                  rows="3"
+                  id="commentText"
+                  placeholder="Add an approval comment"
+                  .value=${this._values.comment || ''}
+                  @change=${this._changeHandlers.comment}
+                ></textarea>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <button
+                  class="js-save"
+                  @click=${this.save}
+                >Update Approvals only</button>
+              </td>
+              <td>
+                <span class="note">
+                 Note: Some approvals may not be updated if you lack
+                 approver perms.
+                </span>
+              </td>
+            </tr>
+          </tbody></table>
+        </form>
+      `: ''}
+      <div class="message">
+        ${this.responseMessage}
+        ${this.errorMessage ? html`
+          <mr-error>${this.errorMessage}</mr-error>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      approvals: {type: Array},
+      approvalsFetched: {type: Boolean},
+      statusOptions: {type: Array},
+      localIdsStr: {type: String},
+      projectName: {type: String},
+      responseMessage: {type: String},
+      _values: {type: Object},
+    };
+  }
+
+  /** @override */
+  constructor() {
+    super();
+    this.approvals = [];
+    this.statusOptions = Object.keys(TEXT_TO_STATUS_ENUM);
+    this.responseMessage = '';
+
+    this._values = {};
+    this._changeHandlers = {
+      approval: this._onChange.bind(this, 'approval'),
+      approvers: this._onChange.bind(this, 'approvers'),
+      status: this._onChange.bind(this, 'status'),
+      comment: this._onChange.bind(this, 'comment'),
+    };
+  }
+
+  /** @override */
+  createRenderRoot() {
+    return this;
+  }
+
+  get issueRefs() {
+    const {projectName, localIdsStr} = this;
+    if (!projectName || !localIdsStr) return [];
+    const issueRefs = [];
+    const localIds = localIdsStr.split(',');
+    localIds.forEach((localId) => {
+      issueRefs.push({projectName: projectName, localId: localId});
+    });
+    return issueRefs;
+  }
+
+  fetchApprovals(evt) {
+    const message = {issueRefs: this.issueRefs};
+    prpcClient.call('monorail.Issues', 'ListApplicableFieldDefs', message).then(
+        (resp) => {
+          if (resp.fieldDefs) {
+            this.approvals = resp.fieldDefs.filter((fieldDef) => {
+              return fieldDef.fieldRef.type == 'APPROVAL_TYPE';
+            });
+          }
+          if (!this.approvals.length) {
+            this.errorMessage = NO_APPROVALS_MESSAGE;
+          }
+          this.approvalsFetched = true;
+        }, (error) => {
+          this.approvalsFetched = true;
+          this.errorMessage = error;
+        });
+  }
+
+  save(evt) {
+    this.responseMessage = '';
+    this.errorMessage = '';
+    this.toggleDisableForm();
+    const selectedFieldDef = this.approvals.find(
+        (approval) => approval.fieldRef.fieldName === this._values.approval
+    ) || this.approvals[0];
+    const message = {
+      issueRefs: this.issueRefs,
+      fieldRef: selectedFieldDef.fieldRef,
+      send_email: true,
+    };
+    message.commentContent = this._values.comment;
+    const delta = {};
+    if (this._values.status !== EMPTY_FIELD_VALUE) {
+      delta.status = TEXT_TO_STATUS_ENUM[this._values.status];
+    }
+    const approversAdded = this._values.approvers;
+    if (approversAdded) {
+      delta.approverRefsAdd = approversAdded.map(
+          (name) => ({'displayName': name}));
+    }
+    if (Object.keys(delta).length) {
+      message.approvalDelta = delta;
+    }
+    prpcClient.call('monorail.Issues', 'BulkUpdateApprovals', message).then(
+        (resp) => {
+          if (resp.issueRefs && resp.issueRefs.length) {
+            const idsStr = Array.from(resp.issueRefs,
+                (ref) => ref.localId).join(', ');
+            this.responseMessage = `${this.getTimeStamp()}: Updated ${
+              selectedFieldDef.fieldRef.fieldName} in issues: ${idsStr} (${
+              resp.issueRefs.length} of ${this.issueRefs.length}).`;
+            this._values = {};
+          } else {
+            this.errorMessage = NO_UPDATES_MESSAGE;
+          };
+          this.toggleDisableForm();
+        }, (error) => {
+          this.errorMessage = error;
+          this.toggleDisableForm();
+        });
+  }
+
+  getTimeStamp() {
+    const date = new Date();
+    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+  }
+
+  toggleDisableForm() {
+    this.querySelectorAll('input, textarea, select, button').forEach(
+        (input) => {
+          input.disabled = !input.disabled;
+        });
+  }
+
+  /**
+   * Generic onChange handler to be bound to each form field.
+   * @param {string} key Unique name for the form field we're binding this
+   *   handler to. For example, 'owner', 'cc', or the name of a custom field.
+   * @param {Event | React.SyntheticEvent} event
+   * @param {string} value The new form value.
+   */
+  _onChange(key, event, value) {
+    this._values = {...this._values, [key]: value || event.target.value};
+  }
+}
+
+customElements.define('mr-bulk-approval-update', MrBulkApprovalUpdate);
diff --git a/static_src/elements/ezt/mr-bulk-approval-update/mr-bulk-approval-update.test.js b/static_src/elements/ezt/mr-bulk-approval-update/mr-bulk-approval-update.test.js
new file mode 100644
index 0000000..a0689e1
--- /dev/null
+++ b/static_src/elements/ezt/mr-bulk-approval-update/mr-bulk-approval-update.test.js
@@ -0,0 +1,185 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+import sinon from 'sinon';
+import {fireEvent} from '@testing-library/react';
+
+import {MrBulkApprovalUpdate, NO_APPROVALS_MESSAGE,
+  NO_UPDATES_MESSAGE} from './mr-bulk-approval-update.js';
+import {prpcClient} from 'prpc-client-instance.js';
+
+let element;
+
+describe('mr-bulk-approval-update', () => {
+  beforeEach(() => {
+    element = document.createElement('mr-bulk-approval-update');
+    document.body.appendChild(element);
+
+    sinon.stub(prpcClient, 'call');
+  });
+
+  afterEach(() => {
+    document.body.removeChild(element);
+    prpcClient.call.restore();
+  });
+
+  it('initializes', () => {
+    assert.instanceOf(element, MrBulkApprovalUpdate);
+  });
+
+  it('_computeIssueRefs: missing information', () => {
+    element.projectName = 'chromium';
+    assert.equal(element.issueRefs.length, 0);
+
+    element.projectName = null;
+    element.localIdsStr = '1,2,3,5';
+    assert.equal(element.issueRefs.length, 0);
+
+    element.localIdsStr = null;
+    assert.equal(element.issueRefs.length, 0);
+  });
+
+  it('_computeIssueRefs: normal', () => {
+    const project = 'chromium';
+    element.projectName = project;
+    element.localIdsStr = '1,2,3';
+    assert.deepEqual(element.issueRefs, [
+      {projectName: project, localId: '1'},
+      {projectName: project, localId: '2'},
+      {projectName: project, localId: '3'},
+    ]);
+  });
+
+  it('fetchApprovals: applicable fields exist', async () => {
+    const responseFieldDefs = [
+      {fieldRef: {type: 'INT_TYPE'}},
+      {fieldRef: {type: 'APPROVAL_TYPE'}},
+      {fieldRef: {type: 'APPROVAL_TYPE'}},
+    ];
+    const promise = Promise.resolve({fieldDefs: responseFieldDefs});
+    prpcClient.call.returns(promise);
+
+    sinon.spy(element, 'fetchApprovals');
+
+    await element.updateComplete;
+
+    element.querySelector('.js-showApprovals').click();
+    assert.isTrue(element.fetchApprovals.calledOnce);
+
+    // Wait for promise in fetchApprovals to resolve.
+    await promise;
+
+    assert.deepEqual([
+      {fieldRef: {type: 'APPROVAL_TYPE'}},
+      {fieldRef: {type: 'APPROVAL_TYPE'}},
+    ], element.approvals);
+    assert.equal(null, element.errorMessage);
+  });
+
+  it('fetchApprovals: applicable fields dont exist', async () => {
+    const promise = Promise.resolve({fieldDefs: []});
+    prpcClient.call.returns(promise);
+
+    await element.updateComplete;
+
+    element.querySelector('.js-showApprovals').click();
+
+    await promise;
+
+    assert.equal(element.approvals.length, 0);
+    assert.equal(NO_APPROVALS_MESSAGE, element.errorMessage);
+  });
+
+  it('save: normal', async () => {
+    const promise =
+      Promise.resolve({issueRefs: [{localId: '1'}, {localId: '3'}]});
+    prpcClient.call.returns(promise);
+    const fieldDefs = [
+      {fieldRef: {fieldName: 'Approval-One', type: 'APPROVAL_TYPE'}},
+      {fieldRef: {fieldName: 'Approval-Two', type: 'APPROVAL_TYPE'}},
+    ];
+    element.approvals = fieldDefs;
+    element.projectName = 'chromium';
+    element.localIdsStr = '1,2,3';
+
+    await element.updateComplete;
+
+    fireEvent.change(element.querySelector('#commentText'), {target: {value: 'comment'}});
+    fireEvent.change(element.querySelector('#statusInput'), {target: {value: 'NotApproved'}});
+    element.querySelector('.js-save').click();
+
+    // Wait for promise in save() to resolve.
+    await promise;
+    await element.updateComplete;
+
+    // Assert messages correct
+    assert.equal(
+        true,
+        element.responseMessage.includes(
+            'Updated Approval-One in issues: 1, 3 (2 of 3).'));
+    assert.equal('', element.errorMessage);
+
+    // Assert all inputs not disabled.
+    element.querySelectorAll('input, textarea, select').forEach((input) => {
+      assert.equal(input.disabled, false);
+    });
+
+    // Assert all inputs cleared.
+    element.querySelectorAll('input, textarea').forEach((input) => {
+      assert.equal(input.value, '');
+    });
+    element.querySelectorAll('select').forEach((select) => {
+      assert.equal(select.selectedIndex, 0);
+    });
+
+    // Assert BulkUpdateApprovals correctly called.
+    const expectedMessage = {
+      approvalDelta: {status: 'NOT_APPROVED'},
+      commentContent: 'comment',
+      fieldRef: fieldDefs[0].fieldRef,
+      issueRefs: element.issueRefs,
+      send_email: true,
+    };
+    sinon.assert.calledWith(
+        prpcClient.call,
+        'monorail.Issues',
+        'BulkUpdateApprovals',
+        expectedMessage);
+  });
+
+  it('save: no updates', async () => {
+    const promise = Promise.resolve({issueRefs: []});
+    prpcClient.call.returns(promise);
+    const fieldDefs = [
+      {fieldRef: {fieldName: 'Approval-One', type: 'APPROVAL_TYPE'}},
+      {fieldRef: {fieldName: 'Approval-Two', type: 'APPROVAL_TYPE'}},
+    ];
+    element.approvals = fieldDefs;
+    element.projectName = 'chromium';
+    element.localIdsStr = '1,2,3';
+
+    await element.updateComplete;
+
+    element.querySelector('#commentText').value = 'comment';
+    element.querySelector('#statusInput').value = 'NotApproved';
+    element.querySelector('.js-save').click();
+
+    // Wait for promise in save() to resolve
+    await promise;
+
+    // Assert messages correct.
+    assert.equal('', element.responseMessage);
+    assert.equal(NO_UPDATES_MESSAGE, element.errorMessage);
+
+    // Assert inputs not cleared.
+    assert.equal(element.querySelector('#commentText').value, 'comment');
+    assert.equal(element.querySelector('#statusInput').value, 'NotApproved');
+
+    // Assert inputs not disabled.
+    element.querySelectorAll('input, textarea, select').forEach((input) => {
+      assert.equal(input.disabled, false);
+    });
+  });
+});