fix: code/execute controller logic to handle different runtimes

web/src/containers/Studio/index.tsx

@@ -1,13 +1,24 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState, useContext } from 'react'
 import axios from 'axios'
 
-import Box from '@mui/material/Box'
-import { Button, Paper, Stack, Tab, Tooltip } from '@mui/material'
+import {
+  Box,
+  MenuItem,
+  FormControl,
+  Select,
+  SelectChangeEvent,
+  Button,
+  Paper,
+  Tab,
+  Tooltip
+} from '@mui/material'
 import { makeStyles } from '@mui/styles'
 import Editor, { EditorDidMount } from 'react-monaco-editor'
 import { useLocation } from 'react-router-dom'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 
+import { AppContext, RunTimeType } from '../../context/appContext'
+
 const useStyles = makeStyles(() => ({
   root: {
     fontSize: '1rem',
@@ -30,12 +41,14 @@ const useStyles = makeStyles(() => ({
 }))
 
 const Studio = () => {
+  const appContext = useContext(AppContext)
   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 [tab, setTab] = useState('1')
+  const [selectedRunTime, setSelectedRunTime] = useState(RunTimeType.SAS)
 
   const handleTabChange = (_e: any, newValue: string) => {
     setTab(newValue)
@@ -57,7 +70,7 @@ const Studio = () => {
 
   const runCode = (code: string) => {
     axios
-      .post(`/SASjsApi/code/execute`, { code })
+      .post(`/SASjsApi/code/execute`, { code, runTime: selectedRunTime })
       .then((res: any) => {
         const parsedLog = res?.data?.log
           .map((logLine: any) => logLine.line)
@@ -89,6 +102,10 @@ const Studio = () => {
     if (!event.ctrlKey && ctrlPressed) setCtrlPressed(false)
   }
 
+  const handleChangeRunTime = (event: SelectChangeEvent) => {
+    setSelectedRunTime(event.target.value as RunTimeType)
+  }
+
   useEffect(() => {
     const content = localStorage.getItem('fileContent') ?? ''
     setFileContent(content)
@@ -149,8 +166,21 @@ const Studio = () => {
                 <span style={{ fontSize: '12px' }}>RUN</span>
               </Button>
             </Tooltip>
+            <Box sx={{ minWidth: 75 }}>
+              <FormControl variant="standard">
+                <Select
+                  labelId="run-time-select-label"
+                  id="run-time-select"
+                  value={selectedRunTime}
+                  onChange={handleChangeRunTime}
+                >
+                  {appContext.runTimes.map((runTime) => (
+                    <MenuItem value={runTime}>{runTime}</MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Box>
           </div>
-          {/* <Toolbar /> */}
           <Paper
             sx={{
               height: 'calc(100vh - 170px)',

web/src/context/appContext.tsx

@@ -14,6 +14,11 @@ export enum ModeType {
   Desktop = 'desktop'
 }
 
+export enum RunTimeType {
+  SAS = 'sas',
+  JS = 'js'
+}
+
 interface AppContextProps {
   checkingSession: boolean
   loggedIn: boolean
@@ -25,6 +30,7 @@ interface AppContextProps {
   displayName: string
   setDisplayName: Dispatch<SetStateAction<string>> | null
   mode: ModeType
+  runTimes: RunTimeType[]
   logout: (() => void) | null
 }
 
@@ -39,6 +45,7 @@ export const AppContext = createContext<AppContextProps>({
   displayName: '',
   setDisplayName: null,
   mode: ModeType.Server,
+  runTimes: [],
   logout: null
 })
 
@@ -50,6 +57,7 @@ const AppContextProvider = (props: { children: ReactNode }) => {
   const [username, setUsername] = useState('')
   const [displayName, setDisplayName] = useState('')
   const [mode, setMode] = useState(ModeType.Server)
+  const [runTimes, setRunTimes] = useState<RunTimeType[]>([])
 
   useEffect(() => {
     setCheckingSession(true)
@@ -74,6 +82,7 @@ const AppContextProvider = (props: { children: ReactNode }) => {
       .then((res) => res.data)
       .then((data: any) => {
         setMode(data.mode)
+        setRunTimes(data.runTimes)
       })
       .catch(() => {})
   }, [])
@@ -99,6 +108,7 @@ const AppContextProvider = (props: { children: ReactNode }) => {
         displayName,
         setDisplayName,
         mode,
+        runTimes,
         logout
       }}
     >