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 }),
         ),

plugins/catalog/package.json

@@ -33,6 +33,7 @@
     "@backstage/catalog-client": "^0.3.13",
     "@backstage/catalog-model": "^0.8.2",
     "@backstage/core": "^0.7.12",
+    "@backstage/core-plugin-api": "^0.1.1",
     "@backstage/errors": "^0.1.1",
     "@backstage/integration": "^0.5.6",
     "@backstage/integration-react": "^0.1.3",

plugins/catalog/src/components/EntityLayout/EntityLayout.tsx

@@ -29,7 +29,7 @@ import {
   Progress,
   RoutedTabs,
 } from '@backstage/core';
-import { useElementCollection } from '@backstage/core-plugin-api';
+import { useElementFilter } from '@backstage/core-plugin-api';
 import {
   EntityContext,
   EntityRefLinks,
@@ -157,26 +157,28 @@ export const EntityLayout = ({
   const { kind, namespace, name } = useEntityCompoundName();
   const { entity, loading, error } = useContext(EntityContext);
 
-  const routes = useElementCollection(children)
-    .findByComponentData({
-      key: dataKey,
-      withStrictError: 'Child of EntityLayout must be an EntityLayout.Route',
-    })
-    .listElements<SubRoute>() // all nodes, element data, maintain structure or not?
-    .flatMap(({ props }) => {
-      if (props.if && entity && !props.if(entity)) {
-        return [];
-      }
+  const routes = useElementFilter(children, elements =>
+    elements
+      .selectByComponentData({
+        key: dataKey,
+        withStrictError: 'Child of EntityLayout must be an EntityLayout.Route',
+      })
+      .getElements<SubRoute>() // all nodes, element data, maintain structure or not?
+      .flatMap(({ props }) => {
+        if (props.if && entity && !props.if(entity)) {
+          return [];
+        }
 
-      return [
-        {
-          path: props.path,
-          title: props.title,
-          children: props.children,
-          tabProps: props.tabProps,
-        },
-      ];
-    });
+        return [
+          {
+            path: props.path,
+            title: props.title,
+            children: props.children,
+            tabProps: props.tabProps,
+          },
+        ];
+      }),
+  );
 
   const { headerTitle, headerType } = headerProps(
     kind,

plugins/scaffolder/src/components/Router.tsx

@@ -37,10 +37,7 @@ export const Router = () => {
       .selectByComponentData({
         key: FIELD_EXTENSION_WRAPPER_KEY,
       })
-      .select({
-        key: FIELD_EXTENSION_WRAPPER_KEY,
-      })
-      .getComponentData<FieldExtensionOptions>({
+      .findComponentData<FieldExtensionOptions>({
         key: FIELD_EXTENSION_KEY,
       }),
   );

yarn.lock

@@ -1394,6 +1394,7 @@
     "@backstage/catalog-client" "^0.3.13"
     "@backstage/catalog-model" "^0.8.2"
     "@backstage/core" "^0.7.12"
+    "@backstage/core-plugin-api" "^0.1.1"
     "@backstage/errors" "^0.1.1"
     "@backstage/integration" "^0.5.6"
     "@backstage/integration-react" "^0.1.3"