Display gate chips in feature details. (#2549)

* Display gate chips in feature details.

* Removed change that is not needed for this PR.

* Fix js lint error

client-src/elements/chromedash-feature-detail.js

@@ -4,18 +4,19 @@ import {PLATFORMS_DISPLAYNAME} from './form-field-enums';
 import '@polymer/iron-icon';
 import './chromedash-activity-log';
 import './chromedash-callout';
+import './chromedash-gate-chip';
 import {autolink} from './utils.js';
 import {SHARED_STYLES} from '../sass/shared-css.js';
 
 const LONG_TEXT = 60;
 
-
 class ChromedashFeatureDetail extends LitElement {
   static get properties() {
     return {
       user: {type: Object},
       canEdit: {type: Boolean},
       feature: {type: Object},
+      gates: {type: Array},
       process: {type: Object},
       dismissedCues: {type: Array},
       anyCollapsed: {type: Boolean},
@@ -27,6 +28,7 @@ class ChromedashFeatureDetail extends LitElement {
     this.user = {};
     this.canEdit = false;
     this.feature = {};
+    this.gates = [];
     this.process = {};
     this.dismissedCues = [];
     this.anyCollapsed = true;
@@ -71,7 +73,8 @@ class ChromedashFeatureDetail extends LitElement {
         padding-bottom: 8px;
       }
 
-      .description {
+      .description,
+      .gates {
         padding: 8px 16px;
       }
 
@@ -306,6 +309,25 @@ class ChromedashFeatureDetail extends LitElement {
     return this.renderSection('Metadata', content);
   }
 
+  renderGateChip(gate) {
+    return html`
+      <chromedash-gate-chip
+        .feature=${this.feature}
+        .gate=${gate}
+      >
+      </chromedash-gate-chip>
+    `;
+  }
+
+  renderGateChips(feStage) {
+    const gatesForStage = this.gates.filter(g => g.stage_id == feStage.id);
+    return html`
+      <div class="gates">
+        ${gatesForStage.map(g => this.renderGateChip(g))}
+      </div>
+    `;
+  }
+
   findProcessStage(feStage) {
     for (const processStage of this.process.stages) {
       if (feStage.stage_type == processStage.stage_type) {
@@ -333,6 +355,7 @@ class ChromedashFeatureDetail extends LitElement {
         ${this.canEdit ? editButton : nothing}
         ${processStage.description}
       </p>
+      ${this.renderGateChips(feStage)}
       <section class="card">
         ${this.renderSectionFields(fields)}
       </section>

client-src/elements/chromedash-feature-page.js

@@ -87,6 +87,7 @@ export class ChromedashFeaturePage extends LitElement {
       user: {type: Object},
       featureId: {type: Number},
       feature: {type: Object},
+      gates: {type: Array},
       comments: {type: Array},
       process: {type: Object},
       dismissedCues: {type: Array},
@@ -102,6 +103,7 @@ export class ChromedashFeaturePage extends LitElement {
     this.user = {};
     this.featureId = 0;
     this.feature = {};
+    this.gates = [];
     this.comments = {};
     this.process = {};
     this.dismissedCues = [];
@@ -124,12 +126,14 @@ export class ChromedashFeaturePage extends LitElement {
     this.loading = true;
     Promise.all([
       window.csClient.getFeature(this.featureId),
+      window.csClient.getGates(this.featureId),
       window.csClient.getComments(this.featureId, null, false),
       window.csClient.getFeatureProcess(this.featureId),
       window.csClient.getDismissedCues(),
       window.csClient.getStars(),
-    ]).then(([feature, commentRes, process, dismissedCues, starredFeatures]) => {
+    ]).then(([feature, gatesRes, commentRes, process, dismissedCues, starredFeatures]) => {
       this.feature = feature;
+      this.gates = gatesRes.gates;
       this.comments = commentRes.comments;
       this.process = process;
       this.dismissedCues = dismissedCues;
@@ -189,11 +193,19 @@ export class ChromedashFeaturePage extends LitElement {
     });
   }
 
+  /* Open the general approvals dialog when the user clicks on stamp icon. */
   handleApprovalClick(e) {
     e.preventDefault();
     openApprovalsDialog(this.user, this.feature);
   }
 
+  /* Open the specific approvals dialog when the user clicks on a gate chip. */
+  // TODO(jrobbins): Make it specific.
+  handleOpenApprovals(e) {
+    e.preventDefault();
+    openApprovalsDialog(this.user, e.detail.feature);
+  }
+
   renderSkeletonSection() {
     return html`
       <section>
@@ -447,9 +459,12 @@ export class ChromedashFeaturePage extends LitElement {
         .user=${this.user}
         ?canEdit=${this.userCanEdit()}
         .feature=${this.feature}
+        .gates=${this.gates}
         .comments=${this.comments}
         .process=${this.process}
-        .dismissedCues=${this.dismissedCues}>
+        .dismissedCues=${this.dismissedCues}
+        @open-approvals-event=${this.handleOpenApprovals}
+       >
       </chromedash-feature-detail>
     `;
   }

client-src/elements/chromedash-feature-page_test.js

@@ -30,6 +30,7 @@ describe('chromedash-feature-page', () => {
     email: 'example@example.com',
   };
   const anon = null;
+  const gatesPromise = Promise.resolve([]);
   const commentsPromise = Promise.resolve([]);
   const processPromise = Promise.resolve({
     stages: [{
@@ -114,10 +115,12 @@ describe('chromedash-feature-page', () => {
     await fixture(html`<chromedash-toast></chromedash-toast>`);
     window.csClient = new ChromeStatusClient('fake_token', 1);
     sinon.stub(window.csClient, 'getFeature');
+    sinon.stub(window.csClient, 'getGates');
     sinon.stub(window.csClient, 'getComments');
     sinon.stub(window.csClient, 'getFeatureProcess');
     sinon.stub(window.csClient, 'getDismissedCues');
     sinon.stub(window.csClient, 'getStars');
+    window.csClient.getGates.returns(gatesPromise);
     window.csClient.getComments.returns(commentsPromise);
     window.csClient.getFeatureProcess.returns(processPromise);
     window.csClient.getDismissedCues.returns(dismissedCuesPromise);

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

@@ -3,7 +3,7 @@ import {SHARED_STYLES} from '../sass/shared-css.js';
 
 
 const GATE_STATE_TO_NAME = {
-  // TODO(jrobbins): NOT_STARTED.
+  0: 'Preparing', // PREPARING
   1: 'FYI', //  NA
   2: 'Pending', // REVIEW_REQUESTED
   3: 'Pending', // REVIEW_STARTED
@@ -14,7 +14,7 @@ const GATE_STATE_TO_NAME = {
 };
 
 const GATE_STATE_TO_ICON = {
-  // TODO(jrobbins): arrow_circle_right_20px NOT_STARTED.
+  0: 'arrow_circle_right_20px', // PREPARING
   1: 'visibility_20px', //  NA
   2: 'pending_20px', // REVIEW_REQUESTED
   3: 'pending_20px', // REVIEW_STARTED
@@ -65,6 +65,14 @@ class ChromedashGateChip extends LitElement {
        color: var(--gate-fyi-icon-color);
      }
 
+     sl-button.preparing::part(base) {
+       background: var(--gate-preparing-background);
+       color: var(--gate-preparing-color);
+     }
+     .preparing sl-icon {
+       color: var(--gate-preparing-icon-color);
+     }
+
      sl-button.pending::part(base) {
        background: var(--gate-pending-background);
        color: var(--gate-pending-color);

client-src/sass/theme.scss

@@ -119,6 +119,9 @@
   --gate-fyi-background: var(--md-gray-100);
   --gate-fyi-color: var(--md-gray-800);
   --gate-fyi-icon-color: var(--md-gray-800);
+  --gate-preparing-background: var(--md-gray-100);
+  --gate-preparing-color: var(--md-gray-800);
+  --gate-preparing-icon-color: var(--md-gray-800);
   --gate-pending-background: var(--md-blue-50);
   --gate-pending-color: var(--md-blue-900);
   --gate-pending-icon-color: var(--md-blue-900);