implement suggestions

Signed-off-by: secustor <sebastian@poxhofer.at>

plugins/devtools-react/src/devToolsContentBlueprint.tsx

@@ -15,11 +15,13 @@
  */
 
 import {
+  coreExtensionData,
   createExtensionBlueprint,
   ExtensionBoundary,
+  RouteRef,
 } from '@backstage/frontend-plugin-api';
-import { devToolsRouteDataRef } from './devToolsRouteDataRef';
 import { JSX } from 'react';
+import { contentTitleDataRef } from './extensionData';
 
 /**
  * Parameters for creating a DevTools route extension
@@ -29,6 +31,7 @@ export interface DevToolsRouteBlueprintParams {
   path: string;
   title: string;
   loader: () => Promise<JSX.Element>;
+  routeRef?: RouteRef;
 }
 
 /**
@@ -46,22 +49,38 @@ export interface DevToolsRouteBlueprintParams {
  * ```
  * @public
  */
-export const DevToolsRouteBlueprint = createExtensionBlueprint({
-  kind: 'devtools-route',
-  attachTo: { id: 'page:devtools', input: 'routes' },
-  output: [devToolsRouteDataRef],
-  factory(params: DevToolsRouteBlueprintParams, { node }) {
-    const children = ExtensionBoundary.lazy(node, params.loader);
-
-    return [
-      devToolsRouteDataRef({
-        path: params.path,
-        title: params.title,
-        children,
-      }),
-    ];
-  },
+export const DevToolsContentBlueprint = createExtensionBlueprint({
+  kind: 'devtools-content',
+  attachTo: { id: 'page:devtools', input: 'contents' },
+  output: [
+    coreExtensionData.reactElement,
+    coreExtensionData.routePath,
+    coreExtensionData.routeRef.optional(),
+    contentTitleDataRef,
+  ],
   dataRefs: {
-    route: devToolsRouteDataRef,
+    title: contentTitleDataRef,
+  },
+  config: {
+    schema: {
+      path: z => z.string().optional(),
+      title: z => z.string().optional(),
+    },
+  },
+  *factory(params: DevToolsRouteBlueprintParams, { node, config }) {
+    const path = config.path ?? params.path;
+    const title = config.title ?? params.title;
+
+    yield coreExtensionData.reactElement(
+      ExtensionBoundary.lazy(node, params.loader),
+    );
+
+    yield coreExtensionData.routePath(path);
+
+    yield contentTitleDataRef(title);
+
+    if (params.routeRef) {
+      yield coreExtensionData.routeRef(params.routeRef);
+    }
   },
 });

plugins/devtools-react/src/extensionData.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright 2025 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.
@@ -13,25 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { createExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { JSX } from 'react';
 
-/**
- * Represents a DevTools route that can be contributed by extensions
- * @public
- */
-export interface DevToolsRouteData {
-  path: string;
-  title: string;
-  children: JSX.Element;
-}
-
-/**
- * Extension data reference for DevTools routes
- * @public
- */
-export const devToolsRouteDataRef =
-  createExtensionDataRef<DevToolsRouteData>().with({
-    id: 'devtools.route',
-  });
+/** @internal */
+export const contentTitleDataRef = createExtensionDataRef<string>().with({
+  id: 'devtools.content-title',
+});

plugins/devtools-react/src/index.ts

@@ -19,11 +19,7 @@
  *
  * @packageDocumentation
  */
-export {
-  type DevToolsRouteData,
-  devToolsRouteDataRef,
-} from './devToolsRouteDataRef';
 export {
   type DevToolsRouteBlueprintParams,
-  DevToolsRouteBlueprint,
-} from './devToolsRouteBlueprint.tsx';
+  DevToolsContentBlueprint,
+} from './devToolsContentBlueprint.tsx';