Add edit file button

coder · BrunoQuaresma · Mar 21, 2023 · Mar 20, 2023 · Mar 20, 2023 · Mar 20, 2023
commit fc494389e02e437ebc81770ff8ae2a348e0922dd
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -11,12 +11,10 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import {
   checkAuthorization,
   getTemplateByName,
-  getTemplateDAUs,
   getTemplateVersion,
-  getTemplateVersionResources,
-  getTemplateVersions,
 } from "api/api"
 import { useQuery } from "@tanstack/react-query"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
 
 const templatePermissions = (templateId: string) => ({
   canUpdateTemplate: {
@@ -30,23 +28,16 @@ const templatePermissions = (templateId: string) => ({
 
 const fetchTemplate = async (orgId: string, templateName: string) => {
   const template = await getTemplateByName(orgId, templateName)
-  const [activeVersion, resources, versions, daus, permissions] =
-    await Promise.all([
-      getTemplateVersion(template.active_version_id),
-      getTemplateVersionResources(template.active_version_id),
-      getTemplateVersions(template.id),
-      getTemplateDAUs(template.id),
-      checkAuthorization({
-        checks: templatePermissions(template.id),
-      }),
-    ])
+  const [activeVersion, permissions] = await Promise.all([
+    getTemplateVersion(template.active_version_id),
+    checkAuthorization({
+      checks: templatePermissions(template.id),
+    }),
+  ])
 
   return {
     template,
     activeVersion,
-    resources,
-    versions,
-    daus,
     permissions,
   }
 }
@@ -82,6 +73,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
   const orgId = useOrganizationId()
   const { template } = useParams() as { template: string }
   const templateData = useTemplateData(orgId, template)
+  const dashboard = useDashboard()
 
   if (templateData.error) {
     return (
@@ -104,7 +96,9 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
     <>
       <TemplatePageHeader
         template={templateData.data.template}
+        activeVersion={templateData.data.activeVersion}
         permissions={templateData.data.permissions}
+        canEditFiles={dashboard.experiments.includes("template_editor")}
         onDeleteTemplate={() => {
           navigate("/templates")
         }}

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import { MockTemplate } from "testHelpers/entities"
+import { MockTemplate, MockTemplateVersion } from "testHelpers/entities"
 import {
   TemplatePageHeader,
   TemplatePageHeaderProps,
@@ -12,6 +12,9 @@ export default {
     template: {
       defaultValue: MockTemplate,
     },
+    activeVersion: {
+      defaultValue: MockTemplateVersion,
+    },
     permissions: {
       defaultValue: {
         canUpdateTemplate: true,

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -1,6 +1,10 @@
 import Button from "@material-ui/core/Button"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
-import { AuthorizationResponse, Template } from "api/typesGenerated"
+import {
+  AuthorizationResponse,
+  Template,
+  TemplateVersion,
+} from "api/typesGenerated"
 import { Avatar } from "components/Avatar/Avatar"
 import { Maybe } from "components/Conditionals/Maybe"
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
@@ -19,17 +23,19 @@ import Menu from "@material-ui/core/Menu"
 import MenuItem from "@material-ui/core/MenuItem"
 
 const Language = {
-  editButton: "Edit",
   variablesButton: "Variables",
   settingsButton: "Settings",
   createButton: "Create workspace",
   deleteButton: "Delete",
+  editFilesButton: "Edit files",
 }
 
-const TemplateMenu: FC<{ templateName: string; onDelete: () => void }> = ({
-  templateName,
-  onDelete,
-}) => {
+const TemplateMenu: FC<{
+  templateName: string
+  templateVersion: string
+  canEditFiles: boolean
+  onDelete: () => void
+}> = ({ templateName, templateVersion, canEditFiles, onDelete }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
 
   const handleClose = () => {
@@ -68,6 +74,15 @@ const TemplateMenu: FC<{ templateName: string; onDelete: () => void }> = ({
         >
           {Language.variablesButton}
         </MenuItem>
+        {canEditFiles && (
+          <MenuItem
+            component={RouterLink}
+            to={`/templates/${templateName}/versions/${templateVersion}/edit`}
+            onClick={handleClose}
+          >
+            {Language.editFilesButton}
+          </MenuItem>
+        )}
         <MenuItem
           onClick={() => {
             onDelete()
@@ -96,13 +111,17 @@ const CreateWorkspaceButton: FC<{
 
 export type TemplatePageHeaderProps = {
   template: Template
+  activeVersion: TemplateVersion
   permissions: AuthorizationResponse
+  canEditFiles: boolean
   onDeleteTemplate: () => void
 }
 
 export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
   template,
+  activeVersion,
   permissions,
+  canEditFiles,
   onDeleteTemplate,
 }) => {
   const hasIcon = template.icon && template.icon !== ""
@@ -116,8 +135,10 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
             <CreateWorkspaceButton templateName={template.name} />
             <Maybe condition={permissions.canUpdateTemplate}>
               <TemplateMenu
+                templateVersion={activeVersion.name}
                 templateName={template.name}
                 onDelete={deleteTemplate.openDeleteConfirmation}
+                canEditFiles={canEditFiles}
               />
             </Maybe>
           </>