feat: implemented functionality for adding file/folder from sidebar context menu

web/src/containers/Studio/index.tsx

@@ -88,6 +88,7 @@ const Studio = () => {
         directoryData={directoryData}
         handleSelect={handleSelect}
         removeFileFromTree={removeFileFromTree}
+        refreshSideBar={fetchDirectoryData}
       />
       <SASjsEditor
         selectedFilePath={selectedFilePath}

web/src/containers/Studio/sideBar.tsx

@@ -1,8 +1,10 @@
-import React, { useMemo } from 'react'
+import React, { useState, useMemo } from 'react'
 import axios from 'axios'
-import { Box, Drawer, Toolbar } from '@mui/material'
+import { Backdrop, Box, CircularProgress, Drawer, Toolbar } from '@mui/material'
 
 import TreeView from '../../components/tree'
+import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
+import Modal from '../../components/modal'
 import { TreeNode } from '../../utils/types'
 
 const drawerWidth = 240
@@ -12,14 +14,25 @@ type Props = {
   directoryData: TreeNode | null
   handleSelect: (filePath: string) => void
   removeFileFromTree: (filePath: string) => void
+  refreshSideBar: () => void
 }
 
 const SideBar = ({
   selectedFilePath,
   directoryData,
   handleSelect,
-  removeFileFromTree
+  removeFileFromTree,
+  refreshSideBar
 }: Props) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [openModal, setOpenModal] = useState(false)
+  const [modalTitle, setModalTitle] = useState('')
+  const [modalPayload, setModalPayload] = useState('')
+  const [openSnackbar, setOpenSnackbar] = useState(false)
+  const [snackbarMessage, setSnackbarMessage] = useState('')
+  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
+    AlertSeverityType.Success
+  )
   const defaultExpanded = useMemo(() => {
     const splittedPath = selectedFilePath.split('/')
     const arr = ['']
@@ -34,6 +47,7 @@ const SideBar = ({
   }, [selectedFilePath])
 
   const deleteNode = (path: string, isFolder: boolean) => {
+    setIsLoading(true)
     const axiosPromise = axios.delete(
       `/SASjsApi/drive/${
         isFolder ? `folder?_folderPath=${path}` : `file?_filePath=${path}`
@@ -41,10 +55,71 @@ const SideBar = ({
     )
 
     axiosPromise
-      .then(() => removeFileFromTree(path))
-      .catch((err) => {
-        console.log(err)
+      .then(() => {
+        removeFileFromTree(path)
+        setSnackbarMessage('Deleted!')
+        setSnackbarSeverity(AlertSeverityType.Success)
+        setOpenSnackbar(true)
       })
+      .catch((err) => {
+        setModalTitle('Abort')
+        setModalPayload(
+          typeof err.response.data === 'object'
+            ? JSON.stringify(err.response.data)
+            : err.response.data
+        )
+        setOpenModal(true)
+      })
+      .finally(() => setIsLoading(false))
+  }
+
+  const addFile = (filePath: string) => {
+    const formData = new FormData()
+    const stringBlob = new Blob([''], { type: 'text/plain' })
+    formData.append('file', stringBlob)
+    formData.append('filePath', filePath)
+
+    setIsLoading(true)
+    axios
+      .post('/SASjsApi/drive/file', formData)
+      .then(() => {
+        setSnackbarMessage('File added!')
+        setSnackbarSeverity(AlertSeverityType.Success)
+        setOpenSnackbar(true)
+        refreshSideBar()
+      })
+      .catch((err) => {
+        setModalTitle('Abort')
+        setModalPayload(
+          typeof err.response.data === 'object'
+            ? JSON.stringify(err.response.data)
+            : err.response.data
+        )
+        setOpenModal(true)
+      })
+      .finally(() => setIsLoading(false))
+  }
+
+  const addFolder = (folderPath: string) => {
+    setIsLoading(true)
+    axios
+      .post('/SASjsApi/drive/folder', { folderPath })
+      .then(() => {
+        setSnackbarMessage('Folder added!')
+        setSnackbarSeverity(AlertSeverityType.Success)
+        setOpenSnackbar(true)
+        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 (
@@ -56,6 +131,12 @@ const SideBar = ({
         [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' }
       }}
     >
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={isLoading}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
       <Toolbar />
       <Box sx={{ overflow: 'auto' }}>
         {directoryData && (
@@ -64,10 +145,24 @@ const SideBar = ({
             selectedFilePath={selectedFilePath}
             handleSelect={handleSelect}
             deleteNode={deleteNode}
+            addFile={addFile}
+            addFolder={addFolder}
             defaultExpanded={defaultExpanded}
           />
         )}
       </Box>
+      <BootstrapSnackbar
+        open={openSnackbar}
+        setOpen={setOpenSnackbar}
+        message={snackbarMessage}
+        severity={snackbarSeverity}
+      />
+      <Modal
+        open={openModal}
+        setOpen={setOpenModal}
+        title={modalTitle}
+        payload={modalPayload}
+      />
     </Drawer>
   )
 }