Hide the text output button if only one text output is defined

Signed-off-by: Vladimir Kobzev <vkobzev@bol.com>

plugins/scaffolder-react/src/api/types.ts

@@ -89,7 +89,6 @@ export type ScaffolderOutputText = {
   title?: string;
   icon?: string;
   content?: string;
-  showButton?: boolean;
   default?: boolean;
 };
 

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

@@ -78,11 +78,11 @@ describe('<DefaultTemplateOutputs />', () => {
     expect(queryByTestId('output-box')).toBeNull();
     expect(queryByTestId('text-output-box')).toBeNull();
   });
-  it('should not render the link output box when output only contains text with showButton set to false', async () => {
+  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 },
-        { title: 'Text 2', content: 'Hello, **mars**!', showButton: false },
       ],
     };
     const { queryByTestId } = await renderInTestApp(
@@ -94,6 +94,25 @@ describe('<DefaultTemplateOutputs />', () => {
       },
     );
 
+    // 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,9 +56,8 @@ export const DefaultTemplateOutputs = (props: {
     return null;
   }
 
-  const emptyOutput =
-    (output.links || []).length === 0 &&
-    Object.values(output.text || {}).filter(o => o.showButton).length === 0;
+  const displayTextButtons = (output.text || []).length > 1;
+  const emptyOutput = (output.links || []).length === 0 && !displayTextButtons;
 
   return (
     <>
@@ -72,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>

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

@@ -39,25 +39,23 @@ export const TextOutputs = (props: {
     <>
       {text
         .filter(({ content }) => content !== undefined)
-        .map(({ title, icon, showButton = true }, i) => {
+        .map(({ title, icon }, i) => {
           const Icon = iconResolver(icon);
           return (
-            showButton && (
-              <Button
-                key={i}
-                startIcon={<Icon />}
-                component="div"
-                color="primary"
-                onClick={() => {
-                  if (index !== i) {
-                    setIndex?.(i);
-                  }
-                }}
-                variant={index === i ? 'outlined' : undefined}
-              >
-                {title}
-              </Button>
-            )
+            <Button
+              key={i}
+              startIcon={<Icon />}
+              component="div"
+              color="primary"
+              onClick={() => {
+                if (index !== i) {
+                  setIndex?.(i);
+                }
+              }}
+              variant={index === i ? 'outlined' : undefined}
+            >
+              {title}
+            </Button>
           );
         })}
     </>