From d99fdd1ec7991b94a0d98338d7a7a6216f46ce45 Mon Sep 17 00:00:00 2001
From: Sabir Hassan <sabirbk06@gmail.com>
Date: Wed, 10 Aug 2022 15:18:05 +0500
Subject: [PATCH] fix(web): fix UI responsiveness

---
 web/src/containers/Studio/editor.tsx  | 41 ++++++++++++++++++---------
 web/src/containers/Studio/index.tsx   | 19 ++++++++-----
 web/src/containers/Studio/sideBar.tsx |  1 +
 web/src/index.css                     |  2 +-
 4 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/web/src/containers/Studio/editor.tsx b/web/src/containers/Studio/editor.tsx
index f0ba49a2..f90217d9 100644
--- a/web/src/containers/Studio/editor.tsx
+++ b/web/src/containers/Studio/editor.tsx
@@ -1,4 +1,11 @@
-import React, { useEffect, useRef, useState, useContext } from 'react'
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+  useContext
+} from 'react'
 import axios from 'axios'
 
 import {
@@ -58,13 +65,17 @@ const StyledTab = styled(Tab)(() => ({
 type SASjsEditorProps = {
   selectedFilePath: string
   setSelectedFilePath: (filePath: string, refreshSideBar?: boolean) => void
+  tab: string
+  setTab: Dispatch<SetStateAction<string>>
 }
 
 const baseUrl = window.location.origin
 
 const SASjsEditor = ({
   selectedFilePath,
-  setSelectedFilePath
+  setSelectedFilePath,
+  tab,
+  setTab
 }: SASjsEditorProps) => {
   const appContext = useContext(AppContext)
   const [isLoading, setIsLoading] = useState(false)
@@ -81,7 +92,6 @@ const SASjsEditor = ({
   const [log, setLog] = useState('')
   const [ctrlPressed, setCtrlPressed] = useState(false)
   const [webout, setWebout] = useState('')
-  const [tab, setTab] = useState('1')
   const [runTimes, setRunTimes] = useState<string[]>([])
   const [selectedRunTime, setSelectedRunTime] = useState('')
   const [selectedFileExtension, setSelectedFileExtension] = useState('')
@@ -161,7 +171,7 @@ const SASjsEditor = ({
     }
     setLog('')
     setWebout('')
-    setTab('1')
+    setTab('code')
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilePath])
 
@@ -200,10 +210,11 @@ const SASjsEditor = ({
         setLog(parsedLog)
 
         setWebout(`${res.data?._webout}`)
-        setTab('2')
+        setTab('log')
 
         // Scroll to bottom of log
-        window.scrollTo(0, document.body.scrollHeight)
+        const logElement = document.getElementById('log')
+        if (logElement) logElement.scrollTop = logElement.scrollHeight
       })
       .catch((err) => {
         setModalTitle('Abort')
@@ -357,20 +368,20 @@ const SASjsEditor = ({
             }}
           >
             <TabList onChange={handleTabChange} centered>
-              <StyledTab label="Code" value="1" />
-              <StyledTab label="Log" value="2" />
+              <StyledTab label="Code" value="code" />
+              <StyledTab label="Log" value="log" />
               <StyledTab
                 label={
                   <Tooltip title="Displays content from the _webout fileref">
                     <Typography>Webout</Typography>
                   </Tooltip>
                 }
-                value="3"
+                value="webout"
               />
             </TabList>
           </Box>
 
-          <StyledTabPanel sx={{ paddingBottom: 0 }} value="1">
+          <StyledTabPanel sx={{ paddingBottom: 0 }} value="code">
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <RunMenu
                 fileContent={fileContent}
@@ -436,13 +447,15 @@ const SASjsEditor = ({
               </p>
             </Paper>
           </StyledTabPanel>
-          <StyledTabPanel value="2">
+          <StyledTabPanel value="log">
             <div>
-              <h2>SAS Log</h2>
-              <pre>{log}</pre>
+              <h2>Log</h2>
+              <pre id="log" style={{ overflow: 'auto', height: '75vh' }}>
+                {log}
+              </pre>
             </div>
           </StyledTabPanel>
-          <StyledTabPanel value="3">
+          <StyledTabPanel value="webout">
             <div>
               <pre>{webout}</pre>
             </div>
diff --git a/web/src/containers/Studio/index.tsx b/web/src/containers/Studio/index.tsx
index c8f9751a..a6d7d6bb 100644
--- a/web/src/containers/Studio/index.tsx
+++ b/web/src/containers/Studio/index.tsx
@@ -14,6 +14,7 @@ const Studio = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const [selectedFilePath, setSelectedFilePath] = useState('')
   const [directoryData, setDirectoryData] = useState<TreeNode | null>(null)
+  const [tab, setTab] = useState('code')
 
   useEffect(() => {
     setSelectedFilePath(searchParams.get('filePath') ?? '')
@@ -83,16 +84,20 @@ const Studio = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
-      <SideBar
-        selectedFilePath={selectedFilePath}
-        directoryData={directoryData}
-        handleSelect={handleSelect}
-        removeFileFromTree={removeFileFromTree}
-        refreshSideBar={fetchDirectoryData}
-      />
+      {tab === 'code' && (
+        <SideBar
+          selectedFilePath={selectedFilePath}
+          directoryData={directoryData}
+          handleSelect={handleSelect}
+          removeFileFromTree={removeFileFromTree}
+          refreshSideBar={fetchDirectoryData}
+        />
+      )}
       <SASjsEditor
         selectedFilePath={selectedFilePath}
         setSelectedFilePath={handleSelect}
+        tab={tab}
+        setTab={setTab}
       />
     </Box>
   )
diff --git a/web/src/containers/Studio/sideBar.tsx b/web/src/containers/Studio/sideBar.tsx
index 6f53393b..5badcd69 100644
--- a/web/src/containers/Studio/sideBar.tsx
+++ b/web/src/containers/Studio/sideBar.tsx
@@ -211,6 +211,7 @@ const SideBar = ({
         component={Paper}
         sx={{
           margin: '5px',
+          height: '97vh',
           paddingTop: '45px',
           display: 'flex',
           alignItems: 'flex-start'
diff --git a/web/src/index.css b/web/src/index.css
index 6a506a5a..e294eca2 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -13,7 +13,7 @@ code {
 }
 
 .main {
-  margin-top: 50px;
+  margin: 50px 10px 0 10px;
   display: flex;
   flex-direction: column;
   align-items: center;