fix(log): fixed scrolling issue

sasjs · Apr 27, 2023 · 56a522c · 56a522c
1 parent 87e9172
commit 56a522c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/web/src/containers/Studio/editor.tsx b/web/src/containers/Studio/editor.tsx
@@ -114,10 +114,7 @@ const SASjsEditor = ({
 
   // INFO: variable indicating if selected run type is SAS if there are any errors or warnings in the log
   const logWithErrorsOrWarnings =
-    selectedRunTime === RunTimeType.SAS &&
-    log &&
-    ((log as LogObject).errors?.length !== 0 ||
-      (log as LogObject).warnings?.length !== 0)
+    selectedRunTime === RunTimeType.SAS && log && typeof log === 'object'
 
   return (
     <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>

diff --git a/web/src/containers/Studio/internal/components/log/logChunk.tsx b/web/src/containers/Studio/internal/components/log/logChunk.tsx
@@ -23,6 +23,7 @@ interface LogChunkProps {
   logLineCount: number
   onClick: (evt: any, id: number) => void
   scrollToLogInstance?: LogInstance
+  updated: number
 }
 
 const LogChunk = (props: LogChunkProps) => {
@@ -39,6 +40,19 @@ const LogChunk = (props: LogChunkProps) => {
     setExpanded(props.expanded)
   }, [props.expanded])
 
+  useEffect(() => {
+    if (props.expanded !== expanded) {
+      setExpanded(props.expanded)
+    }
+
+    if (
+      props.scrollToLogInstance &&
+      props.scrollToLogInstance !== scrollToLogInstance
+    ) {
+      setScrollToLogInstance(props.scrollToLogInstance)
+    }
+  }, [props])
+
   useEffect(() => {
     if (expanded && scrollToLogInstance) {
       const { type, id } = scrollToLogInstance
@@ -49,18 +63,18 @@ const LogChunk = (props: LogChunkProps) => {
         document.querySelector(`#log_container`)
 
       if (line && logWrapper && logContainer) {
-        const initialColor = line.style.color
-
-        line.style.backgroundColor = '#f6e30599'
+        line.className = classes.HighlightedLine
 
         line.scrollIntoView({ behavior: 'smooth', block: 'start' })
 
         setTimeout(() => {
-          line.setAttribute('style', `color: ${initialColor};`)
+          line.classList.remove(classes.HighlightedLine)
+
+          setScrollToLogInstance(undefined)
         }, 3000)
       }
     }
-  }, [expanded, scrollToLogInstance])
+  }, [expanded, scrollToLogInstance, props])
 
   const { errors, warnings } = parseErrorsAndWarnings(text)
 

diff --git a/web/src/containers/Studio/internal/components/log/logComponent.tsx b/web/src/containers/Studio/internal/components/log/logComponent.tsx
@@ -189,6 +189,7 @@ const LogComponent = (props: LogComponentProps) => {
                   key={`log-chunk-${id}`}
                   logLineCount={logObject.linesCount}
                   scrollToLogInstance={scrollToLogInstance}
+                  updated={Date.now()}
                   onClick={(_, chunkNumber) => {
                     setLogChunksState((prevState) => {
                       const newState = [...prevState]