coder · BrunoQuaresma · Mar 6, 2023 · Feb 17, 2023 · Feb 21, 2023 · Feb 22, 2023
diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -87,7 +87,11 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.text.primary,
     },
 
-    "& p": {
+    "& p:not(.MuiFormHelperText-root)": {
+      margin: 0,
+    },
+
+    "& > p": {
       margin: theme.spacing(1, 0),
     },
   },

diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx
@@ -3,15 +3,18 @@ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { Stack } from "components/Stack/Stack"
 import { ChangeEvent, FC, useState } from "react"
 import Typography from "@material-ui/core/Typography"
+import { allowedExtensions, isAllowedFile } from "util/templateVersion"
+import { FileTree, validatePath } from "util/filetree"
 
 export const CreateFileDialog: FC<{
   onClose: () => void
   checkExists: (path: string) => boolean
   onConfirm: (path: string) => void
   open: boolean
-}> = ({ checkExists, onClose, onConfirm, open }) => {
+  fileTree: FileTree
+}> = ({ checkExists, onClose, onConfirm, open, fileTree }) => {
   const [pathValue, setPathValue] = useState("")
-  const [error, setError] = useState("")
+  const [error, setError] = useState<string>()
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPathValue(event.target.value)
   }
@@ -24,7 +27,20 @@ export const CreateFileDialog: FC<{
       setError("File already exists")
       return
     }
+    if (!isAllowedFile(pathValue)) {
+      const extensions = allowedExtensions.join(", ")
+      setError(
+        `This extension is not allowed. You only can create files with the following extensions: ${extensions}.`,
+      )
+      return
+    }
+    const pathError = validatePath(pathValue, fileTree)
+    if (pathError) {
+      setError(pathError)
+      return
+    }
     onConfirm(pathValue)
+    setError(undefined)
     setPathValue("")
   }
 
@@ -33,6 +49,7 @@ export const CreateFileDialog: FC<{
       open={open}
       onClose={() => {
         onClose()
+        setError(undefined)
         setPathValue("")
       }}
       onConfirm={handleConfirm}
@@ -42,10 +59,10 @@ export const CreateFileDialog: FC<{
       confirmText="Create"
       title="Create File"
       description={
-        <Stack spacing={1}>
+        <Stack>
           <Typography>
             Specify the path to a file to be created. This path can contain
-            slashes too!
+            slashes too.
           </Typography>
           <TextField
             autoFocus
@@ -54,14 +71,18 @@ export const CreateFileDialog: FC<{
                 handleConfirm()
               }
             }}
+            error={Boolean(error)}
             helperText={error}
             name="file-path"
             autoComplete="off"
             id="file-path"
-            placeholder="main.tf"
+            placeholder="example.tf"
             value={pathValue}
             onChange={handleChange}
             label="File Path"
+            InputLabelProps={{
+              shrink: true,
+            }}
           />
         </Stack>
       }
@@ -82,7 +103,12 @@ export const DeleteFileDialog: FC<{
       open={open}
       onConfirm={onConfirm}
       title="Delete File"
-      description={`Are you sure you want to delete "${filename}"?`}
+      description={
+        <>
+          Are you sure you want to delete <strong>{filename}</strong>? It will
+          be deleted permanently.
+        </>
+      }
     />
   )
 }
@@ -93,9 +119,10 @@ export const RenameFileDialog: FC<{
   checkExists: (path: string) => boolean
   open: boolean
   filename: string
-}> = ({ checkExists, onClose, onConfirm, open, filename }) => {
+  fileTree: FileTree
+}> = ({ checkExists, onClose, onConfirm, open, filename, fileTree }) => {
   const [pathValue, setPathValue] = useState(filename)
-  const [error, setError] = useState("")
+  const [error, setError] = useState<string>()
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPathValue(event.target.value)
   }
@@ -108,7 +135,20 @@ export const RenameFileDialog: FC<{
       setError("File already exists")
       return
     }
+    if (!isAllowedFile(pathValue)) {
+      const extensions = allowedExtensions.join(", ")
+      setError(
+        `This extension is not allowed. You only can rename files with the following extensions: ${extensions}.`,
+      )
+      return
+    }
+    const pathError = validatePath(pathValue, fileTree)
+    if (pathError) {
+      setError(pathError)
+      return
+    }
     onConfirm(pathValue)
+    setError(undefined)
     setPathValue("")
   }
 
