Add hyperlink on the bottom (#4664)

* Add hyperlink to webstatus.dev

* Address comments

* Add a unit test

Author: KyleJu

client-src/css/forms-css.js

@@ -81,7 +81,7 @@ export const FORM_STYLES = [
     .fade-in {
       animation:fadeIn 0.5s linear;
     }
-    
+
     @keyframes fadeIn {
       0% {
         opacity:0
@@ -234,7 +234,7 @@ export const FORM_STYLES = [
     chromedash-form-field td.extrahelp {
       padding-left: 2em;
     }
-    chromedash-form-field .extrahelp > span {
+    chromedash-form-field .extrahelp > span, chromedash-form-field .webdx > span {
       margin: 0;
     }
 

client-src/elements/chromedash-form-field.ts

@@ -466,6 +466,22 @@ export class ChromedashFormField extends LitElement {
             </tr>
           `
         : nothing}
+      ${this.name === 'web_feature' && this.value
+        ? html`
+            <tr>
+              <td colspan="2" class="webdx">
+                See web feature
+                <a
+                  href="https://webstatus.dev/features/${this.value}"
+                  target="_blank"
+                >
+                  ${this.value}
+                </a>
+                in webstatus.dev
+              </td>
+            </tr>
+          `
+        : nothing}
     `;
   }
 }

client-src/elements/chromedash-form-field_test.ts

@@ -65,6 +65,22 @@ describe('chromedash-form-field', () => {
     assert.include(renderElement.innerHTML, 'class="extrahelp"');
   });
 
+  it('renders feature group field with a link', async () => {
+    const component = await fixture(
+      html` <chromedash-form-field name="web_feature" value="hwb">
+      </chromedash-form-field>`
+    );
+    assert.exists(component);
+    assert.instanceOf(component, ChromedashFormField);
+    const fieldRow = component.renderRoot.querySelector('tr');
+    assert.exists(fieldRow);
+
+    const renderElement = component.renderRoot as HTMLElement;
+    assert.include(renderElement.innerHTML, 'Feature Group');
+    assert.include(renderElement.innerHTML, 'input');
+    assert.include(renderElement.innerHTML, 'class="webdx"');
+  });
+
   it('renders a textarea type of field', async () => {
     const component = await fixture(
       html` <chromedash-form-field name="summary" value="">

packages/playwright/tests/test_utils.js

@@ -326,6 +326,9 @@ export async function enterFeatureGroup(page) {
   const featureGroupInput = featureGroupInputWrapper.locator('input');
   await featureGroupInput.fill('hwb');
   await delay(500);
+
+  // TODO(kyleju): assert that the link to webstatus.dev is present.
+  // It is missing in the current test setup.
 }
 
 /**