From f3bcd522168154d9c345b7e9ad5c45af88465e10 Mon Sep 17 00:00:00 2001 From: jrusso1020 Date: Sat, 27 Nov 2021 12:31:59 -0500 Subject: [PATCH] rename swimlane -> group Signed-off-by: jrusso1020 --- .changeset/witty-cats-tell.md | 14 ++++++++++- .../software-templates/configuration.md | 15 ++++++------ packages/app/src/App.tsx | 2 +- plugins/scaffolder/api-report.md | 8 +++---- plugins/scaffolder/src/components/Router.tsx | 9 +++---- .../ScaffolderPage/ScaffolderPage.tsx | 24 +++++++++---------- .../components/TemplateList/TemplateList.tsx | 14 +++++------ 7 files changed, 46 insertions(+), 40 deletions(-) diff --git a/.changeset/witty-cats-tell.md b/.changeset/witty-cats-tell.md index 55879b5fb5..82e33bc0a6 100644 --- a/.changeset/witty-cats-tell.md +++ b/.changeset/witty-cats-tell.md @@ -2,4 +2,16 @@ '@backstage/plugin-scaffolder': patch --- -Add swim lane filtering to the scaffolder page so that individuals can surface specific templates to end users ahead of others, or group templates together +Add group filtering to the scaffolder page so that individuals can surface specific templates to end users ahead of others, or group templates together. This can be accomplished by passing in a `groups` prop to the `ScaffolderPage` + +``` + + entity?.metadata?.tags?.includes('recommended') ?? false, + }, + ]} +/> +``` diff --git a/docs/features/software-templates/configuration.md b/docs/features/software-templates/configuration.md index 498bb41411..b57bb96818 100644 --- a/docs/features/software-templates/configuration.md +++ b/docs/features/software-templates/configuration.md @@ -58,12 +58,12 @@ RUN pip3 install cookiecutter Once you have more than a few software templates you may want to customize your `ScaffolderPage` by grouping and surfacing certain templates together. You can -accomplish this by creating `swimLanes` and passing them to your -`ScaffolderPage` like below +accomplish this by creating `groups` and passing them to your `ScaffolderPage` +like below ``` @@ -74,10 +74,9 @@ accomplish this by creating `swimLanes` and passing them to your ``` This code will group all templates with the 'recommended' tag together at the -top of the page above any other templates not filtered by this swimlane or -others. +top of the page above any other templates not filtered by this group or others. -You can also further customize swimlanes by passing in a `titleComponent` -instead of a `title` which will be a component to use as the header instead of -just the default `ContentHeader` with the `title` set as it's value. +You can also further customize groups by passing in a `titleComponent` instead +of a `title` which will be a component to use as the header instead of just the +default `ContentHeader` with the `title` set as it's value. ![Grouped Templates](../../assets/software-templates/grouped-templates.png) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 4e093107e2..fecde616ca 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -179,7 +179,7 @@ const routes = ( path="/create" element={ diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index 1ebeff2ff8..73fd8fae72 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -214,14 +214,14 @@ export const ScaffolderFieldExtensions: React_2.ComponentType; // @public (undocumented) export const ScaffolderPage: ({ TemplateCardComponent, - extraSwimlanes, + groups, }: { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2; }> | undefined; - extraSwimlanes?: + groups?: | { title?: string | undefined; titleComponent?: ReactNode; @@ -249,7 +249,7 @@ export { scaffolderPlugin }; // @public (undocumented) export const TemplateList: ({ TemplateCardComponent, - swimlane, + group, }: TemplateListProps) => JSX.Element | null; // Warning: (ae-missing-release-tag) "TemplateListProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -261,7 +261,7 @@ export type TemplateListProps = { template: TemplateEntityV1beta2; }> | undefined; - swimlane?: { + group?: { title?: string; titleComponent?: React_2.ReactNode; filter: (entity: Entity) => boolean; diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index 7d12b02c38..e667c676f2 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -34,17 +34,14 @@ type RouterProps = { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2 }> | undefined; - extraSwimlanes?: Array<{ + groups?: Array<{ title?: string; titleComponent?: React.ReactNode; filter: (entity: Entity) => boolean; }>; }; -export const Router = ({ - TemplateCardComponent, - extraSwimlanes, -}: RouterProps) => { +export const Router = ({ TemplateCardComponent, groups }: RouterProps) => { const outlet = useOutlet(); const customFieldExtensions = useElementFilter(outlet, elements => @@ -74,7 +71,7 @@ export const Router = ({ element={ } /> diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index cfb12e4e53..aa45e56f5e 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -51,7 +51,7 @@ export type ScaffolderPageProps = { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2 }> | undefined; - extraSwimlanes?: Array<{ + groups?: Array<{ title?: string; titleComponent?: React.ReactNode; filter: (entity: Entity) => boolean; @@ -60,16 +60,14 @@ export type ScaffolderPageProps = { export const ScaffolderPageContents = ({ TemplateCardComponent, - extraSwimlanes, + groups, }: ScaffolderPageProps) => { const styles = useStyles(); const registerComponentLink = useRouteRef(registerComponentRouteRef); - const otherTemplatesSwimlane = { - title: extraSwimlanes ? 'Other Templates' : 'Templates', + const otherTemplatesGroup = { + title: groups ? 'Other Templates' : 'Templates', filter: (entity: Entity) => { - const filtered = (extraSwimlanes ?? []).map(swimlane => - swimlane.filter(entity), - ); + const filtered = (groups ?? []).map(group => group.filter(entity)); return !filtered.some(result => result === true); }, }; @@ -110,16 +108,16 @@ export const ScaffolderPageContents = ({
- {extraSwimlanes && - extraSwimlanes.map(swimlane => ( + {groups && + groups.map(group => ( ))}
@@ -130,12 +128,12 @@ export const ScaffolderPageContents = ({ export const ScaffolderPage = ({ TemplateCardComponent, - extraSwimlanes, + groups, }: ScaffolderPageProps) => ( ); diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx index a30655d6e8..9b66a0a9b6 100644 --- a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx +++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx @@ -35,7 +35,7 @@ export type TemplateListProps = { TemplateCardComponent?: | ComponentType<{ template: TemplateEntityV1beta2 }> | undefined; - swimlane?: { + group?: { title?: string; titleComponent?: React.ReactNode; filter: (entity: Entity) => boolean; @@ -44,20 +44,20 @@ export type TemplateListProps = { export const TemplateList = ({ TemplateCardComponent, - swimlane, + group, }: TemplateListProps) => { const { loading, error, entities } = useEntityListProvider(); const Card = TemplateCardComponent || TemplateCard; - const maybeFilteredEntities = swimlane - ? entities.filter(e => swimlane.filter(e)) + const maybeFilteredEntities = group + ? entities.filter(e => group.filter(e)) : entities; - const title = swimlane ? ( - swimlane.titleComponent || + const title = group ? ( + group.titleComponent || ) : ( ); - if (swimlane && maybeFilteredEntities.length === 0) { + if (group && maybeFilteredEntities.length === 0) { return null; } return (