From ff8bdd06468fcd51f338942b616acd2071261d82 Mon Sep 17 00:00:00 2001
From: Daniel Smith <56164590+DanielRyanSmith@users.noreply.github.com>
Date: Mon, 9 Jan 2023 12:14:43 -0800
Subject: [PATCH] gate chips display a short name for the gate type (#2634)

---
 client-src/elements/chromedash-feature-row.js | 20 ++++++++++++-------
 client-src/elements/form-field-enums.js       |  7 +++++++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/client-src/elements/chromedash-feature-row.js b/client-src/elements/chromedash-feature-row.js
index e49618c0..3434016c 100644
--- a/client-src/elements/chromedash-feature-row.js
+++ b/client-src/elements/chromedash-feature-row.js
@@ -1,5 +1,6 @@
 import {LitElement, css, html, nothing} from 'lit';
 import {SHARED_STYLES} from '../sass/shared-css.js';
+import {GATE_SHORT_NAMES} from './form-field-enums.js';
 
 
 class ChromedashFeatureRow extends LitElement {
@@ -162,17 +163,22 @@ class ChromedashFeatureRow extends LitElement {
     return activeStagesAndTheirGates;
   }
 
+  getGateShortName(gate) {
+    return `${GATE_SHORT_NAMES[gate.gate_type]}: ` || nothing;
+  }
+
   renderActiveStageAndGates(stageAndGates) {
-    const stageName = ''; // TODO(jrobbins) get this data.
     return html`
       <div>
-        ${stageName}
         ${stageAndGates.gates.map(gate => html`
-          <chromedash-gate-chip
-            .feature=${this.feature}
-            .stage=${stageAndGates.stage}
-            .gate=${gate}
-          ></chromedash-gate-chip>`)}
+          <div>
+            ${this.getGateShortName(gate)}
+            <chromedash-gate-chip
+              .feature=${this.feature}
+              .stage=${stageAndGates.stage}
+              .gate=${gate}
+            ></chromedash-gate-chip>
+          </div>`)}
       </div>
     `;
   }
diff --git a/client-src/elements/form-field-enums.js b/client-src/elements/form-field-enums.js
index 8b9d2704..3c53087d 100644
--- a/client-src/elements/form-field-enums.js
+++ b/client-src/elements/form-field-enums.js
@@ -130,6 +130,13 @@ export const DEPRECATED_FIELDS = new Set([
   'standardization',
 ]);
 
+export const GATE_SHORT_NAMES = {
+  1: 'Prototype',
+  2: 'OT',
+  3: 'OT Extension',
+  4: 'Ship',
+};
+
 export const IMPLEMENTATION_STATUS = {
   NO_ACTIVE_DEV: [1, 'No active development'],
   PROPOSED: [2, 'Proposed'],