Add experiment to enable the template editor

coder · kylecarbs · Feb 7, 2023 · Feb 1, 2023 · Feb 1, 2023 · Feb 1, 2023
commit 0d03b927707dd2c63d74fc138ab5bda9d664a324
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -418,6 +418,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"
 )
@@ -427,7 +431,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.

diff --git a/docs/api/schemas.md b/docs/api/schemas.md
@@ -2732,9 +2732,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
 

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -1070,8 +1070,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 =

diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -76,6 +76,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   const [activeFile, setActiveFile] = useState<File | undefined>(() => {
     const fileKeys = Object.keys(initialFiles)
     for (let i = 0; i < fileKeys.length; i++) {
+      // Open a Terraform file by default!
       if (fileKeys[i].endsWith(".tf")) {
         return {
           path: fileKeys[i],
@@ -85,11 +86,14 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
       }
     }
   })
+
   const triggerPreview = useCallback(() => {
     onPreview(files)
     // Switch to the build log!
     setSelectedTab(0)
   }, [files, onPreview])
+
+  // Stop ctrl+s from saving files and make ctrl+enter trigger a preview.
   useEffect(() => {
     const keyListener = (event: KeyboardEvent) => {
       if (!(navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPage.tsx
@@ -1,4 +1,5 @@
 import { useMachine } from "@xstate/react"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { useTab } from "hooks/useTab"
 import { FC } from "react"
@@ -22,6 +23,7 @@ export const TemplateVersionPage: FC = () => {
   })
   const tab = useTab("file", "0")
   const { t } = useTranslation("templateVersionPage")
+  const dashboard = useDashboard()
 
   return (
     <>
@@ -36,6 +38,7 @@ export const TemplateVersionPage: FC = () => {
         versionName={versionName}
         templateName={templateName}
         tab={tab}
+        canEdit={dashboard.experiments.includes("template_editor")}
       />
     </>
   )

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.stories.tsx
@@ -41,6 +41,7 @@ const defaultArgs = {
   tab,
   templateName: MockTemplate.name,
   versionName: MockTemplateVersion.name,
+  canEdit: true,
   context: {
     orgId: MockOrganization.id,
     versionName: MockTemplateVersion.name,

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -1,29 +1,29 @@
+import Button from "@material-ui/core/Button"
+import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
+import EditIcon from "@material-ui/icons/Edit"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import { DockerIcon } from "components/Icons/DockerIcon"
 import { MarkdownIcon } from "components/Icons/MarkdownIcon"
 import { TerraformIcon } from "components/Icons/TerraformIcon"
 import { Loader } from "components/Loader/Loader"
 import { Margins } from "components/Margins/Margins"
-import EditIcon from "@material-ui/icons/Edit"
 import {
   PageHeader,
   PageHeaderCaption,
   PageHeaderTitle,
 } from "components/PageHeader/PageHeader"
 import { Stack } from "components/Stack/Stack"
 import { Stats, StatsItem } from "components/Stats/Stats"
+import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter"
 import { UseTabResult } from "hooks/useTab"
 import { FC } from "react"
-import { Link as RouterLink } from "react-router-dom"
 import { useTranslation } from "react-i18next"
+import { Link as RouterLink } from "react-router-dom"
 import { combineClasses } from "util/combineClasses"
 import { createDayString } from "util/createDayString"
-import { TemplateVersionMachineContext } from "xServices/templateVersion/templateVersionXService"
 import { TemplateVersionFiles } from "util/templateVersion"
-import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter"
-import { DockerIcon } from "components/Icons/DockerIcon"
-import Button from "@material-ui/core/Button"
-import Link from "@material-ui/core/Link"
+import { TemplateVersionMachineContext } from "xServices/templateVersion/templateVersionXService"
 
 const iconByExtension: Record<string, JSX.Element> = {
   tf: <TerraformIcon />,
@@ -104,6 +104,7 @@ export interface TemplateVersionPageViewProps {
    */
   versionName: string
   templateName: string
+  canEdit: boolean
   tab: UseTabResult
   context: TemplateVersionMachineContext
 }
@@ -113,6 +114,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
   tab,
   versionName,
   templateName,
+  canEdit,
 }) => {
   const { currentFiles, error, currentVersion, previousFiles } = context
   const { t } = useTranslation("templateVersionPage")
@@ -121,13 +123,15 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
     <Margins>
       <PageHeader
         actions={
-          <Link
-            underline="none"
-            component={RouterLink}
-            to={`/templates/${templateName}/versions/${versionName}/edit`}
-          >
-            <Button startIcon={<EditIcon />}>Edit</Button>
-          </Link>
+          canEdit ? (
+            <Link
+              underline="none"
+              component={RouterLink}
+              to={`/templates/${templateName}/versions/${versionName}/edit`}
+            >
+              <Button startIcon={<EditIcon />}>Edit</Button>
+            </Link>
+          ) : undefined
         }
       >
         <PageHeaderCaption>{t("header.caption")}</PageHeaderCaption>