feat(studio): run selected code + open in studio

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,84 @@
-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) => {
+        setLog(res.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 && <div id="sas_log" dangerouslySetInnerHTML={{ __html: log }} />}
     </Box>
   )
 }