From 359a118902e6a652f2a2343acfd9cc852d3cf972 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 11 Jun 2021 10:33:10 +0200 Subject: [PATCH] chore: reworking some thigns Signed-off-by: blam --- .../core-app-api/src/routing/FlatRoutes.tsx | 66 ++++++++++--------- .../src/extensions/useElementFilter.test.tsx | 3 +- plugins/catalog/package.json | 1 + .../components/EntityLayout/EntityLayout.tsx | 42 ++++++------ plugins/scaffolder/src/components/Router.tsx | 5 +- yarn.lock | 1 + 6 files changed, 60 insertions(+), 58 deletions(-) diff --git a/packages/core-app-api/src/routing/FlatRoutes.tsx b/packages/core-app-api/src/routing/FlatRoutes.tsx index c185373dc1..ad1f764e6c 100644 --- a/packages/core-app-api/src/routing/FlatRoutes.tsx +++ b/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(child => { - let path = child.props.path; + const routes = useElementFilter(props.children, elements => + elements + .getElements<{ path?: string; children: ReactNode }>() + .flatMap(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({ diff --git a/packages/core-plugin-api/src/extensions/useElementFilter.test.tsx b/packages/core-plugin-api/src/extensions/useElementFilter.test.tsx index 4725de66c2..23a7fd77a7 100644 --- a/packages/core-plugin-api/src/extensions/useElementFilter.test.tsx +++ b/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 = (

Hello

@@ -234,7 +234,6 @@ describe('useElementFilter', () => { .selectByComponentData({ key: WRAPPING_COMPONENT_KEY, withStrictError: 'Could not find component', - // errorIfNotFullMatch? }) .findComponentData({ key: INNER_COMPONENT_KEY }), ), diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index ce72d95103..56299462c6 100644 --- a/plugins/catalog/package.json +++ b/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", diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index 7cd4ab3dd1..aceb1da6f2 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/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() // 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() // 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, diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index e72b9a9a1e..ef0dd4082e 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/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({ + .findComponentData({ key: FIELD_EXTENSION_KEY, }), ); diff --git a/yarn.lock b/yarn.lock index 4bf6d53619..8c7cf9ee8f 100644 --- a/yarn.lock +++ b/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"