fix(site): Handle rename a folder to a file (#7063)

BrunoQuaresma · web-flow · commit aa2468b16ef9 · 2023-04-10T13:30:21.000-03:00
diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx
@@ -4,7 +4,7 @@ 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"
+import { FileTree, isFolder, validatePath } from "util/filetree"
 
 export const CreateFileDialog: FC<{
   onClose: () => void
@@ -142,6 +142,12 @@ export const RenameFileDialog: FC<{
       )
       return
     }
+    //Check if a folder is renamed to a file
+    const [_, extension] = pathValue.split(".")
+    if (isFolder(filename, fileTree) && extension) {
+      setError(`A folder can't be renamed to a file.`)
+      return
+    }
     const pathError = validatePath(pathValue, fileTree)
     if (pathError) {
       setError(pathError)
diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx
@@ -5,7 +5,7 @@ import TreeView from "@material-ui/lab/TreeView"
 import TreeItem from "@material-ui/lab/TreeItem"
 import Menu from "@material-ui/core/Menu"
 import MenuItem from "@material-ui/core/MenuItem"
-import { FC, useState } from "react"
+import { CSSProperties, FC, useState } from "react"
 import { FileTree } from "util/filetree"
 import { DockerIcon } from "components/Icons/DockerIcon"
 import { colors } from "theme/colors"
@@ -80,6 +80,11 @@ export const FileTreeView: FC<{
           )
         }}
         icon={icon}
+        style={
+          {
+            "--level": parentPath ? parentPath.split("/").length : 0,
+          } as CSSProperties
+        }
       >
         {typeof content === "object" ? (
           Object.keys(content)
@@ -200,7 +205,7 @@ const useStyles = makeStyles((theme) => ({
 
       // We need to find a better way to recursive padding here
       "& .MuiTreeItem-content": {
-        paddingLeft: theme.spacing(5),
+        paddingLeft: `calc(var(--level) * ${theme.spacing(5)}px)`,
       },
     },
   },
