fix(log): fixed switching runtime

web/src/containers/Studio/editor.tsx

@@ -24,6 +24,7 @@ import { usePrompt } from '../../utils/hooks'
 import { getLanguageFromExtension } from './internal/helper'
 import useEditor from './internal/hooks/useEditor'
 import { RunTimeType } from '../../context/appContext'
+import { LogObject } from '../../utils'
 
 const StyledTabPanel = styled(TabPanel)(() => ({
   padding: '10px'
@@ -115,7 +116,8 @@ const SASjsEditor = ({
   const logWithErrorsOrWarnings =
     selectedRunTime === RunTimeType.SAS &&
     log &&
-    (log.errors?.length !== 0 || log.warnings?.length !== 0)
+    ((log as LogObject).errors?.length !== 0 ||
+      (log as LogObject).warnings?.length !== 0)
 
   return (
     <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>
@@ -158,7 +160,11 @@ const SASjsEditor = ({
                 label={logWithErrorsOrWarnings ? '' : 'log'}
                 value="log"
                 icon={
-                  logWithErrorsOrWarnings ? <LogTabWithIcons log={log} /> : ''
+                  logWithErrorsOrWarnings ? (
+                    <LogTabWithIcons log={log as LogObject} />
+                  ) : (
+                    ''
+                  )
                 }
                 onClick={() => {
                   const logWrapper = document.querySelector(`#logWrapper`)

web/src/containers/Studio/internal/components/log/logComponent.tsx

@@ -30,12 +30,13 @@ const useStyles: any = makeStyles((theme: any) => ({
 }))
 
 interface LogComponentProps {
-  log: LogObject
+  log: LogObject | string
   selectedRunTime: RunTimeType
 }
 
 const LogComponent = (props: LogComponentProps) => {
   const { log, selectedRunTime } = props
+  const logObject = log as LogObject
 
   const classes = useStyles()
 
@@ -86,17 +87,17 @@ const LogComponent = (props: LogComponentProps) => {
                 defaultCollapseIcon={<ExpandMore />}
                 defaultExpandIcon={<ChevronRight />}
               >
-                {log.errors && log.errors.length !== 0 && (
+                {logObject.errors && logObject.errors.length !== 0 && (
                   <TreeItem
                     nodeId="errors"
                     label={
                       <Typography color="error">
-                        {`Errors (${log.errors.length})`}
+                        {`Errors (${logObject.errors.length})`}
                       </Typography>
                     }
                   >
-                    {log.errors &&
-                      log.errors.map((error, ind) => (
+                    {logObject.errors &&
+                      logObject.errors.map((error, ind) => (
                         <TreeItem
                           nodeId={`error_${ind}`}
                           label={<ListItemText primary={error} />}
@@ -106,15 +107,15 @@ const LogComponent = (props: LogComponentProps) => {
                       ))}
                   </TreeItem>
                 )}
-                {log.warnings && log.warnings.length !== 0 && (
+                {logObject.warnings && logObject.warnings.length !== 0 && (
                   <TreeItem
                     nodeId="warnings"
                     label={
-                      <Typography>{`Warnings (${log.warnings.length})`}</Typography>
+                      <Typography>{`Warnings (${logObject.warnings.length})`}</Typography>
                     }
                   >
-                    {log.warnings &&
-                      log.warnings.map((warning, ind) => (
+                    {logObject.warnings &&
+                      logObject.warnings.map((warning, ind) => (
                         <TreeItem
                           nodeId={`warning_${ind}`}
                           label={<ListItemText primary={warning} />}
@@ -134,7 +135,7 @@ const LogComponent = (props: LogComponentProps) => {
             className={classes.expansionDescription}
           >
             <Highlight className={'html'} innerHTML={true}>
-              {decodeHtml(log?.body || '')}
+              {decodeHtml(logObject?.body || '')}
             </Highlight>
           </Typography>
         </div>
@@ -145,7 +146,7 @@ const LogComponent = (props: LogComponentProps) => {
             id="log"
             style={{ overflow: 'auto', height: 'calc(100vh - 220px)' }}
           >
-            {log}
+            {typeof log === 'string' ? log : log.body}
           </pre>
         </div>
       )}

web/src/containers/Studio/internal/hooks/useEditor.ts

@@ -42,7 +42,7 @@ const useEditor = ({
 
   const [prevFileContent, setPrevFileContent] = useStateWithCallback('')
   const [fileContent, setFileContent] = useState('')
-  const [log, setLog] = useState<LogObject>()
+  const [log, setLog] = useState<LogObject | string>()
   const [webout, setWebout] = useState('')
   const [runTimes, setRunTimes] = useState<string[]>([])
   const [selectedRunTime, setSelectedRunTime] = useState<RunTimeType>(