From 2003fc2360c4987a30a059906791e621dd7f7cca Mon Sep 17 00:00:00 2001 From: Vladimir Kobzev Date: Thu, 16 Jan 2025 10:24:18 +0100 Subject: [PATCH 1/5] Add option to hide text output buttons Signed-off-by: Vladimir Kobzev --- .changeset/brown-cycles-beg.md | 5 +++ plugins/scaffolder-react/src/api/types.ts | 1 + .../DefaultTemplateOutputs.test.tsx | 18 +++++++++++ .../DefaultTemplateOutputs.tsx | 4 ++- .../TemplateOutputs/TextOutputs.tsx | 32 ++++++++++--------- 5 files changed, 44 insertions(+), 16 deletions(-) create mode 100644 .changeset/brown-cycles-beg.md diff --git a/.changeset/brown-cycles-beg.md b/.changeset/brown-cycles-beg.md new file mode 100644 index 0000000000..78e6e3e73f --- /dev/null +++ b/.changeset/brown-cycles-beg.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Adds an option to hide text output buttons diff --git a/plugins/scaffolder-react/src/api/types.ts b/plugins/scaffolder-react/src/api/types.ts index 8e4d989a55..6284e8dcaa 100644 --- a/plugins/scaffolder-react/src/api/types.ts +++ b/plugins/scaffolder-react/src/api/types.ts @@ -89,6 +89,7 @@ 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 7ec3b0867c..d0849f6027 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,22 @@ 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 () => { + const output = { + text: [ + { title: 'Text 1', content: 'Hello, **world**!', showButton: false }, + { title: 'Text 2', content: 'Hello, **mars**!', showButton: false }, + ], + }; + const { queryByTestId } = await renderInTestApp( + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + expect(queryByTestId('output-box')).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..9788d194ae 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx @@ -56,7 +56,9 @@ export const DefaultTemplateOutputs = (props: { return null; } - const emptyOutput = Object.keys(output).length === 0; + const emptyOutput = + (output.links || []).length === 0 && + Object.values(output.text || {}).filter(o => o.showButton).length === 0; return ( <> diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx index 5da1dab476..373db4d632 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx @@ -39,23 +39,25 @@ export const TextOutputs = (props: { <> {text .filter(({ content }) => content !== undefined) - .map(({ title, icon }, i) => { + .map(({ title, icon, showButton = true }, i) => { const Icon = iconResolver(icon); return ( - + showButton && ( + + ) ); })} From 4fa69273db3f7639b85fab6f2f8fb5bb64779523 Mon Sep 17 00:00:00 2001 From: Vladimir Kobzev Date: Thu, 16 Jan 2025 10:56:46 +0100 Subject: [PATCH 2/5] Build api-reports Signed-off-by: Vladimir Kobzev --- plugins/scaffolder-react/report.api.md | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/scaffolder-react/report.api.md b/plugins/scaffolder-react/report.api.md index 8a6b4739a4..c1f415a334 100644 --- a/plugins/scaffolder-react/report.api.md +++ b/plugins/scaffolder-react/report.api.md @@ -322,6 +322,7 @@ export type ScaffolderOutputText = { title?: string; icon?: string; content?: string; + showButton?: boolean; default?: boolean; }; From 662ba8c55db95a9a61ed20ea1165629c11441185 Mon Sep 17 00:00:00 2001 From: Vladimir Kobzev Date: Thu, 16 Jan 2025 14:54:04 +0100 Subject: [PATCH 3/5] Hide the text output button if only one text output is defined Signed-off-by: Vladimir Kobzev --- .changeset/brown-cycles-beg.md | 2 +- .../notifications-demo/template.yaml | 9 ++++++ plugins/scaffolder-react/src/api/types.ts | 1 - .../DefaultTemplateOutputs.test.tsx | 23 +++++++++++-- .../DefaultTemplateOutputs.tsx | 18 ++++++----- .../TemplateOutputs/TextOutputs.tsx | 32 +++++++++---------- 6 files changed, 56 insertions(+), 29 deletions(-) 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 && ( - - ) + ); })} From cef66616141e2b8e6463e06136d411b53143a54c Mon Sep 17 00:00:00 2001 From: Vladimir Kobzev Date: Thu, 16 Jan 2025 14:56:56 +0100 Subject: [PATCH 4/5] build api reports Signed-off-by: Vladimir Kobzev --- plugins/scaffolder-react/report.api.md | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/scaffolder-react/report.api.md b/plugins/scaffolder-react/report.api.md index c1f415a334..8a6b4739a4 100644 --- a/plugins/scaffolder-react/report.api.md +++ b/plugins/scaffolder-react/report.api.md @@ -322,7 +322,6 @@ export type ScaffolderOutputText = { title?: string; icon?: string; content?: string; - showButton?: boolean; default?: boolean; }; From a55d665044b141ba3ead886227231e7b9c32d2ad Mon Sep 17 00:00:00 2001 From: Vladimir Kobzev Date: Fri, 17 Jan 2025 09:08:47 +0100 Subject: [PATCH 5/5] revert accidental change Signed-off-by: Vladimir Kobzev --- .../sample-templates/notifications-demo/template.yaml | 9 --------- 1 file changed, 9 deletions(-) diff --git a/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml b/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml index 9d5224ccb4..a85f53b12f 100644 --- a/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml +++ b/plugins/scaffolder-backend/sample-templates/notifications-demo/template.yaml @@ -67,12 +67,3 @@ spec: link: ${{ parameters.link }} severity: ${{ parameters.severity }} scope: ${{ parameters.scope }} - - output: - text: - - title: Your next steps - showButton: false - content: > - # Success! - - Text