fix(studio): web component updated

api/public/swagger.yaml

@@ -92,6 +92,16 @@ components:
                 - clientSecret
             type: object
             additionalProperties: false
+        ExecuteSASCodePayload:
+            properties:
+                code:
+                    type: string
+                    description: 'Code of SAS program'
+                    example: '* SAS Code HERE;'
+            required:
+                - code
+            type: object
+            additionalProperties: false
         MemberType.folder:
             enum:
                 - folder
@@ -358,16 +368,6 @@ 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:
@@ -511,6 +511,30 @@ paths:
                     application/json:
                         schema:
                             $ref: '#/components/schemas/ClientPayload'
+    /SASjsApi/code/execute:
+        post:
+            operationId: ExecuteSASCode
+            responses:
+                '200':
+                    description: Ok
+                    content:
+                        application/json:
+                            schema:
+                                type: string
+            description: 'Execute SAS code.'
+            summary: 'Run SAS Code and returns log'
+            tags:
+                - CODE
+            security:
+                -
+                    bearerAuth: []
+            parameters: []
+            requestBody:
+                required: true
+                content:
+                    application/json:
+                        schema:
+                            $ref: '#/components/schemas/ExecuteSASCodePayload'
     /SASjsApi/drive/deploy:
         post:
             operationId: Deploy
@@ -982,30 +1006,6 @@ paths:
                         format: double
                         type: number
                     example: '6789'
-    /SASjsApi/run/code:
-        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:
-                - RUN
-            security:
-                -
-                    bearerAuth: []
-            parameters: []
-            requestBody:
-                required: true
-                content:
-                    application/json:
-                        schema:
-                            $ref: '#/components/schemas/RunSASPayload'
     /SASjsApi/session:
         get:
             operationId: Session
@@ -1107,5 +1107,5 @@ tags:
         name: STP
         description: 'Operations about STP'
     -
-        name: RUN
+        name: CODE
-        description: 'Execute SAS code'
+        description: 'Operations on SAS code'

api/src/routes/api/code.ts

@@ -6,7 +6,7 @@ const runRouter = express.Router()
 
 const controller = new CodeController()
 
-runRouter.post('/code', async (req, res) => {
+runRouter.post('/execute', async (req, res) => {
   const { error, value: body } = runSASValidation(req.body)
   if (error) return res.status(400).send(error.details[0].message)
 

web/src/containers/Studio/index.tsx

@@ -2,15 +2,32 @@ import React, { useEffect, useRef, useState } from 'react'
 import axios from 'axios'
 
 import Box from '@mui/material/Box'
-import { Button, Paper, Stack, Toolbar } from '@mui/material'
+import { Button, Paper, Stack, Tab, Toolbar } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import Editor from '@monaco-editor/react'
 import { useLocation } from 'react-router-dom'
+import { TabContext, TabList, TabPanel } from '@mui/lab'
+
+const useStyles = makeStyles(() => ({
+  root: {
+    fontSize: '1rem',
+    color: 'gray',
+    '&.Mui-selected': {
+      color: 'black'
+    }
+  }
+}))
 
 const Studio = () => {
   const location = useLocation()
   const [fileContent, setFileContent] = useState('')
   const [log, setLog] = useState('')
 
+  const [tab, setTab] = React.useState('1')
+  const handleTabChange = (_e: any, newValue: string) => {
+    setTab(newValue)
+  }
+
   const editorRef = useRef(null)
   const handleEditorDidMount = (editor: any) => (editorRef.current = editor)
 
@@ -26,15 +43,10 @@ const Studio = () => {
 
   const runCode = (code: string) => {
     axios
-      .post(`/SASjsApi/stp/run`, { code })
+      .post(`/SASjsApi/code/execute`, { code })
       .then((res: any) => {
-        const data =
+        setLog(res.data)
-          typeof res.data === 'string'
+        setTab('2')
-            ? res.data
-            : `<pre><code>${JSON.stringify(res.data, null, 4)}</code></pre>`
-
-        setLog(data)
-        document?.getElementById('sas_log')?.scrollIntoView()
       })
       .catch((err) => console.log(err))
   }
@@ -50,48 +62,61 @@ const Studio = () => {
         .catch((err) => console.log(err))
   }, [location.search])
 
+  const classes = useStyles()
   return (
-    <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+    <>
-      <Toolbar />
+      <br />
-      <Paper
+      <br />
-        sx={{
+      <br />
-          height: '75vh',
+      <Box sx={{ width: '100%', typography: 'body1' }}>
-          padding: '10px',
+        <TabContext value={tab}>
-          overflow: 'auto',
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          position: 'relative'
+            <TabList onChange={handleTabChange} centered>
-        }}
+              <Tab className={classes.root} label="Code" value="1" />
-        elevation={3}
+              <Tab className={classes.root} label="Log" value="2" />
-      >
+            </TabList>
-        <Editor
+          </Box>
-          height="95%"
+          <TabPanel value="1">
-          value={fileContent}
+            {/* <Toolbar /> */}
-          onMount={handleEditorDidMount}
+            <Paper
-          onChange={(val) => {
+              sx={{
-            if (val) setFileContent(val)
+                height: '70vh',
-          }}
+                padding: '10px',
-        />
+                overflow: 'auto',
-      </Paper>
+                position: 'relative'
-      <Stack
+              }}
-        spacing={3}
+              elevation={3}
-        direction="row"
+            >
-        sx={{ justifyContent: 'center', marginTop: '20px' }}
+              <Editor
-      >
+                height="95%"
-        <Button variant="contained" onClick={handleRunBtnClick}>
+                value={fileContent}
-          Run SAS Code
+                onMount={handleEditorDidMount}
-        </Button>
+                onChange={(val) => {
-        <Button variant="contained" onClick={handleRunSelectionBtnClick}>
+                  if (val) setFileContent(val)
-          Run Selected SAS Code
+                }}
-        </Button>
+              />
-      </Stack>
+            </Paper>
-      {log && (
+            <Stack
-        <>
+              spacing={3}
-          <br />
+              direction="row"
-          <h2 id="sas_log">Output</h2>
+              sx={{ justifyContent: 'center', marginTop: '20px' }}
-          <br />
+            >
-          <div dangerouslySetInnerHTML={{ __html: log }} />
+              <Button variant="contained" onClick={handleRunBtnClick}>
-        </>
+                Run SAS Code
-      )}
+              </Button>
-    </Box>
+              <Button variant="contained" onClick={handleRunSelectionBtnClick}>
+                Run Selected SAS Code
+              </Button>
+            </Stack>
+          </TabPanel>
+          <TabPanel value="2">
+            <h2>Result</h2>
+            <br />
+            <div dangerouslySetInnerHTML={{ __html: log }} />
+          </TabPanel>
+        </TabContext>
+      </Box>
+    </>
   )
 }