Implement pre-vote dialog for API Owners. (#3366)

* Implement pre-vote dialog for API Owners.

* Update client-src/elements/chromedash-prevote-dialog.js

Co-authored-by: Kyle Ju <kyleju@google.com>

* Remove unneeded logging

---------

Co-authored-by: Kyle Ju <kyleju@google.com>

client-src/elements/chromedash-gate-column.js

@@ -6,6 +6,9 @@ import {
   somePendingPrereqs,
   somePendingGates,
 } from './chromedash-preflight-dialog';
+import {
+  maybeOpenPrevoteDialog,
+} from './chromedash-prevote-dialog';
 import {autolink, showToastMessage, findProcessStage,
   renderAbsoluteDate, renderRelativeDate,
 } from './utils.js';
@@ -271,7 +274,7 @@ export class ChromedashGateColumn extends LitElement {
     this.showSaved = false;
   }
 
-  handleSave() {
+  saveVote() {
     this.submittingComment = true;
     window.csClient.setVote(
       this.feature.id, this.gate.id,
@@ -288,6 +291,21 @@ export class ChromedashGateColumn extends LitElement {
       });
   }
 
+  handleSave() {
+    Promise.all([
+      window.csClient.getGates(this.feature.id),
+    ]).then(([gatesRes]) => {
+      this.featureGates = gatesRes.gates;
+      const vote = this.voteSelectRef.value.value;
+      maybeOpenPrevoteDialog(this.featureGates, this.stage, this.gate, vote)
+        .then(() => {
+          this.saveVote();
+        });
+    }).catch(() => {
+      showToastMessage('Some errors occurred. Please refresh the page or try again later.');
+    });
+  }
+
   handleCancel() {
     this._fireEvent('close', {});
   }

client-src/elements/chromedash-preflight-dialog.js

@@ -32,7 +32,7 @@ export function somePendingGates(featureGates, feStage) {
 }
 
 
-function findPendingGates(featureGates, feStage) {
+export function findPendingGates(featureGates, feStage) {
   const gatesForStage = featureGates.filter(g => g.stage_id == feStage.id);
   const otherGates = gatesForStage.filter(g => g.team_name != 'API Owners');
   const pendingGates = otherGates.filter(g =>

client-src/elements/chromedash-prevote-dialog.js

@@ -0,0 +1,122 @@
+import {LitElement, css, html} from 'lit';
+import {SHARED_STYLES} from '../css/shared-css.js';
+import {findPendingGates} from './chromedash-preflight-dialog';
+import {VOTE_OPTIONS} from './form-field-enums';
+
+let prevoteDialogEl;
+
+
+function shouldShowPrevoteDialog(pendingGates, gate, vote) {
+  return (pendingGates.length > 0 &&
+          gate.team_name == 'API Owners' &&
+          vote == VOTE_OPTIONS.APPROVED[0]);
+}
+
+
+export async function maybeOpenPrevoteDialog(
+  featrureGates, stage, gate, vote) {
+  const pendingGates = findPendingGates(featrureGates, stage);
+  if (shouldShowPrevoteDialog(pendingGates, gate, vote)) {
+    return new Promise((resolve) => {
+      openPrevoteDialog(pendingGates, resolve);
+    });
+  } else {
+    return Promise.resolve();
+  }
+}
+
+
+async function openPrevoteDialog(pendingGates, resolve) {
+  if (!prevoteDialogEl) {
+    prevoteDialogEl = document.createElement('chromedash-prevote-dialog');
+    document.body.appendChild(prevoteDialogEl);
+  }
+  await prevoteDialogEl.updateComplete;
+  prevoteDialogEl.pendingGates = pendingGates;
+  prevoteDialogEl.resolve = resolve;
+  prevoteDialogEl.show();
+}
+
+
+class ChromedashPrevoteDialog extends LitElement {
+  static get properties() {
+    return {
+      pendingGates: {type: Array},
+      resolve: {attribute: false},
+    };
+  }
+
+  constructor() {
+    super();
+    this.pendingGates = [];
+    this.resolve = function() {
+      console.log('Missing resolve action');
+    };
+  }
+
+  static get styles() {
+    return [
+      ...SHARED_STYLES,
+      css`
+      #prereqs-list li {
+        margin-left: 8px;
+        margin-bottom: 8px;
+        list-style: circle;
+      }
+      #prereqs-header {
+        margin-bottom: 8px;
+      }
+      sl-button {
+        float: right;
+        margin: var(--content-padding-half);
+      }
+      `,
+    ];
+  }
+
+  show() {
+    this.shadowRoot.querySelector('sl-dialog').show();
+  }
+
+  hide() {
+    this.shadowRoot.querySelector('sl-dialog').hide();
+  }
+
+  handleCancel() {
+    // Note: promise is never resolved.
+    this.hide();
+  }
+
+  handleProceed() {
+    this.resolve();
+    this.hide();
+  }
+
+  renderGateItem(gate) {
+    return html`
+      <li>${gate.team_name}</li>
+    `;
+  }
+
+  render() {
+    return html`
+      <sl-dialog label="Prerequsites for API Owner approval">
+        <div id="prereqs-header">
+          The following prerequisite gates are missing approvals:
+        </div>
+        <br>
+        <ul id="prereqs-list">
+           ${this.pendingGates.map((gate) => this.renderGateItem(gate))}
+        </ul>
+        <br>
+        <sl-button size="small"
+          @click=${this.handleProceed}
+        >Approve anyway</sl-button>
+        <sl-button size="small" variant="primary"
+          @click=${this.handleCancel}
+        >Don't approve yet</sl-button>
+      </sl-dialog>`;
+  }
+}
+
+customElements.define('chromedash-prevote-dialog', ChromedashPrevoteDialog);