WIP

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>

packages/frontend-plugin-api/package.json

@@ -32,7 +32,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0"
+    "react": "^16.13.1 || ^17.0.0",
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "dependencies": {
     "@backstage/core-plugin-api": "workspace:^",

packages/frontend-plugin-api/src/extensions/createPageExtension.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { RouteRef } from '@backstage/core-plugin-api';
 import React from 'react';
 import { ExtensionBoundary } from '../components';
 import { createSchemaFromZod, PortableSchema } from '../createSchemaFromZod';
@@ -46,6 +47,7 @@ export function createPageExtension<
     at?: string;
     disabled?: boolean;
     inputs?: TInputs;
+    routeRef?: RouteRef;
     component: (props: {
       config: TConfig;
       inputs: {
@@ -70,6 +72,7 @@ export function createPageExtension<
     output: {
       component: coreExtensionData.reactComponent,
       path: coreExtensionData.routePath,
+      ...(options.routeRef && { routeRef: coreExtensionData.routeRef }),
     },
     inputs: options.inputs,
     configSchema,
@@ -87,6 +90,9 @@ export function createPageExtension<
           </React.Suspense>
         </ExtensionBoundary>
       ));
+      if (options.routeRef) {
+        bind.routeRef!(options.routeRef);
+      }
     },
   });
 }

packages/frontend-plugin-api/src/routing/useRouteRef.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2023 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.
+ */
+
+import { RouteRef } from '@backstage/core-plugin-api';
+import { RoutingContext } from '@backstage/frontend-app-api/src/routing/RoutingContext';
+import { useContext, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export function useRouteRef(routeRef: RouteRef<any>): () => string | undefined {
+  const { pathname } = useLocation();
+  const resolver = useContext(RoutingContext);
+
+  const routeFunc = useMemo(
+    () => resolver && resolver.resolve(routeRef, { pathname }),
+    [resolver, routeRef, pathname],
+  );
+
+  return routeFunc;
+}

packages/frontend-plugin-api/src/types.ts

@@ -15,6 +15,7 @@
  */
 
 import { AnyApiFactory } from '@backstage/core-plugin-api';
+import { RouteRef } from '@backstage/core-plugin-api';
 import { ComponentType } from 'react';
 import { PortableSchema } from './createSchemaFromZod';
 import { BackstagePlugin } from './wiring';
@@ -37,6 +38,7 @@ export const coreExtensionData = {
   reactComponent: createExtensionDataRef<ComponentType>('core.reactComponent'),
   routePath: createExtensionDataRef<string>('core.routing.path'),
   apiFactory: createExtensionDataRef<AnyApiFactory>('core.api.factory'),
+  routeRef: createExtensionDataRef<RouteRef>('core.routing.ref'),
 };
 
 /** @public */