Merge branch 'main' into issue-139

web/src/containers/AuthCode/index.tsx

@@ -0,0 +1,78 @@
+import axios from 'axios'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import React, { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useLocation } from 'react-router-dom'
+
+import { CssBaseline, Box, Typography, Button } from '@mui/material'
+
+const getAuthCode = async (credentials: any) =>
+  axios.post('/SASLogon/authorize', credentials).then((res) => res.data)
+
+const AuthCode = () => {
+  const location = useLocation()
+  const [displayCode, setDisplayCode] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+
+  useEffect(() => {
+    requestAuthCode()
+  }, [])
+
+  const requestAuthCode = async () => {
+    setErrorMessage('')
+
+    const params = new URLSearchParams(location.search)
+
+    const responseType = params.get('response_type')
+    if (responseType !== 'code')
+      return setErrorMessage('response type is not support')
+
+    const clientId = params.get('client_id')
+    if (!clientId) return setErrorMessage('clientId is not provided')
+
+    setErrorMessage('Fetching auth code... ')
+    const { code } = await getAuthCode({
+      clientId
+    })
+      .then((res) => {
+        setErrorMessage('')
+        return res
+      })
+      .catch((err: any) => {
+        setErrorMessage(err.response.data)
+        return { code: null }
+      })
+    return setDisplayCode(code)
+  }
+
+  return (
+    <Box className="main">
+      <CssBaseline />
+      <br />
+      <h2>Authorization Code</h2>
+      {displayCode && (
+        <Typography m={2} p={3} style={{ overflowWrap: 'anywhere' }}>
+          {displayCode}
+        </Typography>
+      )}
+      {errorMessage && <Typography>{errorMessage}</Typography>}
+
+      <br />
+
+      <CopyToClipboard
+        text={displayCode}
+        onCopy={() =>
+          toast.info('Code copied to ClipBoard', {
+            theme: 'dark',
+            position: toast.POSITION.BOTTOM_RIGHT
+          })
+        }
+      >
+        <Button variant="contained">Copy to Clipboard</Button>
+      </CopyToClipboard>
+    </Box>
+  )
+}
+
+export default AuthCode

web/src/containers/Drive/main.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import axios from 'axios'
 
-import Editor from '@monaco-editor/react'
+import Editor from 'react-monaco-editor'
 
 import Box from '@mui/material/Box'
 import Paper from '@mui/material/Paper'
@@ -94,10 +94,7 @@ const Main = (props: Props) => {
       setEditMode(false)
     } else {
       window.open(
-        `${baseUrl}/SASjsApi/stp/execute?_program=${props.selectedFilePath.replace(
-          /.sas$/,
-          ''
-        )}`
+        `${baseUrl}/SASjsApi/stp/execute?_program=${props.selectedFilePath}`
       )
     }
   }
