Merge remote-tracking branch 'origin/main' into issue-361

web/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "start": "webpack-dev-server --config webpack.dev.ts --hot",
-    "build": "webpack --config webpack.prod.ts"
+    "build": "webpack --config webpack.prod.ts",
+    "lint": "npx prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
+    "lint:fix": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\""
   },
   "dependencies": {
     "@emotion/react": "^11.4.1",
@@ -19,9 +21,8 @@
     "@types/jest": "^26.0.24",
     "@types/node": "^12.20.28",
     "@types/react": "^17.0.27",
-    "axios": "^0.24.0",
+    "axios": "1.12.2",
     "monaco-editor": "^0.33.0",
-    "monaco-editor-webpack-plugin": "^7.0.1",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
@@ -54,8 +55,9 @@
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "5.5.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "path": "0.12.7",
-    "prettier": "^2.4.1",
+    "prettier": "^3.0.3",
     "sass": "^1.44.0",
     "sass-loader": "^12.3.0",
     "style-loader": "^3.3.1",

web/src/components/snackbar.tsx

@@ -3,12 +3,11 @@ import Snackbar from '@mui/material/Snackbar'
 import MuiAlert, { AlertProps } from '@mui/material/Alert'
 import Slide, { SlideProps } from '@mui/material/Slide'
 
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  props,
-  ref
-) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
-})
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  function Alert(props, ref) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+  }
+)
 
 const Transition = (props: SlideProps) => {
   return <Slide {...props} direction="up" />

web/src/containers/Studio/editor.tsx

@@ -62,6 +62,7 @@ const SASjsEditor = ({
     selectedRunTime,
     showDiff,
     webout,
+    printOutput,
     Dialog,
     handleChangeRunTime,
     handleDiffEditorDidMount,
@@ -153,30 +154,35 @@ const SASjsEditor = ({
           >
             <TabList onChange={handleTabChange} centered>
               <StyledTab label="Code" value="code" />
-              <StyledTab
-                label={logWithErrorsOrWarnings ? '' : 'log'}
-                value="log"
-                icon={
-                  logWithErrorsOrWarnings ? (
-                    <LogTabWithIcons log={log as LogObject} />
-                  ) : (
-                    ''
-                  )
-                }
-                onClick={() => {
-                  const logWrapper = document.querySelector(`#logWrapper`)
+              {log && (
+                <StyledTab
+                  label={logWithErrorsOrWarnings ? '' : 'log'}
+                  value="log"
+                  icon={
+                    logWithErrorsOrWarnings ? (
+                      <LogTabWithIcons log={log as LogObject} />
+                    ) : (
+                      ''
+                    )
+                  }
+                  onClick={() => {
+                    const logWrapper = document.querySelector(`#logWrapper`)
 
-                  if (logWrapper) logWrapper.scrollTop = 0
-                }}
-              />
-              <StyledTab
-                label={
-                  <Tooltip title="Displays content from the _webout fileref">
-                    <Typography>Webout</Typography>
-                  </Tooltip>
-                }
-                value="webout"
-              />
+                    if (logWrapper) logWrapper.scrollTop = 0
+                  }}
+                />
+              )}
+              {webout && (
+                <StyledTab
+                  label={
+                    <Tooltip title="Displays content from the _webout fileref">
+                      <Typography>Webout</Typography>
+                    </Tooltip>
+                  }
+                  value="webout"
+                />
+              )}
+              {printOutput && <StyledTab label="print" value="printOutput" />}
             </TabList>
           </Box>
 
@@ -222,11 +228,20 @@ const SASjsEditor = ({
               <LogComponent log={log} selectedRunTime={selectedRunTime} />
             )}
           </StyledTabPanel>
-          <StyledTabPanel value="webout">
-            <div>
-              <pre>{webout}</pre>
-            </div>
-          </StyledTabPanel>
+          {webout && (
+            <StyledTabPanel value="webout">
+              <div>
+                <pre>{webout}</pre>
+              </div>
+            </StyledTabPanel>
+          )}
+          {printOutput && (
+            <StyledTabPanel value="printOutput">
+              <div>
+                <pre>{printOutput}</pre>
+              </div>
+            </StyledTabPanel>
+          )}
         </TabContext>
       )}
       <Dialog />

web/src/containers/Studio/internal/components/log/log.module.css

@@ -7,8 +7,10 @@
   border: none;
   outline: none;
   transition: 0.4s;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
-    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
 }
 
 .ChunkDetails {

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

@@ -39,14 +39,14 @@ const useEditor = ({
   const { Snackbar, setOpenSnackbar, setSnackbarMessage, setSnackbarSeverity } =
     useSnackbar()
   const [isLoading, setIsLoading] = useState(false)
-
   const [prevFileContent, setPrevFileContent] = useStateWithCallback('')
   const [fileContent, setFileContent] = useState('')
   const [log, setLog] = useState<LogObject | string>()
-  const [webout, setWebout] = useState('')
+  const [webout, setWebout] = useState<string>()
+  const [printOutput, setPrintOutput] = useState<string>()
   const [runTimes, setRunTimes] = useState<string[]>([])
-  const [selectedRunTime, setSelectedRunTime] = useState<RunTimeType | string>(
-    ''
+  const [selectedRunTime, setSelectedRunTime] = useState<RunTimeType>(
+    RunTimeType.SAS
   )
   const [selectedFileExtension, setSelectedFileExtension] = useState('')
   const [openFilePathInputModal, setOpenFilePathInputModal] = useState(false)
@@ -169,25 +169,30 @@ const useEditor = ({
           ),
           runTime: selectedRunTime
         })
-        .then((res: any) => {
-          if (selectedRunTime === RunTimeType.SAS) {
-            const { errors, warnings, logLines } = parseErrorsAndWarnings(
-              res.data.split(SASJS_LOGS_SEPARATOR)[1]
-            )
+        .then((res: { data: string }) => {
+          // INFO: the order of payload parts is set in @sasjs/server/api/src/controllers/internal/Execution.ts
+          const resDataSplitted = res.data.split(SASJS_LOGS_SEPARATOR)
+          const webout = resDataSplitted[0]
+          const log = resDataSplitted[1]
+          const printOutput = resDataSplitted[2]
 
-            const log: LogObject = {
+          if (selectedRunTime === RunTimeType.SAS) {
+            const { errors, warnings, logLines } = parseErrorsAndWarnings(log)
+
+            const logObject: LogObject = {
               body: logLines.join(`\n`),
               errors,
               warnings,
               linesCount: logLines.length
             }
 
-            setLog(log)
+            setLog(logObject)
           } else {
-            setLog(res.data.split(SASJS_LOGS_SEPARATOR)[1] ?? '')
+            setLog(log)
           }
 
-          setWebout(res.data.split(SASJS_LOGS_SEPARATOR)[0] ?? '')
+          setWebout(webout)
+          setPrintOutput(printOutput)
           setTab('log')
 
           // Scroll to bottom of log
@@ -335,6 +340,7 @@ const useEditor = ({
     selectedRunTime,
     showDiff,
     webout,
+    printOutput,
     Dialog,
     handleChangeRunTime,
     handleDiffEditorDidMount,

web/src/index.css

@@ -1,15 +1,15 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 .container {

web/src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />