Add an "Other Templates" group for scaffolder/next when groups are passed in.

Also adding a number of options to the dev page to see this change in action.

Signed-off-by: Axel Hecht <axel@pike.org>

.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.

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: <ScaffolderPage />,
   })
+  .addPage({
+    path: '/next-create',
+    title: 'Create (next)',
+    element: <NextScaffolderPage />,
+  })
+  .addPage({
+    path: '/create-groups',
+    title: 'Groups',
+    element: (
+      <ScaffolderPage
+        groups={[
+          {
+            filter: e => 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: (
+      <NextScaffolderPage
+        groups={[
+          {
+            filter: e => e.metadata.tags?.includes('techdocs') || false,
+            title: 'Techdocs',
+          },
+          {
+            filter: e => e.metadata.tags?.includes('react') || false,
+            title: 'React',
+          },
+        ]}
+      />
+    ),
+  })
   .render();

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 (
     <EntityListProvider>
@@ -96,7 +110,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
             </CatalogFilterLayout.Filters>
             <CatalogFilterLayout.Content>
               <TemplateGroups
-                groups={[...groups, defaultGroup]}
+                groups={groups}
                 TemplateCardComponent={TemplateCardComponent}
               />
             </CatalogFilterLayout.Content>