From 57b7f954a17936f39aa9b757998b5b25e9442601 Mon Sep 17 00:00:00 2001
From: Yury Shkoda <shkoda.yuri@gmail.com>
Date: Tue, 18 Apr 2023 16:16:58 +0300
Subject: [PATCH] fix(log): fixed single chunk scrolling

---
 .../internal/components/log/logChunk.tsx      |   1 -
 .../internal/components/log/logComponent.tsx  | 118 ++++++++----------
 2 files changed, 52 insertions(+), 67 deletions(-)

diff --git a/web/src/containers/Studio/internal/components/log/logChunk.tsx b/web/src/containers/Studio/internal/components/log/logChunk.tsx
index 2d15afe..37c59da 100644
--- a/web/src/containers/Studio/internal/components/log/logChunk.tsx
+++ b/web/src/containers/Studio/internal/components/log/logChunk.tsx
@@ -145,7 +145,6 @@ const LogChunk = (props: LogChunkProps) => {
       </button>
       <div
         style={{
-          padding: '0 18px',
           backgroundColor: 'white',
           display: expanded ? 'block' : 'none',
           overflow: 'hidden'
diff --git a/web/src/containers/Studio/internal/components/log/logComponent.tsx b/web/src/containers/Studio/internal/components/log/logComponent.tsx
index dd052ed..d9d7684 100644
--- a/web/src/containers/Studio/internal/components/log/logComponent.tsx
+++ b/web/src/containers/Studio/internal/components/log/logComponent.tsx
@@ -134,6 +134,9 @@ const LogComponent = (props: LogComponentProps) => {
     }
   }
 
+  const hasErrorsOrWarnings =
+    logObject.errors?.length !== 0 || logObject.warnings?.length !== 0
+
   return (
     <>
       {selectedRunTime === RunTimeType.SAS && logObject.body ? (
@@ -151,71 +154,54 @@ const LogComponent = (props: LogComponentProps) => {
                 gap: 10
               }}
             ></div>
-            <div style={{ paddingBottom: 10 }}>
-              <TreeView
-                defaultCollapseIcon={<ExpandMore />}
-                defaultExpandIcon={<ChevronRight />}
-              >
-                {logObject.errors && logObject.errors.length !== 0 && (
-                  <TreeItem
-                    nodeId="errors"
-                    label={
-                      <Typography color="error">
-                        {`Errors (${logObject.errors.length})`}
-                      </Typography>
-                    }
-                  >
-                    {logObject.errors &&
-                      logObject.errors.map((error, ind) => (
-                        <TreeItem
-                          nodeId={`error_${ind}`}
-                          label={<ListItemText primary={error.body} />}
-                          key={`error_${ind}`}
-                          onClick={() => {
-                            setLogChunksState((prevState) => {
-                              const newState = [...prevState]
-
-                              newState[ind] = true
-
-                              return newState
-                            })
-
-                            goToLogLine(error, ind)
-                          }}
-                        />
-                      ))}
-                  </TreeItem>
-                )}
-                {logObject.warnings && logObject.warnings.length !== 0 && (
-                  <TreeItem
-                    nodeId="warnings"
-                    label={
-                      <Typography>{`Warnings (${logObject.warnings.length})`}</Typography>
-                    }
-                  >
-                    {logObject.warnings &&
-                      logObject.warnings.map((warning, ind) => (
-                        <TreeItem
-                          nodeId={`warning_${ind}`}
-                          label={<ListItemText primary={warning.body} />}
-                          key={`warning_${ind}`}
-                          onClick={() => {
-                            setLogChunksState((prevState) => {
-                              const newState = [...prevState]
-
-                              newState[ind] = true
-
-                              return newState
-                            })
-
-                            goToLogLine(warning, ind)
-                          }}
-                        />
-                      ))}
-                  </TreeItem>
-                )}
-              </TreeView>
-            </div>
+            {hasErrorsOrWarnings && (
+              <div>
+                <TreeView
+                  defaultCollapseIcon={<ExpandMore />}
+                  defaultExpandIcon={<ChevronRight />}
+                  style={{ paddingBottom: 10 }}
+                >
+                  {logObject.errors && logObject.errors.length !== 0 && (
+                    <TreeItem
+                      nodeId="errors"
+                      label={
+                        <Typography color="error">
+                          {`Errors (${logObject.errors.length})`}
+                        </Typography>
+                      }
+                    >
+                      {logObject.errors &&
+                        logObject.errors.map((error, ind) => (
+                          <TreeItem
+                            nodeId={`error_${ind}`}
+                            label={<ListItemText primary={error.body} />}
+                            key={`error_${ind}`}
+                            onClick={() => goToLogLine(error, ind)}
+                          />
+                        ))}
+                    </TreeItem>
+                  )}
+                  {logObject.warnings && logObject.warnings.length !== 0 && (
+                    <TreeItem
+                      nodeId="warnings"
+                      label={
+                        <Typography>{`Warnings (${logObject.warnings.length})`}</Typography>
+                      }
+                    >
+                      {logObject.warnings &&
+                        logObject.warnings.map((warning, ind) => (
+                          <TreeItem
+                            nodeId={`warning_${ind}`}
+                            label={<ListItemText primary={warning.body} />}
+                            key={`warning_${ind}`}
+                            onClick={() => goToLogLine(warning, ind)}
+                          />
+                        ))}
+                    </TreeItem>
+                  )}
+                </TreeView>
+              </div>
+            )}
           </div>
 
           {Array.isArray(logChunks) ? (
@@ -227,7 +213,7 @@ const LogComponent = (props: LogComponentProps) => {
                 key={`log-chunk-${id}`}
                 logLineCount={logObject.linesCount}
                 scrollToLogInstance={scrollToLogInstance}
-                onClick={(evt, chunkNumber) => {
+                onClick={(_, chunkNumber) => {
                   setLogChunksState((prevState) => {
                     const newState = [...prevState]
                     const expand = !newState[chunkNumber]