Add updating the active build version

coder · kylecarbs · Feb 7, 2023 · Feb 1, 2023 · Feb 1, 2023 · Feb 1, 2023
commit b149c08aaa70a7b2e9a3f32717d33f52e91cfa78
diff --git a/site/package.json b/site/package.json
@@ -127,6 +127,7 @@
     "jest-esm-transformer": "^1.0.0",
     "jest-runner-eslint": "1.1.0",
     "jest-websocket-mock": "2.4.0",
+    "monaco-editor": "^0.34.1",
     "msw": "0.47.0",
     "prettier": "2.8.1",
     "resize-observer": "1.0.4",

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -299,6 +299,17 @@ export const createTemplate = async (
   return response.data
 }
 
+export const updateActiveTemplateVersion = async (
+  templateId: string,
+  data: TypesGen.UpdateActiveTemplateVersion,
+): Promise<Types.Message> => {
+  const response = await axios.patch<Types.Message>(
+    `/api/v2/templates/${templateId}/versions`,
+    data,
+  )
+  return response.data
+}
+
 export const updateTemplateMeta = async (
   templateId: string,
   data: TypesGen.UpdateTemplateMeta,

diff --git a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx
@@ -16,6 +16,8 @@ export const MonacoEditor: FC<{
     if (!editor) {
       return
     }
+    console.log("Editor", editor)
+    ;(window as any).editor = editor
     const resizeListener = () => {
       editor.layout({})
     }
@@ -33,18 +35,19 @@ export const MonacoEditor: FC<{
       options={{
         automaticLayout: true,
         fontFamily: MONOSPACE_FONT_FAMILY,
-        fontSize: 16,
+        fontSize: 14,
         wordWrap: "on",
       }}
       path={path}
       onChange={(newValue) => {
-        console.log("onChange", newValue?.substring(0, 30), path)
         if (onChange && newValue) {
           onChange(newValue)
         }
       }}
       onMount={(editor, monaco) => {
-        console.log("editor mounted", editor)
+        ;(editor as any)._standaloneKeybindingService.addDynamicKeybinding(`-editor.action.insertLineAfter`, undefined, () => {
+          //
+        })
 
         setEditor(editor)
 

diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -1,11 +1,16 @@
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
-import { ProvisionerJobLog, Template, TemplateVersion, WorkspaceResource } from "api/typesGenerated"
+import {
+  ProvisionerJobLog,
+  Template,
+  TemplateVersion,
+  WorkspaceResource,
+} from "api/typesGenerated"
 import { Avatar } from "components/Avatar/Avatar"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
-import { FC, useEffect, useMemo, useState } from "react"
+import { FC, useEffect, useState } from "react"
 import { navHeight } from "theme/constants"
 import { TemplateVersionFiles } from "util/templateVersion"
 import { FileTree } from "./FileTree"
@@ -25,7 +30,8 @@ export interface TemplateVersionEditorProps {
   buildLogs?: ProvisionerJobLog[]
   resources?: WorkspaceResource[]
 
-  onBuild: (files: TemplateVersionFiles) => void
+  onPreview: (files: TemplateVersionFiles) => void
+  onUpdate: () => void
 }
 
 const topbarHeight = 90
@@ -34,7 +40,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   template,
   templateVersion,
   initialFiles,
-  onBuild,
+  onPreview,
+  onUpdate,
   buildLogs,
   resources,
 }) => {
@@ -53,20 +60,26 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
     }
   })
   useEffect(() => {
-    const saveListener = (event: KeyboardEvent) => {
-      if (
-        (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) &&
-        event.key === "s"
-      ) {
-        // Prevent opening the save dialog!
-        event.preventDefault()
+    const keyListener = (event: KeyboardEvent) => {
+      if (!(navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
+        return
+      }
+      switch (event.key) {
+        case "s":
+          // Prevent opening the save dialog!
+          event.preventDefault()
+          break
+        case "Enter":
+          event.preventDefault()
+          onPreview(files)
+          break
       }
     }
-    document.addEventListener("keydown", saveListener)
+    document.addEventListener("keydown", keyListener)
     return () => {
-      document.removeEventListener("keydown", saveListener)
+      document.removeEventListener("keydown", keyListener)
     }
-  }, [])
+  }, [files, onPreview])
   const hasIcon = template.icon && template.icon !== ""
 
   return (
@@ -83,9 +96,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               )
             }
           />
-          <div>
-            Used By: {template.active_user_count} developers
-          </div>
+          <div>Used By: {template.active_user_count} developers</div>
         </div>
 
         <div>
@@ -94,20 +105,21 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             variant="outlined"
             color="primary"
             onClick={() => {
-              onBuild(files)
+              onPreview(files)
             }}
           >
-            Preview
+            Preview (Ctrl + Enter)
           </Button>
 
           <Button
-            variant="outlined"
+            variant="contained"
             color="primary"
+            disabled={templateVersion.job.status !== "succeeded"}
             onClick={() => {
-              onBuild(files)
+              onUpdate()
             }}
           >
-            Publish
+            Update
           </Button>
         </div>
       </div>
@@ -123,33 +135,52 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
         </div>
 
         <div className={styles.editorPane}>
-        <div className={styles.editor}>
-          <MonacoEditor value={activeFile?.content} path={activeFile?.path} onChange={(value) => {
-            if (!activeFile) {
-              return
-            }
-            setFiles({
-              ...files,
-              [activeFile.path]: value,
-            })
-          }} />
-        </div>
+          <div className={styles.editor}>
+            <MonacoEditor
+              value={activeFile?.content}
+              path={activeFile?.path}
+              onChange={(value) => {
+                if (!activeFile) {
+                  return
+                }
+                setFiles({
+                  ...files,
+                  [activeFile.path]: value,
+                })
+              }}
+            />
+          </div>
 
-        <div className={styles.panel}>
-          <div className={styles.buildLogs}>
-          {buildLogs && <WorkspaceBuildLogs logs={buildLogs} />}
-          {templateVersion.job.error && (
-            <div className={styles.buildLogError}>
-          {templateVersion.job.error}
+          <div className={styles.panelWrapper}>
+            <div className={styles.panel}>
+              <div className={styles.tabBar}>Build Logs</div>
+
+              <div className={styles.buildLogs}>
+                {buildLogs && <WorkspaceBuildLogs logs={buildLogs} />}
+                {templateVersion.job.error && (
+                  <div className={styles.buildLogError}>
+                    {templateVersion.job.error}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className={styles.panelDivider} />
+
+            <div className={styles.panel}>
+              <div className={`${styles.tabBar} top`}>Resources</div>
+              <div className={styles.resources}>
+                {resources && (
+                  <TemplateResourcesTable
+                    resources={resources.filter(
+                      (r) => r.workspace_transition === "start",
+                    )}
+                  />
+                )}
+              </div>
             </div>
-          )}
-          </div>
-          <div className={styles.resources}>
-          {resources && <TemplateResourcesTable resources={resources} />}
           </div>
         </div>
-        </div>
-
       </div>
     </div>
   )
@@ -170,6 +201,10 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "space-between",
     height: topbarHeight,
   },
+  panelDivider: {
+    height: 1,
+    background: theme.palette.divider,
+  },
   sidebarAndEditor: {
     display: "flex",
     flex: 1,
@@ -193,22 +228,42 @@ const useStyles = makeStyles((theme) => ({
   editor: {
     flex: 1,
   },
+  panelWrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+  },
   panel: {
+    height: "50%",
     flex: 1,
     display: "flex",
     flexDirection: "column",
+    borderLeft: `1px solid ${theme.palette.divider}`,
+  },
+  tabBar: {
+    padding: "8px 16px",
+    position: "sticky",
+    top: 0,
+    background: theme.palette.background.default,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    color: theme.palette.text.hint,
+    textTransform: "uppercase",
+    fontSize: 12,
+
+    "&.top": {
+      borderTop: `1px solid ${theme.palette.divider}`,
+    },
   },
   buildLogs: {
-    height: "50%",
     display: "flex",
     flexDirection: "column-reverse",
+    padding: 16,
     overflowY: "auto",
   },
   buildLogError: {
     whiteSpace: "pre-wrap",
   },
   resources: {
-    height: "50%",
-    overflowY: "auto",
+    padding: 16,
   },
 }))
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -39,7 +39,7 @@ export const TemplateVersionEditorPage: FC = () => {
           template={versionState.context.template}
           templateVersion={editorState.context.version || versionState.context.currentVersion}
           initialFiles={versionState.context.currentFiles}
-          onBuild={(files) => {
+          onPreview={(files) => {
             if (!versionState.context.template) {
               throw new Error("no template")
             }
@@ -49,6 +49,12 @@ export const TemplateVersionEditorPage: FC = () => {
               templateId: versionState.context.template.id,
             })
           }}
+          onUpdate={() => {
+            sendEvent({
+              type: "UPDATE_ACTIVE",
+            })
+            console.log("We made a new version active")
+          }}
           resources={editorState.context.resources}
           buildLogs={editorState.context.buildLogs}
         />

diff --git a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
@@ -26,13 +26,15 @@ export interface TemplateVersionEditorMachineContext {
 
 export const templateVersionEditorMachine = createMachine(
   {
+    predictableActionArguments: true,
     id: "templateVersionEditor",
     schema: {
       context: {} as TemplateVersionEditorMachineContext,
       events: {} as
         | { type: "CREATE_BUILD"; files: TemplateVersionFiles, templateId: string }
         | { type: "CANCEL_BUILD" }
-        | { type: "ADD_BUILD_LOG"; log: ProvisionerJobLog },
+        | { type: "ADD_BUILD_LOG"; log: ProvisionerJobLog }
+        | { type: "UPDATE_ACTIVE" },
       services: {} as {
         createBuild: {
           data: TemplateVersion
@@ -50,6 +52,18 @@ export const templateVersionEditorMachine = createMachine(
             actions: ["assignCreateBuild"],
             target: "uploadTar",
           },
+          UPDATE_ACTIVE: {
+            target: "updatingActiveVersion",
+          },
+        },
+      },
+      updatingActiveVersion: {
+        invoke: {
+          id: "updateActiveVersion",
+          src: "updateActiveVersion",
+          onDone: {
+            target: "idle",
+          },
         },
       },
       uploadTar: {
@@ -88,6 +102,10 @@ export const templateVersionEditorMachine = createMachine(
             actions: ["cancelBuild"],
             target: "idle",
           },
+          CREATE_BUILD: {
+            actions: ["cancelBuild", "assignCreateBuild"],
+            target: "uploadTar",
+          },
         },
       },
       fetchingVersion: {
@@ -200,6 +218,17 @@ export const templateVersionEditorMachine = createMachine(
         }
         return API.cancelTemplateVersionBuild(ctx.version.id)
       },
+      updateActiveVersion: (ctx) => {
+        if (!ctx.templateId) {
+          throw new Error("template must be set")
+        }
+        if (!ctx.version) {
+          throw new Error("template version must be set")
+        }
+        return API.updateActiveTemplateVersion(ctx.templateId, {
+          id: ctx.version.id,
+        })
+      },
     },
   },
 )