Merge pull request #28521 from yu-kkurii/optional-text-output-button

Hide text output button if only one text output is defined

.changeset/brown-cycles-beg.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Hide text output button if only one is present

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

@@ -78,4 +78,41 @@ describe('<DefaultTemplateOutputs />', () => {
     expect(queryByTestId('output-box')).toBeNull();
     expect(queryByTestId('text-output-box')).toBeNull();
   });
+  it('should not render anything when only a single text output is defined', async () => {
+    // This is the default case when no output field is present in the template
+    const output = {
+      text: [
+        { title: 'Text 1', content: 'Hello, **world**!', showButton: false },
+      ],
+    };
+    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();
+  });
+  it('should not render text output buttons if there is only one output', async () => {
+    const output = {
+      links: [{ title: 'Link 1', url: 'https://backstage.io/' }],
+      text: [
+        { title: 'Text 1', content: 'Hello, **world**!', showButton: false },
+      ],
+    };
+    const { queryByTestId } = await renderInTestApp(
+      <DefaultTemplateOutputs output={output} />,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(queryByTestId('text-outputs')).toBeNull();
+  });
 });

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

@@ -56,7 +56,8 @@ export const DefaultTemplateOutputs = (props: {
     return null;
   }
 
-  const emptyOutput = Object.keys(output).length === 0;
+  const displayTextButtons = (output.text || []).length > 1;
+  const emptyOutput = (output.links || []).length === 0 && !displayTextButtons;
 
   return (
     <>
@@ -70,11 +71,14 @@ export const DefaultTemplateOutputs = (props: {
               gridGap={16}
               flexWrap="wrap"
             >
-              <TextOutputs
-                output={output}
-                index={textOutputIndex}
-                setIndex={setTextOutputIndex}
-              />
+              {displayTextButtons && (
+                <TextOutputs
+                  data-testid="text-outputs"
+                  output={output}
+                  index={textOutputIndex}
+                  setIndex={setTextOutputIndex}
+                />
+              )}
               <LinkOutputs output={output} />
             </Box>
           </Paper>