fix(site): Fix template version editor rename

coder · BrunoQuaresma · Mar 6, 2023 · Feb 17, 2023 · Feb 21, 2023 · Feb 22, 2023
commit 0d5bcdb1777dbfb14ef4aefeb48e189ed2963d5c
diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -88,6 +88,10 @@ const useStyles = makeStyles((theme) => ({
     },
 
     "& p": {
+      margin: 0,
+    },
+
+    "& > p": {
       margin: theme.spacing(1, 0),
     },
   },

diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx
@@ -42,10 +42,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
@@ -58,10 +58,13 @@ export const CreateFileDialog: FC<{
             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 +85,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.
+        </>
+      }
     />
   )
 }
@@ -123,14 +131,14 @@ export const RenameFileDialog: FC<{
       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) => {
@@ -142,8 +150,7 @@ export const RenameFileDialog: FC<{
             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
@@ -66,7 +66,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
@@ -22,6 +22,7 @@ import {
   FileTree,
   getFileContent,
   isFolder,
+  moveFile,
   removeFile,
   setFile,
   traverse,
@@ -266,15 +267,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)

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>

diff --git a/site/src/util/filetree.test.ts b/site/src/util/filetree.test.ts
@@ -3,6 +3,7 @@ import {
   FileTree,
   getFileContent,
   isFolder,
+  moveFile,
   removeFile,
   setFile,
   traverse,
@@ -32,10 +33,44 @@ test("getFileContent() return the file content from the file tree", () => {
 test("removeFile() removes a file from the file tree", () => {
   let fileTree: FileTree = {
     "main.tf": "terraform content",
-    images: { "java.Dockerfile": "java dockerfile" },
+    images: {
+      "java.Dockerfile": "java dockerfile",
+      "python.Dockerfile": "python Dockerfile",
+    },
+  }
+  fileTree = removeFile("images/python.Dockerfile", fileTree)
+  const expectedFileTree = {
+    "main.tf": "terraform content",
+    images: {
+      "java.Dockerfile": "java dockerfile",
+    },
+  }
+  expect(expectedFileTree).toEqual(fileTree)
+})
+
+test("moveFile() moves a file from in file tree", () => {
+  let fileTree: FileTree = {
+    "main.tf": "terraform content",
+    images: {
+      "java.Dockerfile": "java dockerfile",
+      "python.Dockerfile": "python Dockerfile",
+    },
+  }
+  fileTree = moveFile(
+    "images/java.Dockerfile",
+    "other/java.Dockerfile",
+    fileTree,
+  )
+  const expectedFileTree = {
+    "main.tf": "terraform content",
+    images: {
+      "python.Dockerfile": "python Dockerfile",
+    },
+    other: {
+      "java.Dockerfile": "java dockerfile",
+    },
   }
-  fileTree = removeFile("images", fileTree)
-  expect(fileTree.images).toBeUndefined()
+  expect(fileTree).toEqual(expectedFileTree)
 })
 
 test("existsFile() returns if there is or not a file", () => {

diff --git a/site/src/util/filetree.ts b/site/src/util/filetree.ts
@@ -1,6 +1,6 @@
 import set from "lodash/set"
 import has from "lodash/has"
-import omit from "lodash/omit"
+import unset from "lodash/unset"
 import get from "lodash/get"
 
 export type FileTree = {
@@ -9,7 +9,7 @@ export type FileTree = {
 
 export const setFile = (
   path: string,
-  content: string,
+  content: FileTree | string,
   fileTree: FileTree,
 ): FileTree => {
   return set(fileTree, path.split("/"), content)
@@ -20,7 +20,20 @@ export const existsFile = (path: string, fileTree: FileTree) => {
 }
 
 export const removeFile = (path: string, fileTree: FileTree) => {
-  return omit(fileTree, path.split("/"))
+  const updatedFileTree = { ...fileTree }
+  unset(fileTree, path.split("/"))
+  return updatedFileTree
+}
+
+export const moveFile = (
+  currentPath: string,
+  newPath: string,
+  fileTree: FileTree,
+) => {
+  const content = getFileContent(currentPath, fileTree)
+  fileTree = removeFile(currentPath, fileTree)
+  fileTree = setFile(newPath, content, fileTree)
+  return fileTree
 }
 
 export const getFileContent = (path: string, fileTree: FileTree) => {