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) => {