Hide build logs until a build is made

coder · kylecarbs · Feb 7, 2023 · Feb 1, 2023 · Feb 1, 2023 · Feb 1, 2023
commit 65c875711a54767691af6c737566f0551cd17491
diff --git a/site/src/components/TemplateVersionEditor/FileTree.tsx b/site/src/components/TemplateVersionEditor/FileTree.tsx
@@ -7,6 +7,7 @@ import Menu from "@material-ui/core/Menu"
 import MenuItem from "@material-ui/core/MenuItem"
 import { FC, useMemo, useState } from "react"
 import { TemplateVersionFiles } from "util/templateVersion"
+import { DockerIcon } from "components/Icons/DockerIcon"
 
 export interface File {
   path: string
@@ -131,17 +132,21 @@ export const FileTree: FC<{
         onClose={() => setContextMenu(undefined)}
         open={Boolean(contextMenu)}
         anchorReference="anchorPosition"
-        anchorPosition={contextMenu ? {
-          top: contextMenu.clientY,
-          left: contextMenu.clientX,
-        } : undefined}
+        anchorPosition={
+          contextMenu
+            ? {
+                top: contextMenu.clientY,
+                left: contextMenu.clientX,
+              }
+            : undefined
+        }
         anchorOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
+          vertical: "top",
+          horizontal: "left",
         }}
         transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
+          vertical: "top",
+          horizontal: "left",
         }}
       >
         <MenuItem
@@ -244,10 +249,4 @@ const FileTypeMarkdown = () => (
   </svg>
 )
 
-const FileTypeDockerfile = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#0db7ed">
-    <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z" />
-    <path d="M16,6a10,10,0,0,0-9.9,9.1H6.1A8,8,0,0,1,16,8a8,8,0,0,1,8,8,8,8,0,0,1-8,8,8,8,0,0,1-7.9-6.1H6.1A10,10,0,0,0,16,26a10,10,0,0,0,0-20Z" />
-    <path d="M16,10a6,6,0,0,0-6,6,6,6,0,0,0,6,6,6,6,0,0,0,6-6A6,6,0,0,0,16,10Zm0,10a4,4,0,0,1-4-4,4,4,0,0,1,4-4,4,4,0,0,1,4,4A4,4,0,0,1,16,20Z" />
-  </svg>
-)
+const FileTypeDockerfile = () => <DockerIcon />
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -1,8 +1,6 @@
 import Button from "@material-ui/core/Button"
 import IconButton from "@material-ui/core/IconButton"
 import { makeStyles, Theme } from "@material-ui/core/styles"
-import Tab from "@material-ui/core/Tab"
-import Tabs from "@material-ui/core/Tabs"
 import Tooltip from "@material-ui/core/Tooltip"
 import CreateIcon from "@material-ui/icons/AddBox"
 import BuildIcon from "@material-ui/icons/BuildOutlined"
@@ -130,8 +128,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   const [dirty, setDirty] = useState(false)
   const hasIcon = template.icon && template.icon !== ""
   const templateVersionSucceeded = templateVersion.job.status === "succeeded"
+  const showBuildLogs = Boolean(buildLogs)
+  useEffect(() => {
+    window.dispatchEvent(new Event("resize"))
+  }, [showBuildLogs])
   const styles = useStyles({
     templateVersionSucceeded,
+    showBuildLogs,
   })
 
   return (
@@ -151,7 +154,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
         </div>
 
         <div className={styles.topbarSides}>
-          <div>
+          <div className={styles.buildStatus}>
             Build Status:
             <TemplateVersionStatusBadge version={templateVersion} />
           </div>
@@ -170,22 +173,25 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
           <Tooltip
             title={
-              dirty ? "You have edited files! Run another build before updating." :
-              templateVersion.job.status !== "succeeded" ? "Something" : ""
+              dirty
+                ? "You have edited files! Run another build before updating."
+                : templateVersion.job.status !== "succeeded"
+                ? "Something"
+                : ""
             }
           >
             <span>
-            <Button
-              size="small"
-              variant="contained"
-              color="primary"
-              disabled={dirty || disableUpdate}
-              onClick={() => {
-                onUpdate()
-              }}
-            >
-              Publish New Version
-            </Button>
+              <Button
+                size="small"
+                variant="contained"
+                color="primary"
+                disabled={dirty || disableUpdate}
+                onClick={() => {
+                  onUpdate()
+                }}
+              >
+                Publish New Version
+              </Button>
             </span>
           </Tooltip>
         </div>
@@ -195,19 +201,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
         <div className={styles.sidebar}>
           <div className={styles.sidebarTitle}>
             Template Editor
-            <Tooltip title="Create File" placement="top">
-              <IconButton
-                size="small"
-                color="secondary"
-                aria-label="Create File"
-                onClick={(event) => {
-                  setCreateFileOpen(true)
-                  event.currentTarget.blur()
-                }}
-              >
-                <CreateIcon />
-              </IconButton>
-            </Tooltip>
+            <div className={styles.sidebarActions}>
+              <Tooltip title="Create File" placement="top">
+                <IconButton
+                  size="small"
+                  aria-label="Create File"
+                  onClick={(event) => {
+                    setCreateFileOpen(true)
+                    event.currentTarget.blur()
+                  }}
+                >
+                  <CreateIcon />
+                </IconButton>
+              </Tooltip>
+            </div>
             <CreateFileDialog
               open={createFileOpen}
               onClose={() => {
@@ -379,6 +386,7 @@ const useStyles = makeStyles<
   Theme,
   {
     templateVersionSucceeded: boolean
+    showBuildLogs: boolean
   }
 >((theme) => ({
   root: {
@@ -401,6 +409,11 @@ const useStyles = makeStyles<
     alignItems: "center",
     gap: 16,
   },
+  buildStatus: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+  },
   sidebarAndEditor: {
     display: "flex",
     flex: 1,
@@ -413,11 +426,20 @@ const useStyles = makeStyles<
     textTransform: "uppercase",
     padding: "8px 16px",
     color: theme.palette.text.hint,
+    display: "flex",
+    alignItems: "center",
+  },
+  sidebarActions: {
+    marginLeft: "auto",
+    "& svg": {
+      fill: theme.palette.text.hint,
+    },
   },
   editorPane: {
     display: "grid",
     width: "100%",
-    gridTemplateColumns: "0.6fr 0.4fr",
+    gridTemplateColumns: (props) =>
+      props.showBuildLogs ? "0.6fr 0.4fr" : "1fr 0fr",
     height: `calc(100vh - ${navHeight + topbarHeight}px)`,
     overflow: "hidden",
   },
@@ -495,6 +517,6 @@ const useStyles = makeStyles<
     whiteSpace: "pre-wrap",
   },
   resources: {
-    padding: 16,
+    // padding: 16,
   },
 }))
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -86,12 +86,16 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
   )
 }
 
-const useStyles = makeStyles<Theme, {
-  templateEditorPane: boolean
-}>((theme) => ({
+const useStyles = makeStyles<
+  Theme,
+  {
+    templateEditorPane: boolean
+  }
+>((theme) => ({
   logs: {
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: (props) => props.templateEditorPane ? "0px" : theme.shape.borderRadius,
+    borderRadius: (props) =>
+      props.templateEditorPane ? "0px" : theme.shape.borderRadius,
     fontFamily: MONOSPACE_FONT_FAMILY,
   },
 

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -42,15 +42,19 @@ export const TemplateVersionEditorPage: FC = () => {
               if (!versionState.context.template) {
                 throw new Error("no template")
               }
+              // Send a cancel just in case a version is already being created!
               sendEvent({
-                type: "CREATE_BUILD",
+                type: "CANCEL_VERSION",
+              })
+              sendEvent({
+                type: "CREATE_VERSION",
                 files: files,
                 templateId: versionState.context.template.id,
               })
             }}
             onUpdate={() => {
               sendEvent({
-                type: "UPDATE_ACTIVE",
+                type: "UPDATE_ACTIVE_VERSION",
               })
             }}
             disablePreview={editorState.hasTag("loading")}

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -144,7 +144,9 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
               <StatsItem
                 label={t("stats.template")}
                 value={
-                  <RouterLink to={`/templates/${templateName}`}>{templateName}</RouterLink>
+                  <RouterLink to={`/templates/${templateName}`}>
+                    {templateName}
+                  </RouterLink>
                 }
               />
               <StatsItem

diff --git a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
@@ -32,13 +32,13 @@ export const templateVersionEditorMachine = createMachine(
       context: {} as TemplateVersionEditorMachineContext,
       events: {} as
         | {
-            type: "CREATE_BUILD"
+            type: "CREATE_VERSION"
             files: TemplateVersionFiles
             templateId: string
           }
-        | { type: "CANCEL_BUILD" }
+        | { type: "CANCEL_VERSION" }
         | { type: "ADD_BUILD_LOG"; log: ProvisionerJobLog }
-        | { type: "UPDATE_ACTIVE" },
+        | { type: "UPDATE_ACTIVE_VERSION" },
       services: {} as {
         createBuild: {
           data: TemplateVersion
@@ -52,11 +52,11 @@ export const templateVersionEditorMachine = createMachine(
     states: {
       idle: {
         on: {
-          CREATE_BUILD: {
+          CREATE_VERSION: {
             actions: ["assignCreateBuild"],
             target: "uploadTar",
           },
-          UPDATE_ACTIVE: {
+          UPDATE_ACTIVE_VERSION: {
             target: "updatingActiveVersion",
           },
         },
@@ -106,11 +106,11 @@ export const templateVersionEditorMachine = createMachine(
           ADD_BUILD_LOG: {
             actions: ["addBuildLog"],
           },
-          CANCEL_BUILD: {
+          CANCEL_VERSION: {
             actions: ["cancelBuild"],
             target: "idle",
           },
-          CREATE_BUILD: {
+          CREATE_VERSION: {
             actions: ["cancelBuild", "assignCreateBuild"],
             target: "uploadTar",
           },
@@ -177,7 +177,7 @@ export const templateVersionEditorMachine = createMachine(
               status: "running",
             },
           }
-        }
+        },
       }),
     },
     services: {