chore(release): 0.0.55

Fix drive path

CHANGELOG.md

@@ -2,6 +2,54 @@
 
 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.55](https://github.com/sasjs/server/compare/v0.0.53...v0.0.55) (2022-04-20)
+
+
+### Bug Fixes
+
+* added db seed at server startup ([2e63831](https://github.com/sasjs/server/commit/2e63831b90c7457e0e322719ebb1193fd6181cc3))
+* drive path in server mode ([c4cea4a](https://github.com/sasjs/server/commit/c4cea4a12b7eda4daeed995f41c0b10bcea79871))
+
+### [0.0.54](https://github.com/sasjs/server/compare/v0.0.53...v0.0.54) (2022-04-19)
+
+
+### Bug Fixes
+
+* added db seed at server startup ([2e63831](https://github.com/sasjs/server/commit/2e63831b90c7457e0e322719ebb1193fd6181cc3))
+
+### [0.0.53](https://github.com/sasjs/server/compare/v0.0.49...v0.0.53) (2022-04-19)
+
+
+### Features
+
+* add api for getting server info ([9fb5f1f](https://github.com/sasjs/server/commit/9fb5f1f8e7d4e2d767cc1ff7285c99514834cf32))
+* **appstream:** Upload an app from appStream page ([74ba65f](https://github.com/sasjs/server/commit/74ba65f9f330bf8c98c12a9c66bb60773d5a7b77))
+* run button running man, sub menu added ([68e84b0](https://github.com/sasjs/server/commit/68e84b0994a3fa6ff56b07635c637c6e3a57bfda))
+* running code with CTRL+ENTER ([b93a0da](https://github.com/sasjs/server/commit/b93a0da3a380926c87548b69309b2d0c1b7e617f))
+
+
+### Bug Fixes
+
+* provide clientId to web component ([db70b1c](https://github.com/sasjs/server/commit/db70b1ce555df6b29fb09c0c960d38b911c97b1b))
+* session death time has to be a valid string number ([23db7e7](https://github.com/sasjs/server/commit/23db7e7b7df2f22bbf7ce16865f83091624d8047))
+* web component added tooltip for webout in studio ([61080d4](https://github.com/sasjs/server/commit/61080d4694859306049346d2e3174f27bb6dac16))
+* web component UI fix for studio scrolling ([f257602](https://github.com/sasjs/server/commit/f25760283492140cc1f14e51ed27673ec28baaf3))
+
+### [0.0.52](https://github.com/sasjs/server/compare/v0.0.51...v0.0.52) (2022-04-17)
+
+
+### Features
+
+* add api for getting server info ([9fb5f1f](https://github.com/sasjs/server/commit/9fb5f1f8e7d4e2d767cc1ff7285c99514834cf32))
+
+### [0.0.51](https://github.com/sasjs/server/compare/v0.0.50...v0.0.51) (2022-04-15)
+
+
+### Features
+
+* run button running man, sub menu added ([68e84b0](https://github.com/sasjs/server/commit/68e84b0994a3fa6ff56b07635c637c6e3a57bfda))
+* running code with CTRL+ENTER ([b93a0da](https://github.com/sasjs/server/commit/b93a0da3a380926c87548b69309b2d0c1b7e617f))
+
 ### [0.0.50](https://github.com/sasjs/server/compare/v0.0.49...v0.0.50) (2022-04-07)
 
 

README.md

@@ -52,6 +52,7 @@ Example contents of a `.env` file:
 MODE=
 
 # options: [disable|enable] default: `disable` for `server` & `enable` for `desktop`
+# If enabled, be sure to also configure the WHITELIST of third party servers.
 CORS=
 
 # options: <http://localhost:3000 https://abc.com ...> space separated urls
@@ -84,6 +85,15 @@ ACCESS_TOKEN_SECRET=<secret>
 REFRESH_TOKEN_SECRET=<secret>
 AUTH_CODE_SECRET=<secret>
 DB_CONNECT=mongodb+srv://<DB_USERNAME>:<DB_PASSWORD>@<CLUSTER>/<DB_NAME>?retryWrites=true&w=majority
+
+# SAS Options
+# On windows use SAS_OPTIONS and on unix use SASV9_OPTIONS
+# Any options set here are automatically applied in the SAS session
+# See: https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/hostunx/p0wrdmqp8k0oyyn1xbx3bp3qy2wl.htm
+# And: https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/hostwin/p0drw76qo0gig2n1kcoliekh605k.htm#p09y7hx0grw1gin1giuvrjyx61m6
+SAS_OPTIONS= -NOXCMD
+SASV9_OPTIONS= -NOXCMD
+
 ```
 
 ## Persisting the Session

api/public/swagger.yaml

@@ -418,6 +418,25 @@ components:
                     example: /Public/somefolder/some.file
             type: object
             additionalProperties: false
+        InfoResponse:
+            properties:
+                mode:
+                    type: string
+                cors:
+                    type: string
+                whiteList:
+                    items:
+                        type: string
+                    type: array
+                protocol:
+                    type: string
+            required:
+                - mode
+                - cors
+                - whiteList
+                - protocol
+            type: object
+            additionalProperties: false
     securitySchemes:
         bearerAuth:
             type: http
@@ -1240,10 +1259,31 @@ paths:
                     application/json:
                         schema:
                             $ref: '#/components/schemas/ExecuteReturnJsonPayload'
+    /SASjsApi/info:
+        get:
+            operationId: Info
+            responses:
+                '200':
+                    description: Ok
+                    content:
+                        application/json:
+                            schema:
+                                $ref: '#/components/schemas/InfoResponse'
+                            examples:
+                                'Example 1':
+                                    value: {mode: desktop, cors: enable, whiteList: ['http://example.com', 'http://example2.com'], protocol: http}
+            summary: 'Get server info (mode, cors, whiteList, protocol).'
+            tags:
+                - Info
+            security: []
+            parameters: []
 servers:
     -
         url: /
 tags:
+    -
+        name: Info
+        description: 'Get Server Info'
     -
         name: Session
         description: 'Get Session information'

api/src/app.ts

@@ -22,11 +22,13 @@ const { MODE, CORS, WHITELIST } = process.env
 
 if (MODE?.trim() !== 'server' || CORS?.trim() === 'enable') {
   const whiteList: string[] = []
-  WHITELIST?.split(' ')?.forEach((url) => {
+  WHITELIST?.split(' ')
-    if (url.startsWith('http'))
+    ?.filter((url) => !!url)
-      // removing trailing slash of URLs listing for CORS
+    .forEach((url) => {
-      whiteList.push(url.replace(/\/$/, ''))
+      if (url.startsWith('http'))
-  })
+        // removing trailing slash of URLs listing for CORS
+        whiteList.push(url.replace(/\/$/, ''))
+    })
 
   console.log('All CORS Requests are enabled for:', whiteList)
   app.use(cors({ credentials: true, origin: whiteList }))

api/src/controllers/index.ts

@@ -6,3 +6,4 @@ export * from './group'
 export * from './session'
 export * from './stp'
 export * from './user'
+export * from './info'

api/src/controllers/info.ts

@@ -0,0 +1,37 @@
+import { Route, Tags, Example, Get } from 'tsoa'
+
+export interface InfoResponse {
+  mode: string
+  cors: string
+  whiteList: string[]
+  protocol: string
+}
+
+@Route('SASjsApi/info')
+@Tags('Info')
+export class InfoController {
+  /**
+   * @summary Get server info (mode, cors, whiteList, protocol).
+   *
+   */
+  @Example<InfoResponse>({
+    mode: 'desktop',
+    cors: 'enable',
+    whiteList: ['http://example.com', 'http://example2.com'],
+    protocol: 'http'
+  })
+  @Get('/')
+  public info(): InfoResponse {
+    const response = {
+      mode: process.env.MODE ?? 'desktop',
+      cors:
+        process.env.CORS ?? process.env.MODE === 'server'
+          ? 'disable'
+          : 'enable',
+      whiteList:
+        process.env.WHITELIST?.split(' ')?.filter((url) => !!url) ?? [],
+      protocol: process.env.PROTOCOL ?? 'http'
+    }
+    return response
+  }
+}

api/src/routes/api/index.ts

@@ -9,6 +9,7 @@ import {
   verifyAdmin
 } from '../../middlewares'
 
+import infoRouter from './info'
 import driveRouter from './drive'
 import stpRouter from './stp'
 import codeRouter from './code'
@@ -20,6 +21,7 @@ import sessionRouter from './session'
 
 const router = express.Router()
 
+router.use('/info', infoRouter)
 router.use('/session', desktopUsername, authenticateAccessToken, sessionRouter)
 router.use('/auth', desktopRestrict, authRouter)
 router.use(

api/src/routes/api/info.ts

@@ -0,0 +1,16 @@
+import express from 'express'
+import { InfoController } from '../../controllers'
+
+const infoRouter = express.Router()
+
+infoRouter.get('/', async (req, res) => {
+  const controller = new InfoController()
+  try {
+    const response = controller.info()
+    res.send(response)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+export default infoRouter

api/src/routes/api/spec/auth.spec.ts

@@ -18,11 +18,6 @@ import {
   verifyTokenInDB
 } from '../../../utils'
 
-let app: Express
-appPromise.then((_app) => {
-  app = _app
-})
-
 const clientId = 'someclientID'
 const clientSecret = 'someclientSecret'
 const user = {
@@ -35,12 +30,15 @@ const user = {
 }
 
 describe('auth', () => {
+  let app: Express
   let con: Mongoose
   let mongoServer: MongoMemoryServer
   const userController = new UserController()
   const clientController = new ClientController()
 
   beforeAll(async () => {
+    app = await appPromise
+
     mongoServer = await MongoMemoryServer.create()
     con = await mongoose.connect(mongoServer.getUri())
     await clientController.createClient({ clientId, clientSecret })

api/src/routes/api/spec/client.spec.ts

@@ -6,11 +6,6 @@ import appPromise from '../../../app'
 import { UserController, ClientController } from '../../../controllers/'
 import { generateAccessToken, saveTokensInDB } from '../../../utils'
 
-let app: Express
-appPromise.then((_app) => {
-  app = _app
-})
-
 const client = {
   clientId: 'someclientID',
   clientSecret: 'someclientSecret'
@@ -28,12 +23,15 @@ const newClient = {
 }
 
 describe('client', () => {
+  let app: Express
   let con: Mongoose
   let mongoServer: MongoMemoryServer
   const userController = new UserController()
   const clientController = new ClientController()
 
   beforeAll(async () => {
+    app = await appPromise
+
     mongoServer = await MongoMemoryServer.create()
     con = await mongoose.connect(mongoServer.getUri())
   })

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

@@ -33,11 +33,6 @@ import { getTreeExample } from '../../../controllers/internal'
 import { generateAccessToken, saveTokensInDB } from '../../../utils/'
 const { getTmpFilesFolderPath } = fileUtilModules
 
-let app: Express
-appPromise.then((_app) => {
-  app = _app
-})
-
 const clientId = 'someclientID'
 const user = {
   displayName: 'Test User',
@@ -48,6 +43,7 @@ const user = {
 }
 
 describe('drive', () => {
+  let app: Express
   let con: Mongoose
   let mongoServer: MongoMemoryServer
   const controller = new UserController()
@@ -55,6 +51,8 @@ describe('drive', () => {
   let accessToken: string
 
   beforeAll(async () => {
+    app = await appPromise
+
     mongoServer = await MongoMemoryServer.create()
     con = await mongoose.connect(mongoServer.getUri())
 

api/src/routes/api/spec/group.spec.ts

@@ -6,11 +6,6 @@ import appPromise from '../../../app'
 import { UserController, GroupController } from '../../../controllers/'
 import { generateAccessToken, saveTokensInDB } from '../../../utils'
 
-let app: Express
-appPromise.then((_app) => {
-  app = _app
-})
-
 const clientId = 'someclientID'
 const adminUser = {
   displayName: 'Test Admin',
@@ -36,11 +31,14 @@ const userController = new UserController()
 const groupController = new GroupController()
 
 describe('group', () => {
+  let app: Express
   let con: Mongoose
   let mongoServer: MongoMemoryServer
   let adminAccessToken: string
 
   beforeAll(async () => {
+    app = await appPromise
+
     mongoServer = await MongoMemoryServer.create()
     con = await mongoose.connect(mongoServer.getUri())
 

api/src/routes/api/spec/info.spec.ts

@@ -0,0 +1,20 @@
+import { Express } from 'express'
+import request from 'supertest'
+import appPromise from '../../../app'
+
+describe('Info', () => {
+  let app: Express
+
+  beforeAll(async () => {
+    app = await appPromise
+  })
+
+  it('should should return configured information of the server instance', async () => {
+    const res = await request(app).get('/SASjsApi/info').expect(200)
+
+    expect(res.body.mode).toEqual('server')
+    expect(res.body.cors).toEqual('disable')
+    expect(res.body.whiteList).toEqual([])
+    expect(res.body.protocol).toEqual('http')
+  })
+})

api/src/routes/api/spec/user.spec.ts

@@ -6,11 +6,6 @@ import appPromise from '../../../app'
 import { UserController } from '../../../controllers/'
 import { generateAccessToken, saveTokensInDB } from '../../../utils'
 
-let app: Express
-appPromise.then((_app) => {
-  app = _app
-})
-
 const clientId = 'someclientID'
 const adminUser = {
   displayName: 'Test Admin',
@@ -30,10 +25,13 @@ const user = {
 const controller = new UserController()
 
 describe('user', () => {
+  let app: Express
   let con: Mongoose
   let mongoServer: MongoMemoryServer
 
   beforeAll(async () => {
+    app = await appPromise
+
     mongoServer = await MongoMemoryServer.create()
     con = await mongoose.connect(mongoServer.getUri())
   })

api/src/routes/web/web.ts

@@ -5,12 +5,17 @@ import { getWebBuildFolderPath } from '../../utils'
 
 const webRouter = express.Router()
 
-const codeToInject = `
+const jsCodeForDesktopMode = `
 <script>
   localStorage.setItem('accessToken', JSON.stringify('accessToken'))
   localStorage.setItem('refreshToken', JSON.stringify('refreshToken'))
 </script>`
 
+const jsCodeForServerMode = `
+<script>
+  localStorage.setItem('CLIENT_ID', '${process.env.CLIENT_ID}')
+</script>`
+
 webRouter.get('/', async (_, res) => {
   let content: string
   try {
@@ -21,14 +26,12 @@ webRouter.get('/', async (_, res) => {
   }
 
   const { MODE } = process.env
-  if (MODE?.trim() !== 'server') {
+  const codeToInject =
-    const injectedContent = content.replace('</head>', `${codeToInject}</head>`)
+    MODE?.trim() === 'server' ? jsCodeForServerMode : jsCodeForDesktopMode
+  const injectedContent = content.replace('</head>', `${codeToInject}</head>`)
 
-    res.setHeader('Content-Type', 'text/html')
+  res.setHeader('Content-Type', 'text/html')
-    return res.send(injectedContent)
+  return res.send(injectedContent)
-  }
-
-  return res.send(content)
 })
 
 export default webRouter

api/src/utils/connectDB.ts

@@ -1,25 +1,28 @@
 import mongoose from 'mongoose'
 import { populateClients } from '../routes/api/auth'
+import { seedDB } from './seedDB'
 
 export const connectDB = async () => {
   // NOTE: when exporting app.js as agent for supertest
   // we should exclude connecting to the real database
   if (process.env.NODE_ENV === 'test') {
     return
-  } else {
-    const { MODE } = process.env
-
-    if (MODE?.trim() !== 'server') {
-      console.log('Running in Destop Mode, no DB to connect.')
-      return
-    }
-
-    mongoose.connect(process.env.DB_CONNECT as string, async (err) => {
-      if (err) throw err
-
-      console.log('Connected to db!')
-
-      await populateClients()
-    })
   }
+
+  const { MODE } = process.env
+
+  if (MODE?.trim() !== 'server') {
+    console.log('Running in Destop Mode, no DB to connect.')
+    return
+  }
+
+  mongoose.connect(process.env.DB_CONNECT as string, async (err) => {
+    if (err) throw err
+
+    console.log('Connected to db!')
+
+    await seedDB()
+
+    await populateClients()
+  })
 }

api/src/utils/file.ts

@@ -9,7 +9,7 @@ export const sysInitCompiledPath = path.join(
 )
 
 export const sasJSCoreMacros = path.join(apiRoot, 'sasjscore')
-export const sasJSCoreMacrosInfo = path.join(apiRoot, 'sasjscore', '.macrolist')
+export const sasJSCoreMacrosInfo = path.join(sasJSCoreMacros, '.macrolist')
 
 export const getWebBuildFolderPath = () =>
   path.join(codebaseRoot, 'web', 'build')

api/src/utils/index.ts

@@ -12,6 +12,7 @@ export * from './isDebugOn'
 export * from './parseLogToArray'
 export * from './removeTokensInDB'
 export * from './saveTokensInDB'
+export * from './seedDB'
 export * from './setProcessVariables'
 export * from './setupFolders'
 export * from './upload'

api/src/utils/seedDB.ts

@@ -0,0 +1,35 @@
+import Client from '../model/Client'
+import User from '../model/User'
+
+const CLIENT = {
+  clientId: 'clientID1',
+  clientSecret: 'clientSecret'
+}
+const ADMIN_USER = {
+  id: 1,
+  displayName: 'Super Admin',
+  username: 'secretuser',
+  password: '$2a$10$hKvcVEZdhEQZCcxt6npazO6mY4jJkrzWvfQ5stdBZi8VTTwVMCVXO',
+  isAdmin: true,
+  isActive: true
+}
+
+export const seedDB = async () => {
+  // Checking if client is already in the database
+  const clientExist = await Client.findOne({ clientId: CLIENT.clientId })
+  if (!clientExist) {
+    const client = new Client(CLIENT)
+    await client.save()
+
+    console.log(`DB Seed - client created: ${CLIENT.clientId}`)
+  }
+
+  // Checking if user is already in the database
+  const usernameExist = await User.findOne({ username: ADMIN_USER.username })
+  if (!usernameExist) {
+    const user = new User(ADMIN_USER)
+    await user.save()
+
+    console.log(`DB Seed - admin account created: ${ADMIN_USER.username}`)
+  }
+}

api/src/utils/setProcessVariables.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import { getRealPath } from '@sasjs/utils'
+import { getAbsolutePath, getRealPath } from '@sasjs/utils'
 
 import { configuration } from '../../package.json'
 import { getDesktopFields } from '.'
@@ -12,18 +12,17 @@ export const setProcessVariables = async () => {
 
   const { MODE } = process.env
 
-  if (MODE?.trim() !== 'server') {
+  if (MODE?.trim() === 'server') {
+    const { SAS_PATH, DRIVE_PATH } = process.env
+
+    process.sasLoc = SAS_PATH ?? configuration.sasPath
+    const absPath = getAbsolutePath(DRIVE_PATH ?? 'tmp', process.cwd())
+    process.driveLoc = getRealPath(absPath)
+  } else {
     const { sasLoc, driveLoc } = await getDesktopFields()
 
     process.sasLoc = sasLoc
     process.driveLoc = driveLoc
-  } else {
-    const { SAS_PATH, DRIVE_PATH } = process.env
-
-    process.sasLoc = SAS_PATH ?? configuration.sasPath
-    process.driveLoc = getRealPath(
-      path.join(process.cwd(), DRIVE_PATH ?? 'tmp')
-    )
   }
 
   console.log('sasLoc: ', process.sasLoc)

api/tsoa.json

@@ -11,6 +11,10 @@
       }
     },
     "tags": [
+      {
+        "name": "Info",
+        "description": "Get Server Info"
+      },
       {
         "name": "Session",
         "description": "Get Session information"

package-lock.json

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

package.json

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

web/src/components/header.tsx

@@ -28,10 +28,10 @@ const Header = (props: any) => {
     >
       <Toolbar variant="dense">
         <img
-          src="logo-white.png"
+          src="logo.png"
           alt="logo"
           style={{
-            width: '50px',
+            width: '35px',
             cursor: 'pointer',
             marginRight: '25px'
           }}

web/src/components/login.tsx

@@ -45,13 +45,12 @@ const Login = ({ setTokens, getCodeOnly }: any) => {
     error = false
     setErrorMessage('')
     e.preventDefault()
-    let clientId = process.env.CLIENT_ID
+    let clientId = process.env.CLIENT_ID ?? localStorage.getItem('CLIENT_ID')
 
     if (getCodeOnly) {
       const params = new URLSearchParams(location.search)
       const responseType = params.get('response_type')
-      if (responseType === 'code')
+      if (responseType === 'code') clientId = params.get('client_id')
-        clientId = params.get('client_id') ?? undefined
     }
 
     const { code } = await getAuthCode({

web/src/containers/Drive/index.tsx

@@ -90,7 +90,11 @@ const Drive = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
-      <SideBar directoryData={directoryData} handleSelect={handleSelect} />
+      <SideBar
+        selectedFilePath={selectedFilePath}
+        directoryData={directoryData}
+        handleSelect={handleSelect}
+      />
       <Main
         selectedFilePath={selectedFilePath}
         removeFileFromTree={removeFileFromTree}

web/src/containers/Drive/sideBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { makeStyles } from '@mui/styles'
 
@@ -30,13 +30,27 @@ const useStyles = makeStyles(() => ({
 const drawerWidth = 240
 
 type Props = {
+  selectedFilePath: string
   directoryData: TreeNode | null
   handleSelect: (node: TreeNode) => void
 }
 
-const SideBar = ({ directoryData, handleSelect }: Props) => {
+const SideBar = ({ selectedFilePath, directoryData, handleSelect }: Props) => {
   const classes = useStyles()
 
+  const defaultExpanded = useMemo(() => {
+    const splittedPath = selectedFilePath.split('/')
+    const arr = ['']
+    let nodeId = ''
+    splittedPath.forEach((path) => {
+      if (path !== '') {
+        nodeId += '/' + path
+        arr.push(nodeId)
+      }
+    })
+    return arr
+  }, [selectedFilePath])
+
   const renderTree = (nodes: TreeNode) => (
     <TreeItem
       classes={{ root: classes.root }}
@@ -72,7 +86,8 @@ const SideBar = ({ directoryData, handleSelect }: Props) => {
           <TreeView
             defaultCollapseIcon={<ExpandMoreIcon />}
             defaultExpandIcon={<ChevronRightIcon />}
-            defaultExpanded={[directoryData.relativePath]}
+            defaultExpanded={defaultExpanded}
+            selected={defaultExpanded.slice(-1)}
           >
             {renderTree(directoryData)}
           </TreeView>

web/src/containers/Studio/index.tsx

@@ -15,6 +15,17 @@ const useStyles = makeStyles(() => ({
     '&.Mui-selected': {
       color: 'black'
     }
+  },
+  subMenu: {
+    marginTop: '25px',
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  runButton: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '5px 5px',
+    minWidth: 'unset'
   }
 }))
 
@@ -22,8 +33,10 @@ const Studio = () => {
   const location = useLocation()
   const [fileContent, setFileContent] = useState('')
   const [log, setLog] = useState('')
+  const [ctrlPressed, setCtrlPressed] = useState(false)
   const [webout, setWebout] = useState('')
   const [tab, setTab] = React.useState('1')
+
   const handleTabChange = (_e: any, newValue: string) => {
     setTab(newValue)
   }
@@ -61,6 +74,21 @@ const Studio = () => {
       .catch((err) => console.log(err))
   }
 
+  const handleKeyDown = (event: any) => {
+    if (event.ctrlKey) {
+      if (event.key === 'v') {
+        setCtrlPressed(false)
+      }
+
+      if (event.key === 'Enter') runCode(getSelection() || fileContent)
+      if (!ctrlPressed) setCtrlPressed(true)
+    }
+  }
+
+  const handleKeyUp = (event: any) => {
+    if (!event.ctrlKey && ctrlPressed) setCtrlPressed(false)
+  }
+
   useEffect(() => {
     const content = localStorage.getItem('fileContent') ?? ''
     setFileContent(content)
@@ -86,7 +114,11 @@ const Studio = () => {
   const classes = useStyles()
 
   return (
-    <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>
+    <Box
+      onKeyUp={handleKeyUp}
+      onKeyDown={handleKeyDown}
+      sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}
+    >
       <TabContext value={tab}>
         <Box
           sx={{
@@ -103,12 +135,24 @@ const Studio = () => {
             </Tooltip>
           </TabList>
         </Box>
-        <TabPanel value="1">
+
+        <TabPanel style={{ paddingBottom: 0 }} value="1">
+          <div className={classes.subMenu}>
+            <Tooltip title="CTRL+ENTER will also run SAS code">
+              <Button onClick={handleRunBtnClick} className={classes.runButton}>
+                <img
+                  draggable="false"
+                  style={{ width: '25px' }}
+                  src="/running-sas.png"
+                ></img>
+                <span style={{ fontSize: '12px' }}>RUN</span>
+              </Button>
+            </Tooltip>
+          </div>
           {/* <Toolbar /> */}
           <Paper
             sx={{
-              height: '70vh',
+              height: 'calc(100vh - 170px)',
-              marginTop: '50px',
               padding: '10px',
               overflow: 'auto',
               position: 'relative'
@@ -116,23 +160,27 @@ const Studio = () => {
             elevation={3}
           >
             <Editor
-              height="95%"
+              height="98%"
               value={fileContent}
               onMount={handleEditorDidMount}
+              options={{ readOnly: ctrlPressed }}
               onChange={(val) => {
                 if (val) setFileContent(val)
               }}
             />
+            <p
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: -10,
+                textAlign: 'center',
+                fontSize: '13px'
+              }}
+            >
+              Press CTRL + ENTER to run SAS code
+            </p>
           </Paper>
-          <Stack
-            spacing={3}
-            direction="row"
-            sx={{ justifyContent: 'center', marginTop: '20px' }}
-          >
-            <Button variant="contained" onClick={handleRunBtnClick}>
-              Run SAS Code
-            </Button>
-          </Stack>
         </TabPanel>
         <TabPanel value="2">
           <div style={{ marginTop: '50px' }}>