From df0d2e7d97b9b2ba97e2f58512cdf32c98673f93 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Mon, 7 Feb 2022 17:17:21 +0100
Subject: [PATCH] feat: added some more steps towards rewriting the
 scaffodler-frontend Signed-off-by: blam <ben@blam.sh>

---
 app-config.yaml                               |  3 +++
 packages/app/src/App.tsx                      |  4 ++--
 .../EntitySearchBar/EntitySearchBar.tsx       |  1 +
 plugins/scaffolder/src/index.ts               |  1 +
 .../TemplateListPage.test.tsx                 | 21 +++++++++++++++++++
 plugins/scaffolder/src/plugin.ts              |  8 +++++++
 6 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/app-config.yaml b/app-config.yaml
index b3ca3c7203..597073fede 100644
--- a/app-config.yaml
+++ b/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:
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index befd3274f3..e17e0e80a8 100644
--- a/packages/app/src/App.tsx
+++ b/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',
diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
index fdb07658d0..f1278c6f60 100644
--- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
+++ b/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"
diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts
index bdca2a0952..87e2860fd3 100644
--- a/plugins/scaffolder/src/index.ts
+++ b/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';
diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
index 48ee53cdb7..3cc865b95c 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
+++ b/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();
+  });
 });
diff --git a/plugins/scaffolder/src/plugin.ts b/plugins/scaffolder/src/plugin.ts
index ffa0efaaa0..9b79ea8381 100644
--- a/plugins/scaffolder/src/plugin.ts
+++ b/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,
+  }),
+);