feat: implemented the functionality for renaming file/folder from context menu

web/src/components/nameInputModal.tsx

@@ -8,15 +8,19 @@ import { BootstrapDialog } from './modal'
 type NameInputModalProps = {
   open: boolean
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  title: string
   isFolder: boolean
-  add: (name: string) => void
+  actionLabel: string
+  action: (name: string) => void
 }
 
 const NameInputModal = ({
   open,
   setOpen,
+  title,
   isFolder,
-  add
+  actionLabel,
+  action
 }: NameInputModalProps) => {
   const [name, setName] = useState('')
   const [hasError, setHasError] = useState(false)
@@ -48,7 +52,7 @@ const NameInputModal = ({
   return (
     <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
       <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
-        {isFolder ? 'Add Folder' : 'Add File'}
+        {title}
       </BootstrapDialogTitle>
       <DialogContent dividers>
         <TextField
@@ -68,11 +72,11 @@ const NameInputModal = ({
         <Button
           variant="contained"
           onClick={() => {
-            add(name)
+            action(name)
           }}
           disabled={hasError || !name}
         >
-          Add
+          {actionLabel}
         </Button>
       </DialogActions>
     </BootstrapDialog>

web/src/components/tree.tsx

@@ -15,6 +15,7 @@ type Props = {
   deleteNode: (path: string, isFolder: boolean) => void
   addFile: (path: string) => void
   addFolder: (path: string) => void
+  rename: (oldPath: string, newPath: string) => void
   defaultExpanded?: string[]
 }
 
@@ -25,6 +26,7 @@ const TreeView = ({
   deleteNode,
   addFile,
   addFolder,
+  rename,
   defaultExpanded
 }: Props) => {
   return (
@@ -42,6 +44,7 @@ const TreeView = ({
         deleteNode={deleteNode}
         addFile={addFile}
         addFolder={addFolder}
+        rename={rename}
         defaultExpanded={defaultExpanded}
       />
     </ul>
@@ -57,6 +60,7 @@ const TreeViewNode = ({
   deleteNode,
   addFile,
   addFolder,
+  rename,
   defaultExpanded
 }: Props) => {
   const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
@@ -64,6 +68,8 @@ const TreeViewNode = ({
   const [deleteConfirmationModalMessage, setDeleteConfirmationModalMessage] =
     useState('')
   const [nameInputModalOpen, setNameInputModalOpen] = useState(false)
+  const [nameInputModalTitle, setNameInputModalTitle] = useState('')
+  const [nameInputModalActionLabel, setNameInputModalActionLabel] = useState('')
   const [nameInputModalForFolder, setNameInputModalForFolder] = useState(false)
   const [childVisible, setChildVisibility] = useState(false)
   const [contextMenu, setContextMenu] = useState<{
@@ -122,12 +128,16 @@ const TreeViewNode = ({
   const handleNewFolderItemClick = () => {
     setContextMenu(null)
     setNameInputModalOpen(true)
+    setNameInputModalTitle('Add Folder')
+    setNameInputModalActionLabel('Add')
     setNameInputModalForFolder(true)
   }
 
   const handleNewFileItemClick = () => {
     setContextMenu(null)
     setNameInputModalOpen(true)
+    setNameInputModalTitle('Add File')
+    setNameInputModalActionLabel('Add')
     setNameInputModalForFolder(false)
   }
 
@@ -138,6 +148,23 @@ const TreeViewNode = ({
     else addFile(path)
   }
 
+  const handleRenameItemClick = () => {
+    setContextMenu(null)
+    setNameInputModalOpen(true)
+    setNameInputModalTitle('Rename')
+    setNameInputModalActionLabel('Rename')
+    setNameInputModalForFolder(node.isFolder)
+  }
+
+  const renameFileFolder = (name: string) => {
+    setNameInputModalOpen(false)
+    const oldPath = node.relativePath
+    const splittedPath = node.relativePath.split('/')
+    splittedPath.splice(-1, 1, name)
+    const newPath = splittedPath.join('/')
+    rename(oldPath, newPath)
+  }
+
   return (
     <div onContextMenu={handleContextMenu} style={{ cursor: 'context-menu' }}>
       <li style={{ display: 'list-item' }}>
@@ -163,6 +190,7 @@ const TreeViewNode = ({
               deleteNode={deleteNode}
               addFile={addFile}
               addFolder={addFolder}
+              rename={rename}
               defaultExpanded={defaultExpanded}
             />
           ))}
@@ -176,8 +204,12 @@ const TreeViewNode = ({
       <NameInputModal
         open={nameInputModalOpen}
         setOpen={setNameInputModalOpen}
+        title={nameInputModalTitle}
         isFolder={nameInputModalForFolder}
-        add={addFileFolder}
+        actionLabel={nameInputModalActionLabel}
+        action={
+          nameInputModalActionLabel === 'Add' ? addFileFolder : renameFileFolder
+        }
       />
       <Menu
         open={contextMenu !== null}
@@ -202,7 +234,9 @@ const TreeViewNode = ({
               {item}
             </MenuItem>
           ))}
-        <MenuItem>Rename</MenuItem>
+        <MenuItem disabled={!node.relativePath} onClick={handleRenameItemClick}>
+          Rename
+        </MenuItem>
         <MenuItem disabled={!node.relativePath} onClick={handleDeleteItemClick}>
           Delete
         </MenuItem>

web/src/containers/Studio/sideBar.tsx

@@ -122,6 +122,31 @@ const SideBar = ({
       .finally(() => setIsLoading(false))
   }
 
+  const rename = (oldPath: string, newPath: string) => {
+    setIsLoading(true)
+    axios
+      .post('/SASjsApi/drive/rename', { oldPath, newPath })
+      .then(() => {
+        setSnackbarMessage('Successfully Renamed')
+        setSnackbarSeverity(AlertSeverityType.Success)
+        setOpenSnackbar(true)
+        if (oldPath === selectedFilePath) handleSelect(newPath)
+        else if (selectedFilePath.startsWith(oldPath))
+          handleSelect(selectedFilePath.replace(oldPath, newPath))
+        refreshSideBar()
+      })
+      .catch((err) => {
+        setModalTitle('Abort')
+        setModalPayload(
+          typeof err.response.data === 'object'
+            ? JSON.stringify(err.response.data)
+            : err.response.data
+        )
+        setOpenModal(true)
+      })
+      .finally(() => setIsLoading(false))
+  }
+
   return (
     <Drawer
       variant="permanent"
@@ -147,6 +172,7 @@ const SideBar = ({
             deleteNode={deleteNode}
             addFile={addFile}
             addFolder={addFolder}
+            rename={rename}
             defaultExpanded={defaultExpanded}
           />
         )}