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)

.changeset/four-donuts-switch.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+enable resizing of the task log stream viewer

.changeset/witty-keys-share.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+disables rendering of output box if no output is returned

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>

yarn.lock

@@ -7314,6 +7314,7 @@ __metadata:
     "@types/humanize-duration": ^3.18.1
     "@types/json-schema": ^7.0.9
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
+    "@types/react-resizable": ^3.0.8
     "@types/react-window": ^1.8.8
     "@uiw/react-codemirror": ^4.9.3
     classnames: ^2.2.6
@@ -7326,6 +7327,7 @@ __metadata:
     luxon: ^3.0.0
     msw: ^1.0.0
     qs: ^6.9.4
+    react-resizable: ^3.0.5
     react-use: ^17.2.4
     react-window: ^1.8.10
     swr: ^2.0.0
@@ -18461,6 +18463,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-resizable@npm:^3.0.8":
+  version: 3.0.8
+  resolution: "@types/react-resizable@npm:3.0.8"
+  dependencies:
+    "@types/react": "*"
+  checksum: aabdef8056bbab3065559bce7ce93232e645fb4f915fd55f0903a2f4df5d2395762dfd75bb0242d5a73d39461e8c062d81eaab87b91213dddfd973ff908f79e4
+  languageName: node
+  linkType: hard
+
 "@types/react-sparklines@npm:^1.7.0":
   version: 1.7.5
   resolution: "@types/react-sparklines@npm:1.7.5"
@@ -38371,7 +38382,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-resizable@npm:^3.0.4":
+"react-resizable@npm:^3.0.4, react-resizable@npm:^3.0.5":
   version: 3.0.5
   resolution: "react-resizable@npm:3.0.5"
   dependencies: