coder · BrunoQuaresma · Feb 23, 2024 · Feb 9, 2024 · Feb 21, 2024 · Feb 22, 2024
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1543,7 +1543,7 @@ export const watchAgentMetadata = (agentId: string): EventSource => {
 type WatchBuildLogsByTemplateVersionIdOptions = {
   after?: number;
   onMessage: (log: TypesGen.ProvisionerJobLog) => void;
-  onDone: () => void;
+  onDone?: () => void;
   onError: (error: Error) => void;
 };
 export const watchBuildLogsByTemplateVersionId = (
@@ -1575,7 +1575,7 @@ export const watchBuildLogsByTemplateVersionId = (
   });
   socket.addEventListener("close", () => {
     // When the socket closes, logs have finished streaming!
-    onDone();
+    onDone && onDone();
   });
   return socket;
 };

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -206,16 +206,21 @@ export const createTemplate = () => {
   };
 };
 
-const createTemplateFn = async (options: {
+export type CreateTemplateOptions = {
   organizationId: string;
   version: CreateTemplateVersionRequest;
   template: Omit<CreateTemplateRequest, "template_version_id">;
-}) => {
+  onCreateVersion?: (version: TemplateVersion) => void;
+  onTemplateVersionChanges?: (version: TemplateVersion) => void;
+};
+
+const createTemplateFn = async (options: CreateTemplateOptions) => {
   const version = await API.createTemplateVersion(
     options.organizationId,
     options.version,
   );
-  await waitBuildToBeFinished(version);
+  options.onCreateVersion?.(version);
+  await waitBuildToBeFinished(version, options.onTemplateVersionChanges);
   return API.createTemplate(options.organizationId, {
     ...options.template,
     template_version_id: version.id,
@@ -278,12 +283,17 @@ export const previousTemplateVersion = (
   };
 };
 
-const waitBuildToBeFinished = async (version: TemplateVersion) => {
+const waitBuildToBeFinished = async (
+  version: TemplateVersion,
+  onRequest?: (data: TemplateVersion) => void,
+) => {
   let data: TemplateVersion;
-  let jobStatus: ProvisionerJobStatus;
+  let jobStatus: ProvisionerJobStatus | undefined = undefined;
   do {
-    await delay(1000);
+    // When pending we want to poll more frequently
+    await delay(jobStatus === "pending" ? 250 : 1000);
     data = await API.getTemplateVersion(version.id);
+    onRequest?.(data);
     jobStatus = data.job.status;
 
     if (jobStatus === "succeeded") {

diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
@@ -6,6 +6,7 @@ import {
   useContext,
   ReactNode,
   ComponentProps,
+  forwardRef,
 } from "react";
 import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges";
 import { Stack } from "components/Stack/Stack";
@@ -81,59 +82,65 @@ interface FormSectionProps {
   deprecated?: boolean;
 }
 
-export const FormSection: FC<FormSectionProps> = ({
-  children,
-  title,
-  description,
-  classes = {},
-  alpha = false,
-  deprecated = false,
-}) => {
-  const { direction } = useContext(FormContext);
-  const theme = useTheme();
-
-  return (
-    <div
-      css={{
-        display: "flex",
-        alignItems: "flex-start",
-        flexDirection: direction === "horizontal" ? "row" : "column",
-        gap: direction === "horizontal" ? 120 : 24,
-
-        [theme.breakpoints.down("md")]: {
-          flexDirection: "column",
-          gap: 16,
-        },
-      }}
-      className={classes.root}
-    >
-      <div
+export const FormSection = forwardRef<HTMLDivElement, FormSectionProps>(
+  (
+    {
+      children,
+      title,
+      description,
+      classes = {},
+      alpha = false,
+      deprecated = false,
+    },
+    ref,
+  ) => {
+    const { direction } = useContext(FormContext);
+    const theme = useTheme();
+
+    return (
+      <section
+        ref={ref}
         css={{
-          width: "100%",
-          maxWidth: direction === "horizontal" ? 312 : undefined,
-          flexShrink: 0,
-          position: direction === "horizontal" ? "sticky" : undefined,
-          top: 24,
+          display: "flex",
+          alignItems: "flex-start",
+          flexDirection: direction === "horizontal" ? "row" : "column",
+          gap: direction === "horizontal" ? 120 : 24,
 
           [theme.breakpoints.down("md")]: {
-            width: "100%",
-            position: "initial" as const,
+            flexDirection: "column",
+            gap: 16,
           },
         }}
-        className={classes.sectionInfo}
+        className={classes.root}
       >
-        <h2 css={styles.formSectionInfoTitle} className={classes.infoTitle}>
-          {title}
-          {alpha && <AlphaBadge />}
-          {deprecated && <DeprecatedBadge />}
-        </h2>
-        <div css={styles.formSectionInfoDescription}>{description}</div>
-      </div>
-
-      {children}
-    </div>
-  );
-};
+        <div
+          css={{
+            width: "100%",
+            maxWidth: direction === "horizontal" ? 312 : undefined,
+            flexShrink: 0,
+            position: direction === "horizontal" ? "sticky" : undefined,
+            top: 24,
+
+            [theme.breakpoints.down("md")]: {
+              width: "100%",
+              position: "initial" as const,
+            },
+          }}
+          className={classes.sectionInfo}
+        >
+          <h2 css={styles.formSectionInfoTitle} className={classes.infoTitle}>
+            {title}
+            {alpha && <AlphaBadge />}
+            {deprecated && <DeprecatedBadge />}
+          </h2>
+          <div css={styles.formSectionInfoDescription}>{description}</div>
+        </div>
+
+        {children}
+      </section>
+    );
+  },
+);
 
 export const FormFields: FC<ComponentProps<typeof Stack>> = (props) => {
   return (

diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -19,10 +19,12 @@ export interface FormFooterProps {
   styles?: FormFooterStyles;
   submitLabel?: string;
   submitDisabled?: boolean;
+  extraActions?: React.ReactNode;
 }
 
 export const FormFooter: FC<FormFooterProps> = ({
   onCancel,
+  extraActions,
   isLoading,
   submitDisabled,
   submitLabel = Language.defaultSubmitLabel,
@@ -52,6 +54,7 @@ export const FormFooter: FC<FormFooterProps> = ({
       >
         {Language.cancelLabel}
       </Button>
+      {extraActions}
     </div>
   );
 };

diff --git a/site/src/modules/templates/useWatchVersionLogs.ts b/site/src/modules/templates/useWatchVersionLogs.ts
@@ -0,0 +1,42 @@
+import { watchBuildLogsByTemplateVersionId } from "api/api";
+import { ProvisionerJobLog, TemplateVersion } from "api/typesGenerated";
+import { useState, useEffect } from "react";
+
+export const useWatchVersionLogs = (
+  templateVersion: TemplateVersion | undefined,
+  options?: { onDone: () => Promise<unknown> },
+) => {
+  const [logs, setLogs] = useState<ProvisionerJobLog[]>();
+  const templateVersionId = templateVersion?.id;
+  const templateVersionStatus = templateVersion?.job.status;
+
+  useEffect(() => {
+    setLogs(undefined);
+  }, [templateVersionId]);
+
+  useEffect(() => {
+    if (!templateVersionId || !templateVersionStatus) {
+      return;
+    }
+
+    if (templateVersionStatus !== "running") {
+      return;
+    }
+
+    const socket = watchBuildLogsByTemplateVersionId(templateVersionId, {
+      onMessage: (log) => {
+        setLogs((logs) => (logs ? [...logs, log] : [log]));
+      },
+      onDone: options?.onDone,
+      onError: (error) => {
+        console.error(error);
+      },
+    });
+
+    return () => {
+      socket.close();
+    };
+  }, [options?.onDone, templateVersionId, templateVersionStatus]);
+
+  return logs;
+};