implement Contents interface

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

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';