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