diff --git a/.changeset/brown-cycles-beg.md b/.changeset/brown-cycles-beg.md index 78e6e3e73f..98df27a00f 100644 --- a/.changeset/brown-cycles-beg.md +++ b/.changeset/brown-cycles-beg.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder-react': patch --- -Adds an option to hide text output buttons +Hide text output button if only one is present diff --git a/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml b/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml index a85f53b12f..9d5224ccb4 100644 --- a/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml +++ b/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml @@ -67,3 +67,12 @@ spec: link: ${{ parameters.link }} severity: ${{ parameters.severity }} scope: ${{ parameters.scope }} + + output: + text: + - title: Your next steps + showButton: false + content: > + # Success! + + Text diff --git a/plugins/scaffolder-react/src/api/types.ts b/plugins/scaffolder-react/src/api/types.ts index 6284e8dcaa..8e4d989a55 100644 --- a/plugins/scaffolder-react/src/api/types.ts +++ b/plugins/scaffolder-react/src/api/types.ts @@ -89,7 +89,6 @@ export type ScaffolderOutputText = { title?: string; icon?: string; content?: string; - showButton?: boolean; default?: boolean; }; 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 d0849f6027..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,11 +78,11 @@ describe('', () => { 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('', () => { }, ); + // 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 9788d194ae..40abad376b 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx +++ b/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" > - + {displayTextButtons && ( + + )} diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx index 373db4d632..5da1dab476 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx +++ b/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 && ( - - ) + ); })}