chore(release): 0.0.34

Create LICENSE

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.34](https://github.com/sasjs/server/compare/v0.0.33...v0.0.34) (2022-03-18)
+
+
+### Features
+
+* **web:** directory tree in sidebar of drive should be expanded by default at root level ([3d89b75](https://github.com/sasjs/server/commit/3d89b753f023beed4d51a64db4f74e1011437aab))
+
+
+### Bug Fixes
+
+* desktop mode web index.html js script included ([75291f9](https://github.com/sasjs/server/commit/75291f939770de963d48c2ff1c967da9493bd668))
+* preferred to show param errors from query ([fd26298](https://github.com/sasjs/server/commit/fd2629862f10ec16e2266d68420499e715b5d58c))
+* **stp:** write original file name in sas code for upload ([8822de9](https://github.com/sasjs/server/commit/8822de95df1d2d01dadfe6957391c254172f2819))
+* **web-drive:** upon delete remove entry of deleted file from directory tree in sidebar ([fb77d99](https://github.com/sasjs/server/commit/fb77d99177851e7dc2a71e0b8f516daa3da29e36))
+
 ### [0.0.33](https://github.com/sasjs/server/compare/v0.0.32...v0.0.33) (2022-03-16)
 
 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 SASjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,54 +1,21 @@
 # SASjs Server
 
-SASjs Server provides a NodeJS wrapper for calling the SAS binary executable. It can be installed on an actual SAS server, or it could even run locally on your desktop. It provides the following functionality:
+SASjs Server provides a NodeJS wrapper for calling the SAS binary executable. It can be installed on an actual SAS server, or locally on your desktop. It provides:
 
 - Virtual filesystem for storing SAS programs and other content
 - Ability to execute Stored Programs from a URL
 - Ability to create web apps using simple Desktop SAS
+- REST API with Swagger Docs
 
-One major benefit of using SASjs Server (alongside other components of the SASjs framework such as the [CLI](https://cli.sasjs.io), [Adapter](https://adapter.sasjs.io) and [Core](https://core.sasjs.io) library) is that the projects you create can be very easily ported to SAS 9 (Stored Process server) or Viya (Job Execution server).
+One major benefit of using SASjs Server alongside other components of the SASjs framework such as the [CLI](https://cli.sasjs.io), [Adapter](https://adapter.sasjs.io) and [Core](https://core.sasjs.io) library, is that the projects you create can be very easily ported to SAS 9 (Stored Process server) or Viya (Job Execution server).
 
-SASjs Server is available in two modes - Desktop (without authentication) and Server (with authentiation, and a database)
+SASjs Server is available in two modes - Desktop (without authentication) and Server (with authentication, and a database)
 
+## Installation
 
-## Configuration
+Installation can be made programmatically using command line, or by manually downloading and running the executable. 
 
-When launching the app, it will make use of specific environment variables. These can be set in the following places:
-
-- Configured globally in /etc/environment file
-- Export in terminal or shell script (`export VAR=VALUE`)
-- Prepend in command
-- Enter in the `.env` file alongside the executable
-
-Example variables:
-
-```
-MODE=[desktop|server] default considered as desktop
-CORS=[disable|enable] default considered as disable
-PROTOCOL=[http|https] default considered as http
-PORT=[5000] default value is 5000
-PORT_WEB=[port for sasjs web component(react)] default value is 3000
-SAS_PATH=/path/to/sas/executable.exe
-DRIVE_PATH=./tmp
-PROTOCOL=[http|https] default considered as http. Use pems below if htttps.
-PRIVATE_KEY=privkey.pem
-FULL_CHAIN=fullchain.pem
-```
-
-## Desktop Version
-
-### Manual Installation
-
-Download the relevant package from the [releases](https://github.com/sasjs/server/releases) page
-
-Next, trigger by double clicking (windows) or executing from commandline.
-
-You are presented with two prompts (if not set as ENV vars):
-
-- Location of your `sas.exe` / `sas.sh` executable
-- Path to a filesystem location for Stored Programs and temporary files
-
-## Programmatic Installation
+### Programmatic
 
 Fetch the relevant package from github using `curl`, eg as follows (for linux):
 
@@ -59,6 +26,42 @@ unzip linux.zip
 
 The app can then be launched with `./api-linux` and prompts followed (if ENV vars not set).
 
+### Manual
+
+1. Download the relevant package from the [releases](https://github.com/sasjs/server/releases) page
+2. Trigger by double clicking (windows) or executing from commandline.
+
+You are presented with two prompts (if not set as ENV vars):
+
+- Location of your `sas.exe` / `sas.sh` executable
+- Path to a filesystem location for Stored Programs and temporary files
+
+## ENV Var configuration
+
+When launching the app, it will make use of specific environment variables. These can be set in the following places:
+
+- Configured globally in `/etc/environment` file
+- Export in terminal or shell script (`export VAR=VALUE`)
+- Prepended in the command
+- Enter in the `.env` file alongside the executable
+
+Example contents of a `.env` file:
+
+```
+MODE=desktop # options: [desktop|server] default: desktop
+CORS=disable # options: [disable|enable] default: disable
+PROTOCOL=http # options: [http|https] default: http
+PORT=5000 # default: 5000
+PORT_WEB=3000 # port for sasjs web component(react). default: 3000
+SAS_PATH=/path/to/sas/executable.exe
+DRIVE_PATH=/tmp
+PROTOCOL=http # options: [http|https] default: http
+PRIVATE_KEY=privkey.pem
+FULL_CHAIN=fullchain.pem
+```
+
+## Persisting the Session
+
 Normally the server process will stop when your terminal dies. To keep it going you can use the npm package [pm2](https://www.npmjs.com/package/pm2) (`npm install pm2@latest -g`) as follows:
 
 ```bash
@@ -69,7 +72,7 @@ export DRIVE_PATH=./tmp
 pm2 start api-linux
 ```
 
-To get the logs (and some usefull commands):
+To get the logs (and some useful commands):
 
 ```bash
 pm2 [list|ls|status]

api/package.json

@@ -9,14 +9,14 @@
     "prebuild": "npm run initial",
     "start": "nodemon ./src/server.ts",
     "build": "rimraf build && tsc",
+    "postbuild": "npm run copy:files",
     "swagger": "tsoa spec",
     "prepare": "[ -d .git ] && git config core.hooksPath ./.git-hooks || true",
     "test": "mkdir -p tmp && mkdir -p ../web/build && jest --silent --coverage",
     "lint:fix": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
     "lint": "npx prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
-    "package:lib": "npm run build && cp ./package.json build && cp README.md build && cd build && npm version \"5.0.0\" && npm pack",
-    "exe": "npm run build && npm run exe:copy && pkg .",
-    "exe:copy": "npm run public:copy && npm run sasjsbuild:copy && npm run sasjscore:copy && npm run web:copy",
+    "exe": "npm run build && pkg .",
+    "copy:files": "npm run public:copy && npm run sasjsbuild:copy && npm run sasjscore:copy && npm run web:copy",
     "public:copy": "cp -r ./public/ ./build/public/",
     "sasjsbuild:copy": "cp -r ./sasjsbuild/ ./build/sasjsbuild/",
     "sasjscore:copy": "cp -r ./sasjscore/ ./build/sasjscore/",

api/src/app.ts

@@ -31,7 +31,6 @@ app.use(cookieParser())
 app.use(morgan('tiny'))
 app.use(express.json({ limit: '50mb' }))
 app.use(express.static(path.join(__dirname, '../public')))
-app.use(express.static(getWebBuildFolderPath()))
 
 const onError: ErrorRequestHandler = (err, req, res, next) => {
   console.error(err.stack)
@@ -44,6 +43,10 @@ export default setProcessVariables().then(async () => {
   const { setupRoutes } = await import('./routes/setupRoutes')
   setupRoutes(app)
 
+  // should be served after setting up web route
+  // index.html needs to be injected with some js script.
+  app.use(express.static(getWebBuildFolderPath()))
+
   console.log('sasJSCoreMacros', sasJSCoreMacros)
 
   app.use(onError)

api/src/controllers/internal/Execution.ts

@@ -119,7 +119,7 @@ ${preProgramVarStatments}
 ${program}`
 
     // if no files are uploaded filesNamesMap will be undefined
-    if (otherArgs && otherArgs.filesNamesMap) {
+    if (otherArgs?.filesNamesMap) {
       const uploadSasCode = await generateFileUploadSasCode(
         otherArgs.filesNamesMap,
         session.path

api/src/controllers/internal/FileUploadController.ts

@@ -1,6 +1,6 @@
+import multer from 'multer'
 import { uuidv4 } from '@sasjs/utils'
 import { getSessionController } from '.'
-const multer = require('multer')
 
 export class FileUploadController {
   private storage = multer.diskStorage({

api/src/routes/api/drive.ts

@@ -40,7 +40,7 @@ driveRouter.get('/file', async (req, res) => {
   const { error: errQ, value: query } = fileParamValidation(req.query)
   const { error: errB, value: body } = fileBodyValidation(req.body)
 
-  if (errQ && errB) return res.status(400).send(errB.details[0].message)
+  if (errQ && errB) return res.status(400).send(errQ.details[0].message)
 
   try {
     await controller.getFile(req, query._filePath, body.filePath)
@@ -53,7 +53,7 @@ driveRouter.delete('/file', async (req, res) => {
   const { error: errQ, value: query } = fileParamValidation(req.query)
   const { error: errB, value: body } = fileBodyValidation(req.body)
 
-  if (errQ && errB) return res.status(400).send(errB.details[0].message)
+  if (errQ && errB) return res.status(400).send(errQ.details[0].message)
 
   try {
     const response = await controller.deleteFile(query._filePath, body.filePath)
@@ -72,7 +72,7 @@ driveRouter.post(
 
     if (errQ && errB) {
       if (req.file) await deleteFile(req.file.path)
-      return res.status(400).send(errB.details[0].message)
+      return res.status(400).send(errQ.details[0].message)
     }
 
     if (!req.file) return res.status(400).send('"file" is not present.')
@@ -100,7 +100,7 @@ driveRouter.patch(
 
     if (errQ && errB) {
       if (req.file) await deleteFile(req.file.path)
-      return res.status(400).send(errB.details[0].message)
+      return res.status(400).send(errQ.details[0].message)
     }
 
     if (!req.file) return res.status(400).send('"file" is not present.')

api/src/routes/api/spec/drive.spec.ts

@@ -260,7 +260,7 @@ describe('files', () => {
           .attach('file', fileToAttachPath)
           .expect(400)
 
-        expect(res.text).toEqual(`"filePath" is required`)
+        expect(res.text).toEqual(`"_filePath" is required`)
         expect(res.body).toEqual({})
       })
 
@@ -269,9 +269,9 @@ describe('files', () => {
         const pathToUpload = '/my/path/code.oth'
 
         const res = await request(app)
-          .post('/SASjsApi/drive/file')
+          .post(`/SASjsApi/drive/file?_filePath=${pathToUpload}`)
           .auth(accessToken, { type: 'bearer' })
-          .field('filePath', pathToUpload)
+          // .field('filePath', pathToUpload)
           .attach('file', fileToAttachPath)
           .expect(400)
 
@@ -420,7 +420,7 @@ describe('files', () => {
           .attach('file', fileToAttachPath)
           .expect(400)
 
-        expect(res.text).toEqual(`"filePath" is required`)
+        expect(res.text).toEqual(`"_filePath" is required`)
         expect(res.body).toEqual({})
       })
 
@@ -429,9 +429,9 @@ describe('files', () => {
         const pathToUpload = '/my/path/code.oth'
 
         const res = await request(app)
-          .patch('/SASjsApi/drive/file')
+          .patch(`/SASjsApi/drive/file?_filePath=${pathToUpload}`)
           .auth(accessToken, { type: 'bearer' })
-          .field('filePath', pathToUpload)
+          // .field('filePath', pathToUpload)
           .attach('file', fileToAttachPath)
           .expect(400)
 

api/src/utils/upload.ts

@@ -15,7 +15,7 @@ export const makeFilesNamesMap = (files: MulterFile[]) => {
   const filesNamesMap: { [key: string]: string } = {}
 
   for (let file of files) {
-    filesNamesMap[file.filename] = file.fieldname
+    filesNamesMap[file.filename] = file.originalname
   }
 
   return filesNamesMap
@@ -66,7 +66,7 @@ export const generateFileUploadSasCode = async (
   uploadSasCode += `\n%let _WEBIN_FILE_COUNT=${fileCount};`
 
   for (let uploadedMap of uploadedFilesMap) {
-    uploadSasCode += `\n%let _WEBIN_FILENAME${uploadedMap.count}=${uploadedMap.filepath};`
+    uploadSasCode += `\n%let _WEBIN_FILENAME${uploadedMap.count}=${uploadedMap.filename};`
   }
 
   for (let uploadedMap of uploadedFilesMap) {
@@ -74,7 +74,7 @@ export const generateFileUploadSasCode = async (
   }
 
   for (let uploadedMap of uploadedFilesMap) {
-    uploadSasCode += `\n%let _WEBIN_NAME${uploadedMap.count}=${uploadedMap.filename};`
+    uploadSasCode += `\n%let _WEBIN_NAME${uploadedMap.count}=${uploadedMap.filepath};`
   }
 
   if (fileCount > 0) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "server",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "server",
-      "version": "0.0.33",
+      "version": "0.0.34",
       "devDependencies": {
         "prettier": "^2.3.1",
         "standard-version": "^9.3.2"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "NodeJS wrapper for calling the SAS binary executable",
   "repository": "https://github.com/sasjs/server",
   "scripts": {

restClient/stp.rest

@@ -0,0 +1,27 @@
+
+
+### testing upload file example
+POST http://localhost:5000/SASjsApi/stp/execute/?_program=/Public/app/viya/services/editors/loadfile&table=DCCONFIG.MPE_X_TEST
+Content-Type: multipart/form-data; boundary=----WebKitFormBoundarynkYOqevUMKZrXeAy
+
+------WebKitFormBoundarynkYOqevUMKZrXeAy
+Content-Disposition: form-data; name="file"; filename="DCCONFIG.MPE_X_TEST.xlsx"
+Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
+
+
+------WebKitFormBoundarynkYOqevUMKZrXeAy
+Content-Disposition: form-data; name="file"; filename="DCCONFIG.MPE_X_TEST.xlsx.csv"
+Content-Type: application/csv
+
+_____DELETE__THIS__RECORD_____,PRIMARY_KEY_FIELD,SOME_CHAR,SOME_DROPDOWN,SOME_NUM,SOME_DATE,SOME_DATETIME,SOME_TIME,SOME_SHORTNUM,SOME_BESTNUM
+,0,this is dummy data 321,Option 1,42,1960-02-12,1960-01-01 00:00:42,00:00:42,3,44
+,1,more dummy data 123,Option 2,42,1960-02-12,1960-01-01 00:00:42,00:07:02,3,44
+,1039,39 bottles of beer on the wall,Option 1,0.8716847965827607,1962-05-30,1960-01-01 00:05:21,00:01:30,89,6
+,1045,45 bottles of beer on the wall,Option 1,0.7279699667021492,1960-03-24,1960-01-01 07:18:54,00:01:08,89,83
+,1047,47 bottles of beer on the wall,Option 1,0.6224654082313484,1961-06-07,1960-01-01 09:45:23,00:01:33,76,98
+,1048,48 bottles of beer on the wall,Option 1,0.0874847523344144,1962-03-01,1960-01-01 13:06:13,00:00:02,76,63
+------WebKitFormBoundarynkYOqevUMKZrXeAy
+Content-Disposition: form-data; name="_debug"
+
+131
+------WebKitFormBoundarynkYOqevUMKZrXeAy--

web/src/containers/Drive/index.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
+import { useLocation } from 'react-router-dom'
+import axios from 'axios'
 
 import CssBaseline from '@mui/material/CssBaseline'
 import Box from '@mui/material/Box'
@@ -6,13 +8,93 @@ import Box from '@mui/material/Box'
 import SideBar from './sideBar'
 import Main from './main'
 
+export interface TreeNode {
+  name: string
+  relativePath: string
+  absolutePath: string
+  children: Array<TreeNode>
+}
+
 const Drive = () => {
+  const location = useLocation()
+  const baseUrl = window.location.origin
+
   const [selectedFilePath, setSelectedFilePath] = useState('')
+  const [directoryData, setDirectoryData] = useState<TreeNode | null>(null)
+
+  const setFilePathOnMount = useCallback(() => {
+    const queryParams = new URLSearchParams(location.search)
+    setSelectedFilePath(queryParams.get('filePath') ?? '')
+  }, [location.search])
+
+  useEffect(() => {
+    axios
+      .get(`/SASjsApi/drive/fileTree`)
+      .then((res: any) => {
+        if (res.data && res.data?.status === 'success') {
+          setDirectoryData(res.data.tree)
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+    setFilePathOnMount()
+  }, [setFilePathOnMount])
+
+  const handleSelect = (node: TreeNode) => {
+    if (node.children.length) return
+
+    if (!node.name.includes('.')) return
+
+    window.history.pushState(
+      '',
+      '',
+      `${baseUrl}/#/SASjsDrive?filePath=${node.relativePath}`
+    )
+    setSelectedFilePath(node.relativePath)
+  }
+
+  const removeFileFromTree = (path: string) => {
+    if (directoryData) {
+      const newTree = JSON.parse(JSON.stringify(directoryData)) as TreeNode
+      findAndRemoveNode(newTree, newTree, path)
+      setDirectoryData(newTree)
+    }
+  }
+
+  const findAndRemoveNode = (
+    node: TreeNode,
+    parentNode: TreeNode,
+    path: string
+  ) => {
+    if (node.relativePath === path) {
+      removeNodeFromParent(parentNode, path)
+      return true
+    }
+    if (Array.isArray(node.children)) {
+      for (let i = 0; i < node.children.length; i++) {
+        if (findAndRemoveNode(node.children[i], node, path)) return
+      }
+    }
+  }
+
+  const removeNodeFromParent = (parent: TreeNode, path: string) => {
+    const index = parent.children.findIndex(
+      (node) => node.relativePath === path
+    )
+    if (index !== -1) {
+      parent.children.splice(index, 1)
+    }
+  }
+
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
-      <SideBar setSelectedFilePath={setSelectedFilePath} />
-      <Main selectedFilePath={selectedFilePath} />
+      <SideBar directoryData={directoryData} handleSelect={handleSelect} />
+      <Main
+        selectedFilePath={selectedFilePath}
+        removeFileFromTree={removeFileFromTree}
+      />
     </Box>
   )
 }

web/src/containers/Drive/main.tsx

@@ -11,7 +11,12 @@ import Button from '@mui/material/Button'
 import Toolbar from '@mui/material/Toolbar'
 import CircularProgress from '@mui/material/CircularProgress'
 
-const Main = (props: any) => {
+type Props = {
+  selectedFilePath: string
+  removeFileFromTree: (path: string) => void
+}
+
+const Main = (props: Props) => {
   const baseUrl = window.location.origin
 
   const [isLoading, setIsLoading] = useState(false)
@@ -45,6 +50,7 @@ const Main = (props: any) => {
       .delete(`/SASjsApi/drive/file?_filePath=${filePath}`)
       .then((res) => {
         setFileContent('')
+        props.removeFileFromTree(filePath)
         window.history.pushState('', '', `${baseUrl}/#/SASjsDrive`)
       })
       .catch((err) => {

web/src/containers/Drive/sideBar.tsx

@@ -1,6 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import axios from 'axios'
-import { useLocation } from 'react-router-dom'
+import React from 'react'
 
 import { makeStyles } from '@mui/styles'
 
@@ -16,12 +14,7 @@ import TreeItem from '@mui/lab/TreeItem'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
-interface TreeNode {
-  name: string
-  relativePath: string
-  absolutePath: string
-  children: Array<TreeNode>
-}
+import { TreeNode } from '.'
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -36,46 +29,14 @@ const useStyles = makeStyles(() => ({
 
 const drawerWidth = 240
 
-const SideBar = (props: any) => {
-  const location = useLocation()
-  const baseUrl = window.location.origin
+type Props = {
+  directoryData: TreeNode | null
+  handleSelect: (node: TreeNode) => void
+}
+
+const SideBar = ({ directoryData, handleSelect }: Props) => {
   const classes = useStyles()
 
-  const { setSelectedFilePath } = props
-  const [directoryData, setDirectoryData] = useState<TreeNode | null>(null)
-
-  const setFilePathOnMount = useCallback(() => {
-    const queryParams = new URLSearchParams(location.search)
-    setSelectedFilePath(queryParams.get('filePath'))
-  }, [location.search, setSelectedFilePath])
-
-  useEffect(() => {
-    axios
-      .get(`/SASjsApi/drive/fileTree`)
-      .then((res: any) => {
-        if (res.data && res.data?.status === 'success') {
-          setDirectoryData(res.data.tree)
-        }
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-    setFilePathOnMount()
-  }, [setFilePathOnMount])
-
-  const handleSelect = (node: TreeNode) => {
-    if (node.children.length) return
-
-    if (!node.name.includes('.')) return
-
-    window.history.pushState(
-      '',
-      '',
-      `${baseUrl}/#/SASjsDrive?filePath=${node.relativePath}`
-    )
-    setSelectedFilePath(node.relativePath)
-  }
-
   const renderTree = (nodes: TreeNode) => (
     <TreeItem
       classes={{ root: classes.root }}
@@ -107,12 +68,15 @@ const SideBar = (props: any) => {
     >
       <Toolbar />
       <Box sx={{ overflow: 'auto' }}>
-        <TreeView
-          defaultCollapseIcon={<ExpandMoreIcon />}
-          defaultExpandIcon={<ChevronRightIcon />}
-        >
-          {directoryData && renderTree(directoryData)}
-        </TreeView>
+        {directoryData && (
+          <TreeView
+            defaultCollapseIcon={<ExpandMoreIcon />}
+            defaultExpandIcon={<ChevronRightIcon />}
+            defaultExpanded={[directoryData.relativePath]}
+          >
+            {renderTree(directoryData)}
+          </TreeView>
+        )}
       </Box>
     </Drawer>
   )