diff --git a/.changeset/sixty-plums-switch.md b/.changeset/sixty-plums-switch.md
new file mode 100644
index 0000000000..8da07609c6
--- /dev/null
+++ b/.changeset/sixty-plums-switch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Show first scaffolder output text by default
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 8366dcadf8..4c631b86b0 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.test.tsx
@@ -25,7 +25,10 @@ describe('', () => {
it('should render template output', async () => {
const output = {
links: [{ title: 'Link 1', url: 'https://backstage.io/' }],
- text: [{ title: 'Text 1', content: 'Hello, **world**!' }],
+ text: [
+ { title: 'Text 1', content: 'Hello, **world**!' },
+ { title: 'Text 2', content: 'Hello, **mars**!' },
+ ],
};
const { getByRole } = await renderInTestApp(
@@ -37,6 +40,11 @@ describe('', () => {
},
);
+ // first text output default visible
+ expect(getByRole('heading', { level: 2 }).innerHTML).toBe(
+ output.text[0].title,
+ );
+
// test link outputs
for (const link of output.links ?? []) {
expect(
diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx
index a495e4ca9e..c105c5a571 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx
@@ -28,17 +28,18 @@ import { TextOutputs } from './TextOutputs';
export const DefaultTemplateOutputs = (props: {
output?: ScaffolderTaskOutput;
}) => {
- const [textOutputIndex, setTextOutputIndex] = useState();
+ const { output } = props;
+ const [textOutputIndex, setTextOutputIndex] = useState(
+ output?.text?.length ? 0 : undefined,
+ );
const textOutput = useMemo(
() =>
- textOutputIndex !== undefined
- ? props.output?.text?.[textOutputIndex]
- : null,
- [props.output, textOutputIndex],
+ textOutputIndex !== undefined ? output?.text?.[textOutputIndex] : null,
+ [output, textOutputIndex],
);
- if (!props.output) {
+ if (!output) {
return null;
}
@@ -48,11 +49,11 @@ export const DefaultTemplateOutputs = (props: {
-
+
diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx
index 7e64603e92..8f61aa6a30 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx
@@ -47,7 +47,11 @@ export const TextOutputs = (props: {
startIcon={}
component="div"
color="primary"
- onClick={() => setIndex?.(index !== i ? i : undefined)}
+ onClick={() => {
+ if (index !== i) {
+ setIndex?.(i);
+ }
+ }}
variant={index === i ? 'outlined' : undefined}
>
{title}