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-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx

@@ -31,7 +31,7 @@ describe('<DefaultTemplateOutputs />', () => {
       ],
     };
 
-    const { getByRole } = await renderInTestApp(
+    const { getByRole, queryByTestId } = await renderInTestApp(
       <DefaultTemplateOutputs output={output} />,
       {
         mountedRoutes: {
@@ -39,7 +39,8 @@ describe('<DefaultTemplateOutputs />', () => {
         },
       },
     );
-
+    expect(queryByTestId('output-box')).not.toBeNull();
+    expect(queryByTestId('text-output-box')).not.toBeNull();
     // first text output default visible
     expect(getByRole('heading', { level: 2 }).innerHTML).toBe(
       output.text[0].title,
@@ -61,4 +62,20 @@ describe('<DefaultTemplateOutputs />', () => {
       expect(getByRole('heading', { level: 2 }).innerHTML).toBe(text.title);
     }
   });
+  it('should not render anything when output is empty', async () => {
+    // This is the default case when no output field is present in the template
+    const output = {};
+    const { queryByTestId } = await renderInTestApp(
+      <DefaultTemplateOutputs output={output} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    // Ensure that nothing renders from this component
+    expect(queryByTestId('output-box')).toBeNull();
+    expect(queryByTestId('text-output-box')).toBeNull();
+  });
 });

plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx

@@ -56,22 +56,31 @@ export const DefaultTemplateOutputs = (props: {
     return null;
   }
 
+  const emptyOutput = Object.keys(output).length === 0;
+
   return (
     <>
-      <Box paddingBottom={2}>
-        <Paper>
-          <Box padding={2} justifyContent="center" display="flex" gridGap={16}>
-            <TextOutputs
-              output={output}
-              index={textOutputIndex}
-              setIndex={setTextOutputIndex}
-            />
-            <LinkOutputs output={output} />
-          </Box>
-        </Paper>
-      </Box>
+      {!emptyOutput ? (
+        <Box paddingBottom={2} data-testid="output-box">
+          <Paper>
+            <Box
+              padding={2}
+              justifyContent="center"
+              display="flex"
+              gridGap={16}
+            >
+              <TextOutputs
+                output={output}
+                index={textOutputIndex}
+                setIndex={setTextOutputIndex}
+              />
+              <LinkOutputs output={output} />
+            </Box>
+          </Paper>
+        </Box>
+      ) : null}
       {textOutput ? (
-        <Box paddingBottom={2}>
+        <Box paddingBottom={2} data-testid="text-output-box">
           <InfoCard
             title={textOutput.title ?? 'Text Output'}
             noPadding

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>