core-app-api: add back support for absolute route paths in app

Co-authored-by: blam <ben@blam.sh>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-app-api/src/routing/collectors.compat.test.tsx

@@ -187,7 +187,9 @@ describe.each(['beta', 'stable'])('react-router %s', rrVersion => {
                     <div />
                     {null}
                     <div />
-                    <Route path="baz" element={<Extension3 />} />
+                    <Routes>
+                      <Route path="/baz" element={<Extension3 />} />
+                    </Routes>
                   </div>
                 </Route>
                 {false}
@@ -211,7 +213,7 @@ describe.each(['beta', 'stable'])('react-router %s', rrVersion => {
       expect(sortedEntries(routing.paths)).toEqual([
         [ref1, 'foo'],
         [ref2, 'bar/:id'],
-        [ref3, 'baz'],
+        [ref3, rrVersion === 'beta' ? '/baz' : 'baz'],
         [ref4, 'divsoup'],
         [ref5, 'blop'],
       ]);
@@ -227,7 +229,11 @@ describe.each(['beta', 'stable'])('react-router %s', rrVersion => {
           'foo',
           [ref1],
           [
-            routeObj('bar/:id', [ref2], [routeObj('baz', [ref3])]),
+            routeObj(
+              'bar/:id',
+              [ref2],
+              [routeObj(rrVersion === 'beta' ? '/baz' : 'baz', [ref3])],
+            ),
             routeObj('blop', [ref5]),
           ],
         ),

packages/core-app-api/src/routing/collectors.stable.test.tsx

@@ -249,6 +249,46 @@ describe('discovery', () => {
     ]);
   });
 
+  it('should handle absolute route paths', () => {
+    const root = (
+      <MemoryRouter>
+        <Routes>
+          <Route path="/foo" element={<Extension1 />}>
+            <Routes>
+              <Route path="/bar/:id" element={<Extension2 />} />
+            </Routes>
+          </Route>
+          <Route path="/baz" element={<Extension3 />}>
+            <Route path="/divsoup" element={<Extension4 />} />
+            <Route path="/blop" element={<Extension5 />} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    );
+
+    const { routing } = traverseElementTree({
+      root,
+      discoverers: [childDiscoverer, routeElementDiscoverer],
+      collectors: {
+        routing: routingV2Collector,
+      },
+    });
+    expect(sortedEntries(routing.paths)).toEqual([
+      [ref1, 'foo'],
+      [ref2, 'bar/:id'],
+      [ref3, 'baz'],
+      [ref4, 'divsoup'],
+      [ref5, 'blop'],
+    ]);
+    expect(sortedEntries(routing.parents)).toEqual([
+      [ref1, undefined],
+      [ref2, ref1],
+      [ref3, undefined],
+      [ref4, ref3],
+      [ref5, ref3],
+    ]);
+  });
+
   it('should use the route aggregator key to bind child routes to the same path', () => {
     const root = (
       <MemoryRouter>
@@ -309,11 +349,11 @@ describe('discovery', () => {
       <MemoryRouter>
         <Routes>
           <Route path="foo" element={<Extension1 />}>
-            <AggregationComponent path="bar">
+            <AggregationComponent path="/bar">
               <Extension2>
                 <Routes>
                   <Route path="baz" element={<Extension3 />}>
-                    <Route path="blop" element={<Extension4 />} />
+                    <Route path="/blop" element={<Extension4 />} />
                   </Route>
                 </Routes>
                 <Extension5 />

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

@@ -87,10 +87,10 @@ export const routingV2Collector = createCollector(
     objects: new Array<BackstageRouteObject>(),
   }),
   (acc, node, parent, ctx?: RoutingV2CollectorContext) => {
-    const path: unknown = node.props?.path;
+    const pathProp: unknown = node.props?.path;
 
     const mountPoint = getComponentData<RouteRef>(node, 'core.mountPoint');
-    if (mountPoint && path) {
+    if (mountPoint && pathProp) {
       throw new Error(
         `Path property may not be set directly on a routable extension "${stringifyNode(
           node,
@@ -109,13 +109,15 @@ export const routingV2Collector = createCollector(
 
     const parentChildren = ctx?.obj?.children ?? acc.objects;
 
-    if (path) {
-      if (typeof path !== 'string') {
+    if (pathProp) {
+      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<boolean>(node, 'core.gatherMountPoints')) {
@@ -149,7 +151,7 @@ export const routingV2Collector = createCollector(
         const [extension, ...others] = collectSubTree(elementProp);
         if (others.length > 0) {
           throw new Error(
-            `Route element with path "${path}" may not contain multiple routable extensions`,
+            `Route element with path "${pathProp}" may not contain multiple routable extensions`,
           );
         }
         if (!extension) {