coder · f0ssel · Jan 18, 2024 · Jan 12, 2024 · Jan 16, 2024 · Jan 17, 2024
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
@@ -70,7 +70,7 @@ export const VerticalForm: FC<HTMLProps<HTMLFormElement>> = ({
 export const FormSection: FC<
   PropsWithChildren & {
     title: string | JSX.Element;
-    description: string | JSX.Element;
+    description: string | JSX.Element | undefined;
     classes?: {
       root?: string;
       sectionInfo?: string;
@@ -125,7 +125,9 @@ export const FormSection: FC<
           {alpha && <AlphaBadge />}
           {deprecated && <DeprecatedBadge />}
         </h2>
-        <div css={styles.formSectionInfoDescription}>{description}</div>
+        {description && (
+          <div css={styles.formSectionInfoDescription}>{description}</div>
+        )}
       </div>
 
       {children}

diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
@@ -170,7 +170,7 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
         border: `1px solid ${theme.palette.divider}`,
         fontSize: 12,
         fontWeight: 500,
-        padding: "8px 16px 8px 8px",
+        padding: "8px 8px 8px 8px",
         gap: 8,
         cursor: "default",
       }}
@@ -183,10 +183,8 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
 });
 
 type BooleanPillProps = Omit<
-  ComponentProps<typeof Pill>,
-  "children" | "icon" | "value"
+  ComponentProps<typeof Pill>, "icon" | "value"
 > & {
-  children: string;
   value: boolean;
 };
 

diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -21,6 +21,10 @@ 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";
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from "@mui/material/IconButton";
 
 export const ProvisionerDaemonsPage = () => {
   const healthStatus = useOutletContext<HealthcheckReport>();
@@ -58,15 +62,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 +126,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,13 +184,38 @@ const parseBool = (s: string): { valid: boolean; value: boolean } => {
   }
 };
 
