Fix minor UI issues

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

diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx
@@ -4,15 +4,17 @@ 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)
   }
@@ -32,7 +34,13 @@ export const CreateFileDialog: FC<{
       )
       return
     }
+    const pathError = validatePath(pathValue, fileTree)
+    if (pathError) {
+      setError(pathError)
+      return
+    }
     onConfirm(pathValue)
+    setError(undefined)
     setPathValue("")
   }
 
@@ -41,6 +49,7 @@ export const CreateFileDialog: FC<{
       open={open}
       onClose={() => {
         onClose()
+        setError(undefined)
         setPathValue("")
       }}
       onConfirm={handleConfirm}
@@ -62,6 +71,7 @@ export const CreateFileDialog: FC<{
                 handleConfirm()
               }
             }}
+            error={Boolean(error)}
             helperText={error}
             name="file-path"
             autoComplete="off"
@@ -109,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)
   }
@@ -127,11 +138,17 @@ export const RenameFileDialog: FC<{
     if (!isAllowedFile(pathValue)) {
       const extensions = allowedExtensions.join(", ")
       setError(
-        `This extension is not allowed. You only can create files with the following extensions: ${extensions}.`,
+        `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("")
   }
 
@@ -140,6 +157,7 @@ export const RenameFileDialog: FC<{
       open={open}
       onClose={() => {
         onClose()
+        setError(undefined)
         setPathValue("")
       }}
       onConfirm={handleConfirm}
@@ -161,6 +179,7 @@ export const RenameFileDialog: FC<{
                 handleConfirm()
               }
             }}
+            error={Boolean(error)}
             helperText={error}
             name="file-path"
             autoComplete="off"

diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -18,14 +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,
@@ -217,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)
@@ -246,6 +248,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               filename={deleteFileOpen || ""}
             />
             <RenameFileDialog
+              fileTree={fileTree}
               open={Boolean(renameFileOpen)}
               onClose={() => {
                 setRenameFileOpen(undefined)
@@ -289,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/util/filetree.ts b/site/src/util/filetree.ts
@@ -7,7 +7,38 @@ export type FileTree = {
   [key: string]: FileTree | string
 }
 
-export const setFile = (
+export const createFile = (
+  path: string,
+  fileTree: FileTree,
+  value: string,
+): FileTree => {
+  if (existsFile(path, fileTree)) {
+    throw new Error(`File ${path} already exists`)
+  }
+  const pathError = validatePath(path, fileTree)
+  if (pathError) {
+    throw new Error(pathError)
+  }
+
+  return set(fileTree, path.split("/"), value)
+}
+
+export const validatePath = (
+  path: string,
+  fileTree: FileTree,
+): string | undefined => {
+  const paths = path.split("/")
+  paths.pop() // The last item is the filename
+  for (let i = 0; i <= paths.length; i++) {
+    const path = paths.slice(0, i + 1)
+    const pathStr = path.join("/")
+    if (existsFile(pathStr, fileTree) && !isFolder(pathStr, fileTree)) {
+      return `Invalid path. The path ${path} is not a folder`
+    }
+  }
+}
+
+export const updateFile = (
   path: string,
   content: FileTree | string,
   fileTree: FileTree,
@@ -31,8 +62,11 @@ export const moveFile = (
   fileTree: FileTree,
 ) => {
   const content = getFileContent(currentPath, fileTree)
+  if (typeof content !== "string") {
+    throw new Error("Move folders is not allowed")
+  }
   fileTree = removeFile(currentPath, fileTree)
-  fileTree = setFile(newPath, content, fileTree)
+  fileTree = createFile(newPath, fileTree, content)
   return fileTree
 }
 

diff --git a/site/src/util/templateVersion.ts b/site/src/util/templateVersion.ts
@@ -1,6 +1,6 @@
 import * as API from "api/api"
 import { TemplateVersion } from "api/typesGenerated"
-import { FileTree, setFile } from "./filetree"
+import { FileTree, createFile } from "./filetree"
 import { TarReader } from "./tar"
 
 /**
@@ -35,10 +35,10 @@ export const createTemplateVersionFileTree = async (
   let fileTree: FileTree = {}
   for (const file of tarReader.fileInfo) {
     if (isAllowedFile(file.name)) {
-      fileTree = setFile(
+      fileTree = createFile(
         file.name,
-        tarReader.getTextFile(file.name) as string,
         fileTree,
+        tarReader.getTextFile(file.name) as string,
       )
     }
   }