From 567ef02f78ee3cdb5e8aac0fed122306eebaaf97 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 10 Apr 2023 13:56:36 +0000 Subject: [PATCH] fix(site): Handle rename a folder to a file --- site/src/components/TemplateVersionEditor/FileDialog.tsx | 8 +++++++- .../components/TemplateVersionEditor/FileTreeView.tsx | 9 +++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx index 12e4664424057..c3d14efe36fc1 100644 --- 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 index 8118301c596b2..78971375c70e1 100644 --- 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)`, }, }, },