feat: add template editor to the ui (coder#5963)

* Add initial editor

* Fix editor file being reset onChange

* Add updating the active build version

* Update nav height

* Add tabs

* Fix title

* Hide timestamps in build logs

* Add create file dialog

* Add validation for empty path

* Hide resources tab

* Fix label names

* Add rename and delete

* Improve UX

* Add padding to the editor

* Add dirty state

* Hide build logs until a build is made

* Add stories

* Add experiment to enable the template editor

* Fix linting errors

* Fix duplicate fields

* Fix theme type

Author: kylecarbs

coderd/apidoc/docs.go

@@ -421,6 +421,10 @@ const (
 	// interface for all RBAC operations. NOT READY FOR PRODUCTION USE.
 	ExperimentAuthzQuerier Experiment = "authz_querier"
 
+	// ExperimentTemplateEditor is an internal experiment that enables the template editor
+	// for all users.
+	ExperimentTemplateEditor Experiment = "template_editor"
+
 	// Add new experiments here!
 	// ExperimentExample Experiment = "example"
 )
@@ -430,7 +434,7 @@ var (
 	// users to opt-in to via --experimental='*'.
 	// Experiments that are not ready for consumption by all users should
 	// not be included here and will be essentially hidden.
-	ExperimentsAll = Experiments{}
+	ExperimentsAll = Experiments{ExperimentTemplateEditor}
 )
 
 // Experiments is a list of experiments that are enabled for the deployment.

coderd/apidoc/swagger.json

@@ -2770,9 +2770,10 @@ CreateParameterRequest is a structure used to create a new parameter value for a
 
 #### Enumerated Values
 
-| Value           |
-| --------------- |
-| `authz_querier` |
+| Value             |
+| ----------------- |
+| `authz_querier`   |
+| `template_editor` |
 
 ## codersdk.Feature
 

codersdk/deployment.go

@@ -67,6 +67,7 @@
     "react-chartjs-2": "4.3.1",
     "react-color": "2.19.3",
     "react-dom": "18.2.0",
+    "react-headless-tabs": "^6.0.3",
     "react-helmet-async": "1.3.0",
     "react-i18next": "12.1.1",
     "react-markdown": "8.0.3",
@@ -75,6 +76,7 @@
     "remark-gfm": "3.0.1",
     "rollup-plugin-visualizer": "5.9.0",
     "sourcemapped-stacktrace": "1.1.11",
+    "tar-js": "^0.3.0",
     "ts-prune": "0.10.3",
     "tzdata": "1.0.30",
     "ua-parser-js": "1.0.33",
@@ -125,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",

docs/api/schemas.md

@@ -108,6 +108,12 @@ const GitAuthPage = lazy(() => import("./pages/GitAuthPage/GitAuthPage"))
 const TemplateVersionPage = lazy(
   () => import("./pages/TemplateVersionPage/TemplateVersionPage"),
 )
+const TemplateVersionEditorPage = lazy(
+  () =>
+    import(
+      "./pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage"
+    ),
+)
 const StarterTemplatesPage = lazy(
   () => import("./pages/StarterTemplatesPage/StarterTemplatesPage"),
 )
@@ -155,7 +161,13 @@ export const AppRouter: FC = () => {
                   <Route path="workspace" element={<CreateWorkspacePage />} />
                   <Route path="settings" element={<TemplateSettingsPage />} />
                   <Route path="versions">
-                    <Route path=":version" element={<TemplateVersionPage />} />
+                    <Route path=":version">
+                      <Route index element={<TemplateVersionPage />} />
+                      <Route
+                        path="edit"
+                        element={<TemplateVersionEditorPage />}
+                      />
+                    </Route>
                   </Route>
                 </Route>
               </Route>

site/package.json

@@ -309,6 +309,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,
@@ -433,6 +444,15 @@ export const cancelWorkspaceBuild = async (
   return response.data
 }
 
+export const cancelTemplateVersionBuild = async (
+  templateVersionId: TypesGen.TemplateVersion["id"],
+): Promise<Types.Message> => {
+  const response = await axios.patch(
+    `/api/v2/templateversions/${templateVersionId}/cancel`,
+  )
+  return response.data
+}
+
 export const createUser = async (
   user: TypesGen.CreateUserRequest,
 ): Promise<TypesGen.User> => {

site/src/AppRouter.tsx

@@ -1082,8 +1082,8 @@ export const Entitlements: Entitlement[] = [
 ]
 
 // From codersdk/deployment.go
-export type Experiment = "authz_querier"
-export const Experiments: Experiment[] = ["authz_querier"]
+export type Experiment = "authz_querier" | "template_editor"
+export const Experiments: Experiment[] = ["authz_querier", "template_editor"]
 
 // From codersdk/deployment.go
 export type FeatureName =

site/src/api/api.ts

@@ -71,6 +71,5 @@ const useStyles = makeStyles((theme) => ({
   },
   siteContent: {
     flex: 1,
-    paddingBottom: theme.spacing(10),
   },
 }))

site/src/api/typesGenerated.ts

@@ -13,10 +13,12 @@ interface Line {
 
 export interface LogsProps {
   lines: Line[]
+  hideTimestamps?: boolean
   className?: string
 }
 
 export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
+  hideTimestamps,
   lines,
   className = "",
 }) => {
@@ -27,10 +29,14 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
       <div className={styles.scrollWrapper}>
         {lines.map((line, idx) => (
           <div className={combineClasses([styles.line, line.level])} key={idx}>
-            <span className={styles.time}>
-              {dayjs(line.time).format(`HH:mm:ss.SSS`)}
-            </span>
-            <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            {!hideTimestamps && (
+              <>
+                <span className={styles.time}>
+                  {dayjs(line.time).format(`HH:mm:ss.SSS`)}
+                </span>
+                <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+              </>
+            )}
             <span>{line.output}</span>
           </div>
         ))}