From b44eb68bcb009fe0c193570135cebc67616b572d Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 20 Dec 2022 16:05:24 +0000 Subject: [PATCH 01/10] add examples of scaffolder action inputs to docs Signed-off-by: Brian Fletcher --- .changeset/.changeset/rude-gifts-pay.md | 5 ++ .changeset/metal-nails-punch.md | 5 ++ plugins/scaffolder-backend/api-report.md | 4 ++ .../actions/builtin/catalog/register.ts | 25 +++++++++- .../actions/builtin/catalog/write.ts | 35 +++++++++++++- .../scaffolder/actions/builtin/debug/log.ts | 24 +++++++++- .../src/scaffolder/actions/types.ts | 1 + .../scaffolder-backend/src/service/router.ts | 1 + plugins/scaffolder/api-report.md | 26 +++++++---- .../components/ActionsPage/ActionsPage.tsx | 46 +++++++++++++++++++ plugins/scaffolder/src/index.ts | 2 + plugins/scaffolder/src/types.ts | 24 ++++++++-- 12 files changed, 184 insertions(+), 14 deletions(-) create mode 100644 .changeset/.changeset/rude-gifts-pay.md create mode 100644 .changeset/metal-nails-punch.md diff --git a/.changeset/.changeset/rude-gifts-pay.md b/.changeset/.changeset/rude-gifts-pay.md new file mode 100644 index 0000000000..4440f2ffc1 --- /dev/null +++ b/.changeset/.changeset/rude-gifts-pay.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +Show action example yaml on the scaffolder actions documentation page. diff --git a/.changeset/metal-nails-punch.md b/.changeset/metal-nails-punch.md new file mode 100644 index 0000000000..07265d1343 --- /dev/null +++ b/.changeset/metal-nails-punch.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-backend': patch +--- + +Changes to provide examples alongside scaffolder task actions. diff --git a/plugins/scaffolder-backend/api-report.md b/plugins/scaffolder-backend/api-report.md index 69ef893dc3..73b6177c6a 100644 --- a/plugins/scaffolder-backend/api-report.md +++ b/plugins/scaffolder-backend/api-report.md @@ -843,6 +843,10 @@ export class TaskWorker { export type TemplateAction = { id: string; description?: string; + examples?: { + description: string; + example: string; + }[]; supportsDryRun?: boolean; schema?: { input?: Schema; diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts index 4b9f883706..e31f3355a6 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts @@ -19,6 +19,28 @@ import { ScmIntegrations } from '@backstage/integration'; import { CatalogApi } from '@backstage/catalog-client'; import { stringifyEntityRef } from '@backstage/catalog-model'; import { createTemplateAction } from '../../createTemplateAction'; +import yaml from 'yaml'; + +const id = 'catalog:register'; + +const examples = [ + { + description: 'Register With the catalog', + example: yaml.stringify({ + steps: [ + { + action: id, + id: 'register-with-catalog', + name: 'Register with the catalog', + input: { + catalogInfoUrl: + 'http://github.com/backstage/backstage/blob/master/catalog-info.yaml', + }, + }, + ], + }), + }, +]; /** * Registers entities from a catalog descriptor file in the workspace into the software catalog. @@ -34,9 +56,10 @@ export function createCatalogRegisterAction(options: { | { catalogInfoUrl: string; optional?: boolean } | { repoContentsUrl: string; catalogInfoPath?: string; optional?: boolean } >({ - id: 'catalog:register', + id, description: 'Registers entities from a catalog descriptor file in the workspace into the software catalog.', + examples, schema: { input: { oneOf: [ diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/write.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/write.ts index da758898dc..5257839f2d 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/write.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/write.ts @@ -20,14 +20,47 @@ import * as yaml from 'yaml'; import { Entity } from '@backstage/catalog-model'; import { resolveSafeChildPath } from '@backstage/backend-common'; +const id = 'catalog:write'; + +const examples = [ + { + description: 'Write a catalog yaml file', + example: yaml.stringify({ + steps: [ + { + action: id, + id: 'create-catalog-info-file', + name: 'Create catalog file', + input: { + entity: { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + name: 'test', + annotations: {}, + }, + spec: { + type: 'service', + lifecycle: 'production', + owner: 'default/owner', + }, + }, + }, + }, + ], + }), + }, +]; + /** * Writes a catalog descriptor file containing the provided entity to a path in the workspace. * @public */ export function createCatalogWriteAction() { return createTemplateAction<{ filePath?: string; entity: Entity }>({ - id: 'catalog:write', + id, description: 'Writes the catalog-info.yaml for your template', + examples, schema: { input: { type: 'object', diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts index 99d030b772..79e555eb05 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts @@ -17,6 +17,27 @@ import { readdir, stat } from 'fs-extra'; import { relative, join } from 'path'; import { createTemplateAction } from '../../createTemplateAction'; +import yaml from 'yaml'; + +const id = 'debug:log'; + +const examples = [ + { + description: 'Write a debug message', + example: yaml.stringify({ + steps: [ + { + action: id, + id: 'write-debug-line', + name: 'Write log line', + input: { + message: 'Hello, there', + }, + }, + ], + }), + }, +]; /** * Writes a message into the log or lists all files in the workspace @@ -30,9 +51,10 @@ import { createTemplateAction } from '../../createTemplateAction'; */ export function createDebugLogAction() { return createTemplateAction<{ message?: string; listWorkspace?: boolean }>({ - id: 'debug:log', + id, description: 'Writes a message into the log or lists all files in the workspace.', + examples, schema: { input: { type: 'object', diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/types.ts b/plugins/scaffolder-backend/src/scaffolder/actions/types.ts index 666f7a0d50..0912cc038b 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/types.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/types.ts @@ -66,6 +66,7 @@ export type ActionContext = { export type TemplateAction = { id: string; description?: string; + examples?: { description: string; example: string }[]; supportsDryRun?: boolean; schema?: { input?: Schema; diff --git a/plugins/scaffolder-backend/src/service/router.ts b/plugins/scaffolder-backend/src/service/router.ts index e741961ddc..9ff8d43625 100644 --- a/plugins/scaffolder-backend/src/service/router.ts +++ b/plugins/scaffolder-backend/src/service/router.ts @@ -292,6 +292,7 @@ export async function createRouter( return { id: action.id, description: action.description, + examples: action.examples, schema: action.schema, }; }); diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index 3fe1208ba9..6a029af6bf 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -38,6 +38,23 @@ import { UIOptionsType } from '@rjsf/utils'; import { UiSchema } from '@rjsf/utils'; import { z } from 'zod'; +// @public +export type Action = { + id: string; + description?: string; + schema?: { + input?: JSONSchema7; + output?: JSONSchema7; + }; + examples?: ActionExample[]; +}; + +// @public +export type ActionExample = { + description: string; + example: string; +}; + // @alpha export function createNextScaffolderFieldExtension< TReturnValue = unknown, @@ -188,14 +205,7 @@ export interface LayoutOptions

