Merge pull request #15163 from RoadieHQ/show-array-types

show array of types on installed actions page

.changeset/tiny-kangaroos-speak.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Show input type array correctly on installed actions page.

plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx

@@ -115,6 +115,48 @@ describe('TemplatePage', () => {
     expect(rendered.getByText('Test output')).toBeInTheDocument();
   });
 
+  it('renders action with multipel input types', async () => {
+    scaffolderApiMock.listActions.mockResolvedValue([
+      {
+        id: 'test',
+        description: 'example description',
+        schema: {
+          input: {
+            type: 'object',
+            required: ['foobar'],
+            properties: {
+              foobar: {
+                title: 'Test title',
+                type: ['array', 'number'],
+              },
+            },
+          },
+          output: {
+            type: 'object',
+            properties: {
+              buzz: {
+                title: 'Test output',
+                type: 'string',
+              },
+            },
+          },
+        },
+      },
+    ]);
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <ActionsPage />
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/create/actions': rootRouteRef,
+        },
+      },
+    );
+    expect(rendered.getByText('array')).toBeInTheDocument();
+    expect(rendered.getByText('number')).toBeInTheDocument();
+  });
+
   it('renders action with oneOf input', async () => {
     scaffolderApiMock.listActions.mockResolvedValue([
       {

plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx

@@ -22,6 +22,7 @@ import {
   Table,
   TableBody,
   Box,
+  Chip,
   TableCell,
   TableContainer,
   TableHead,
@@ -107,7 +108,11 @@ export const ActionsPage = () => {
           <TableCell>{props.title}</TableCell>
           <TableCell>{props.description}</TableCell>
           <TableCell>
-            <span className={classes.code}>{props.type}</span>
+            <>
+              {[props.type].flat().map(type => (
+                <Chip label={type} />
+              ))}
+            </>
           </TableCell>
         </TableRow>
       );