Frontend for WebDX features integration

GoogleChrome · Jan 2, 2025 · 8cd2703 · 8cd2703
1 parent e495689
commit 8cd2703
Show file tree

Hide file tree

Showing 4 changed files with 555 additions and 3 deletions.
diff --git a/client-src/elements/chromedash-form-field.ts b/client-src/elements/chromedash-form-field.ts
@@ -14,6 +14,7 @@ import {
 } from './utils.js';
 import {Feature, StageDict} from '../js-src/cs-client';
 import {FormattedFeature} from './form-definition';
+import {WEB_FEATURES_CHOICES} from './web-feature-constants';
 
 interface getFieldValue {
   (fieldName: string, stageOrId: any): any;
@@ -52,7 +53,7 @@ export class ChromedashFormField extends LitElement {
   @state()
   loading = false;
   @state()
-  componentChoices: Record<string, [string, string]> = {}; // just for the blink component select field
+  fetchedChoices: Record<string, [string, string]> = {}; // just for the blink component & web features select field
   @state()
   checkMessage: TemplateResult | string = '';
   @state()
@@ -89,14 +90,17 @@ export class ChromedashFormField extends LitElement {
       window.csClient
         .getBlinkComponents()
         .then(componentChoices => {
-          this.componentChoices = componentChoices;
+          this.fetchedChoices = componentChoices;
           this.loading = false;
         })
         .catch(() => {
           showToastMessage(
             'Some errors occurred. Please refresh the page or try again later.'
           );
         });
+    } else if (this.name === 'web_feature') {
+      // TODO(kyleju): Create a web features API once a data ingestion pipeline is created.
+      this.fetchedChoices = WEB_FEATURES_CHOICES;
     }
   }
 
@@ -257,9 +261,10 @@ export class ChromedashFormField extends LitElement {
 
     // form field name can be specified in form-field-spec to match DB field name
     const fieldName = this.fieldProps.name || this.name;
+
     // choices can be specified in form-field-spec or fetched from API
     const choices: [number, string][] | [number, string, string][] =
-      this.fieldProps.choices || this.componentChoices;
+      this.fieldProps.choices || this.fetchedChoices;
 
     let fieldHTML = html``;
     if (type === 'checkbox') {

diff --git a/client-src/elements/form-definition.ts b/client-src/elements/form-definition.ts
@@ -171,6 +171,7 @@ export const NEW_FEATURE_FORM_FIELDS = [
   'cc_recipients',
   'blink_components',
   'category',
+  'web_feature',
 ];
 
 export const ENTERPRISE_NEW_FEATURE_FORM_FIELDS = [
@@ -206,6 +207,7 @@ export const FLAT_METADATA_FIELDS: MetadataFields = {
         'feature_type',
         'active_stage_id',
         'search_tags',
+        'web_feature',
       ],
     },
     // Implementation

diff --git a/client-src/elements/form-field-specs.ts b/client-src/elements/form-field-specs.ts
@@ -483,6 +483,16 @@ export const ALL_FIELDS: Record<string, Field> = {
     "Blink".`,
   },
 
+  web_feature: {
+    type: 'datalist',
+    required: true,
+    choices: undefined, // this gets replaced in chromedash-form-field via an web features api
+    label: 'Feature Group',
+    attrs: {placeholder: 'Please select a WebDX feature group'},
+    help_text: html` Select the feature this belongs to. If your feature is not
+    listed, pick "Missing feature".`,
+  },
+
   category: {
     type: 'select',
     choices: FEATURE_CATEGORIES,