chore: reworking some thigns

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

packages/core-app-api/src/routing/FlatRoutes.tsx

@@ -16,7 +16,7 @@
 
 import React, { ReactNode } from 'react';
 import { useRoutes } from 'react-router-dom';
-import { useApp, useElementCollection } from '@backstage/core-plugin-api';
+import { useApp, useElementFilter } from '@backstage/core-plugin-api';
 
 type RouteObject = {
   path: string;
@@ -31,39 +31,41 @@ type FlatRoutesProps = {
 export const FlatRoutes = (props: FlatRoutesProps): JSX.Element | null => {
   const app = useApp();
   const { NotFoundErrorPage } = app.getComponents();
-  const routes = useElementCollection(props.children)
-    .listElements<{ path?: string; children: ReactNode }>()
-    .flatMap<RouteObject>(child => {
-      let path = child.props.path;
+  const routes = useElementFilter(props.children, elements =>
+    elements
+      .getElements<{ path?: string; children: ReactNode }>()
+      .flatMap<RouteObject>(child => {
+        let path = child.props.path;
 
-      // TODO(Rugvip): Work around plugins registering empty paths, remove once deprecated routes are gone
-      if (path === '') {
-        return [];
-      }
-      path = path?.replace(/\/\*$/, '') ?? '/';
+        // TODO(Rugvip): Work around plugins registering empty paths, remove once deprecated routes are gone
+        if (path === '') {
+          return [];
+        }
+        path = path?.replace(/\/\*$/, '') ?? '/';
 
-      return [
-        {
-          path,
-          element: child,
-          children: child.props.children
-            ? [
-                {
-                  path: '/*',
-                  element: child.props.children,
-                },
-              ]
-            : undefined,
-        },
-      ];
-    })
-    // Routes are sorted to work around a bug where prefixes are unexpectedly matched
-    .sort((a, b) => b.path.localeCompare(a.path))
-    // We make sure all routes have '/*' appended, except '/'
-    .map(obj => {
-      obj.path = obj.path === '/' ? '/' : `${obj.path}/*`;
-      return obj;
-    });
+        return [
+          {
+            path,
+            element: child,
+            children: child.props.children
+              ? [
+                  {
+                    path: '/*',
+                    element: child.props.children,
+                  },
+                ]
+              : undefined,
+          },
+        ];
+      })
+      // Routes are sorted to work around a bug where prefixes are unexpectedly matched
+      .sort((a, b) => b.path.localeCompare(a.path))
+      // We make sure all routes have '/*' appended, except '/'
+      .map(obj => {
+        obj.path = obj.path === '/' ? '/' : `${obj.path}/*`;
+        return obj;
+      }),
+  );
 
   // TODO(Rugvip): Possibly add a way to skip this, like a noNotFoundPage prop
   routes.push({

packages/core-plugin-api/src/extensions/useElementFilter.test.tsx

@@ -220,7 +220,7 @@ describe('useElementFilter', () => {
     expect(result.current.length).toBe(2);
   });
 
-  it('should reject with', () => {
+  it('should reject when strict mode is enabled with the correct string', () => {
     const tree = (
       <MockComponent>
         <h1>Hello</h1>
@@ -234,7 +234,6 @@ describe('useElementFilter', () => {
             .selectByComponentData({
               key: WRAPPING_COMPONENT_KEY,
               withStrictError: 'Could not find component',
-              // errorIfNotFullMatch?
             })
             .findComponentData({ key: INNER_COMPONENT_KEY }),
         ),