chore(release): 0.0.13

chore: added check session + code refactor

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.13](https://github.com/sasjs/server/compare/v0.0.12...v0.0.13) (2021-12-16)
+
+
+### Features
+
+* **studio:** run selected code + open in studio ([27129a8](https://github.com/sasjs/server/commit/27129a8921084c72968383fdbc2ecbd2f417456c))
+
+
+### Bug Fixes
+
+* output for Studio ([e5be0e6](https://github.com/sasjs/server/commit/e5be0e678965b05c64bcc8f55c48a366e0ff55a3))
+
+### [0.0.12](https://github.com/sasjs/server/compare/v0.0.11...v0.0.12) (2021-12-15)
+
+
+### Bug Fixes
+
+* use env if provided for desktop mode ([d19ce25](https://github.com/sasjs/server/commit/d19ce253b4e2d2a7dd912d43a553d4c1bd60ba58))
+
+### [0.0.11](https://github.com/sasjs/server/compare/v0.0.10...v0.0.11) (2021-12-15)
+
+
+### Features
+
+* added authorization route for web ([#37](https://github.com/sasjs/server/issues/37)) ([d0a1457](https://github.com/sasjs/server/commit/d0a1457f44a3d8993b57106e5e681c4e51fe8e7d))
+
+### [0.0.10](https://github.com/sasjs/server/compare/v0.0.9...v0.0.10) (2021-12-07)
+
 ### [0.0.9](https://github.com/sasjs/server/compare/v0.0.3...v0.0.9) (2021-12-07)
 
 

DockerfileApi

@@ -1,5 +1,4 @@
 FROM node:lts-alpine
-RUN npm install -g @sasjs/cli
 WORKDIR /usr/server/api
 COPY ["package.json","package-lock.json", "./"]
 RUN npm ci

api/.env.example

@@ -5,4 +5,7 @@ PORT_WEB=[port for sasjs web component(react)] default value is 3000
 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
+DB_CONNECT=mongodb+srv://<DB_USERNAME>:<DB_PASSWORD>@<CLUSTER>/<DB_NAME>?retryWrites=true&w=majority
+
+SAS_PATH=/opt/sas/sas9/SASHome/SASFoundation/9.4/sas
+DRIVE_PATH=./tmp

api/package.json

@@ -46,7 +46,7 @@
   },
   "author": "Analytium Ltd",
   "dependencies": {
-    "@sasjs/core": "^2.48.6",
+    "@sasjs/core": "^2.59.0",
     "@sasjs/utils": "2.34.1",
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
@@ -86,6 +86,6 @@
     "typescript": "^4.3.2"
   },
   "configuration": {
-    "sasPath": "/opt/sas/sas9/SASHome/SASFoundation/9.4"
+    "sasPath": "/opt/sas/sas9/SASHome/SASFoundation/9.4/sas"
   }
 }

api/public/swagger.yaml

@@ -358,18 +358,29 @@ components:
                 - description
             type: object
             additionalProperties: false
+        RunSASPayload:
+            properties:
+                code:
+                    type: string
+                    description: 'Code of SAS program'
+                    example: '* SAS Code HERE;'
+            required:
+                - code
+            type: object
+            additionalProperties: false
         ExecuteReturnJsonResponse:
             properties:
                 status:
                     type: string
-                log:
-                    type: string
                 _webout:
                     type: string
+                log:
+                    type: string
                 message:
                     type: string
             required:
                 - status
+                - _webout
             type: object
             additionalProperties: false
         ExecuteReturnJsonPayload:
@@ -981,7 +992,7 @@ paths:
                         application/json:
                             schema:
                                 type: string
-            description: "Trigger a SAS program using it's location in the _program parameter.\r\nEnable debugging using the _debug parameter.\r\nAdditional URL parameters are turned into SAS macro variables.\r\nAny files provided are placed into the session and\r\ncorresponding _WEBIN_XXX variables are created."
+            description: "Trigger a SAS program using it's location in the _program parameter.\nEnable debugging using the _debug parameter.\nAdditional URL parameters are turned into SAS macro variables.\nAny files provided are placed into the session and\ncorresponding _WEBIN_XXX variables are created."
             summary: 'Execute Stored Program, return raw content'
             tags:
                 - STP
@@ -1005,7 +1016,7 @@ paths:
                         application/json:
                             schema:
                                 $ref: '#/components/schemas/ExecuteReturnJsonResponse'
-            description: "Trigger a SAS program using it's location in the _program parameter.\r\nEnable debugging using the _debug parameter.\r\nAdditional URL parameters are turned into SAS macro variables.\r\nAny files provided are placed into the session and\r\ncorresponding _WEBIN_XXX variables are created."
+            description: "Trigger a SAS program using it's location in the _program parameter.\nEnable debugging using the _debug parameter.\nAdditional URL parameters are turned into SAS macro variables.\nAny files provided are placed into the session and\ncorresponding _WEBIN_XXX variables are created."
             summary: 'Execute Stored Program, return JSON'
             tags:
                 - STP
@@ -1026,10 +1037,57 @@ paths:
                     application/json:
                         schema:
                             $ref: '#/components/schemas/ExecuteReturnJsonPayload'
+    /SASjsApi/stp/run:
+        post:
+            operationId: RunSAS
+            responses:
+                '200':
+                    description: Ok
+                    content:
+                        application/json:
+                            schema:
+                                type: string
+            description: 'Trigger a SAS program.'
+            summary: 'Run SAS Program, return raw content'
+            tags:
+                - STP
+            security:
+                -
+                    bearerAuth: []
+            parameters: []
+            requestBody:
+                required: true
+                content:
+                    application/json:
+                        schema:
+                            $ref: '#/components/schemas/RunSASPayload'
+    /SASjsApi/session:
+        get:
+            operationId: Session
+            responses:
+                '200':
+                    description: Ok
+                    content:
+                        application/json:
+                            schema:
+                                $ref: '#/components/schemas/UserResponse'
+                            examples:
+                                'Example 1':
+                                    value: {id: 123, username: johnusername, displayName: John}
+            summary: 'Get session info (username).'
+            tags:
+                - Session
+            security:
+                -
+                    bearerAuth: []
+            parameters: []
 servers:
     -
         url: /
 tags:
+    -
+        name: Session
+        description: 'Get Session information'
     -
         name: User
         description: 'Operations about users'

api/src/controllers/index.ts

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

api/src/controllers/internal/Execution.ts

@@ -6,7 +6,7 @@ import { PreProgramVars, TreeNode } from '../../types'
 import { generateFileUploadSasCode, getTmpFilesFolderPath } from '../../utils'
 
 export class ExecutionController {
-  async execute(
+  async executeFile(
     programPath: string,
     preProgramVariables: PreProgramVars,
     vars: { [key: string]: string | number | undefined },
@@ -16,8 +16,23 @@ export class ExecutionController {
     if (!(await fileExists(programPath)))
       throw 'ExecutionController: SAS file does not exist.'
 
-    let program = await readFile(programPath)
+    const program = await readFile(programPath)
 
+    return this.executeProgram(
+      program,
+      preProgramVariables,
+      vars,
+      otherArgs,
+      returnJson
+    )
+  }
+  async executeProgram(
+    program: string,
+    preProgramVariables: PreProgramVars,
+    vars: { [key: string]: string | number | undefined },
+    otherArgs?: any,
+    returnJson?: boolean
+  ) {
     const sessionController = getSessionController()
 
     const session = await sessionController.getSession()
@@ -100,26 +115,20 @@ ${program}`
     const debugValue =
       typeof vars._debug === 'string' ? parseInt(vars._debug) : vars._debug
 
-    let debugResponse: string | undefined
-
-    if ((debugValue && debugValue >= 131) || session.crashed) {
-      debugResponse = `<html><body>${webout}<div style="text-align:left"><hr /><h2>SAS Log</h2><pre>${log}</pre></div></body></html>`
-    }
-
     session.inUse = false
     sessionController.deleteSession(session)
 
     if (returnJson) {
-      const response: any = {
-        webout: webout
+      return {
+        webout,
+        log:
+          (debugValue && debugValue >= 131) || session.crashed ? log : undefined
       }
-      if ((debugValue && debugValue >= 131) || session.crashed) {
-        response.log = log
-      }
-
-      return response
     }
-    return debugResponse ?? webout
+
+    return (debugValue && debugValue >= 131) || session.crashed
+      ? `<html><body>${webout}<div style="text-align:left"><hr /><h2>SAS Log</h2><pre>${log}</pre></div></body></html>`
+      : webout
   }
 
   buildDirectorytree() {

api/src/controllers/internal/Session.ts

@@ -92,7 +92,7 @@ export class SessionController {
       .catch((err) => {
         session.completed = true
         session.crashed = err.toString()
-        console.log('session crashed', session.id)
+        console.log('session crashed', session.id, session.crashed)
       })
 
     // we have a triggered session - add to array

api/src/controllers/session.ts

@@ -0,0 +1,30 @@
+import express from 'express'
+import { Request, Security, Route, Tags, Example, Get } from 'tsoa'
+import { UserResponse } from './user'
+
+@Security('bearerAuth')
+@Route('SASjsApi/session')
+@Tags('Session')
+export class SessionController {
+  /**
+   * @summary Get session info (username).
+   *
+   */
+  @Example<UserResponse>({
+    id: 123,
+    username: 'johnusername',
+    displayName: 'John'
+  })
+  @Get('/')
+  public async session(
+    @Request() request: express.Request
+  ): Promise<UserResponse> {
+    return session(request)
+  }
+}
+
+const session = (req: any) => ({
+  id: req.user.id,
+  username: req.user.username,
+  displayName: req.user.displayName
+})

api/src/controllers/stp.ts

@@ -1,20 +1,17 @@
-import express, { response } from 'express'
+import express from 'express'
 import path from 'path'
-import {
-  Request,
-  Security,
-  Route,
-  Tags,
-  Example,
-  Post,
-  Body,
-  Get,
-  Query
-} from 'tsoa'
+import { Request, Security, Route, Tags, Post, Body, Get, Query } from 'tsoa'
 import { ExecutionController } from './internal'
 import { PreProgramVars } from '../types'
 import { getTmpFilesFolderPath, makeFilesNamesMap } from '../utils'
 
+interface RunSASPayload {
+  /**
+   * Code of SAS program
+   * @example "* SAS Code HERE;"
+   */
+  code: string
+}
 interface ExecuteReturnJsonPayload {
   /**
    * Location of SAS program
@@ -24,8 +21,8 @@ interface ExecuteReturnJsonPayload {
 }
 interface ExecuteReturnJsonResponse {
   status: string
+  _webout: string
   log?: string
-  _webout?: string
   message?: string
 }
 
@@ -50,6 +47,19 @@ export class STPController {
   ): Promise<string> {
     return executeReturnRaw(request, _program)
   }
+
+  /**
+   * Trigger a SAS program.
+   * @summary Run SAS Program, return raw content
+   */
+  @Post('/run')
+  public async runSAS(
+    @Request() request: express.Request,
+    @Body() body: RunSASPayload
+  ): Promise<string> {
+    return runSAS(request, body)
+  }
+
   /**
    * Trigger a SAS program using it's location in the _program parameter.
    * Enable debugging using the _debug parameter.
@@ -82,7 +92,7 @@ const executeReturnRaw = async (
       .replace(new RegExp('/', 'g'), path.sep) + '.sas'
 
   try {
-    const result = await new ExecutionController().execute(
+    const result = await new ExecutionController().executeFile(
       sasCodePath,
       getPreProgramVariables(req),
       query
@@ -99,6 +109,25 @@ const executeReturnRaw = async (
   }
 }
 
+const runSAS = async (req: any, { code }: RunSASPayload) => {
+  try {
+    const result = await new ExecutionController().executeProgram(
+      code,
+      getPreProgramVariables(req),
+      req.query
+    )
+
+    return result as string
+  } catch (err: any) {
+    throw {
+      code: 400,
+      status: 'failure',
+      message: 'Job execution failed.',
+      error: typeof err === 'object' ? err.toString() : err
+    }
+  }
+}
+
 const executeReturnJson = async (
   req: any,
   _program: string
@@ -111,17 +140,17 @@ const executeReturnJson = async (
   const filesNamesMap = req.files?.length ? makeFilesNamesMap(req.files) : null
 
   try {
-    const jsonResult: any = await new ExecutionController().execute(
+    const { webout, log } = (await new ExecutionController().executeFile(
       sasCodePath,
       getPreProgramVariables(req),
       { ...req.query, ...req.body },
       { filesNamesMap: filesNamesMap },
       true
-    )
+    )) as { webout: string; log: string }
     return {
       status: 'success',
-      _webout: jsonResult.webout,
-      log: jsonResult.log
+      _webout: webout,
+      log
     }
   } catch (err: any) {
     throw {

api/src/middlewares/authenticateToken.ts

@@ -26,7 +26,7 @@ const authenticateToken = (
   res: any,
   next: any,
   key: string,
-  tokenType: 'accessToken' | 'refreshToken' = 'accessToken'
+  tokenType: 'accessToken' | 'refreshToken'
 ) => {
   const { MODE } = process.env
   if (MODE?.trim() !== 'server') {

api/src/middlewares/desktop.ts

@@ -0,0 +1,18 @@
+export const desktopRestrict = (req: any, res: any, next: any) => {
+  const { MODE } = process.env
+  if (MODE?.trim() !== 'server')
+    return res.status(403).send('Not Allowed while in Desktop Mode.')
+
+  next()
+}
+export const desktopUsername = (req: any, res: any, next: any) => {
+  const { MODE } = process.env
+  if (MODE?.trim() !== 'server')
+    return res.status(200).send({
+      userId: 12345,
+      username: 'DESKTOPusername',
+      displayName: 'DESKTOP User'
+    })
+
+  next()
+}

api/src/middlewares/desktopRestrict.ts

@@ -1,7 +0,0 @@
-export const desktopRestrict = (req: any, res: any, next: any) => {
-  const { MODE } = process.env
-  if (MODE?.trim() !== 'server')
-    return res.status(403).send('Not Allowed while in Desktop Mode.')
-
-  next()
-}

api/src/middlewares/index.ts

@@ -1,4 +1,4 @@
 export * from './authenticateToken'
-export * from './desktopRestrict'
+export * from './desktop'
 export * from './verifyAdmin'
 export * from './verifyAdminIfNeeded'

api/src/routes/api/index.ts

@@ -5,6 +5,7 @@ import swaggerUi from 'swagger-ui-express'
 import {
   authenticateAccessToken,
   desktopRestrict,
+  desktopUsername,
   verifyAdmin
 } from '../../middlewares'
 
@@ -14,9 +15,11 @@ import userRouter from './user'
 import groupRouter from './group'
 import clientRouter from './client'
 import authRouter from './auth'
+import sessionRouter from './session'
 
 const router = express.Router()
 
+router.use('/session', desktopUsername, authenticateAccessToken, sessionRouter)
 router.use('/auth', desktopRestrict, authRouter)
 router.use(
   '/client',

api/src/routes/api/session.ts

@@ -0,0 +1,17 @@
+import express from 'express'
+import { SessionController } from '../../controllers'
+import { authenticateAccessToken } from '../../middlewares'
+
+const sessionRouter = express.Router()
+
+sessionRouter.get('/', async (req, res) => {
+  const controller = new SessionController()
+  try {
+    const response = await controller.session(req)
+    res.send(response)
+  } catch (err: any) {
+    res.status(403).send(err.toString())
+  }
+})
+
+export default sessionRouter

api/src/routes/api/stp.ts

@@ -1,5 +1,5 @@
 import express from 'express'
-import { executeProgramRawValidation } from '../../utils'
+import { executeProgramRawValidation, runSASValidation } from '../../utils'
 import { STPController } from '../../controllers/'
 import { FileUploadController } from '../../controllers/internal'
 
@@ -24,6 +24,22 @@ stpRouter.get('/execute', async (req, res) => {
   }
 })
 
+stpRouter.post('/run', async (req, res) => {
+  const { error, value: body } = runSASValidation(req.body)
+  if (error) return res.status(400).send(error.details[0].message)
+
+  try {
+    const response = await controller.runSAS(req, body)
+    res.send(response)
+  } catch (err: any) {
+    const statusCode = err.code
+
+    delete err.code
+
+    res.status(statusCode).send(err)
+  }
+})
+
 stpRouter.post(
   '/execute',
   fileUploadController.preuploadMiddleware,

api/src/types/Process.d.ts

@@ -1,7 +1,7 @@
 declare namespace NodeJS {
   export interface Process {
     sasLoc: string
-    driveLoc?: string
+    driveLoc: string
     sessionController?: import('../controllers/internal').SessionController
   }
 }

api/src/utils/connectDB.ts

@@ -3,12 +3,14 @@ import mongoose from 'mongoose'
 import { configuration } from '../../package.json'
 import { getDesktopFields } from '.'
 import { populateClients } from '../routes/api/auth'
+import { getRealPath } from '@sasjs/utils'
 
 export const connectDB = async () => {
   // NOTE: when exporting app.js as agent for supertest
   // we should exlcude connecting to the real database
   if (process.env.NODE_ENV !== 'test') {
     const { MODE } = process.env
+
     if (MODE?.trim() !== 'server') {
       console.log('Running in Destop Mode, no DB to connect.')
 
@@ -16,16 +18,19 @@ export const connectDB = async () => {
 
       process.sasLoc = sasLoc
       process.driveLoc = driveLoc
-
-      return
     } else {
-      const { SAS_PATH } = process.env
-      const sasDir = SAS_PATH ?? configuration.sasPath
+      const { SAS_PATH, DRIVE_PATH } = process.env
 
-      process.sasLoc = path.join(sasDir, 'sas')
+      process.sasLoc = SAS_PATH ?? configuration.sasPath
+      process.driveLoc = getRealPath(
+        path.join(process.cwd(), DRIVE_PATH ?? 'tmp')
+      )
     }
 
     console.log('sasLoc: ', process.sasLoc)
+    console.log('sasDrive: ', process.driveLoc)
+
+    if (MODE?.trim() !== 'server') return
 
     mongoose.connect(process.env.DB_CONNECT as string, async (err) => {
       if (err) throw err

api/src/utils/file.ts

@@ -1,5 +1,4 @@
 import path from 'path'
-import { getRealPath } from '@sasjs/utils'
 
 export const apiRoot = path.join(__dirname, '..', '..')
 export const codebaseRoot = path.join(apiRoot, '..')
@@ -12,8 +11,7 @@ export const sysInitCompiledPath = path.join(
 export const getWebBuildFolderPath = () =>
   path.join(codebaseRoot, 'web', 'build')
 
-export const getTmpFolderPath = () =>
-  process.driveLoc ?? getRealPath(path.join(process.cwd(), 'tmp'))
+export const getTmpFolderPath = () => process.driveLoc
 
 export const getTmpFilesFolderPath = () =>
   path.join(getTmpFolderPath(), 'files')

api/src/utils/getDesktopFields.ts

@@ -5,8 +5,10 @@ import { createFolder, fileExists, folderExists } from '@sasjs/utils'
 const isWindows = () => process.platform === 'win32'
 
 export const getDesktopFields = async () => {
-  const sasLoc = await getSASLocation()
-  const driveLoc = await getDriveLocation()
+  const { SAS_PATH, DRIVE_PATH } = process.env
+
+  const sasLoc = SAS_PATH ?? (await getSASLocation())
+  const driveLoc = DRIVE_PATH ?? (await getDriveLocation())
 
   return { sasLoc, driveLoc }
 }

api/src/utils/validation.ts

@@ -77,6 +77,11 @@ export const updateFileDriveValidation = (data: any): Joi.ValidationResult =>
     fileContent: Joi.string().required()
   }).validate(data)
 
+export const runSASValidation = (data: any): Joi.ValidationResult =>
+  Joi.object({
+    code: Joi.string().required()
+  }).validate(data)
+
 export const executeProgramRawValidation = (data: any): Joi.ValidationResult =>
   Joi.object({
     _program: Joi.string().required()

api/tsoa.json

@@ -11,6 +11,10 @@
       }
     },
     "tags": [
+      {
+        "name": "Session",
+        "description": "Get Session information"
+      },
       {
         "name": "User",
         "description": "Operations about users"

docker-compose.yml

@@ -7,7 +7,7 @@ services:
       context: .
       dockerfile: DockerfileApi
     environment:
-      MODE: ${MODE}
+      MODE: 'server'
       CORS: ${CORS}
       PORT: ${PORT_API}
       PORT_WEB: ${PORT_WEB}

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.0.9",
+  "version": "0.0.13",
   "description": "NodeJS wrapper for calling the SAS binary executable",
   "scripts": {
     "server": "npm run server:prepare && npm run server:start",

web/src/App.tsx

@@ -19,7 +19,14 @@ function App() {
       <ThemeProvider theme={theme}>
         <HashRouter>
           <Header />
-          <Login setTokens={setTokens} />
+          <Switch>
+            <Route exact path="/SASjsLogon">
+              <Login getCodeOnly />
+            </Route>
+            <Route path="/">
+              <Login setTokens={setTokens} />
+            </Route>
+          </Switch>
         </HashRouter>
       </ThemeProvider>
     )
@@ -39,6 +46,9 @@ function App() {
           <Route exact path="/SASjsStudio">
             <Studio />
           </Route>
+          <Route exact path="/SASjsLogon">
+            <Login getCodeOnly />
+          </Route>
         </Switch>
       </HashRouter>
     </ThemeProvider>

web/src/components/login.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
+import { useLocation } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-import { CssBaseline, Box, TextField, Button } from '@mui/material'
+import { CssBaseline, Box, TextField, Button, Typography } from '@mui/material'
 
 const headers = {
   Accept: 'application/json',
@@ -18,7 +19,12 @@ const getAuthCode = async (credentials: any) => {
     method: 'POST',
     headers,
     body: JSON.stringify(credentials)
-  }).then((data) => data.json())
+  }).then(async (response) => {
+    const resText = await response.text()
+    if (response.status !== 200) throw resText
+
+    return JSON.parse(resText)
+  })
 }
 const getTokens = async (payload: any) => {
   return fetch(`${baseUrl}/SASjsApi/auth/token`, {
@@ -28,26 +34,62 @@ const getTokens = async (payload: any) => {
   }).then((data) => data.json())
 }
 
-const Login = ({ setTokens }: any) => {
-  const [username, setUserName] = useState()
-  const [password, setPassword] = useState()
+const Login = ({ setTokens, getCodeOnly }: any) => {
+  const location = useLocation()
+  const [username, setUserName] = useState('')
+  const [password, setPassword] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  let error: boolean
+  const [displayCode, setDisplayCode] = useState(null)
 
   const handleSubmit = async (e: any) => {
+    error = false
+    setErrorMessage('')
     e.preventDefault()
-    const { REACT_APP_CLIENT_ID: clientId } = process.env
+    let { REACT_APP_CLIENT_ID: clientId } = process.env
+
+    if (getCodeOnly) {
+      const params = new URLSearchParams(location.search)
+      const responseType = params.get('response_type')
+      if (responseType === 'code')
+        clientId = params.get('client_id') ?? undefined
+    }
 
     const { code } = await getAuthCode({
       clientId,
       username,
       password
+    }).catch((err: string) => {
+      error = true
+      setErrorMessage(err)
+      return {}
     })
 
-    const { accessToken, refreshToken } = await getTokens({
-      clientId,
-      code
-    })
+    if (!error) {
+      if (getCodeOnly) return setDisplayCode(code)
 
-    setTokens(accessToken, refreshToken)
+      const { accessToken, refreshToken } = await getTokens({
+        clientId,
+        code
+      })
+
+      setTokens(accessToken, refreshToken)
+    }
+  }
+
+  if (displayCode) {
+    return (
+      <Box className="main">
+        <CssBaseline />
+        <br />
+        <h2>Authorization Code</h2>
+        <Typography m={2} p={3} style={{ overflowWrap: 'anywhere' }}>
+          {displayCode}
+        </Typography>
+
+        <br />
+      </Box>
+    )
   }
 
   return (
@@ -61,7 +103,12 @@ const Login = ({ setTokens }: any) => {
     >
       <CssBaseline />
       <br />
-      <h2>Welcome to SASjs Server!</h2>
+      <h2 style={{ width: 'auto' }}>Welcome to SASjs Server!</h2>
+      {getCodeOnly && (
+        <p style={{ width: 'auto' }}>
+          Provide credentials to get authorization code.
+        </p>
+      )}
       <br />
 
       <TextField
@@ -80,6 +127,7 @@ const Login = ({ setTokens }: any) => {
         onChange={(e: any) => setPassword(e.target.value)}
         required
       />
+      {errorMessage && <span>{errorMessage}</span>}
       <Button type="submit" variant="outlined">
         Submit
       </Button>
@@ -88,7 +136,8 @@ const Login = ({ setTokens }: any) => {
 }
 
 Login.propTypes = {
-  setTokens: PropTypes.func.isRequired
+  setTokens: PropTypes.func,
+  getCodeOnly: PropTypes.bool
 }
 
 export default Login

web/src/components/useTokens.ts

@@ -3,15 +3,8 @@ import { useEffect, useState } from 'react'
 
 export default function useTokens() {
   const getTokens = () => {
-    const accessTokenString = localStorage.getItem('accessToken')
-    const accessToken: string = accessTokenString
-      ? JSON.parse(accessTokenString)
-      : undefined
-
-    const refreshTokenString = localStorage.getItem('refreshToken')
-    const refreshToken: string = refreshTokenString
-      ? JSON.parse(refreshTokenString)
-      : undefined
+    const accessToken = localStorage.getItem('accessToken')
+    const refreshToken = localStorage.getItem('refreshToken')
 
     if (accessToken && refreshToken) {
       setAxiosRequestHeader(accessToken)
@@ -31,8 +24,8 @@ export default function useTokens() {
   setAxiosResponse(setTokens)
 
   const saveTokens = (accessToken: string, refreshToken: string) => {
-    localStorage.setItem('accessToken', JSON.stringify(accessToken))
-    localStorage.setItem('refreshToken', JSON.stringify(refreshToken))
+    localStorage.setItem('accessToken', accessToken)
+    localStorage.setItem('refreshToken', refreshToken)
     setAxiosRequestHeader(accessToken)
     setTokens({ accessToken, refreshToken })
   }

web/src/containers/Drive/main.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
 import axios from 'axios'
 
 import Editor from '@monaco-editor/react'
@@ -89,10 +90,10 @@ const Main = (props: any) => {
             style={{ position: 'absolute', left: '50%', top: '50%' }}
           />
         )}
-        {!isLoading && props?.selectedFilePath !== '' && !editMode && (
+        {!isLoading && props?.selectedFilePath && !editMode && (
           <code style={{ whiteSpace: 'break-spaces' }}>{fileContent}</code>
         )}
-        {!isLoading && props?.selectedFilePath !== '' && editMode && (
+        {!isLoading && props?.selectedFilePath && editMode && (
           <Editor
             height="95%"
             value={fileContent}
@@ -110,17 +111,26 @@ const Main = (props: any) => {
         <Button
           variant="contained"
           onClick={handleEditSaveBtnClick}
-          disabled={isLoading || props?.selectedFilePath === ''}
+          disabled={isLoading || !props?.selectedFilePath}
         >
           {!editMode ? 'Edit' : 'Save'}
         </Button>
         <Button
           variant="contained"
           onClick={handleCancelExecuteBtnClick}
-          disabled={isLoading || props?.selectedFilePath === ''}
+          disabled={isLoading || !props?.selectedFilePath}
         >
           {editMode ? 'Cancel' : 'Execute'}
         </Button>
+        {props?.selectedFilePath && (
+          <Button
+            variant="contained"
+            component={Link}
+            to={`/SASjsStudio?_program=${props.selectedFilePath}`}
+          >
+            Open in Studio
+          </Button>
+        )}
       </Stack>
     </Box>
   )

web/src/containers/Studio/index.tsx

@@ -1,13 +1,96 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import axios from 'axios'
 
-import CssBaseline from '@mui/material/CssBaseline'
 import Box from '@mui/material/Box'
+import { Button, Paper, Stack, Toolbar } from '@mui/material'
+import Editor from '@monaco-editor/react'
+import { useLocation } from 'react-router-dom'
 
 const Studio = () => {
+  const location = useLocation()
+  const [fileContent, setFileContent] = useState('')
+  const [log, setLog] = useState('')
+
+  const editorRef = useRef(null)
+  const handleEditorDidMount = (editor: any) => (editorRef.current = editor)
+
+  const getSelection = () => {
+    const editor = editorRef.current as any
+    const selection = editor?.getModel().getValueInRange(editor?.getSelection())
+    return selection ?? ''
+  }
+
+  const handleRunSelectionBtnClick = () => runCode(getSelection())
+
+  const handleRunBtnClick = () => runCode(fileContent)
+
+  const runCode = (code: string) => {
+    axios
+      .post(`/SASjsApi/stp/run`, { code })
+      .then((res: any) => {
+        const data =
+          typeof res.data === 'string'
+            ? res.data
+            : `<pre><code>${JSON.stringify(res.data, null, 4)}</code></pre>`
+
+        setLog(data)
+        document?.getElementById('sas_log')?.scrollIntoView()
+      })
+      .catch((err) => console.log(err))
+  }
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search)
+    const programPath = params.get('_program')
+
+    if (programPath?.length)
+      axios
+        .get(`/SASjsApi/drive/file?filePath=${programPath}`)
+        .then((res: any) => setFileContent(res.data.fileContent))
+        .catch((err) => console.log(err))
+  }, [location.search])
+
   return (
-    <Box className="main">
-      <CssBaseline />
-      <h2>This is container for SASjs studio</h2>
+    <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+      <Toolbar />
+      <Paper
+        sx={{
+          height: '75vh',
+          padding: '10px',
+          overflow: 'auto',
+          position: 'relative'
+        }}
+        elevation={3}
+      >
+        <Editor
+          height="95%"
+          value={fileContent}
+          onMount={handleEditorDidMount}
+          onChange={(val) => {
+            if (val) setFileContent(val)
+          }}
+        />
+      </Paper>
+      <Stack
+        spacing={3}
+        direction="row"
+        sx={{ justifyContent: 'center', marginTop: '20px' }}
+      >
+        <Button variant="contained" onClick={handleRunBtnClick}>
+          Run SAS Code
+        </Button>
+        <Button variant="contained" onClick={handleRunSelectionBtnClick}>
+          Run Selected SAS Code
+        </Button>
+      </Stack>
+      {log && (
+        <>
+          <br />
+          <h2 id="sas_log">Output</h2>
+          <br />
+          <div dangerouslySetInnerHTML={{ __html: log }} />
+        </>
+      )}
     </Box>
   )
 }