chore(release): 0.27.0 [skip ci]

# [0.27.0](https://github.com/sasjs/server/compare/v0.26.2...v0.27.0) (2022-11-17)

### Features

* on startup add webout.sas file in sasautos folder ([200f6c5](200f6c596a))

CHANGELOG.md

@@ -1,3 +1,44 @@
+# [0.27.0](https://github.com/sasjs/server/compare/v0.26.2...v0.27.0) (2022-11-17)
+
+
+### Features
+
+* on startup add webout.sas file in sasautos folder ([200f6c5](https://github.com/sasjs/server/commit/200f6c596a6e732d799ed408f1f0fd92f216ba58))
+
+## [0.26.2](https://github.com/sasjs/server/compare/v0.26.1...v0.26.2) (2022-11-15)
+
+
+### Bug Fixes
+
+* comments ([7ae862c](https://github.com/sasjs/server/commit/7ae862c5ce720e9483d4728f4295dede4f849436))
+
+## [0.26.1](https://github.com/sasjs/server/compare/v0.26.0...v0.26.1) (2022-11-15)
+
+
+### Bug Fixes
+
+* change the expiration of access/refresh tokens from days to seconds ([bb05493](https://github.com/sasjs/server/commit/bb054938c5bd0535ae6b9da93ba0b14f9b80ddcd))
+
+# [0.26.0](https://github.com/sasjs/server/compare/v0.25.1...v0.26.0) (2022-11-13)
+
+
+### Bug Fixes
+
+* **web:** dispose monaco editor actions in return of useEffect ([acc25cb](https://github.com/sasjs/server/commit/acc25cbd686952d3f1c65e57aefcebe1cb859cc7))
+
+
+### Features
+
+* make access token duration configurable when creating client/secret ([2413c05](https://github.com/sasjs/server/commit/2413c05fea3960f7e5c3c8b7b2f85d61314f08db))
+* make refresh token duration configurable ([abd5c64](https://github.com/sasjs/server/commit/abd5c64b4a726e3f17594a98111b6aa269b71fee))
+
+## [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)
 
 

api/package-lock.json

@@ -7092,9 +7092,9 @@
       "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
     },
     "node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -15592,9 +15592,9 @@
       "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
     },
     "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "requires": {
         "brace-expansion": "^1.1.7"
       }

api/public/swagger.yaml

@@ -57,6 +57,16 @@ components:
                     type: string
                     description: 'Client Secret'
                     example: someRandomCryptoString
+                accessTokenExpiration:
+                    type: number
+                    format: double
+                    description: 'Number of seconds after which access token will expire. Default is 86400 (1 day)'
+                    example: 86400
+                refreshTokenExpiration:
+                    type: number
+                    format: double
+                    description: 'Number of seconds after which access token will expire. Default is 2592000 (30 days)'
+                    example: 2592000
             required:
                 - clientId
                 - clientSecret
@@ -679,8 +689,8 @@ paths:
                                 $ref: '#/components/schemas/ClientPayload'
                             examples:
                                 'Example 1':
-                                    value: {clientId: someFormattedClientID1234, clientSecret: someRandomCryptoString}
-            summary: 'Create client with the following attributes: ClientId, ClientSecret. Admin only task.'
+                                    value: {clientId: someFormattedClientID1234, clientSecret: someRandomCryptoString, accessTokenExpiration: 86400}
+            summary: "Admin only task. Create client with the following attributes:\nClientId,\nClientSecret,\naccessTokenExpiration (optional),\nrefreshTokenExpiration (optional)"
             tags:
                 - Client
             security:

api/src/app.ts

@@ -5,12 +5,16 @@ import dotenv from 'dotenv'
 
 import {
   copySASjsCore,
+  createWeboutSasFile,
+  getFilesFolder,
+  getPackagesFolder,
   getWebBuildFolder,
   instantiateLogger,
   loadAppStreamConfig,
   ReturnCode,
   setProcessVariables,
-  setupFolders,
+  setupFilesFolder,
+  setupPackagesFolder,
   setupUserAutoExec,
   verifyEnvVariables
 } from './utils'
@@ -20,6 +24,7 @@ import {
   configureLogger,
   configureSecurity
 } from './app-modules'
+import { folderExists } from '@sasjs/utils'
 
 dotenv.config()
 
@@ -65,9 +70,18 @@ export default setProcessVariables().then(async () => {
 
   await setupUserAutoExec()
 
-  if (process.driveLoc === path.join(process.sasjsRoot, 'drive')) {
-    await setupFolders()
+  if (!(await folderExists(getFilesFolder()))) await setupFilesFolder()
+
+  if (!(await folderExists(getPackagesFolder()))) await setupPackagesFolder()
+
+  const sasautosPath = path.join(process.driveLoc, 'sas', 'sasautos')
+  if (await folderExists(sasautosPath)) {
+    console.log(
+      `SASAUTOS was not refreshed. To force a refresh, delete the ${sasautosPath} folder`
+    )
+  } else {
     await copySASjsCore()
+    await createWeboutSasFile()
   }
 
   // loading these modules after setting up variables due to

api/src/controllers/auth.ts

@@ -8,6 +8,7 @@ import {
   removeTokensInDB,
   saveTokensInDB
 } from '../utils'
+import Client from '../model/Client'
 
 @Route('SASjsApi/auth')
 @Tags('Auth')
@@ -83,8 +84,17 @@ const token = async (data: any): Promise<TokenResponse> => {
     }
   }
 
-  const accessToken = generateAccessToken(userInfo)
-  const refreshToken = generateRefreshToken(userInfo)
+  const client = await Client.findOne({ clientId })
+  if (!client) throw new Error('Invalid clientId.')
+
+  const accessToken = generateAccessToken(
+    userInfo,
+    client.accessTokenExpiration
+  )
+  const refreshToken = generateRefreshToken(
+    userInfo,
+    client.refreshTokenExpiration
+  )
 
   await saveTokensInDB(userInfo.userId, clientId, accessToken, refreshToken)
 
@@ -92,8 +102,17 @@ const token = async (data: any): Promise<TokenResponse> => {
 }
 
 const refresh = async (userInfo: InfoJWT): Promise<TokenResponse> => {
-  const accessToken = generateAccessToken(userInfo)
-  const refreshToken = generateRefreshToken(userInfo)
+  const client = await Client.findOne({ clientId: userInfo.clientId })
+  if (!client) throw new Error('Invalid clientId.')
+
+  const accessToken = generateAccessToken(
+    userInfo,
+    client.accessTokenExpiration
+  )
+  const refreshToken = generateRefreshToken(
+    userInfo,
+    client.refreshTokenExpiration
+  )
 
   await saveTokensInDB(
     userInfo.userId,

api/src/controllers/client.ts

@@ -1,18 +1,27 @@
 import { Security, Route, Tags, Example, Post, Body } from 'tsoa'
 
-import Client, { ClientPayload } from '../model/Client'
+import Client, {
+  ClientPayload,
+  NUMBER_OF_SECONDS_IN_A_DAY
+} from '../model/Client'
 
 @Security('bearerAuth')
 @Route('SASjsApi/client')
 @Tags('Client')
 export class ClientController {
   /**
-   * @summary Create client with the following attributes: ClientId, ClientSecret. Admin only task.
+   * @summary Admin only task. Create client with the following attributes:
+   * ClientId,
+   * ClientSecret,
+   * accessTokenExpiration (optional),
+   * refreshTokenExpiration (optional)
    *
    */
   @Example<ClientPayload>({
     clientId: 'someFormattedClientID1234',
-    clientSecret: 'someRandomCryptoString'
+    clientSecret: 'someRandomCryptoString',
+    accessTokenExpiration: NUMBER_OF_SECONDS_IN_A_DAY,
+    refreshTokenExpiration: NUMBER_OF_SECONDS_IN_A_DAY * 30
   })
   @Post('/')
   public async createClient(
@@ -22,8 +31,13 @@ export class ClientController {
   }
 }
 
-const createClient = async (data: any): Promise<ClientPayload> => {
-  const { clientId, clientSecret } = data
+const createClient = async (data: ClientPayload): Promise<ClientPayload> => {
+  const {
+    clientId,
+    clientSecret,
+    accessTokenExpiration,
+    refreshTokenExpiration
+  } = data
 
   // Checking if client is already in the database
   const clientExist = await Client.findOne({ clientId })
@@ -32,13 +46,17 @@ const createClient = async (data: any): Promise<ClientPayload> => {
   // Create a new client
   const client = new Client({
     clientId,
-    clientSecret
+    clientSecret,
+    accessTokenExpiration,
+    refreshTokenExpiration
   })
 
   const savedClient = await client.save()
 
   return {
     clientId: savedClient.clientId,
-    clientSecret: savedClient.clientSecret
+    clientSecret: savedClient.clientSecret,
+    accessTokenExpiration: savedClient.accessTokenExpiration,
+    refreshTokenExpiration: savedClient.refreshTokenExpiration
   }
 }

api/src/model/Client.ts

@@ -1,5 +1,6 @@
 import mongoose, { Schema } from 'mongoose'
 
+export const NUMBER_OF_SECONDS_IN_A_DAY = 86400
 export interface ClientPayload {
   /**
    * Client ID
@@ -11,6 +12,16 @@ export interface ClientPayload {
    * @example "someRandomCryptoString"
    */
   clientSecret: string
+  /**
+   * Number of seconds after which access token will expire. Default is 86400 (1 day)
+   * @example 86400
+   */
+  accessTokenExpiration?: number
+  /**
+   * Number of seconds after which access token will expire. Default is 2592000 (30 days)
+   * @example 2592000
+   */
+  refreshTokenExpiration?: number
 }
 
 const ClientSchema = new Schema<ClientPayload>({
@@ -21,6 +32,14 @@ const ClientSchema = new Schema<ClientPayload>({
   clientSecret: {
     type: String,
     required: true
+  },
+  accessTokenExpiration: {
+    type: Number,
+    default: NUMBER_OF_SECONDS_IN_A_DAY
+  },
+  refreshTokenExpiration: {
+    type: Number,
+    default: NUMBER_OF_SECONDS_IN_A_DAY * 30
   }
 })
 

api/src/utils/createWeboutSasFile.ts

@@ -0,0 +1,18 @@
+import path from 'path'
+import { createFile } from '@sasjs/utils'
+import { getMacrosFolder } from './file'
+
+const fileContent = `%macro webout(action,ds,dslabel=,fmt=,missing=NULL,showmeta=NO,maxobs=MAX);
+  %ms_webout(&action,ds=&ds,dslabel=&dslabel,fmt=&fmt
+    ,missing=&missing
+    ,showmeta=&showmeta
+    ,maxobs=&maxobs
+  )  
+%mend;`
+
+export const createWeboutSasFile = async () => {
+  const macrosDrivePath = getMacrosFolder()
+  console.log(`Creating webout.sas at ${macrosDrivePath}`)
+  const filePath = path.join(macrosDrivePath, 'webout.sas')
+  await createFile(filePath, fileContent)
+}

api/src/utils/generateAccessToken.ts

@@ -1,7 +1,8 @@
 import jwt from 'jsonwebtoken'
 import { InfoJWT } from '../types'
+import { NUMBER_OF_SECONDS_IN_A_DAY } from '../model/Client'
 
-export const generateAccessToken = (data: InfoJWT) =>
+export const generateAccessToken = (data: InfoJWT, expiry?: number) =>
   jwt.sign(data, process.secrets.ACCESS_TOKEN_SECRET, {
-    expiresIn: '1day'
+    expiresIn: expiry ? expiry : NUMBER_OF_SECONDS_IN_A_DAY
   })

api/src/utils/generateRefreshToken.ts

@@ -1,7 +1,8 @@
 import jwt from 'jsonwebtoken'
 import { InfoJWT } from '../types'
+import { NUMBER_OF_SECONDS_IN_A_DAY } from '../model/Client'
 
-export const generateRefreshToken = (data: InfoJWT) =>
+export const generateRefreshToken = (data: InfoJWT, expiry?: number) =>
   jwt.sign(data, process.secrets.REFRESH_TOKEN_SECRET, {
-    expiresIn: '30 days'
+    expiresIn: expiry ? expiry : NUMBER_OF_SECONDS_IN_A_DAY
   })

api/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './appStreamConfig'
 export * from './connectDB'
 export * from './copySASjsCore'
+export * from './createWeboutSasFile'
 export * from './desktopAutoExec'
 export * from './extractHeaders'
 export * from './extractName'

api/src/utils/setupFolders.ts

@@ -1,7 +1,7 @@
 import { createFolder } from '@sasjs/utils'
 import { getFilesFolder, getPackagesFolder } from './file'
 
-export const setupFolders = async () => {
-  await createFolder(getFilesFolder())
+export const setupFilesFolder = async () => await createFolder(getFilesFolder())
+
+export const setupPackagesFolder = async () =>
   await createFolder(getPackagesFolder())
-}

api/src/utils/validation.ts

@@ -88,7 +88,9 @@ export const updateUserValidation = (
 export const registerClientValidation = (data: any): Joi.ValidationResult =>
   Joi.object({
     clientId: Joi.string().required(),
-    clientSecret: Joi.string().required()
+    clientSecret: Joi.string().required(),
+    accessTokenExpiration: Joi.number(),
+    refreshTokenExpiration: Joi.number()
   }).validate(data)
 
 export const registerPermissionValidation = (data: any): Joi.ValidationResult =>

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 color="error" onClick={() => _delete()}>
+        <Button onClick={handleClose}>Cancel</Button>
+        <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 { Menu, MenuItem } from '@mui/material'
+import React, { useState } from 'react'
+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) => {
-  return (
-    <ul
-      style={{
-        listStyle: 'none',
-        padding: '0.25rem 0.85rem',
-        width: 'max-content'
-      }}
+}: TreeViewProps) => {
+  const renderTree = (nodes: TreeNode) => (
+    <MuiTreeItem
+      key={nodes.relativePath}
+      nodeId={nodes.relativePath}
+      label={
+        <TreeItemWithContextMenu
+          node={nodes}
+          handleSelect={handleSelect}
+          deleteNode={deleteNode}
+          addFile={addFile}
+          addFolder={addFolder}
+          rename={rename}
+        />
+      }
     >
-      <TreeViewNode
-        node={node}
-        selectedFilePath={selectedFilePath}
-        handleSelect={handleSelect}
-        deleteNode={deleteNode}
-        addFile={addFile}
-        addFolder={addFolder}
-        rename={rename}
-        defaultExpanded={defaultExpanded}
-      />
-    </ul>
+      {Array.isArray(nodes.children)
+        ? nodes.children.map((node) => renderTree(node))
+        : null}
+    </MuiTreeItem>
+  )
+
+  return (
+    <MuiTreeView
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      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,
-  defaultExpanded
+  rename
 }: 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 handleItemClick = () => {
-    if (node.children.length) {
-      setChildVisibility((v) => !v)
-      return
-    }
+  const handleClose = (event: any) => {
+    event.stopPropagation()
+    setContextMenu(null)
+  }
 
+  const handleItemClick = (event: React.MouseEvent) => {
+    if (node.children.length) return
     handleSelect(node.relativePath)
   }
 
-  useEffect(() => {
-    if (defaultExpanded && defaultExpanded[0] === node.relativePath) {
-      setChildVisibility(true)
-      defaultExpanded.shift()
-    }
-  }, [defaultExpanded, node.relativePath])
-
-  const handleDeleteItemClick = () => {
+  const handleDeleteItemClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
     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' }}>
-        <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>
+      <Typography onClick={handleItemClick}>{node.name}</Typography>
       <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/internal/hooks/useEditor.ts

@@ -49,7 +49,7 @@ const useEditor = ({
   const [openFilePathInputModal, setOpenFilePathInputModal] = useState(false)
   const [showDiff, setShowDiff] = useState(false)
 
-  const editorRef = useRef(null as any)
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
 
   const handleEditorDidMount: EditorDidMount = (editor) => {
     editorRef.current = editor
@@ -199,7 +199,7 @@ const useEditor = ({
   }
 
   useEffect(() => {
-    editorRef.current.addAction({
+    const saveFileAction = editorRef.current?.addAction({
       // An unique identifier of the contributed action.
       id: 'save-file',
 
@@ -209,6 +209,8 @@ const useEditor = ({
       // An optional array of keybindings for the action.
       keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
 
+      contextMenuGroupId: '9_cutcopypaste',
+
       // Method that will be executed when the action is triggered.
       // @param editor The editor instance is passed in as a convenience
       run: () => {
@@ -217,7 +219,7 @@ const useEditor = ({
       }
     })
 
-    editorRef.current.addAction({
+    const runCodeAction = editorRef.current?.addAction({
       // An unique identifier of the contributed action.
       id: 'run-code',
 
@@ -229,14 +231,17 @@ const useEditor = ({
 
       contextMenuGroupId: 'navigation',
 
-      contextMenuOrder: 1,
-
       // Method that will be executed when the action is triggered.
       // @param editor The editor instance is passed in as a convenience
       run: function () {
         runCode(getSelection(editorRef.current as any) || fileContent)
       }
     })
+
+    return () => {
+      saveFileAction?.dispose()
+      runCodeAction?.dispose()
+    }
   }, [fileContent, prevFileContent, selectedFilePath, saveFile, runCode])
 
   useEffect(() => {

web/src/containers/Studio/sideBar.tsx

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