{ export type LayoutTemplate = FormProps_2['ObjectFieldTemplate']; // @public -export type ListActionsResponse = Array<{ - id: string; - description?: string; - schema?: { - input?: JSONSchema7; - output?: JSONSchema7; - }; -}>; +export type ListActionsResponse = Array; // @public export type LogEvent = { diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 29951d7cb1..7a16337d09 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -27,6 +27,7 @@ import { TableContainer, TableHead, TableRow, + Grid, makeStyles, } from '@material-ui/core'; import { JSONSchema7, JSONSchema7Definition } from 'json-schema'; @@ -39,7 +40,11 @@ import { Header, Page, ErrorPage, + Table as BackstageTable, + TableColumn, + CodeSnippet, } from '@backstage/core-components'; +import { ActionExample } from '../../types'; const useStyles = makeStyles(theme => ({ code: { @@ -67,6 +72,29 @@ const useStyles = makeStyles(theme => ({ }, })); +const examplesColumns: TableColumn[] = [ + { + title: 'Description', + field: 'description', + width: '20%', + }, + { + title: 'Example', + render: ({ example }) => { + return ( + + + + ); + }, + }, +]; + export const ActionsPage = () => { const api = useApi(scaffolderApiRef); const classes = useStyles(); @@ -180,6 +208,24 @@ export const ActionsPage = () => { {renderTable(action.schema.output)} )} + {action.examples && ( + + Examples + + + )} ); }); diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts index 1ed1346176..ae994191ce 100644 --- a/plugins/scaffolder/src/index.ts +++ b/plugins/scaffolder/src/index.ts @@ -22,6 +22,8 @@ export { scaffolderApiRef, ScaffolderClient } from './api'; export type { + Action, + ActionExample, ListActionsResponse, LogEvent, ScaffolderApi, diff --git a/plugins/scaffolder/src/types.ts b/plugins/scaffolder/src/types.ts index acb0f0e114..422661b896 100644 --- a/plugins/scaffolder/src/types.ts +++ b/plugins/scaffolder/src/types.ts @@ -43,18 +43,36 @@ export type ScaffolderTask = { }; /** - * The response shape for the `listActions` call to the `scaffolder-backend` + * A single action example * * @public */ -export type ListActionsResponse = Array<{ +export type ActionExample = { + description: string; + example: string; +}; + +/** + * The response shape for a single action in the `listActions` call to the `scaffolder-backend` + * + * @public + */ +export type Action = { id: string; description?: string; schema?: { input?: JSONSchema7; output?: JSONSchema7; }; -}>; + examples?: ActionExample[]; +}; + +/** + * The response shape for the `listActions` call to the `scaffolder-backend` + * + * @public + */ +export type ListActionsResponse = Array; /** @public */ export type ScaffolderOutputLink = { From 81c94a919f960a5939e6b5bb5f9356fc5df4e90e Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 20 Dec 2022 16:30:17 +0000 Subject: [PATCH 02/10] add a test for the example Signed-off-by: Brian Fletcher --- .../actions/builtin/debug/log.test.ts | 40 +++++++++++++++++++ .../scaffolder/actions/builtin/debug/log.ts | 17 +++++++- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.test.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.test.ts index c53caff018..6b7ad8816f 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.test.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.test.ts @@ -20,6 +20,7 @@ import os from 'os'; import { Writable } from 'stream'; import { createDebugLogAction } from './log'; import { join } from 'path'; +import yaml from 'yaml'; describe('debug:log', () => { const logStream = { @@ -91,4 +92,43 @@ describe('debug:log', () => { expect.stringContaining('Hello Backstage!'), ); }); + + it('should log the workspace content from an example, if active', async () => { + const example = action.examples?.find( + sample => sample.description === 'List the workspace directory', + )?.example as string; + expect(typeof example).toEqual('string'); + const context = { + ...mockContext, + ...yaml.parse(example).steps[0], + }; + + await action.handler(context); + + expect(logStream.write).toHaveBeenCalledTimes(1); + expect(logStream.write).toHaveBeenCalledWith( + expect.stringContaining('README.md'), + ); + expect(logStream.write).toHaveBeenCalledWith( + expect.stringContaining(join('a-directory', 'index.md')), + ); + }); + + it('should log message from an example', async () => { + const example = action.examples?.find( + sample => sample.description === 'Write a debug message', + )?.example as string; + + const context = { + ...mockContext, + ...yaml.parse(example).steps[0], + }; + + await action.handler(context); + + expect(logStream.write).toHaveBeenCalledTimes(1); + expect(logStream.write).toHaveBeenCalledWith( + expect.stringContaining('Hello Backstage!'), + ); + }); }); diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts index 79e555eb05..fe16e4759c 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts @@ -31,7 +31,22 @@ const examples = [ id: 'write-debug-line', name: 'Write log line', input: { - message: 'Hello, there', + message: 'Hello Backstage!', + }, + }, + ], + }), + }, + { + description: 'List the workspace directory', + example: yaml.stringify({ + steps: [ + { + action: id, + id: 'write-debug-line', + name: 'Write log line', + input: { + listWorkspace: true, }, }, ], From afcf23243620829136766c7e9ea10304c7aafc71 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 20 Dec 2022 16:43:19 +0000 Subject: [PATCH 03/10] fix casing Signed-off-by: Brian Fletcher --- .../src/scaffolder/actions/builtin/catalog/register.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts index e31f3355a6..48fec3db03 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/catalog/register.ts @@ -25,7 +25,7 @@ const id = 'catalog:register'; const examples = [ { - description: 'Register With the catalog', + description: 'Register with the catalog', example: yaml.stringify({ steps: [ { From 6977ed06d79a401f5741a567969864b1952154af Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 22 Dec 2022 09:02:33 +0000 Subject: [PATCH 04/10] expand changeset and use accordian for examples Signed-off-by: Brian Fletcher --- .changeset/metal-nails-punch.md | 66 ++++++++++++++++++- .../components/ActionsPage/ActionsPage.tsx | 42 +++++++----- 2 files changed, 91 insertions(+), 17 deletions(-) diff --git a/.changeset/metal-nails-punch.md b/.changeset/metal-nails-punch.md index 07265d1343..a34c340c0a 100644 --- a/.changeset/metal-nails-punch.md +++ b/.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" + } + } + } + } + } +] +``` diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 7a16337d09..234ba1951f 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/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 = () => { )} {action.examples && ( - - Examples - - + + }> + Examples + + + + + + + )} ); From 489935d625b590b350a94d7c7695cac7725db765 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 3 Jan 2023 21:12:32 +0000 Subject: [PATCH 05/10] addressing code review comments Signed-off-by: Brian Fletcher --- .changeset/{.changeset => }/rude-gifts-pay.md | 0 .../scaffolder/actions/builtin/debug/log.ts | 6 +- .../components/ActionsPage/ActionsPage.tsx | 64 ++++++++----------- 3 files changed, 31 insertions(+), 39 deletions(-) rename .changeset/{.changeset => }/rude-gifts-pay.md (100%) diff --git a/.changeset/.changeset/rude-gifts-pay.md b/.changeset/rude-gifts-pay.md similarity index 100% rename from .changeset/.changeset/rude-gifts-pay.md rename to .changeset/rude-gifts-pay.md diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts index fe16e4759c..3863623563 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts @@ -29,7 +29,7 @@ const examples = [ { action: id, id: 'write-debug-line', - name: 'Write log line', + name: 'Write "Hello Backstage!" log line', input: { message: 'Hello Backstage!', }, @@ -43,8 +43,8 @@ const examples = [ steps: [ { action: id, - id: 'write-debug-line', - name: 'Write log line', + id: 'write-workspace-directory', + name: 'List the workspace directory', input: { listWorkspace: true, }, diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 234ba1951f..c079ee29b5 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -44,7 +44,6 @@ import { Header, Page, ErrorPage, - Table as BackstageTable, TableColumn, CodeSnippet, } from '@backstage/core-components'; @@ -76,28 +75,33 @@ const useStyles = makeStyles(theme => ({ }, })); -const examplesColumns: TableColumn[] = [ - { - title: 'Description', - field: 'description', - width: '20%', - }, - { - title: 'Example', - render: ({ example }) => { - return ( - - - - ); - }, - }, -]; +const ExamplesTable = (props: { examples: ActionExample[] }) => { + return ( + + {props.examples.map(example => { + return ( + + + + {example.description} + + + + + + + + + ); + })} + + ); +}; export const ActionsPage = () => { const api = useApi(scaffolderApiRef); @@ -219,19 +223,7 @@ export const ActionsPage = () => { - + From 75d36681830483acecfea191d075ee8f4941bd77 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 3 Jan 2023 21:42:57 +0000 Subject: [PATCH 06/10] fixes import Signed-off-by: Brian Fletcher --- plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index c079ee29b5..7d0137c9bc 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -44,7 +44,6 @@ import { Header, Page, ErrorPage, - TableColumn, CodeSnippet, } from '@backstage/core-components'; import { ActionExample } from '../../types'; From a00234fef7271555466907f2f7b947ba1668715d Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 5 Jan 2023 14:12:17 +0000 Subject: [PATCH 07/10] switch language to yaml in code snippet Signed-off-by: Brian Fletcher --- plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 80ac519ca6..035f44db8c 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -92,7 +92,7 @@ const ExamplesTable = (props: { examples: ActionExample[] }) => { text={example.example} showLineNumbers showCopyCodeButton - language="JavaScript" + language="yaml" /> From af22bbb64743ca84718fc25b828a36bddb0ee01e Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 5 Jan 2023 14:20:14 +0000 Subject: [PATCH 08/10] remove container within container Signed-off-by: Brian Fletcher --- plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 035f44db8c..d727923d68 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -80,7 +80,7 @@ const ExamplesTable = (props: { examples: ActionExample[] }) => { {props.examples.map(example => { return ( - + <> {example.description} @@ -96,7 +96,7 @@ const ExamplesTable = (props: { examples: ActionExample[] }) => { /> - + ); })} From c95291d14c12ad10ffd7910ad931a2663d147ffb Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Mon, 9 Jan 2023 16:02:57 +0000 Subject: [PATCH 09/10] address review comments Signed-off-by: Brian Fletcher --- .../src/components/ActionsPage/ActionsPage.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index d727923d68..34cf58441f 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import React, { Fragment } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { scaffolderApiRef } from '../../api'; import { @@ -80,13 +80,13 @@ const ExamplesTable = (props: { examples: ActionExample[] }) => { {props.examples.map(example => { return ( - <> - + + {example.description} - + { /> - + ); })} From 90f4eb12d59efad97c91e9c906c9937bb421b87b Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Tue, 10 Jan 2023 08:05:48 +0000 Subject: [PATCH 10/10] use index for key in react fragment Signed-off-by: Brian Fletcher --- plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 34cf58441f..0c16d0bd03 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -78,9 +78,9 @@ const useStyles = makeStyles(theme => ({ const ExamplesTable = (props: { examples: ActionExample[] }) => { return ( - {props.examples.map(example => { + {props.examples.map((example, index) => { return ( - + {example.description}