feat(log): added logComponent and LogTabWithIcons

web/src/containers/Studio/editor.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction } from 'react'
 
 import {
   Backdrop,
@@ -17,6 +17,8 @@ import { TabContext, TabList, TabPanel } from '@mui/lab'
 import FilePathInputModal from '../../components/filePathInputModal'
 import FileMenu from './internal/components/fileMenu'
 import RunMenu from './internal/components/runMenu'
+import LogComponent from './internal/components/log/logComponent'
+import LogTabWithIcons from './internal/components/log/logTabWithIcons'
 
 import { usePrompt } from '../../utils/hooks'
 import { getLanguageFromExtension } from './internal/helper'
@@ -108,6 +110,8 @@ const SASjsEditor = ({
     />
   )
 
+  const logWithErrorsOrWarnings = log?.errors.length || log?.warnings.length
+
   return (
     <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>
       <Backdrop
@@ -145,7 +149,13 @@ const SASjsEditor = ({
           >
             <TabList onChange={handleTabChange} centered>
               <StyledTab label="Code" value="code" />
-              <StyledTab label="Log" value="log" />
+              <StyledTab
+                label={logWithErrorsOrWarnings ? '' : 'log'}
+                value="log"
+                icon={
+                  logWithErrorsOrWarnings ? <LogTabWithIcons log={log} /> : ''
+                }
+              />
               <StyledTab
                 label={
                   <Tooltip title="Displays content from the _webout fileref">
@@ -195,15 +205,7 @@ const SASjsEditor = ({
             </Paper>
           </StyledTabPanel>
           <StyledTabPanel value="log">
-            <div>
-              <h2>Log</h2>
-              <pre
-                id="log"
-                style={{ overflow: 'auto', height: 'calc(100vh - 220px)' }}
-              >
-                {log}
-              </pre>
-            </div>
+            {log && <LogComponent log={log} />}
           </StyledTabPanel>
           <StyledTabPanel value="webout">
             <div>