Outline the implementation of the approvals dialog (#1596)

* Outline the implementation of the approvals dialog box.

* Fix some JS lint.

static/components.js

@@ -14,6 +14,7 @@ import '@polymer/paper-styles/color.js';
 // chromedash components
 import './elements/icons';
 import './elements/chromedash-accordion';
+import './elements/chromedash-approvals-dialog';
 import './elements/chromedash-banner';
 import './elements/chromedash-callout';
 import './elements/chromedash-color-status';

static/elements/chromedash-approvals-dialog.js

@@ -0,0 +1,42 @@
+import {LitElement, css, html} from 'lit-element';
+import './chromedash-dialog';
+import SHARED_STYLES from '../css/shared.css';
+
+class ChromedashApprovalsDialog extends LitElement {
+  static get properties() {
+    return {
+      signedInUser: {type: String},
+      featureId: {type: Number},
+      canApprove: {type: Boolean},
+    };
+  }
+
+  constructor() {
+    super();
+    this.signedInUser = ''; // email address
+    this.canApprove = false;
+  }
+
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      css`
+      `];
+  }
+
+  openWithFeature(featureId) {
+    this.featureId = featureId;
+    this.shadowRoot.querySelector('chromedash-dialog').open();
+  }
+
+  render() {
+    const heading = 'TODO: Feature name';
+    return html`
+      <chromedash-dialog heading="${heading}">
+        TODO: dialog content
+      </chromedash-dialog>
+    `;
+  }
+}
+
+customElements.define('chromedash-approvals-dialog', ChromedashApprovalsDialog);

static/elements/chromedash-feature-table.js

@@ -87,7 +87,7 @@ class ChromedashFeatureTable extends LitElement {
 
     // handled in chromedash-myfeatures.js
     this._fireEvent('star-toggle-event', {
-      feature: featureId,
+      featureId: featureId,
       doStar: newStarred,
     });
   }
@@ -106,17 +106,20 @@ class ChromedashFeatureTable extends LitElement {
     return nothing;
   }
 
-  openApprovalsDialog(feature) {
-    alert('TODO show approvals for ' + feature.id);
+  openApprovalsDialog(featureId) {
+    // handled in chromedash-myfeatures.js
+    this._fireEvent('open-approvals-event', {
+      featureId: featureId,
+    });
   }
 
   renderApprovalsIcon(feature) {
     return html`
       <a href="#" class="tooltip"
-        @click="${() => this.openApprovalsDialog(feature)}"
+        @click="${() => this.openApprovalsDialog(feature.id)}"
         title="Review approvals">
         <iron-icon icon="chromestatus:approval"></iron-icon>
-      </span>
+      </a>
     `;
   }
 
@@ -125,7 +128,7 @@ class ChromedashFeatureTable extends LitElement {
       <a href="/guide/edit/${feature.id}" class="tooltip"
         title="Edit feature">
         <iron-icon icon="chromestatus:create"></iron-icon>
-      </span>
+      </a>
     `;
   }
 

static/elements/chromedash-myfeatures.js

@@ -1,12 +1,15 @@
 import {LitElement, css, html} from 'lit-element';
 import {nothing} from 'lit-html';
+import './chromedash-accordion';
+import './chromedash-approvals-dialog';
+import './chromedash-feature-table';
 import SHARED_STYLES from '../css/shared.css';
 
 
 class ChromedashMyFeatures extends LitElement {
   static get properties() {
     return {
-      signedIn: {type: Boolean},
+      signedInUser: {type: String},
       canEdit: {type: Boolean},
       canApprove: {type: Boolean},
       loginUrl: {type: String},
@@ -16,6 +19,7 @@ class ChromedashMyFeatures extends LitElement {
 
   constructor() {
     super();
+    this.signedInUser = ''; // email address
     this.starredFeatures = new Set();
     this.canEdit = false;
     this.canApprove = false;
@@ -34,12 +38,12 @@ class ChromedashMyFeatures extends LitElement {
   // Handles the Star-Toggle event fired by any one of the child components
   handleStarToggle(e) {
     const newStarredFeatures = new Set(this.starredFeatures);
-    window.csClient.setStar(e.detail.feature, e.detail.doStar)
+    window.csClient.setStar(e.detail.featureId, e.detail.doStar)
       .then(() => {
         if (e.detail.doStar) {
-          newStarredFeatures.add(e.detail.feature);
+          newStarredFeatures.add(e.detail.featureId);
         } else {
-          newStarredFeatures.delete(e.detail.feature);
+          newStarredFeatures.delete(e.detail.featureId);
         }
         this.starredFeatures = newStarredFeatures;
       })
@@ -48,6 +52,11 @@ class ChromedashMyFeatures extends LitElement {
       });
   }
 
+  handleOpenApprovals(e) {
+    const featureId = e.detail.featureId;
+    const dialog = this.shadowRoot.querySelector('chromedash-approvals-dialog');
+    dialog.openWithFeature(featureId);
+  }
 
   renderBox(title, query, columns) {
     return html`
@@ -57,11 +66,12 @@ class ChromedashMyFeatures extends LitElement {
 
         <chromedash-feature-table
           query="${query}"
-          ?signedin=${this.signedIn}
-          ?canedit=${this.canEdit}
+          ?signedIn=${Boolean(this.signedInUser)}
+          ?canEdit=${this.canEdit}
           ?canApprove=${this.canApprove}
           .starredFeatures=${this.starredFeatures}
           @star-toggle-event=${this.handleStarToggle}
+          @open-approvals-event=${this.handleOpenApprovals}
           rows=10 columns=${columns}>
         </chromedash-feature-table>
       </chromedash-accordion>
@@ -88,6 +98,9 @@ class ChromedashMyFeatures extends LitElement {
       ${this.canApprove ? this.renderPendingApprovals() : nothing}
       ${this.renderIOwn()}
       ${this.renderIStarred()}
+      <chromedash-approvals-dialog
+        .signedInUser=${this.signedInUser}
+      ></chromedash-approvals-dialog>
     `;
   }
 }

templates/myfeatures.html

@@ -13,13 +13,12 @@
 {% block content %}
 
 <chromedash-myfeatures
-  {% if user %} signedin {% endif %}
+  {% if user %} signedinuser="{{user.email}}" {% endif %}
   {% if user.can_edit %} canedit {% endif %}
   {% if user.can_approve %} canapprove {% endif %}
   >
 </chromedash-myfeatures>
 
-
 {% endblock %}
 
 {% block js %}