fix(log): fixed single chunk display

web/src/containers/Studio/internal/components/log/logChunk.tsx

@@ -4,6 +4,7 @@ import Highlight from 'react-highlight'
 import { ErrorOutline, Warning } from '@mui/icons-material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import CheckIcon from '@mui/icons-material/Check'
 import { makeStyles } from '@mui/styles'
 import {
   defaultChunkSize,
@@ -44,9 +45,9 @@ interface LogChunkProps {
 
 const LogChunk = (props: LogChunkProps) => {
   const { id, text, logLineCount, scrollToLogInstance } = props
-
   const classes = useStyles()
   const [expanded, setExpanded] = useState(props.expanded)
+  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     setExpanded(props.expanded)
@@ -107,16 +108,26 @@ const LogChunk = (props: LogChunkProps) => {
                 ? (id + 1) * defaultChunkSize
                 : logLineCount
             }`}</span>
-            <ContentCopyIcon
+            {copied ? (
-              style={{ fontSize: 20 }}
+              <CheckIcon style={{ fontSize: 20, color: 'green' }} />
-              onClick={(evt: SyntheticEvent) => {
+            ) : (
-                evt.stopPropagation()
+              <ContentCopyIcon
+                style={{ fontSize: 20 }}
+                onClick={(evt: SyntheticEvent) => {
+                  evt.stopPropagation()
 
-                navigator.clipboard.writeText(
+                  navigator.clipboard.writeText(
-                  clearErrorsAndWarningsHtmlWrapping(text)
+                    clearErrorsAndWarningsHtmlWrapping(text)
-                )
+                  )
-              }}
+
-            />
+                  setCopied(true)
+
+                  setTimeout(() => {
+                    setCopied(false)
+                  }, 1000)
+                }}
+              />
+            )}
             {errors && errors.length !== 0 && (
               <ErrorOutline color="error" style={{ fontSize: 20 }} />
             )}

web/src/containers/Studio/internal/components/log/logComponent.tsx

@@ -47,7 +47,6 @@ const LogComponent = (props: LogComponentProps) => {
   const [logChunksState, setLogChunksState] = useState<boolean[]>(
     new Array(logChunks.length).fill(false)
   )
-
   const [scrollToLogInstance, setScrollToLogInstance] = useState<LogInstance>()
   const [oldestExpandedChunk, setOldestExpandedChunk] = useState<number>(
     logChunksState.length - 1

web/src/utils/log.ts

@@ -81,11 +81,11 @@ export const isTheLastChunk = (
 }
 
 export const splitIntoChunks = (log: string, chunkSize = defaultChunkSize) => {
-  if (!log.length) return []
+  if (!log) return []
 
   const logLines: string[] = log.split(`\n`)
 
-  if (logLines.length <= chunkSize) return log
+  if (logLines.length <= chunkSize) return [log]
 
   const chunks: string[] = []