implement Contents interface

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

.changeset/slimy-ghosts-rescue.md

@@ -6,4 +6,4 @@
 '@backstage/plugin-devtools-common': patch
 ---
 
-Add support for adding `unprocessed-entities` and other tabs to `devtools`
+Add support for adding `unprocessed-entities` and other tabs to `devtools` when using the New Frontend system

plugins/catalog-unprocessed-entities/report-alpha.api.md

@@ -91,7 +91,7 @@ const _default: OverridableFrontendPlugin<
 export default _default;
 
 // @alpha
-export const unprocessedEntitiesDevToolsContent: ExtensionDefinition<{
+export const unprocessedEntitiesDevToolsContent: OverridableExtensionDefinition<{
   kind: 'devtools-content';
   name: undefined;
   config: {
@@ -106,7 +106,7 @@ export const unprocessedEntitiesDevToolsContent: ExtensionDefinition<{
     | ExtensionDataRef<string, 'core.routing.path', {}>
     | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
     | ExtensionDataRef<
-        RouteRef<AnyRouteRefParams>,
+        RouteRef_2<AnyRouteRefParams>,
         'core.routing.ref',
         {
           optional: true;

plugins/devtools/report-alpha.api.md

@@ -9,13 +9,8 @@ import { ApiFactory } from '@backstage/frontend-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-<<<<<<< HEAD
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
-import { IconComponent } from '@backstage/core-plugin-api';
-=======
 import { IconComponent } from '@backstage/frontend-plugin-api';
->>>>>>> master
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -65,13 +60,7 @@ const _default: OverridableFrontendPlugin<
         routeRef: RouteRef_2<undefined>;
       };
     }>;
-<<<<<<< HEAD
-    'page:devtools': ExtensionDefinition<{
-=======
     'page:devtools': OverridableExtensionDefinition<{
-      kind: 'page';
-      name: undefined;
->>>>>>> master
       config: {
         path: string | undefined;
       };
@@ -94,7 +83,7 @@ const _default: OverridableFrontendPlugin<
           | ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
           | ConfigurableExtensionDataRef<string, 'core.routing.path', {}>
           | ConfigurableExtensionDataRef<
-              RouteRef<AnyRouteRefParams>,
+              RouteRef_2<AnyRouteRefParams>,
               'core.routing.ref',
               {
                 optional: true;
@@ -111,14 +100,8 @@ const _default: OverridableFrontendPlugin<
       params: {
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
-<<<<<<< HEAD
-        loader: () => Promise</** @alpha */
-        JSX.Element>;
-        routeRef?: RouteRef;
-=======
         loader: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
->>>>>>> master
       };
     }>;
   }

plugins/devtools/report.api.md

@@ -6,6 +6,7 @@
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { ElementType } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { TabProps } from '@material-ui/core/Tab';
@@ -28,12 +29,22 @@ export type DevToolsLayoutProps = {
 };
 
 // @public (undocumented)
-export const DevToolsPage: ({ extensions }: DevToolsPageProps) => JSX_2.Element;
+export const DevToolsPage: ({ contents }: DevToolsPageProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface DevToolsPageContent {
+  // (undocumented)
+  children: ReactElement;
+  // (undocumented)
+  path: string;
+  // (undocumented)
+  title: string;
+}
 
 // @public (undocumented)
 export interface DevToolsPageProps {
   // (undocumented)
-  extensions?: any[];
+  contents?: DevToolsPageContent[];
 }
 
 // @public (undocumented)

plugins/devtools/src/alpha/plugin.tsx

@@ -63,13 +63,13 @@ export const devToolsPage = PageBlueprint.makeWithOverrides({
       path: '/devtools',
       routeRef: rootRouteRef,
       loader: () => {
-        const extensions = inputs.contents.map(content => ({
+        const contents = inputs.contents.map(content => ({
           path: content.get(coreExtensionData.routePath),
           title: content.get(coreExtensionData.title),
           children: content.get(coreExtensionData.reactElement),
         }));
         return import('../components/DevToolsPage').then(m => (
-          <m.DevToolsPage extensions={extensions} />
+          <m.DevToolsPage contents={contents} />
         ));
       },
     });

plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx

@@ -28,7 +28,7 @@ import { ScheduledTasksContent } from '../Content/ScheduledTasksContent';
 import { DevToolsPageProps } from '../DevToolsPage';
 
 /** @public */
-export const DefaultDevToolsPage = ({ extensions }: DevToolsPageProps) => (
+export const DefaultDevToolsPage = ({ contents }: DevToolsPageProps) => (
   <DevToolsLayout>
     <DevToolsLayout.Route path="info" title="Info">
       <RequirePermission permission={devToolsInfoReadPermission}>
@@ -45,13 +45,13 @@ export const DefaultDevToolsPage = ({ extensions }: DevToolsPageProps) => (
         <ScheduledTasksContent />
       </RequirePermission>
     </DevToolsLayout.Route>
-    {extensions?.map((extension, index) => (
+    {contents?.map((content, index) => (
       <DevToolsLayout.Route
-        key={`extension-${extension.path}-${index}`}
-        path={extension.path}
-        title={extension.title}
+        key={`extension-${content.path}-${index}`}
+        path={content.path}
+        title={content.title}
       >
-        {extension.children}
+        {content.children}
       </DevToolsLayout.Route>
     ))}
   </DevToolsLayout>

plugins/devtools/src/components/DevToolsPage/DevToolsPage.tsx

@@ -16,16 +16,26 @@
 
 import { useOutlet } from 'react-router-dom';
 import { DefaultDevToolsPage } from '../DefaultDevToolsPage';
+import { ReactElement } from 'react';
 
 /**
   @public
  */
 export interface DevToolsPageProps {
-  extensions?: any[];
+  contents?: DevToolsPageContent[];
 }
 
-export const DevToolsPage = ({ extensions }: DevToolsPageProps) => {
+/**
+  @public
+ */
+export interface DevToolsPageContent {
+  title: string;
+  path: string;
+  children: ReactElement;
+}
+
+export const DevToolsPage = ({ contents }: DevToolsPageProps) => {
   const outlet = useOutlet();
 
-  return <>{outlet || <DefaultDevToolsPage extensions={extensions} />}</>;
+  return <>{outlet || <DefaultDevToolsPage contents={contents} />}</>;
 };

plugins/devtools/src/components/DevToolsPage/index.ts

@@ -14,4 +14,8 @@
  * limitations under the License.
  */
 
-export { DevToolsPage, type DevToolsPageProps } from './DevToolsPage';
+export {
+  DevToolsPage,
+  type DevToolsPageProps,
+  type DevToolsPageContent,
+} from './DevToolsPage';

plugins/devtools/src/components/index.ts

@@ -16,4 +16,7 @@
 
 export * from './Content';
 export * from './DevToolsLayout';
-export { type DevToolsPageProps } from './DevToolsPage';
+export {
+  type DevToolsPageProps,
+  type DevToolsPageContent,
+} from './DevToolsPage';