diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx
index 92d1f06d6a..af0c3a972d 100644
--- a/packages/app-next/src/App.tsx
+++ b/packages/app-next/src/App.tsx
@@ -46,7 +46,7 @@ import { convertLegacyEntityContentExtension } from '@backstage/plugin-catalog-r
import { pluginInfoResolver } from './pluginInfoResolver';
import { appModuleNav } from './modules/appModuleNav';
import devtoolsPlugin from '@backstage/plugin-devtools/alpha';
-import { unprocessedEntitiesDevToolsRoute } from '@backstage/plugin-catalog-unprocessed-entities/alpha';
+import { unprocessedEntitiesDevToolsContent } from '@backstage/plugin-catalog-unprocessed-entities/alpha';
/*
@@ -115,7 +115,7 @@ const customHomePageModule = createFrontendModule({
const notFoundErrorPageModule = createFrontendModule({
pluginId: 'app',
- extensions: [notFoundErrorPage, unprocessedEntitiesDevToolsRoute],
+ extensions: [notFoundErrorPage, unprocessedEntitiesDevToolsContent],
});
const collectedLegacyPlugins = convertLegacyAppRoot(
diff --git a/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.ts b/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.tsx
similarity index 50%
rename from plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.ts
rename to plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.tsx
index 27a3eb0d13..e2c652f21a 100644
--- a/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.ts
+++ b/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.tsx
@@ -14,23 +14,23 @@
* limitations under the License.
*/
-import { createElement } from 'react';
-import { DevToolsRouteBlueprint } from '@backstage/plugin-devtools-react';
+import { DevToolsContentBlueprint } from '@backstage/plugin-devtools-react';
+import { compatWrapper } from '@backstage/core-compat-api';
/**
- * DevTools route extension for catalog unprocessed entities
- * This demonstrates how to create extensions at the app level using the new DevTools extension system
+ * DevTools content for catalog unprocessed entities.
*
* @alpha
*/
-export const unprocessedEntitiesDevToolsRoute = DevToolsRouteBlueprint.make({
- params: {
- path: 'unprocessed-entities',
- title: 'Unprocessed Entities',
- loader: () =>
- import('../components/UnprocessedEntities').then(
- ({ UnprocessedEntitiesContent }) =>
- createElement(UnprocessedEntitiesContent),
- ),
+export const unprocessedEntitiesDevToolsContent = DevToolsContentBlueprint.make(
+ {
+ params: {
+ path: 'unprocessed-entities',
+ title: 'Unprocessed Entities',
+ loader: () =>
+ import('../components/UnprocessedEntities').then(m =>
+ compatWrapper(),
+ ),
+ },
},
-});
+);
diff --git a/plugins/catalog-unprocessed-entities/src/alpha/index.ts b/plugins/catalog-unprocessed-entities/src/alpha/index.ts
index 5738bb8a59..13c527949f 100644
--- a/plugins/catalog-unprocessed-entities/src/alpha/index.ts
+++ b/plugins/catalog-unprocessed-entities/src/alpha/index.ts
@@ -15,4 +15,4 @@
*/
export { default } from './plugin';
-export { unprocessedEntitiesDevToolsRoute } from './devToolsRoute';
+export { unprocessedEntitiesDevToolsContent } from './devToolsRoute';
diff --git a/plugins/devtools-react/src/devToolsRouteBlueprint.tsx b/plugins/devtools-react/src/devToolsContentBlueprint.tsx
similarity index 56%
rename from plugins/devtools-react/src/devToolsRouteBlueprint.tsx
rename to plugins/devtools-react/src/devToolsContentBlueprint.tsx
index a048641418..835599dff3 100644
--- a/plugins/devtools-react/src/devToolsRouteBlueprint.tsx
+++ b/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;
+ 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);
+ }
},
});
diff --git a/plugins/devtools-react/src/devToolsRouteDataRef.ts b/plugins/devtools-react/src/extensionData.ts
similarity index 59%
rename from plugins/devtools-react/src/devToolsRouteDataRef.ts
rename to plugins/devtools-react/src/extensionData.ts
index d6c506505a..62821c3e12 100644
--- a/plugins/devtools-react/src/devToolsRouteDataRef.ts
+++ b/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().with({
- id: 'devtools.route',
- });
+/** @internal */
+export const contentTitleDataRef = createExtensionDataRef().with({
+ id: 'devtools.content-title',
+});
diff --git a/plugins/devtools-react/src/index.ts b/plugins/devtools-react/src/index.ts
index 4adcfb39ad..18b17387c1 100644
--- a/plugins/devtools-react/src/index.ts
+++ b/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';
diff --git a/plugins/devtools/src/alpha/plugin.tsx b/plugins/devtools/src/alpha/plugin.tsx
index fb7c627bdc..7c020639bf 100644
--- a/plugins/devtools/src/alpha/plugin.tsx
+++ b/plugins/devtools/src/alpha/plugin.tsx
@@ -22,6 +22,7 @@ import {
PageBlueprint,
NavItemBlueprint,
createExtensionInput,
+ coreExtensionData,
} from '@backstage/frontend-plugin-api';
import { devToolsApiRef, DevToolsClient } from '../api';
@@ -31,7 +32,6 @@ import {
} from '@backstage/core-compat-api';
import BuildIcon from '@material-ui/icons/Build';
import { rootRouteRef } from '../routes';
-import { devToolsRouteDataRef } from '@backstage/plugin-devtools-react';
/** @alpha */
export const devToolsApi = ApiBlueprint.make({
@@ -50,9 +50,16 @@ export const devToolsApi = ApiBlueprint.make({
/** @alpha */
export const devToolsPage = PageBlueprint.makeWithOverrides({
inputs: {
- routes: createExtensionInput([devToolsRouteDataRef], {
- optional: true,
- }),
+ contents: createExtensionInput(
+ [
+ coreExtensionData.reactElement,
+ coreExtensionData.routePath,
+ coreExtensionData.routeRef.optional(),
+ ],
+ {
+ optional: true,
+ },
+ ),
},
factory(originalFactory, { inputs }) {
return originalFactory({
@@ -60,13 +67,7 @@ export const devToolsPage = PageBlueprint.makeWithOverrides({
routeRef: convertLegacyRouteRef(rootRouteRef),
loader: () =>
import('../components/DevToolsPage').then(m =>
- compatWrapper(
-
- route.get(devToolsRouteDataRef),
- )}
- />,
- ),
+ compatWrapper(),
),
});
},
diff --git a/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx b/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx
index 682983f46f..b2c1457161 100644
--- a/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx
+++ b/plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx
@@ -19,14 +19,14 @@ import {
devToolsInfoReadPermission,
} from '@backstage/plugin-devtools-common';
-import { ConfigContent } from '../Content/ConfigContent';
+import { ConfigContent } from '../Content';
import { DevToolsLayout } from '../DevToolsLayout';
-import { InfoContent } from '../Content/InfoContent';
+import { InfoContent } from '../Content';
import { RequirePermission } from '@backstage/plugin-permission-react';
import { DevToolsPageProps } from '../DevToolsPage';
/** @public */
-export const DefaultDevToolsPage = ({ extensionRoutes }: DevToolsPageProps) => (
+export const DefaultDevToolsPage = ({ extensions }: DevToolsPageProps) => (
@@ -38,13 +38,13 @@ export const DefaultDevToolsPage = ({ extensionRoutes }: DevToolsPageProps) => (
- {extensionRoutes?.map((route, index) => (
+ {extensions?.map((extension, index) => (
- {route.children}
+ {extension.children}
))}
diff --git a/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx b/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx
index f76017b89e..8f84ed4a9b 100644
--- a/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx
+++ b/plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx
@@ -16,19 +16,16 @@
import { useOutlet } from 'react-router-dom';
import { DefaultDevToolsPage } from '../DefaultDevToolsPage';
-import { DevToolsRouteData } from '@backstage/plugin-devtools-react';
/**
@public
*/
export interface DevToolsPageProps {
- extensionRoutes?: DevToolsRouteData[];
+ extensions?: any[];
}
-export const DevToolsPage = ({ extensionRoutes }: DevToolsPageProps) => {
+export const DevToolsPage = ({ extensions }: DevToolsPageProps) => {
const outlet = useOutlet();
- return (
- <>{outlet || }>
- );
+ return <>{outlet || }>;
};