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>

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();