chore(release): 0.25.1 [skip ci]

## [0.25.1](https://github.com/sasjs/server/compare/v0.25.0...v0.25.1) (2022-11-07)

### Bug Fixes

* **web:** use mui treeView instead of custom implementation ([c51b504](c51b50428f))

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [0.25.1](https://github.com/sasjs/server/compare/v0.25.0...v0.25.1) (2022-11-07)
+
+
+### Bug Fixes
+
+* **web:** use mui treeView instead of custom implementation ([c51b504](https://github.com/sasjs/server/commit/c51b50428f32608bc46438e9d7964429b2d595da))
+
+# [0.25.0](https://github.com/sasjs/server/compare/v0.24.0...v0.25.0) (2022-11-02)
+
+
+### Features
+
+* Enable DRIVE_LOCATION setting for deploying multiple instances of SASjs Server ([1c9d167](https://github.com/sasjs/server/commit/1c9d167f86bbbb108b96e9bc30efaf8de65d82ff))
+
 # [0.24.0](https://github.com/sasjs/server/compare/v0.23.4...v0.24.0) (2022-10-28)
 
 

README.md

@@ -93,6 +93,10 @@ R_PATH=/usr/bin/Rscript
 SASJS_ROOT=./sasjs_root
 
 
+# This location is for files, sasjs packages and appStreamConfig.json
+DRIVE_LOCATION=./sasjs_root/drive
+
+
 # options: [http|https] default: http
 PROTOCOL=
 

api/.env.example

@@ -30,6 +30,7 @@ PYTHON_PATH=/usr/bin/python
 R_PATH=/usr/bin/Rscript
 
 SASJS_ROOT=./sasjs_root
+DRIVE_LOCATION=./sasjs_root/drive
 
 LOG_FORMAT_MORGAN=common
 LOG_LOCATION=./sasjs_root/logs

api/src/app.ts

@@ -11,6 +11,7 @@ import {
   ReturnCode,
   setProcessVariables,
   setupFolders,
+  setupUserAutoExec,
   verifyEnvVariables
 } from './utils'
 import {
@@ -62,8 +63,12 @@ export default setProcessVariables().then(async () => {
   // Currently only place we use it is SAS9 Mock - POST /SASLogon/login
   app.use(express.urlencoded({ extended: true }))
 
-  await setupFolders()
+  await setupUserAutoExec()
-  await copySASjsCore()
+
+  if (process.driveLoc === path.join(process.sasjsRoot, 'drive')) {
+    await setupFolders()
+    await copySASjsCore()
+  }
 
   // loading these modules after setting up variables due to
   // multer's usage of process var process.driveLoc

api/src/types/system/process.d.ts

@@ -5,6 +5,7 @@ declare namespace NodeJS {
     pythonLoc?: string
     rLoc?: string
     driveLoc: string
+    sasjsRoot: string
     logsLoc: string
     logsUUID: string
     sessionController?: import('../../controllers/internal').SessionController

api/src/utils/copySASjsCore.ts

@@ -12,7 +12,7 @@ import { getMacrosFolder, sasJSCoreMacros, sasJSCoreMacrosInfo } from '.'
 export const copySASjsCore = async () => {
   if (process.env.NODE_ENV === 'test') return
 
-  console.log('Copying Macros from container to drive(tmp).')
+  console.log('Copying Macros from container to drive.')
 
   const macrosDrivePath = getMacrosFolder()
 

api/src/utils/file.ts

@@ -20,22 +20,24 @@ export const getSasjsHomeFolder = () => path.join(homedir(), '.sasjs-server')
 export const getDesktopUserAutoExecPath = () =>
   path.join(getSasjsHomeFolder(), 'user-autoexec.sas')
 
-export const getSasjsRootFolder = () => process.driveLoc
+export const getSasjsRootFolder = () => process.sasjsRoot
+
+export const getSasjsDriveFolder = () => process.driveLoc
 
 export const getLogFolder = () => process.logsLoc
 
 export const getAppStreamConfigPath = () =>
-  path.join(getSasjsRootFolder(), 'appStreamConfig.json')
+  path.join(getSasjsDriveFolder(), 'appStreamConfig.json')
 
 export const getMacrosFolder = () =>
-  path.join(getSasjsRootFolder(), 'sas', 'sasautos')
+  path.join(getSasjsDriveFolder(), 'sas', 'sasautos')
 
 export const getPackagesFolder = () =>
-  path.join(getSasjsRootFolder(), 'sas', 'sas_packages')
+  path.join(getSasjsDriveFolder(), 'sas', 'sas_packages')
 
 export const getUploadsFolder = () => path.join(getSasjsRootFolder(), 'uploads')
 
-export const getFilesFolder = () => path.join(getSasjsRootFolder(), 'files')
+export const getFilesFolder = () => path.join(getSasjsDriveFolder(), 'files')
 
 export const getWeboutFolder = () => path.join(getSasjsRootFolder(), 'webouts')
 

api/src/utils/index.ts

@@ -26,6 +26,7 @@ export * from './saveTokensInDB'
 export * from './seedDB'
 export * from './setProcessVariables'
 export * from './setupFolders'
+export * from './setupUserAutoExec'
 export * from './upload'
 export * from './validation'
 export * from './verifyEnvVariables'

api/src/utils/setProcessVariables.ts

@@ -19,7 +19,8 @@ export const setProcessVariables = async () => {
   }
 
   if (process.env.NODE_ENV === 'test') {
-    process.driveLoc = path.join(process.cwd(), 'sasjs_root')
+    process.sasjsRoot = path.join(process.cwd(), 'sasjs_root')
+    process.driveLoc = path.join(process.cwd(), 'sasjs_root', 'drive')
     return
   }
 
@@ -41,11 +42,19 @@ export const setProcessVariables = async () => {
   const { SASJS_ROOT } = process.env
   const absPath = getAbsolutePath(SASJS_ROOT ?? 'sasjs_root', process.cwd())
   await createFolder(absPath)
-  process.driveLoc = getRealPath(absPath)
+  process.sasjsRoot = getRealPath(absPath)
+
+  const { DRIVE_LOCATION } = process.env
+  const absDrivePath = getAbsolutePath(
+    DRIVE_LOCATION ?? path.join(process.sasjsRoot, 'drive'),
+    process.cwd()
+  )
+  await createFolder(absDrivePath)
+  process.driveLoc = getRealPath(absDrivePath)
 
   const { LOG_LOCATION } = process.env
   const absLogsPath = getAbsolutePath(
-    LOG_LOCATION ?? `sasjs_root${path.sep}logs`,
+    LOG_LOCATION ?? path.join(process.sasjsRoot, 'logs'),
     process.cwd()
   )
   await createFolder(absLogsPath)

api/src/utils/setupFolders.ts

@@ -1,19 +1,7 @@
-import { createFile, createFolder, fileExists } from '@sasjs/utils'
+import { createFolder } from '@sasjs/utils'
-import {
+import { getFilesFolder, getPackagesFolder } from './file'
-  getDesktopUserAutoExecPath,
-  getFilesFolder,
-  getPackagesFolder
-} from './file'
-import { ModeType } from './verifyEnvVariables'
 
 export const setupFolders = async () => {
-  const drivePath = getFilesFolder()
+  await createFolder(getFilesFolder())
-  await createFolder(drivePath)
   await createFolder(getPackagesFolder())
-
-  if (process.env.MODE === ModeType.Desktop) {
-    if (!(await fileExists(getDesktopUserAutoExecPath()))) {
-      await createFile(getDesktopUserAutoExecPath(), '')
-    }
-  }
 }

api/src/utils/setupUserAutoExec.ts

@@ -0,0 +1,11 @@
+import { createFile, fileExists } from '@sasjs/utils'
+import { getDesktopUserAutoExecPath } from './file'
+import { ModeType } from './verifyEnvVariables'
+
+export const setupUserAutoExec = async () => {
+  if (process.env.MODE === ModeType.Desktop) {
+    if (!(await fileExists(getDesktopUserAutoExecPath()))) {
+      await createFile(getDesktopUserAutoExecPath(), '')
+    }
+  }
+}

web/src/components/deleteConfirmationModal.tsx

@@ -31,14 +31,24 @@ const DeleteConfirmationModal = ({
   message,
   _delete
 }: DeleteConfirmationModalProps) => {
+  const handleDeleteClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    _delete()
+  }
+
+  const handleClose = (event: any) => {
+    event.stopPropagation()
+    setOpen(false)
+  }
+
   return (
-    <BootstrapDialog onClose={() => setOpen(false)} open={open}>
+    <BootstrapDialog onClose={handleClose} open={open}>
       <DialogContent dividers>
         <Typography gutterBottom>{message}</Typography>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => setOpen(false)}>Cancel</Button>
+        <Button onClick={handleClose}>Cancel</Button>
-        <Button color="error" onClick={() => _delete()}>
+        <Button color="error" onClick={handleDeleteClick}>
           Delete
         </Button>
       </DialogActions>

web/src/components/nameInputModal.tsx

@@ -69,8 +69,18 @@ const NameInputModal = ({
     action(name)
   }
 
+  const handleActionClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    action(name)
+  }
+
+  const handleClose = (event: any) => {
+    event.stopPropagation()
+    setOpen(false)
+  }
+
   return (
-    <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
+    <BootstrapDialog fullWidth onClose={handleClose} open={open}>
       <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
         {title}
       </BootstrapDialogTitle>
@@ -91,12 +101,12 @@ const NameInputModal = ({
         </form>
       </DialogContent>
       <DialogActions>
-        <Button variant="contained" onClick={() => setOpen(false)}>
+        <Button variant="contained" onClick={handleClose}>
           Cancel
         </Button>
         <Button
           variant="contained"
-          onClick={() => action(name)}
+          onClick={handleActionClick}
           disabled={hasError || !name}
         >
           {actionLabel}

web/src/components/tree.tsx

@@ -1,67 +1,79 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
-import { Menu, MenuItem } from '@mui/material'
+import { Menu, MenuItem, Typography } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import MuiTreeView from '@mui/lab/TreeView'
+import MuiTreeItem from '@mui/lab/TreeItem'
 
 import DeleteConfirmationModal from './deleteConfirmationModal'
 import NameInputModal from './nameInputModal'
 
 import { TreeNode } from '../utils/types'
 
-type Props = {
+interface Props {
   node: TreeNode
-  selectedFilePath: string
   handleSelect: (filePath: string) => void
   deleteNode: (path: string, isFolder: boolean) => void
   addFile: (path: string) => void
   addFolder: (path: string) => void
   rename: (oldPath: string, newPath: string) => void
+}
+
+interface TreeViewProps extends Props {
   defaultExpanded?: string[]
 }
 
 const TreeView = ({
   node,
-  selectedFilePath,
   handleSelect,
   deleteNode,
   addFile,
   addFolder,
   rename,
   defaultExpanded
-}: Props) => {
+}: TreeViewProps) => {
-  return (
+  const renderTree = (nodes: TreeNode) => (
-    <ul
+    <MuiTreeItem
-      style={{
+      key={nodes.relativePath}
-        listStyle: 'none',
+      nodeId={nodes.relativePath}
-        padding: '0.25rem 0.85rem',
+      label={
-        width: 'max-content'
+        <TreeItemWithContextMenu
-      }}
+          node={nodes}
+          handleSelect={handleSelect}
+          deleteNode={deleteNode}
+          addFile={addFile}
+          addFolder={addFolder}
+          rename={rename}
+        />
+      }
     >
-      <TreeViewNode
+      {Array.isArray(nodes.children)
-        node={node}
+        ? nodes.children.map((node) => renderTree(node))
-        selectedFilePath={selectedFilePath}
+        : null}
-        handleSelect={handleSelect}
+    </MuiTreeItem>
-        deleteNode={deleteNode}
+  )
-        addFile={addFile}
+
-        addFolder={addFolder}
+  return (
-        rename={rename}
+    <MuiTreeView
-        defaultExpanded={defaultExpanded}
+      defaultCollapseIcon={<ExpandMoreIcon />}
-      />
+      defaultExpandIcon={<ChevronRightIcon />}
-    </ul>
+      defaultExpanded={defaultExpanded}
+      sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+    >
+      {renderTree(node)}
+    </MuiTreeView>
   )
 }
 
 export default TreeView
 
-const TreeViewNode = ({
+const TreeItemWithContextMenu = ({
   node,
-  selectedFilePath,
   handleSelect,
   deleteNode,
   addFile,
   addFolder,
-  rename,
+  rename
-  defaultExpanded
 }: Props) => {
   const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
     useState(false)
@@ -72,18 +84,19 @@ const TreeViewNode = ({
   const [nameInputModalTitle, setNameInputModalTitle] = useState('')
   const [nameInputModalActionLabel, setNameInputModalActionLabel] = useState('')
   const [nameInputModalForFolder, setNameInputModalForFolder] = useState(false)
-  const [childVisible, setChildVisibility] = useState(false)
   const [contextMenu, setContextMenu] = useState<{
     mouseX: number
     mouseY: number
   } | null>(null)
 
-  const launchProgram = () => {
+  const launchProgram = (event: React.MouseEvent) => {
+    event.stopPropagation()
     const baseUrl = window.location.origin
     window.open(`${baseUrl}/SASjsApi/stp/execute?_program=${node.relativePath}`)
   }
 
-  const launchProgramWithDebug = () => {
+  const launchProgramWithDebug = (event: React.MouseEvent) => {
+    event.stopPropagation()
     const baseUrl = window.location.origin
     window.open(
       `${baseUrl}/SASjsApi/stp/execute?_program=${node.relativePath}&_debug=131`
@@ -103,25 +116,18 @@ const TreeViewNode = ({
     )
   }
 
-  const hasChild = node.children.length ? true : false
+  const handleClose = (event: any) => {
-
+    event.stopPropagation()
-  const handleItemClick = () => {
+    setContextMenu(null)
-    if (node.children.length) {
+  }
-      setChildVisibility((v) => !v)
-      return
-    }
 
+  const handleItemClick = (event: React.MouseEvent) => {
+    if (node.children.length) return
     handleSelect(node.relativePath)
   }
 
-  useEffect(() => {
+  const handleDeleteItemClick = (event: React.MouseEvent) => {
-    if (defaultExpanded && defaultExpanded[0] === node.relativePath) {
+    event.stopPropagation()
-      setChildVisibility(true)
-      defaultExpanded.shift()
-    }
-  }, [defaultExpanded, node.relativePath])
-
-  const handleDeleteItemClick = () => {
     setContextMenu(null)
     setDeleteConfirmationModalOpen(true)
     setDeleteConfirmationModalMessage(
@@ -136,7 +142,8 @@ const TreeViewNode = ({
     deleteNode(node.relativePath, node.isFolder)
   }
 
-  const handleNewFolderItemClick = () => {
+  const handleNewFolderItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
     setContextMenu(null)
     setNameInputModalOpen(true)
     setNameInputModalTitle('Add Folder')
@@ -145,7 +152,8 @@ const TreeViewNode = ({
     setDefaultInputModalName('')
   }
 
-  const handleNewFileItemClick = () => {
+  const handleNewFileItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
     setContextMenu(null)
     setNameInputModalOpen(true)
     setNameInputModalTitle('Add File')
@@ -161,7 +169,8 @@ const TreeViewNode = ({
     else addFile(path)
   }
 
-  const handleRenameItemClick = () => {
+  const handleRenameItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
     setContextMenu(null)
     setNameInputModalOpen(true)
     setNameInputModalTitle('Rename')
@@ -181,34 +190,7 @@ const TreeViewNode = ({
 
   return (
     <div onContextMenu={handleContextMenu} style={{ cursor: 'context-menu' }}>
-      <li style={{ display: 'list-item' }}>
+      <Typography onClick={handleItemClick}>{node.name}</Typography>
-        <div
-          className={`tree-item-label ${
-            selectedFilePath === node.relativePath ? 'selected' : ''
-          }`}
-          onClick={() => handleItemClick()}
-        >
-          {hasChild &&
-            (childVisible ? <ExpandMoreIcon /> : <ChevronRightIcon />)}
-          <div>{node.name}</div>
-        </div>
-
-        {hasChild &&
-          childVisible &&
-          node.children.map((child, index) => (
-            <TreeView
-              key={node.relativePath + '-' + index}
-              node={child}
-              selectedFilePath={selectedFilePath}
-              handleSelect={handleSelect}
-              deleteNode={deleteNode}
-              addFile={addFile}
-              addFolder={addFolder}
-              rename={rename}
-              defaultExpanded={defaultExpanded}
-            />
-          ))}
-      </li>
       <DeleteConfirmationModal
         open={deleteConfirmationModalOpen}
         setOpen={setDeleteConfirmationModalOpen}
@@ -228,7 +210,7 @@ const TreeViewNode = ({
       />
       <Menu
         open={contextMenu !== null}
-        onClose={() => setContextMenu(null)}
+        onClose={handleClose}
         anchorReference="anchorPosition"
         anchorPosition={
           contextMenu !== null

web/src/containers/Studio/sideBar.tsx

@@ -180,7 +180,6 @@ const SideBar = ({
         {directoryData && (
           <TreeView
             node={directoryData}
-            selectedFilePath={selectedFilePath}
             handleSelect={handleFileSelect}
             deleteNode={deleteNode}
             addFile={addFile}