feat: manage provisioner tags in template editor

f0ssel · f0ssel · commit 58532a55ae94 · 2024-01-12T19:44:28.000Z
diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -21,6 +21,8 @@ import Person from "@mui/icons-material/Person";
 import SwapHoriz from "@mui/icons-material/SwapHoriz";
 import Tooltip from "@mui/material/Tooltip";
 import Sell from "@mui/icons-material/Sell";
+import { FC } from "react";
+import { additionalTags } from "utils/provisionertags";
 
 export const ProvisionerDaemonsPage = () => {
   const healthStatus = useOutletContext<HealthcheckReport>();
@@ -58,15 +60,7 @@ export const ProvisionerDaemonsPage = () => {
           const daemonScope = daemon.tags["scope"] || "organization";
           const iconScope =
             daemonScope === "organization" ? <Business /> : <Person />;
-          const extraTags = Object.keys(daemon.tags)
-            .filter((key) => key !== "scope" && key !== "owner")
-            .reduce(
-              (acc, key) => {
-                acc[key] = daemon.tags[key];
-                return acc;
-              },
-              {} as Record<string, string>,
-            );
+          const extraTags = additionalTags(daemon.tags)
           const isWarning = warnings.length > 0;
           return (
             <div
@@ -130,7 +124,7 @@ export const ProvisionerDaemonsPage = () => {
                     </Pill>
                   </Tooltip>
                   {Object.keys(extraTags).map((k) =>
-                    renderTag(k, extraTags[k]),
+                    <ProvisionerTag key={k} k={k} v={extraTags[k]} />
                   )}
                 </div>
               </header>
@@ -188,7 +182,13 @@ const parseBool = (s: string): { valid: boolean; value: boolean } => {
   }
 };
 
-const renderTag = (k: string, v: string) => {
+interface ProvisionerTagProps {
+  k: string;
+  v: string;
+  onDelete?: () => void;
+}
+
+export const ProvisionerTag : FC<ProvisionerTagProps> = ({ k, v }) => {
   const { valid, value: boolValue } = parseBool(v);
   const kv = `${k}: ${v}`;
   if (valid) {
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -53,6 +53,18 @@ import {
   TopbarIconButton,
 } from "components/FullPageLayout/Topbar";
 import { Sidebar } from "components/FullPageLayout/Sidebar";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "components/Popover/Popover";
+import { HelpTooltipTitle, HelpTooltipText, HelpTooltipLinksGroup, HelpTooltipLink } from "components/HelpTooltip/HelpTooltip";
+import { docs } from "utils/docs";
+import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
+import { ProvisionerTag } from "pages/HealthPage/ProvisionerDaemonsPage";
+import { Stack } from "components/Stack/Stack";
+import { additionalTags } from "utils/provisionertags";
 
 type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
 
@@ -181,6 +193,16 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
     }
   }, [buildLogs]);
 
+  const disabled = false;
+  const extraTags = additionalTags(templateVersion.job.tags);
+  // const extraTags = {
+  //   "key1": "value1",
+  //   "1": "2",
+  //   "3": "true",
+  //   "5": "6",
+  //   "seven": "0",
+  // } as Record<string,string>;
+
   return (
     <>
       <div css={{ height: "100%", display: "flex", flexDirection: "column" }}>
@@ -236,20 +258,69 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               <TemplateVersionStatusBadge version={templateVersion} />
             )}
 
-            <TopbarButton
-              startIcon={
-                <PlayArrowOutlined
-                  css={{ color: theme.palette.success.light }}
-                />
-              }
-              title="Build template (Ctrl + Enter)"
-              disabled={disablePreview}
-              onClick={() => {
-                triggerPreview();
+            <ButtonGroup
+              variant="outlined"
+              css={{
+                // Workaround to make the border transitions smoothly on button groups
+                "& > button:hover + button": {
+                  borderLeft: "1px solid #FFF",
+                },
               }}
+              disabled={disabled}
             >
-              Build
-            </TopbarButton>
+              <TopbarButton
+                startIcon={
+                  <PlayArrowOutlined
+                    css={{ color: theme.palette.success.light }}
+                  />
+                }
+                title="Build template (Ctrl + Enter)"
+                disabled={disablePreview}
+                onClick={() => {
+                  triggerPreview();
+                }}
+              >
+                Build
+              </TopbarButton>
+              <Popover isDefaultOpen={false}>
+                <PopoverTrigger>
+                  <TopbarButton
+                    data-testid="build-parameters-button"
+                    disabled={disabled}
+                    color="neutral"
+                    css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
+                  >
+                    <ExpandMoreOutlined css={{ fontSize: 14 }} />
+                  </TopbarButton>
+                </PopoverTrigger>
+                <PopoverContent
+                  horizontal="right"
+                  css={{ ".MuiPaper-root": { width: 300 } }}
+                >
+                  <div
+                    css={{
+                      color: theme.palette.text.secondary,
+                      padding: 20,
+                      borderBottom: `1px solid ${theme.palette.divider}`,
+                    }}
+                  >
+                    <HelpTooltipTitle>Provisioner Tags</HelpTooltipTitle>
+                    <HelpTooltipText>
+                      {Object.keys(extraTags).length > 0 ? (
+                      <Stack direction="row" spacing={1} wrap="wrap">
+                        {Object.keys(extraTags).map((k) =>
+                          <ProvisionerTag key={k} k={k} v={extraTags[k]} />
+                        )}
+                      </Stack>
+                      ) : (
+                        "No tags"
+                      )}
+
+                    </HelpTooltipText>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </ButtonGroup>
 
             <TopbarButton
               variant="contained"
diff --git a/site/src/utils/provisionertags.ts b/site/src/utils/provisionertags.ts
@@ -0,0 +1,11 @@
+export const additionalTags = (records: Record<string, string>) => {
+  return Object.keys(records)
+  .filter((key) => key !== "scope" && key !== "owner")
+  .reduce(
+    (acc, key) => {
+      acc[key] = records[key];
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+}
