+ HELLO
+
+ }>
+
+
+
+
+
+
+
+
+ );
+
+ const { routing } = traverseElementTree({
+ root,
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ expect(sortedEntries(routing.paths)).toEqual([
+ [ref1, 'foo'],
+ [ref2, 'foo'],
+ [ref3, 'bar'],
+ [ref4, 'baz'],
+ [ref5, 'baz'],
+ ]);
+ expect(sortedEntries(routing.parents)).toEqual([
+ [ref1, undefined],
+ [ref2, undefined],
+ [ref3, undefined],
+ [ref4, ref3],
+ [ref5, ref3],
+ ]);
+ expect(routing.objects).toEqual([
+ routeObj('foo', [ref1, ref2], [], 'gathered'),
+ routeObj(
+ 'bar',
+ [ref3],
+ [routeObj('baz', [ref4, ref5], [], 'gathered')],
+ undefined,
+ plugin,
+ ),
+ ]);
+ });
+
+ it('should use the route aggregator but stop when encountering explicit path', () => {
+ const root = (
+
+
+ }>
+
+
+
+ }>
+ } />
+
+
+
+
+
+
+
+
+ );
+
+ const { routing } = traverseElementTree({
+ root,
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ expect(sortedEntries(routing.paths)).toEqual([
+ [ref1, 'foo'],
+ [ref2, 'bar'],
+ [ref3, 'baz'],
+ [ref4, 'blop'],
+ [ref5, 'bar'],
+ ]);
+ expect(sortedEntries(routing.parents)).toEqual([
+ [ref1, undefined],
+ [ref2, ref1],
+ [ref3, ref2],
+ [ref4, ref3],
+ [ref5, ref1],
+ ]);
+ expect(routing.objects).toEqual([
+ routeObj(
+ 'foo',
+ [ref1],
+ [
+ routeObj(
+ 'bar',
+ [ref2, ref5],
+ [
+ routeObj(
+ 'baz',
+ [ref3],
+ [routeObj('blop', [ref4], undefined, undefined, plugin)],
+ undefined,
+ plugin,
+ ),
+ ],
+ 'gathered',
+ ),
+ ],
+ undefined,
+ plugin,
+ ),
+ ]);
+ });
+
+ it('should throw when you provide path property on an extension', () => {
+ expect(() => {
+ traverseElementTree({
+ root: ,
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ }).toThrow(
+ 'Path property may not be set directly on a routable extension "Extension(Extension1)"',
+ );
+ });
+
+ it('should throw when element prop is not a string', () => {
+ const Div = 'div' as unknown as ComponentType<{ path: boolean }>;
+ expect(() => {
+ traverseElementTree({
+ root: ,
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ }).toThrow('Element path must be a string at "div"');
+ });
+
+ it('should throw when the mount point gatherers have an element prop', () => {
+ const AnyAggregationComponent = AggregationComponent as any;
+ expect(() => {
+ traverseElementTree({
+ root: } />,
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ }).toThrow(
+ 'Mount point gatherers may not have an element prop "AggregationComponent"',
+ );
+ });
+
+ it('should throw elements within element prop contains a path', () => {
+ expect(() => {
+ traverseElementTree({
+ root: } />,
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ }).toThrow(
+ 'Elements within the element prop tree may not have paths, found "bar"',
+ );
+ });
+
+ it('should throw when a routable extension does not have a path set', () => {
+ expect(() => {
+ traverseElementTree({
+ root: ,
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ }).toThrow(
+ 'Routable extension "Extension(Extension3)" with mount point "routeRef{type=absolute,id=ref3}" must be assigned a path',
+ );
+ });
+
+ it('should throw when Route elements contain multiple routable extensions', () => {
+ expect(() => {
+ traverseElementTree({
+ root: (
+
+
+
+
+ }
+ />
+ ),
+ discoverers: [childDiscoverer, routeElementDiscoverer],
+ collectors: {
+ routing: routingV2Collector,
+ },
+ });
+ }).toThrow(
+ 'Route element with path "foo" may not contain multiple routable extensions',
+ );
+ });
+});
diff --git a/packages/core-app-api/src/routing/collectors.tsx b/packages/core-app-api/src/routing/collectors.tsx
index fcd954201a..e5d71f5117 100644
--- a/packages/core-app-api/src/routing/collectors.tsx
+++ b/packages/core-app-api/src/routing/collectors.tsx
@@ -19,7 +19,7 @@ import {
getComponentData,
BackstagePlugin,
} from '@backstage/core-plugin-api';
-import { isValidElement } from 'react';
+import { isValidElement, ReactNode, Children } from 'react';
import { BackstageRouteObject } from './types';
import { createCollector } from '../extensions/traversal';
import { FeatureFlagged, FeatureFlaggedProps } from './FeatureFlagged';
@@ -30,11 +30,179 @@ import { FeatureFlagged, FeatureFlaggedProps } from './FeatureFlagged';
// mount points that are as deep in the routing tree as possible.
export const MATCH_ALL_ROUTE: BackstageRouteObject = {
caseSensitive: false,
- path: '/*',
+ path: '*',
element: 'match-all', // These elements aren't used, so we add in a bit of debug information
routeRefs: new Set(),
};
+function stringifyNode(node: ReactNode): string {
+ const anyNode = node as { type?: { displayName?: string; name?: string } };
+ if (anyNode?.type) {
+ return (
+ anyNode.type.displayName ?? anyNode.type.name ?? String(anyNode.type)
+ );
+ }
+ return String(anyNode);
+}
+
+interface RoutingV2CollectorContext {
+ routeRef?: RouteRef;
+ gatherPath?: string;
+ gatherRouteRef?: RouteRef;
+ obj?: BackstageRouteObject;
+ isElementAncestor?: boolean;
+}
+
+function collectSubTree(
+ node: ReactNode,
+ entries = new Array<{ routeRef: RouteRef; plugin?: BackstagePlugin }>(),
+) {
+ Children.forEach(node, element => {
+ if (!isValidElement(element)) {
+ return;
+ }
+
+ if (element.props.path) {
+ throw new Error(
+ `Elements within the element prop tree may not have paths, found "${element.props.path}"`,
+ );
+ }
+
+ const routeRef = getComponentData(element, 'core.mountPoint');
+ if (routeRef) {
+ const plugin = getComponentData(element, 'core.plugin');
+ entries.push({ routeRef, plugin });
+ }
+
+ collectSubTree(element.props.children, entries);
+ });
+
+ return entries;
+}
+
+export const routingV2Collector = createCollector(
+ () => ({
+ paths: new Map(),
+ parents: new Map(),
+ objects: new Array(),
+ }),
+ (acc, node, parent, ctx?: RoutingV2CollectorContext) => {
+ const pathProp: unknown = node.props?.path;
+
+ const mountPoint = getComponentData(node, 'core.mountPoint');
+ if (mountPoint && pathProp) {
+ throw new Error(
+ `Path property may not be set directly on a routable extension "${stringifyNode(
+ node,
+ )}"`,
+ );
+ }
+
+ // If we're in an element prop, ignore everything
+ if (ctx?.isElementAncestor) {
+ return ctx;
+ }
+ // Start ignoring everything if we enter an element prop
+ if (parent?.props.element === node) {
+ return { ...ctx, isElementAncestor: true };
+ }
+
+ const parentChildren = ctx?.obj?.children ?? acc.objects;
+
+ if (pathProp !== undefined) {
+ if (typeof pathProp !== 'string') {
+ throw new Error(
+ `Element path must be a string at "${stringifyNode(node)}"`,
+ );
+ }
+
+ const path = pathProp.startsWith('/') ? pathProp.slice(1) : pathProp;
+
+ const elementProp = node.props.element;
+
+ if (getComponentData(node, 'core.gatherMountPoints')) {
+ if (elementProp) {
+ throw new Error(
+ `Mount point gatherers may not have an element prop "${stringifyNode(
+ node,
+ )}"`,
+ );
+ }
+
+ const newObj = {
+ path,
+ element: 'gathered',
+ routeRefs: new Set(),
+ caseSensitive: Boolean(node.props?.caseSensitive),
+ children: [MATCH_ALL_ROUTE],
+ plugin: undefined,
+ };
+ parentChildren.push(newObj);
+
+ return {
+ obj: newObj,
+ gatherPath: path,
+ routeRef: ctx?.routeRef,
+ gatherRouteRef: ctx?.routeRef,
+ };
+ }
+
+ if (elementProp) {
+ const [extension, ...others] = collectSubTree(elementProp);
+ if (others.length > 0) {
+ throw new Error(
+ `Route element with path "${pathProp}" may not contain multiple routable extensions`,
+ );
+ }
+ if (!extension) {
+ return ctx;
+ }
+ const { routeRef, plugin } = extension;
+
+ const newObj = {
+ path,
+ element: 'mounted',
+ routeRefs: new Set([routeRef]),
+ caseSensitive: Boolean(node.props?.caseSensitive),
+ children: [MATCH_ALL_ROUTE],
+ plugin,
+ };
+ parentChildren.push(newObj);
+ acc.paths.set(routeRef, path);
+ acc.parents.set(routeRef, ctx?.routeRef);
+
+ return {
+ obj: newObj,
+ routeRef: routeRef ?? ctx?.routeRef,
+ gatherPath: path,
+ gatherRouteRef: ctx?.gatherRouteRef,
+ };
+ }
+ }
+
+ if (mountPoint) {
+ if (!ctx?.gatherPath) {
+ throw new Error(
+ `Routable extension "${stringifyNode(
+ node,
+ )}" with mount point "${mountPoint}" must be assigned a path`,
+ );
+ }
+
+ ctx?.obj?.routeRefs.add(mountPoint);
+ acc.paths.set(mountPoint, ctx.gatherPath);
+ acc.parents.set(mountPoint, ctx?.gatherRouteRef);
+
+ return {
+ ...ctx,
+ routeRef: mountPoint,
+ };
+ }
+
+ return ctx;
+ },
+);
+
interface RoutingV1CollectorContext {
path?: string;
routeRef?: RouteRef;
diff --git a/packages/core-app-api/src/routing/helpers.ts b/packages/core-app-api/src/routing/helpers.ts
new file mode 100644
index 0000000000..b25f602d52
--- /dev/null
+++ b/packages/core-app-api/src/routing/helpers.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Joins a list of paths together, avoiding trailing and duplicate slashes
+export function joinPaths(...paths: string[]): string {
+ const normalized = paths.join('/').replace(/\/\/+/g, '/');
+ if (normalized !== '/' && normalized.endsWith('/')) {
+ return normalized.slice(0, -1);
+ }
+ return normalized;
+}
diff --git a/packages/core-app-api/src/routing/validation.ts b/packages/core-app-api/src/routing/validation.ts
index c5d3e4aca9..63950b9fdc 100644
--- a/packages/core-app-api/src/routing/validation.ts
+++ b/packages/core-app-api/src/routing/validation.ts
@@ -20,6 +20,7 @@ import {
RouteRef,
SubRouteRef,
} from '@backstage/core-plugin-api';
+import { joinPaths } from './helpers';
import { AnyRouteRef } from './types';
// Validates that there is no duplication of route parameter names
@@ -40,10 +41,10 @@ export function validateRouteParameters(
let fullPath = '';
while (currentRouteRef) {
const path = routePaths.get(currentRouteRef);
- if (!path) {
+ if (path === undefined) {
throw new Error(`No path for ${currentRouteRef}`);
}
- fullPath = `${path}${fullPath}`;
+ fullPath = joinPaths(path, fullPath);
currentRouteRef = routeParents.get(currentRouteRef);
}
diff --git a/packages/core-components/package.json b/packages/core-components/package.json
index 74dc89bfc0..ffa256bd48 100644
--- a/packages/core-components/package.json
+++ b/packages/core-components/package.json
@@ -60,8 +60,6 @@
"react-helmet": "6.1.0",
"react-hook-form": "^7.12.2",
"react-markdown": "^8.0.0",
- "react-router": "6.0.0-beta.0",
- "react-router-dom": "6.0.0-beta.0",
"react-sparklines": "^1.7.0",
"react-syntax-highlighter": "^15.4.5",
"react-text-truncate": "^0.19.0",
@@ -76,7 +74,9 @@
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0",
- "react-dom": "^16.13.1 || ^17.0.0"
+ "react-dom": "^16.13.1 || ^17.0.0",
+ "react-router": "6.0.0-beta.0 || ^6.3.0",
+ "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/core-app-api": "^1.0.6-next.0",
diff --git a/packages/core-components/src/components/Button/Button.test.tsx b/packages/core-components/src/components/Button/Button.test.tsx
index e3a1074e6f..805b3b3f10 100644
--- a/packages/core-components/src/components/Button/Button.test.tsx
+++ b/packages/core-components/src/components/Button/Button.test.tsx
@@ -26,10 +26,12 @@ describe('', () => {
const buttonLabel = 'Navigate!';
const { getByText } = render(
wrapInTestApp(
-
- {testString}} />
+ <>
- ,
+
+ {testString}} />
+
+ ,
),
);
diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx
index d7d3c192a4..575f42b03c 100644
--- a/packages/core-components/src/components/Button/Button.tsx
+++ b/packages/core-components/src/components/Button/Button.tsx
@@ -44,7 +44,7 @@ const LinkWrapper = React.forwardRef((props, ref) => (
* @public
* @remarks
*
- * Makes the Button to utilise react-router
+ * Makes the Button to utilize react-router
*/
export const Button = React.forwardRef((props, ref) => (
diff --git a/packages/core-components/src/components/Link/Link.stories.tsx b/packages/core-components/src/components/Link/Link.stories.tsx
index d9944c1c51..6049ec68b1 100644
--- a/packages/core-components/src/components/Link/Link.stories.tsx
+++ b/packages/core-components/src/components/Link/Link.stories.tsx
@@ -15,7 +15,12 @@
*/
import React, { ComponentType } from 'react';
import { Link } from './Link';
-import { Route, useLocation, NavLink as RouterNavLink } from 'react-router-dom';
+import {
+ Route,
+ useLocation,
+ NavLink as RouterNavLink,
+ Routes,
+} from 'react-router-dom';
import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
import { wrapInTestApp } from '@backstage/test-utils';
@@ -50,11 +55,11 @@ export const Default = () => {
return (
<>
- This link will utilise the react-router
+ This link will utilize the react-router
MemoryRouter's navigation
-
-
Hi there!
-
+
+ Hi there!} />
+
);
};
@@ -75,9 +80,9 @@ export const PassProps = () => {
has props for both material-ui's component as well as for
react-router-dom's
-
-