@@ -117,33 +157,34 @@ export const RenameFileDialog: FC<{
       open={open}
       onClose={() => {
         onClose()
+        setError(undefined)
         setPathValue("")
       }}
       onConfirm={handleConfirm}
       hideCancel={false}
       type="success"
       cancelText="Cancel"
-      confirmText="Create"
+      confirmText="Rename"
       title="Rename File"
       description={
-        <Stack spacing={1}>
-          <Typography>
-            Rename {`"${filename}"`} to something else. This path can contain
-            slashes too!
-          </Typography>
+        <Stack>
+          <p>
+            Rename <strong>{filename}</strong> to something else. This path can
+            contain slashes too!
+          </p>
           <TextField
             autoFocus
             onKeyDown={(event) => {
               if (event.key === "Enter") {
                 handleConfirm()
               }
             }}
+            error={Boolean(error)}
             helperText={error}
             name="file-path"
             autoComplete="off"
             id="file-path"
-            placeholder="main.tf"
-            defaultValue={filename}
+            placeholder={filename}
             value={pathValue}
             onChange={handleChange}
             label="File Path"

diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx
@@ -67,7 +67,8 @@ export const FileTreeView: FC<{
           onSelect(currentPath)
         }}
         onContextMenu={(event) => {
-          event.preventDefault()
+          event.preventDefault() // Avoid default browser behavior
+          event.stopPropagation() // Avoid trigger parent context menu
           setContextMenu(
             contextMenu
               ? undefined
@@ -137,7 +138,7 @@ export const FileTreeView: FC<{
             setContextMenu(undefined)
           }}
         >
-          Rename...
+          Rename
         </MenuItem>
         <MenuItem
           onClick={() => {
@@ -148,7 +149,7 @@ export const FileTreeView: FC<{
             setContextMenu(undefined)
           }}
         >
-          Delete Permanently
+          Delete
         </MenuItem>
       </Menu>
     </TreeView>

diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -18,13 +18,15 @@ import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuild
 import { FC, useCallback, useEffect, useRef, useState } from "react"
 import { navHeight, dashboardContentBottomPadding } from "theme/constants"
 import {
+  createFile,
   existsFile,
   FileTree,
   getFileContent,
   isFolder,
+  moveFile,
   removeFile,
-  setFile,
   traverse,
+  updateFile,
 } from "util/filetree"
 import {
   CreateFileDialog,
@@ -216,13 +218,14 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               </Tooltip>
             </div>
             <CreateFileDialog
+              fileTree={fileTree}
               open={createFileOpen}
               onClose={() => {
                 setCreateFileOpen(false)
               }}
               checkExists={(path) => existsFile(path, fileTree)}
               onConfirm={(path) => {
-                setFileTree((fileTree) => setFile(path, "", fileTree))
+                setFileTree((fileTree) => createFile(path, fileTree, ""))
                 setActivePath(path)
                 setCreateFileOpen(false)
                 setDirty(true)
@@ -245,6 +248,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               filename={deleteFileOpen || ""}
             />
             <RenameFileDialog
+              fileTree={fileTree}
               open={Boolean(renameFileOpen)}
               onClose={() => {
                 setRenameFileOpen(undefined)
@@ -255,15 +259,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 if (!renameFileOpen) {
                   return
                 }
-                setFileTree((fileTree) => {
-                  fileTree = setFile(
-                    newPath,
-                    getFileContent(renameFileOpen, fileTree) as string,
-                    fileTree,
-                  )
-                  fileTree = removeFile(renameFileOpen, fileTree)
-                  return fileTree
-                })
+                setFileTree((fileTree) =>
+                  moveFile(renameFileOpen, newPath, fileTree),
+                )
                 setActivePath(newPath)
                 setRenameFileOpen(undefined)
                 setDirty(true)
@@ -294,7 +292,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                     return
                   }
                   setFileTree((fileTree) =>
-                    setFile(activePath, value, fileTree),
+                    updateFile(activePath, value, fileTree),
                   )
                   setDirty(true)
                 }}

diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
@@ -46,7 +46,7 @@ export const WorkspaceSchedule: FC<
 
   return (
     <div className={styles.schedule}>
-      <Stack spacing={2}>
+      <Stack>
         <div>
           <span className={styles.scheduleLabel}>{Language.timezoneLabel}</span>
           <span className={styles.scheduleValue}>{timezone}</span>

diff --git a/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionForm.tsx b/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionForm.tsx
@@ -39,12 +39,7 @@ export const WorkspaceChangeVersionForm: FC<{
   return (
     <form onSubmit={formik.handleSubmit}>
       <Stack direction="column" spacing={3}>
-        <Stack
-          direction="row"
-          spacing={2}
-          className={styles.workspace}
-          alignItems="center"
-        >
+        <Stack direction="row" className={styles.workspace} alignItems="center">
           <div className={styles.workspaceIcon}>
             <img src={workspace.template_icon} alt="" />
           </div>