feat: show first scaffolder output text by default

usually there's only one output text that could be shown automatically
when the output is shown.

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.changeset/sixty-plums-switch.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Show first scaffolder output text by default

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

@@ -25,7 +25,10 @@ describe('<DefaultTemplateOutputs />', () => {
   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('<DefaultTemplateOutputs />', () => {
       },
     );
 
+    // 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(

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<number | undefined>();
+  const { output } = props;
+  const [textOutputIndex, setTextOutputIndex] = useState<number | undefined>(
+    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: {
         <Paper>
           <Box padding={2} justifyContent="center" display="flex" gridGap={16}>
             <TextOutputs
-              output={props.output}
+              output={output}
               index={textOutputIndex}
               setIndex={setTextOutputIndex}
             />
-            <LinkOutputs output={props.output} />
+            <LinkOutputs output={output} />
           </Box>
         </Paper>
       </Box>

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

@@ -47,7 +47,11 @@ export const TextOutputs = (props: {
               startIcon={<Icon />}
               component="div"
               color="primary"
-              onClick={() => setIndex?.(index !== i ? i : undefined)}
+              onClick={() => {
+                if (index !== i) {
+                  setIndex?.(i);
+                }
+              }}
               variant={index === i ? 'outlined' : undefined}
             >
               {title}