diff --git a/.changeset/odd-waves-rescue.md b/.changeset/odd-waves-rescue.md new file mode 100644 index 0000000000..e435bc9962 --- /dev/null +++ b/.changeset/odd-waves-rescue.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +Create an "Other Templates" group when groups are given to scaffolder/next. diff --git a/plugins/scaffolder/dev/index.tsx b/plugins/scaffolder/dev/index.tsx index 83496c719d..68c59eec2d 100644 --- a/plugins/scaffolder/dev/index.tsx +++ b/plugins/scaffolder/dev/index.tsx @@ -24,7 +24,7 @@ import { } from '@backstage/plugin-catalog-react'; import React from 'react'; import { scaffolderApiRef, ScaffolderClient } from '../src'; -import { ScaffolderPage } from '../src/plugin'; +import { NextScaffolderPage, ScaffolderPage } from '../src/plugin'; import { discoveryApiRef, fetchApiRef, @@ -68,4 +68,45 @@ createDevApp() title: 'Create', element: , }) + .addPage({ + path: '/next-create', + title: 'Create (next)', + element: , + }) + .addPage({ + path: '/create-groups', + title: 'Groups', + element: ( + e.metadata.tags?.includes('techdocs') || false, + title: 'Techdocs', + }, + { + filter: e => e.metadata.tags?.includes('react') || false, + title: 'React', + }, + ]} + /> + ), + }) + .addPage({ + path: '/next-create-groups', + title: 'Groups (next)', + element: ( + e.metadata.tags?.includes('techdocs') || false, + title: 'Techdocs', + }, + { + filter: e => e.metadata.tags?.includes('react') || false, + title: 'React', + }, + ]} + /> + ), + }) .render(); diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index b701ceb3c4..bddc15a61b 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx @@ -52,13 +52,27 @@ export type TemplateListPageProps = { }; const defaultGroup: TemplateGroupFilter = { - title: 'All Templates', + title: 'Templates', filter: () => true, }; +const createGroupsWithOther = ( + groups: TemplateGroupFilter[], +): TemplateGroupFilter[] => [ + ...groups, + { + title: 'Other Templates', + filter: e => ![...groups].some(({ filter }) => filter(e)), + }, +]; + export const TemplateListPage = (props: TemplateListPageProps) => { const registerComponentLink = useRouteRef(registerComponentRouteRef); - const { TemplateCardComponent, groups = [] } = props; + const { TemplateCardComponent, groups: givenGroups = [] } = props; + + const groups = givenGroups.length + ? createGroupsWithOther(givenGroups) + : [defaultGroup]; return ( @@ -96,7 +110,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {