expand changeset and use accordian for examples

Signed-off-by: Brian Fletcher <brian@roadie.io>

.changeset/metal-nails-punch.md

@@ -2,4 +2,68 @@
 '@backstage/plugin-scaffolder-backend': patch
 ---
 
-Changes to provide examples alongside scaffolder task actions.
+This patch adds changes to provide examples alongside scaffolder task actions.
+
+The `createTemplateAction` function now takes a list of examples e.g.
+
+```typescript
+const actionExamples = [
+  {
+    description: 'Example 1',
+    example: yaml.stringify({
+      steps: [
+        {
+          action: 'test:action',
+          id: 'test',
+          input: {
+            input1: 'value',
+          },
+        },
+      ],
+    }),
+  },
+];
+
+export function createTestAction() {
+  return createTemplateAction({
+      id: 'test:action',
+      examples: [
+          {
+              description: 'Example 1',
+              examples: actionExamples
+          }
+      ],
+      ...,
+  });
+```
+
+These examples can be retrieved later from the api.
+
+```bash
+curl http://localhost:7007/api/scaffolder/v2/actions
+```
+
+```json
+[
+  {
+    "id": "test:action",
+    "examples": [
+      {
+        "description": "Example 1",
+        "example": "steps:\n  - action: test:action\n    id: test\n    input:\n      input1: value\n"
+      }
+    ],
+    "schema": {
+      "input": {
+        "type": "object",
+        "properties": {
+          "input1": {
+            "title": "Input 1",
+            "type": "string"
+          }
+        }
+      }
+    }
+  }
+]
+```

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

@@ -29,9 +29,13 @@ import {
   TableRow,
   Grid,
   makeStyles,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
 } from '@material-ui/core';
 import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
 import classNames from 'classnames';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import { useApi } from '@backstage/core-plugin-api';
 import {
@@ -209,22 +213,28 @@ export const ActionsPage = () => {
           </Box>
         )}
         {action.examples && (
-          <Box pb={2}>
-            <Typography variant="h5">Examples</Typography>
-            <BackstageTable
-              data={action.examples}
-              columns={examplesColumns}
-              options={{
-                search: false,
-                showTitle: false,
-                toolbar: false,
-                loadingType: 'linear',
-                header: true,
-                padding: 'dense',
-                paging: false,
-              }}
-            />
-          </Box>
+          <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography variant="h5">Examples</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box pb={2}>
+                <BackstageTable
+                  data={action.examples}
+                  columns={examplesColumns}
+                  options={{
+                    search: false,
+                    showTitle: false,
+                    toolbar: false,
+                    loadingType: 'linear',
+                    header: true,
+                    padding: 'dense',
+                    paging: false,
+                  }}
+                />
+              </Box>
+            </AccordionDetails>
+          </Accordion>
         )}
       </Box>
     );