fix(site): improve rendering of provisioner tags (#11575)

johnstcn · web-flow · commit f3d091fa0106 · 2024-01-11T17:42:21.000Z
* fix(site): improve rendering of provisioner tags

* fixup! fix(site): improve rendering of provisioner tags

* Update site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx

* fixup! Update site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -1,4 +1,11 @@
-import { Header, HeaderTitle, HealthyDot, Main, Pill } from "./Content";
+import {
+  BooleanPill,
+  Header,
+  HeaderTitle,
+  HealthyDot,
+  Main,
+  Pill,
+} from "./Content";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { useTheme } from "@mui/material/styles";
@@ -116,13 +123,9 @@ export const ProvisionerDaemonsPage = () => {
                       </span>
                     </Pill>
                   </Tooltip>
-                  {Object.keys(extraTags).map((k) => (
-                    <Tooltip key={k} title={k}>
-                      <Pill key={k} icon={<Sell />}>
-                        {extraTags[k]}
-                      </Pill>
-                    </Tooltip>
-                  ))}
+                  {Object.keys(extraTags).map((k) =>
+                    renderTag(k, extraTags[k]),
+                  )}
                 </div>
               </header>
 
@@ -163,4 +166,29 @@ export const ProvisionerDaemonsPage = () => {
   );
 };
 
+const parseBool = (s: string): { valid: boolean; value: boolean } => {
+  switch (s.toLowerCase()) {
+    case "true":
+    case "yes":
+    case "1":
+      return { valid: true, value: true };
+    case "false":
+    case "no":
+    case "0":
+    case "":
+      return { valid: true, value: false };
+    default:
+      return { valid: false, value: false };
+  }
+};
+
+const renderTag = (k: string, v: string) => {
+  const { valid, value: boolValue } = parseBool(v);
+  const kv = `${k}: ${v}`;
+  if (valid) {
+    return <BooleanPill value={boolValue}>{kv}</BooleanPill>;
+  }
+  return <Pill icon={<Sell />}>{kv}</Pill>;
+};
+
 export default ProvisionerDaemonsPage;
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -3129,7 +3129,30 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           tags: {
             owner: "",
             scope: "organization",
-            custom_tag_name: "custom_tag_value",
+            tag_value: "value",
+            tag_true: "true",
+            tag_1: "1",
+            tag_yes: "yes",
+          },
+        },
+        warnings: [],
+      },
+      {
+        provisioner_daemon: {
+          id: "00000000-0000-0000-000000000000",
+          created_at: "2024-01-04T15:53:03.21563Z",
+          last_seen_at: "2024-01-04T16:05:03.967551Z",
+          name: "user-scoped",
+          version: "v2.34-devel+abcd1234",
+          api_version: "1.0",
+          provisioners: ["echo", "terraform"],
+          tags: {
+            owner: "12345678-1234-1234-1234-12345678abcd",
+            scope: "user",
+            tag_VALUE: "VALUE",
+            tag_TRUE: "TRUE",
+            tag_1: "1",
+            tag_YES: "YES",
           },
         },
         warnings: [],
@@ -3146,6 +3169,10 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           tags: {
             owner: "",
             scope: "organization",
+            tag_string: "value",
+            tag_false: "false",
+            tag_0: "0",
+            tag_no: "no",
           },
         },
         warnings: [
