Merge pull request #31055 from secustor/feat/add-devtools-extension

feat(devtools): support custom tabs using extensions

plugins/devtools/README.md

@@ -166,6 +166,39 @@ You can also add tabs to show content from other plugins that fit well with the
 
 #### Catalog Unprocessed Entities Tab
 
+##### New Frontend System
+
+Create an extension and/or load a 3rd party extension to add additional tabs.
+
+```shell
+yarn --cwd plugins/<your-plugin> add @backstage/plugin-devtools-react
+```
+
+```tsx
+import { DevToolsContentBlueprint } from '@backstage/plugin-devtools-react';
+
+export const unprocessedEntitiesDevToolsContent = DevToolsContentBlueprint.make(
+  {
+    disabled: true,
+    params: {
+      path: 'unprocessed-entities',
+      title: 'Unprocessed Entities',
+      loader: () =>
+        import('../components/UnprocessedEntities').then(m => (
+          <m.UnprocessedEntitiesContent />
+        )),
+    },
+  },
+);
+
+const appFeature = createFrontendModule({
+  pluginId: 'catalog-unprocessed-entities',
+  extensions: [unprocessedEntitiesDevToolsContent],
+});
+```
+
+##### Old System
+
 Here's how to add the Catalog Unprocessed Entities tab:
 
 1. Install and setup the [Catalog Unprocessed Entities plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-unprocessed-entities) as per its documentation

plugins/devtools/package.json

@@ -7,7 +7,8 @@
     "pluginPackages": [
       "@backstage/plugin-devtools",
       "@backstage/plugin-devtools-backend",
-      "@backstage/plugin-devtools-common"
+      "@backstage/plugin-devtools-common",
+      "@backstage/plugin-devtools-react"
     ]
   },
   "publishConfig": {
@@ -58,6 +59,7 @@
     "@backstage/errors": "workspace:^",
     "@backstage/frontend-plugin-api": "workspace:^",
     "@backstage/plugin-devtools-common": "workspace:^",
+    "@backstage/plugin-devtools-react": "workspace:^",
     "@backstage/plugin-permission-react": "workspace:^",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",

plugins/devtools/report-alpha.api.md

@@ -6,8 +6,10 @@
 import { AnyApiFactory } from '@backstage/frontend-plugin-api';
 import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
 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';
+import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
@@ -59,8 +61,6 @@ const _default: OverridableFrontendPlugin<
       };
     }>;
     'page:devtools': OverridableExtensionDefinition<{
-      kind: 'page';
-      name: undefined;
       config: {
         path: string | undefined;
       };
@@ -77,7 +77,26 @@ const _default: OverridableFrontendPlugin<
               optional: true;
             }
           >;
-      inputs: {};
+      inputs: {
+        contents: ExtensionInput<
+          | ConfigurableExtensionDataRef<string, 'core.title', {}>
+          | ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
+          | ConfigurableExtensionDataRef<string, 'core.routing.path', {}>
+          | ConfigurableExtensionDataRef<
+              RouteRef_2<AnyRouteRefParams>,
+              'core.routing.ref',
+              {
+                optional: true;
+              }
+            >,
+          {
+            singleton: false;
+            optional: true;
+          }
+        >;
+      };
+      kind: 'page';
+      name: undefined;
       params: {
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;

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,7 +29,23 @@ export type DevToolsLayoutProps = {
 };
 
 // @public (undocumented)
-export const DevToolsPage: () => 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)
+  contents?: DevToolsPageContent[];
+}
 
 // @public (undocumented)
 export const devToolsPlugin: BackstagePlugin<

plugins/devtools/src/alpha/plugin.tsx

@@ -21,6 +21,8 @@ import {
   ApiBlueprint,
   PageBlueprint,
   NavItemBlueprint,
+  createExtensionInput,
+  coreExtensionData,
 } from '@backstage/frontend-plugin-api';
 
 import { devToolsApiRef, DevToolsClient } from '../api';
@@ -42,12 +44,35 @@ export const devToolsApi = ApiBlueprint.make({
 });
 
 /** @alpha */
-export const devToolsPage = PageBlueprint.make({
-  params: {
-    path: '/devtools',
-    routeRef: rootRouteRef,
-    loader: () =>
-      import('../components/DevToolsPage').then(m => <m.DevToolsPage />),
+export const devToolsPage = PageBlueprint.makeWithOverrides({
+  inputs: {
+    contents: createExtensionInput(
+      [
+        coreExtensionData.reactElement,
+        coreExtensionData.routePath,
+        coreExtensionData.routeRef.optional(),
+        coreExtensionData.title,
+      ],
+      {
+        optional: true,
+      },
+    ),
+  },
+  factory(originalFactory, { inputs }) {
+    return originalFactory({
+      path: '/devtools',
+      routeRef: rootRouteRef,
+      loader: () => {
+        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 contents={contents} />
+        ));
+      },
+    });
   },
 });
 

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

@@ -18,15 +18,17 @@ import {
   devToolsConfigReadPermission,
   devToolsInfoReadPermission,
 } from '@backstage/plugin-devtools-common';
+
+import { ConfigContent } from '../Content';
 import { devToolsTaskSchedulerReadPermission } from '@backstage/plugin-devtools-common/alpha';
-import { ConfigContent } from '../Content/ConfigContent';
 import { DevToolsLayout } from '../DevToolsLayout';
-import { InfoContent } from '../Content/InfoContent';
+import { InfoContent } from '../Content';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { ScheduledTasksContent } from '../Content/ScheduledTasksContent';
+import { DevToolsPageProps } from '../DevToolsPage';
 
 /** @public */
-export const DefaultDevToolsPage = () => (
+export const DefaultDevToolsPage = ({ contents }: DevToolsPageProps) => (
   <DevToolsLayout>
     <DevToolsLayout.Route path="info" title="Info">
       <RequirePermission permission={devToolsInfoReadPermission}>
@@ -43,5 +45,14 @@ export const DefaultDevToolsPage = () => (
         <ScheduledTasksContent />
       </RequirePermission>
     </DevToolsLayout.Route>
+    {contents?.map((content, index) => (
+      <DevToolsLayout.Route
+        key={`extension-${index}`}
+        path={content.path}
+        title={content.title}
+      >
+        {content.children}
+      </DevToolsLayout.Route>
+    ))}
   </DevToolsLayout>
 );

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

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

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

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

plugins/devtools/src/components/index.ts

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