implement suggestions

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

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(
-            <m.DevToolsPage
-              extensionRoutes={inputs.routes?.map(route =>
-                route.get(devToolsRouteDataRef),
-              )}
-            />,
-          ),
+          compatWrapper(<m.DevToolsPage extensions={inputs.contents} />),
         ),
     });
   },

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) => (
   <DevToolsLayout>
     <DevToolsLayout.Route path="info" title="Info">
       <RequirePermission permission={devToolsInfoReadPermission}>
@@ -38,13 +38,13 @@ export const DefaultDevToolsPage = ({ extensionRoutes }: DevToolsPageProps) => (
         <ConfigContent />
       </RequirePermission>
     </DevToolsLayout.Route>
-    {extensionRoutes?.map((route, index) => (
+    {extensions?.map((extension, index) => (
       <DevToolsLayout.Route
-        key={`extension-${route.path}-${index}`}
-        path={route.path}
-        title={route.title}
+        key={`extension-${extension.path}-${index}`}
+        path={extension.path}
+        title={extension.title}
       >
-        {route.children}
+        {extension.children}
       </DevToolsLayout.Route>
     ))}
   </DevToolsLayout>

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 || <DefaultDevToolsPage extensionRoutes={extensionRoutes} />}</>
-  );
+  return <>{outlet || <DefaultDevToolsPage extensions={extensions} />}</>;
 };