chore(scaffolder): allow task viewer to be resizable and disable rendering of empty output (#25495)

chore(scaffolder): allow task viewer to be resizable and disable rendering of empty output (#25495)

plugins/scaffolder/package.json

@@ -96,6 +96,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
     "qs": "^6.9.4",
+    "react-resizable": "^3.0.5",
     "react-use": "^17.2.4",
     "react-window": "^1.8.10",
     "yaml": "^2.0.0",
@@ -116,6 +117,7 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/humanize-duration": "^3.18.1",
     "@types/json-schema": "^7.0.9",
+    "@types/react-resizable": "^3.0.8",
     "@types/react-window": "^1.8.8",
     "msw": "^1.0.0",
     "swr": "^2.0.0"

plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx

@@ -20,6 +20,7 @@ import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
+import { ResizableBox } from 'react-resizable';
 import {
   ScaffolderTaskOutput,
   scaffolderApiRef,
@@ -253,13 +254,13 @@ export const OngoingTask = (props: {
         ) : null}
 
         {logsVisible ? (
-          <Box paddingBottom={2} height="100%">
+          <ResizableBox height={240} minConstraints={[0, 160]} axis="y">
             <Paper style={{ height: '100%' }}>
               <Box padding={2} height="100%">
                 <TaskLogStream logs={taskStream.stepLogs} />
               </Box>
             </Paper>
-          </Box>
+          </ResizableBox>
         ) : null}
       </Content>
     </Page>