@@ -125,6 +122,7 @@ const Main = (props: Props) => {
         {!isLoading && props?.selectedFilePath && editMode && (
           <Editor
             height="95%"
+            language="sas"
             value={fileContent}
             onChange={(val) => {
               if (val) setFileContent(val)

web/src/containers/Settings/index.tsx

@@ -6,6 +6,7 @@ import TabList from '@mui/lab/TabList'
 import TabPanel from '@mui/lab/TabPanel'
 
 import Permission from './permission'
+import Profile from './profile'
 
 const StyledTab = styled(Tab)({
   background: 'black',
@@ -45,7 +46,9 @@ const Settings = () => {
             <StyledTab label="Permission" value="permission" />
           </TabList>
         </Box>
-        <StyledTabpanel value="profile">Profile Page</StyledTabpanel>
+        <StyledTabpanel value="profile">
+          <Profile />
+        </StyledTabpanel>
         <StyledTabpanel value="permission">
           <Permission />
         </StyledTabpanel>

web/src/containers/Settings/profile.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useContext } from 'react'
+import axios from 'axios'
+import {
+  Grid,
+  CircularProgress,
+  Card,
+  CardHeader,
+  Divider,
+  CardContent,
+  TextField,
+  CardActions,
+  Button,
+  FormGroup,
+  FormControlLabel,
+  Checkbox
+} from '@mui/material'
+import { toast } from 'react-toastify'
+
+import { AppContext, ModeType } from '../../context/appContext'
+
+const Profile = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const appContext = useContext(AppContext)
+  const [user, setUser] = useState({} as any)
+
+  useEffect(() => {
+    setIsLoading(true)
+    axios
+      .get(`/SASjsApi/user/${appContext.userId}`)
+      .then((res: any) => {
+        setUser(res.data)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }, [])
+
+  const handleChange = (event: any) => {
+    const { name, value } = event.target
+
+    setUser({ ...user, [name]: value })
+  }
+  const handleSubmit = () => {
+    setIsLoading(true)
+    axios
+      .patch(`/SASjsApi/user/${appContext.userId}`, {
+        username: user.username,
+        displayName: user.displayName,
+        autoExec: user.autoExec
+      })
+      .then((res: any) => {
+        toast.success('User information updated', {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .catch((err) => {
+        toast.error('Failed: ' + err.response?.data || err.text, {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }
+
+  return isLoading ? (
+    <CircularProgress
+      style={{ position: 'absolute', left: '50%', top: '50%' }}
+    />
+  ) : (
+    <Card>
+      <CardHeader title="Profile Information" />
+      <Divider />
+      <CardContent>
+        <Grid container spacing={4}>
+          <Grid item md={6} xs={12}>
+            <TextField
+              fullWidth
+              error={user.displayName?.length === 0}
+              helperText="Please specify display name"
+              label="Display Name"
+              name="displayName"
+              onChange={handleChange}
+              required
+              value={user.displayName}
+              variant="outlined"
+              disabled={appContext.mode === ModeType.Desktop}
+            />
+          </Grid>
+
+          <Grid item md={6} xs={12}>
+            <TextField
+              fullWidth
+              error={user.username?.length === 0}
+              helperText="Please specify username"
+              label="Username"
+              name="username"
+              onChange={handleChange}
+              required
+              value={user.username}
+              variant="outlined"
+              disabled={appContext.mode === ModeType.Desktop}
+            />
+          </Grid>
+
+          <Grid item lg={6} md={8} sm={12} xs={12}>
+            <TextField
+              fullWidth
+              label="autoExec"
+              name="autoExec"
+              onChange={handleChange}
+              multiline
+              rows="10"
+              value={user.autoExec}
+              variant="outlined"
+            />
+          </Grid>
+
+          <Grid item xs={6}>
+            <FormGroup row>
+              <FormControlLabel
+                disabled
+                control={<Checkbox checked={user.isActive} />}
+                label="isActive"
+              />
+              <FormControlLabel
+                disabled
+                control={<Checkbox checked={user.isAdmin} />}
+                label="isAdmin"
+              />
+            </FormGroup>
+          </Grid>
+        </Grid>
+      </CardContent>
+      <Divider />
+      <CardActions>
+        <Button type="submit" variant="contained" onClick={handleSubmit}>
+          Save Changes
+        </Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default Profile

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, { OnMount } from '@monaco-editor/react'
+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,19 +41,30 @@ 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 [runTimes, setRunTimes] = useState<string[]>([])
+  const [selectedRunTime, setSelectedRunTime] = useState('')
+
+  useEffect(() => {
+    setRunTimes(Object.values(appContext.runTimes))
+  }, [appContext.runTimes])
+
+  useEffect(() => {
+    if (runTimes.length) setSelectedRunTime(runTimes[0])
+  }, [runTimes])
 
   const handleTabChange = (_e: any, newValue: string) => {
     setTab(newValue)
   }
 
   const editorRef = useRef(null as any)
-  const handleEditorDidMount: OnMount = (editor) => {
+  const handleEditorDidMount: EditorDidMount = (editor) => {
     editor.focus()
     editorRef.current = editor
   }
@@ -57,7 +79,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 +111,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)
@@ -136,11 +162,12 @@ const Studio = () => {
           </TabList>
         </Box>
 
-        <TabPanel style={{ paddingBottom: 0 }} value="1">
+        <TabPanel sx={{ paddingBottom: 0 }} value="1">
           <div className={classes.subMenu}>
             <Tooltip title="CTRL+ENTER will also run SAS code">
               <Button onClick={handleRunBtnClick} className={classes.runButton}>
                 <img
+                  alt=""
                   draggable="false"
                   style={{ width: '25px' }}
                   src="/running-sas.png"
@@ -148,8 +175,23 @@ const Studio = () => {
                 <span style={{ fontSize: '12px' }}>RUN</span>
               </Button>
             </Tooltip>
+            <Box sx={{ minWidth: '75px', marginLeft: '10px' }}>
+              <FormControl variant="standard">
+                <Select
+                  labelId="run-time-select-label"
+                  id="run-time-select"
+                  value={selectedRunTime}
+                  onChange={handleChangeRunTime}
+                >
+                  {runTimes.map((runTime) => (
+                    <MenuItem key={runTime} value={runTime}>
+                      {runTime}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Box>
           </div>
-          {/* <Toolbar /> */}
           <Paper
             sx={{
               height: 'calc(100vh - 170px)',
@@ -161,8 +203,9 @@ const Studio = () => {
           >
             <Editor
               height="98%"
+              language="sas"
               value={fileContent}
-              onMount={handleEditorDidMount}
+              editorDidMount={handleEditorDidMount}
               options={{ readOnly: ctrlPressed }}
               onChange={(val) => {
                 if (val) setFileContent(val)