Add minor adjustments

coder · BrunoQuaresma · Feb 23, 2024 · Feb 9, 2024 · Feb 21, 2024 · Feb 22, 2024
commit 34f97e895ad42f8b61c65d369a11dfcfbd5f239f
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/useVersionLogs.ts b/site/src/modules/templates/useVersionLogs.ts
@@ -15,6 +15,7 @@ export const useVersionLogs = (
   const templateVersionStatus = templateVersion?.job.status;
 
   useEffect(() => {
+    setLogs([]);
     const enabledStatuses: ProvisionerJobStatus[] = ["running", "pending"];
 
     if (!templateVersionId || !templateVersionStatus) {

diff --git a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -62,6 +62,9 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
       }}
       {...attrs}
     >
+      {stages.length === 0 && (
+        <div css={styles.header(theme)}>Waiting for logs...</div>
+      )}
       {stages.map((stage) => {
         const logs = groupedLogsByStage[stage];
         const isEmpty = logs.every((log) => log.output === "");

diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -8,28 +8,52 @@ import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/Worksp
 import { useTheme } from "@emotion/react";
 import { navHeight } from "theme/constants";
 import { useVersionLogs } from "modules/templates/useVersionLogs";
+import { JobError } from "api/queries/templates";
+import AlertTitle from "@mui/material/AlertTitle";
+import { Alert, AlertDetail } from "components/Alert/Alert";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
 
 type BuildLogsDrawerProps = {
+  error: unknown;
   open: boolean;
   onClose: () => void;
   templateVersion: TemplateVersion | undefined;
+  variablesSectionRef: React.RefObject<HTMLDivElement>;
 };
 
 export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
   templateVersion,
+  error,
+  variablesSectionRef,
   ...drawerProps
 }) => {
   const theme = useTheme();
   const { logs } = useVersionLogs(templateVersion);
-
-  // Auto scroll
   const logsContainer = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      if (logsContainer.current) {
+        logsContainer.current.scrollTop = logsContainer.current.scrollHeight;
+      }
+    }, 0);
+  };
+
   useEffect(() => {
-    if (logsContainer.current) {
-      logsContainer.current.scrollTop = logsContainer.current.scrollHeight;
-    }
+    scrollToBottom();
   }, [logs]);
 
+  useEffect(() => {
+    if (drawerProps.open) {
+      scrollToBottom();
+    }
+  }, [drawerProps.open]);
+
+  const isMissingVariables =
+    error instanceof JobError &&
+    error.job.error_code === "REQUIRED_TEMPLATE_VARIABLES";
+
   return (
     <Drawer anchor="right" {...drawerProps}>
       <div
@@ -43,7 +67,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
         <header
           css={{
             height: navHeight,
-            padding: "0 20px",
+            padding: "0 24px",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
@@ -59,6 +83,39 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
           </IconButton>
         </header>
 
+        <Collapse in={isMissingVariables}>
+          <Alert
+            css={{
+              borderTop: 0,
+              borderRight: 0,
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: 0,
+              borderBottomColor: theme.palette.divider,
+              paddingLeft: 24,
+            }}
+            severity="warning"
+            actions={
+              <Button
+                size="small"
+                variant="text"
+                onClick={() => {
+                  variablesSectionRef.current?.scrollIntoView({
+                    behavior: "smooth",
+                  });
+                  const firstVariableInput =
+                    variablesSectionRef.current?.querySelector("input");
+                  setTimeout(() => firstVariableInput?.focus(), 0);
+                  drawerProps.onClose();
+                }}
+              >
+                Add variables
+              </Button>
+            }
+          >
+            <AlertTitle>Failed to create template</AlertTitle>
+            <AlertDetail>{isMissingVariables && error.message}</AlertDetail>
+          </Alert>
+        </Collapse>
         <section
           ref={logsContainer}
           css={{