feat: added some more steps towards rewriting the scaffodler-frontend

Signed-off-by: blam <ben@blam.sh>

app-config.yaml

@@ -283,6 +283,9 @@ catalog:
     # Backstage end-to-end tests of TechDocs
     - type: file
       target: ../../cypress/e2e-fixture.catalog.info.yaml
+
+    - type: url
+      target: https://github.com/benjdlambert/software-templates/blob/main/scaffolder-templates/react-ssr-template/template.yaml
 scaffolder:
   # Use to customize default commit author info used when new components are created
   # defaultAuthor:

packages/app/src/App.tsx

@@ -59,7 +59,7 @@ import { LighthousePage } from '@backstage/plugin-lighthouse';
 import { NewRelicPage } from '@backstage/plugin-newrelic';
 import {
   ScaffolderFieldExtensions,
-  ScaffolderPage,
+  NextScaffolderPage,
   scaffolderPlugin,
 } from '@backstage/plugin-scaffolder';
 import { SearchPage } from '@backstage/plugin-search';
@@ -178,7 +178,7 @@ const routes = (
     <Route
       path="/create"
       element={
-        <ScaffolderPage
+        <NextScaffolderPage
           groups={[
             {
               title: 'Recommended',

plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx

@@ -69,6 +69,7 @@ export const EntitySearchBar = () => {
     <Toolbar className={classes.searchToolbar}>
       <FormControl>
         <Input
+          aria-label="search"
           id="input-with-icon-adornment"
           className={classes.input}
           placeholder="Search"

plugins/scaffolder/src/index.ts

@@ -55,6 +55,7 @@ export {
   RepoUrlPickerFieldExtension,
   ScaffolderPage,
   scaffolderPlugin,
+  NextScaffolderPage,
 } from './plugin';
 export * from './components';
 export type { TaskPageProps } from './components/TaskPage';

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx

@@ -70,4 +70,25 @@ describe('TemplateListPage', () => {
     expect(getByRole('menuitem', { name: 'All' })).toBeInTheDocument();
     expect(getByRole('menuitem', { name: 'Starred' })).toBeInTheDocument();
   });
+
+  it('should render the category picker', () => {
+    const { getByText } = await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [catalogApiRef, {}],
+          [
+            starredEntitiesApiRef,
+            new DefaultStarredEntitiesApi({
+              storageApi: MockStorageApi.create(),
+            }),
+          ],
+          [permissionApiRef, {}],
+        ]}
+      >
+        <TemplateListPage />
+      </TestApiProvider>,
+    );
+
+    expect(getByText('Categories')).toBeInTheDocument();
+  });
 });

plugins/scaffolder/src/plugin.ts

@@ -150,3 +150,11 @@ export const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(
     name: 'EntityTagsPicker',
   }),
 );
+
+export const NextScaffolderPage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    name: 'NextScaffolderPage',
+    component: () => import('./next/Router').then(m => m.Router),
+    mountPoint: rootRouteRef,
+  }),
+);