diff --git a/.changeset/brown-cycles-beg.md b/.changeset/brown-cycles-beg.md new file mode 100644 index 0000000000..98df27a00f --- /dev/null +++ b/.changeset/brown-cycles-beg.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Hide text output button if only one is present diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx index 7ec3b0867c..cea00b15b2 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx @@ -78,4 +78,41 @@ describe('', () => { 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( + , + { + 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( + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + expect(queryByTestId('text-outputs')).toBeNull(); + }); }); diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx index 70f3b1fa59..40abad376b 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx +++ b/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" > - + {displayTextButtons && ( + + )}