-const renderTag = (k: string, v: string) => {
+interface ProvisionerTagProps {
+  k: string;
+  v: string;
+  onDelete?: (key: string) => void;
+}
+
+export const ProvisionerTag : FC<ProvisionerTagProps> = ({ k, v, onDelete}) => {
   const { valid, value: boolValue } = parseBool(v);
   const kv = `${k}: ${v}`;
+  const content = (
+    <>
+      {onDelete ? (
+        <>
+          {kv}
+          <IconButton aria-label="delete" size="small" color="secondary" onClick={() => {
+            onDelete(k)
+          }}>
+            <CloseIcon fontSize="inherit" css={{
+              width: 14,
+              height: 14,
+            }}/>
+          </IconButton>
+          </>
+      ) : (
+        <>{kv}</>
+      )}
+    </>
+  )
   if (valid) {
-    return <BooleanPill value={boolValue}>{kv}</BooleanPill>;
+    return <BooleanPill value={boolValue}>{content}</BooleanPill>;
   }
-  return <Pill icon={<Sell />}>{kv}</Pill>;
+  return <Pill icon={<Sell />}>{content}</Pill>;
 };
 
 export default ProvisionerDaemonsPage;
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -0,0 +1,130 @@
+
+import { Stack } from 'components/Stack/Stack';
+import { TopbarButton } from 'components/FullPageLayout/Topbar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "components/Popover/Popover";
+import { ProvisionerTag } from 'pages/HealthPage/ProvisionerDaemonsPage';
+import { type FC} from 'react';
+import useTheme from '@mui/system/useTheme';
+import { useFormik } from 'formik';
+import * as Yup from "yup";
+import { getFormHelpers, onChangeTrimmed } from 'utils/formUtils';
+import { FormFields, FormSection, VerticalForm } from 'components/Form/Form';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import ExpandMoreOutlined from '@mui/icons-material/ExpandMoreOutlined';
+import AddIcon from '@mui/icons-material/Add';
+
+const initialValues = {
+  key: "",
+  value: "",
+};
+
+const validationSchema = Yup.object({
+  key: Yup.string().required("Required").notOneOf(["owner"], "Cannot override owner tag"),
+  value: Yup.string().required("Required").when("key", ([key], schema) => {
+    if (key === "scope") {
+      return schema.oneOf(["organization", "scope"], "Scope value must be 'organization' or 'user'");
+    }
+
+    return schema;
+  })
+});
+
+interface ProviderTagsPopoverProps {
+  tags: Record <string, string>;
+  onSubmit: (values: typeof initialValues) => void;
+  onDelete: (key: string) => void;
+}
+
+export const ProviderTagsPopover: FC<ProviderTagsPopoverProps> = ({ tags, onSubmit, onDelete }) => {
+  const theme = useTheme();
+
+  const form = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit: (values) => {
+      onSubmit(values);
+      form.resetForm();
+    },
+  });
+  const getFieldHelpers = getFormHelpers(form);
+
+  return (
+    <Popover isDefaultOpen={false}>
+    <PopoverTrigger>
+      <TopbarButton
+        data-testid="build-parameters-button"
+        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}`,
+        }}
+      >
+        <VerticalForm onSubmit={form.handleSubmit}>
+
+          <Stack>
+          <FormSection title="Provisioner Tags" description="Tags are a way to control which provisoner daemons process which build jobs. To learn more read the docs. "/>
+            {Object.keys(tags).length > 0 && (
+              <Stack direction="row" spacing={1} wrap="wrap">
+                {Object.keys(tags).filter((key) => {
+                  // filter out owner since you cannot override it
+                  return key !== "owner"
+                }).map((k) =>
+                  <>
+                    {k === "scope" ? (
+                      <ProvisionerTag key={k} k={k} v={tags[k]}/>
+                    ) : (
+                      <ProvisionerTag key={k} k={k} v={tags[k]} onDelete={onDelete}/>
+                    )}
+                  </>
+                )}
+              </Stack>
+            )}
+
+
+            <FormFields>
+              <Stack direction="row">
+                <TextField
+                {...getFieldHelpers("key")}
+                size="small"
+                onChange={onChangeTrimmed(form)}
+                label="Key"
+                />
+                <TextField
+                  {...getFieldHelpers("value")}
+                  size="small"
+                  onChange={onChangeTrimmed(form)}
+                  label="Value"
+                />
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  type="submit"
+                  disabled={!form.dirty || !form.isValid}
+                >
+                  <AddIcon/>
+                </Button>
+              </Stack>
+            </FormFields>
+          </Stack>
+        </VerticalForm>
+      </div>
+    </PopoverContent>
+  </Popover>
+  );
+};
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -53,6 +53,8 @@ import {
   TopbarIconButton,
 } from "components/FullPageLayout/Topbar";
 import { Sidebar } from "components/FullPageLayout/Sidebar";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { ProviderTagsPopover } from "./ProvisionerTagsPopover";
 
 type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
 
@@ -78,6 +80,8 @@ export interface TemplateVersionEditorProps {
   onSubmitMissingVariableValues: (values: VariableValue[]) => void;
   onCancelSubmitMissingVariableValues: () => void;
   defaultTab?: Tab;
+  provisionerTags: Record<string, string>;
+  onUpdateProvisionerTags: (tags: Record<string, string>) => void;
 }
 
 const findInitialFile = (fileTree: FileTree): string | undefined => {
@@ -114,6 +118,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   onSubmitMissingVariableValues,
   onCancelSubmitMissingVariableValues,
   defaultTab,
+  provisionerTags,
+  onUpdateProvisionerTags,
 }) => {
   const theme = useTheme();
   const [selectedTab, setSelectedTab] = useState<Tab>(defaultTab);
@@ -236,20 +242,45 @@ 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={disablePreview}
             >
-              Build
-            </TopbarButton>
+              <TopbarButton
+                startIcon={
+                  <PlayArrowOutlined
+                    css={{ color: theme.palette.success.light }}
+                  />
+                }
+                title="Build template (Ctrl + Enter)"
+                disabled={disablePreview}
+                onClick={() => {
+                  triggerPreview();
+                }}
+              >
+                Build
+              </TopbarButton>
+              <ProviderTagsPopover
+                tags={provisionerTags}
+                onSubmit={({ key, value }) => {
+                  onUpdateProvisionerTags({
+                    ...provisionerTags,
+                    [key]: value,
+                  });
+                }}
+                onDelete={(key) => {
+                  const newTags = { ...provisionerTags };
+                  delete newTags[key];
+                  onUpdateProvisionerTags(newTags);
+                }}
+              />
+            </ButtonGroup>
 
             <TopbarButton
               variant="contained"

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -102,6 +102,14 @@ export const TemplateVersionEditorPage: FC = () => {
     queryClient.setQueryData(templateVersionOptions.queryKey, newVersion);
   };
 
+  // Provisioner Tags
+  const [provisionerTags, setProvisionerTags] = useState<Record<string, string>>({});
+  useEffect(() => {
+    if (templateVersionQuery.data?.job.tags) {
+      setProvisionerTags(templateVersionQuery.data.job.tags);
+    }
+  }, [templateVersionQuery.data?.job.tags]);
+
   return (
     <>
       <Helmet>
@@ -127,7 +135,7 @@ export const TemplateVersionEditorPage: FC = () => {
             const newVersion = await createTemplateVersionMutation.mutateAsync({
               provisioner: "terraform",
               storage_method: "file",
-              tags: templateVersionQuery.data.job.tags,
+              tags: provisionerTags,
               template_id: templateQuery.data.id,
               file_id: serverFile.hash,
             });
@@ -210,6 +218,10 @@ export const TemplateVersionEditorPage: FC = () => {
           onCancelSubmitMissingVariableValues={() => {
             setIsMissingVariablesDialogOpen(false);
           }}
+          provisionerTags={provisionerTags}
+          onUpdateProvisionerTags={(tags) => {
+            setProvisionerTags(tags);
+          }}
         />
       ) : (
         <FullScreenLoader />

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>,
+  );
+}