@backstage/plugin-devtools 0.1.35-next.1 → 0.1.35

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/plugin-devtools
 
+## 0.1.35
+
+### Patch Changes
+
+- be6cef5: Add support for adding `unprocessed-entities` and other tabs to `devtools` when using the New Frontend system
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.13.3
+  - @backstage/core-components@0.18.5
+  - @backstage/plugin-devtools-react@0.1.0
+  - @backstage/plugin-devtools-common@0.1.21
+  - @backstage/core-compat-api@0.5.6
+
 ## 0.1.35-next.1
 
 ### Patch Changes

package/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

package/dist/alpha/plugin.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { ApiBlueprint, fetchApiRef, discoveryApiRef, PageBlueprint, NavItemBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import { ApiBlueprint, fetchApiRef, discoveryApiRef, PageBlueprint, createExtensionInput, coreExtensionData, NavItemBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
 import { devToolsApiRef } from '../api/DevToolsApi.esm.js';
 import { DevToolsClient } from '../api/DevToolsClient.esm.js';
 import BuildIcon from '@material-ui/icons/Build';
@@ -15,11 +15,33 @@ const devToolsApi = ApiBlueprint.make({
     factory: ({ discoveryApi, fetchApi }) => new DevToolsClient({ discoveryApi, fetchApi })
   })
 });
-const devToolsPage = PageBlueprint.make({
-  params: {
-    path: "/devtools",
-    routeRef: rootRouteRef,
-    loader: () => import('../components/DevToolsPage/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.DevToolsPage, {}))
+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/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.DevToolsPage, { contents }));
+      }
+    });
   }
 });
 const devToolsNavItem = NavItemBlueprint.make({

package/dist/alpha/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../../src/alpha/plugin.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createFrontendPlugin,\n  discoveryApiRef,\n  fetchApiRef,\n  ApiBlueprint,\n  PageBlueprint,\n  NavItemBlueprint,\n} from '@backstage/frontend-plugin-api';\n\nimport { devToolsApiRef, DevToolsClient } from '../api';\nimport BuildIcon from '@material-ui/icons/Build';\nimport { rootRouteRef } from '../routes';\n\n/** @alpha */\nexport const devToolsApi = ApiBlueprint.make({\n  params: defineParams =>\n    defineParams({\n      api: devToolsApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ discoveryApi, fetchApi }) =>\n        new DevToolsClient({ discoveryApi, fetchApi }),\n    }),\n});\n\n/** @alpha */\nexport const devToolsPage = PageBlueprint.make({\n  params: {\n    path: '/devtools',\n    routeRef: rootRouteRef,\n    loader: () =>\n      import('../components/DevToolsPage').then(m => <m.DevToolsPage />),\n  },\n});\n\n/** @alpha */\nexport const devToolsNavItem = NavItemBlueprint.make({\n  params: {\n    title: 'DevTools',\n    routeRef: rootRouteRef,\n    icon: BuildIcon,\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  pluginId: 'devtools',\n  info: { packageJson: () => import('../../package.json') },\n  routes: {\n    root: rootRouteRef,\n  },\n  extensions: [devToolsApi, devToolsPage, devToolsNavItem],\n});\n"],"names":[],"mappings":";;;;;;;AA8BO,MAAM,WAAA,GAAc,aAAa,IAAA,CAAK;AAAA,EAC3C,MAAA,EAAQ,kBACN,YAAA,CAAa;AAAA,IACX,GAAA,EAAK,cAAA;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,YAAA,EAAc,eAAA;AAAA,MACd,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,QAAA,EAAS,KACjC,IAAI,cAAA,CAAe,EAAE,YAAA,EAAc,QAAA,EAAU;AAAA,GAChD;AACL,CAAC;AAGM,MAAM,YAAA,GAAe,cAAc,IAAA,CAAK;AAAA,EAC7C,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,WAAA;AAAA,IACN,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,yCAA4B,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,qBAAK,GAAA,CAAC,CAAA,CAAE,YAAA,EAAF,EAAe,CAAE;AAAA;AAEvE,CAAC;AAGM,MAAM,eAAA,GAAkB,iBAAiB,IAAA,CAAK;AAAA,EACnD,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,UAAA;AAAA,IACP,QAAA,EAAU,YAAA;AAAA,IACV,IAAA,EAAM;AAAA;AAEV,CAAC;AAGD,aAAe,oBAAA,CAAqB;AAAA,EAClC,QAAA,EAAU,UAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,wBAAoB,CAAA,EAAE;AAAA,EACxD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAA,EAAY,CAAC,WAAA,EAAa,YAAA,EAAc,eAAe;AACzD,CAAC,CAAA;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../../src/alpha/plugin.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createFrontendPlugin,\n  discoveryApiRef,\n  fetchApiRef,\n  ApiBlueprint,\n  PageBlueprint,\n  NavItemBlueprint,\n  createExtensionInput,\n  coreExtensionData,\n} from '@backstage/frontend-plugin-api';\n\nimport { devToolsApiRef, DevToolsClient } from '../api';\nimport BuildIcon from '@material-ui/icons/Build';\nimport { rootRouteRef } from '../routes';\n\n/** @alpha */\nexport const devToolsApi = ApiBlueprint.make({\n  params: defineParams =>\n    defineParams({\n      api: devToolsApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ discoveryApi, fetchApi }) =>\n        new DevToolsClient({ discoveryApi, fetchApi }),\n    }),\n});\n\n/** @alpha */\nexport const devToolsPage = PageBlueprint.makeWithOverrides({\n  inputs: {\n    contents: createExtensionInput(\n      [\n        coreExtensionData.reactElement,\n        coreExtensionData.routePath,\n        coreExtensionData.routeRef.optional(),\n        coreExtensionData.title,\n      ],\n      {\n        optional: true,\n      },\n    ),\n  },\n  factory(originalFactory, { inputs }) {\n    return originalFactory({\n      path: '/devtools',\n      routeRef: rootRouteRef,\n      loader: () => {\n        const contents = inputs.contents.map(content => ({\n          path: content.get(coreExtensionData.routePath),\n          title: content.get(coreExtensionData.title),\n          children: content.get(coreExtensionData.reactElement),\n        }));\n        return import('../components/DevToolsPage').then(m => (\n          <m.DevToolsPage contents={contents} />\n        ));\n      },\n    });\n  },\n});\n\n/** @alpha */\nexport const devToolsNavItem = NavItemBlueprint.make({\n  params: {\n    title: 'DevTools',\n    routeRef: rootRouteRef,\n    icon: BuildIcon,\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  pluginId: 'devtools',\n  info: { packageJson: () => import('../../package.json') },\n  routes: {\n    root: rootRouteRef,\n  },\n  extensions: [devToolsApi, devToolsPage, devToolsNavItem],\n});\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,WAAA,GAAc,aAAa,IAAA,CAAK;AAAA,EAC3C,MAAA,EAAQ,kBACN,YAAA,CAAa;AAAA,IACX,GAAA,EAAK,cAAA;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,YAAA,EAAc,eAAA;AAAA,MACd,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,QAAA,EAAS,KACjC,IAAI,cAAA,CAAe,EAAE,YAAA,EAAc,QAAA,EAAU;AAAA,GAChD;AACL,CAAC;AAGM,MAAM,YAAA,GAAe,cAAc,iBAAA,CAAkB;AAAA,EAC1D,MAAA,EAAQ;AAAA,IACN,QAAA,EAAU,oBAAA;AAAA,MACR;AAAA,QACE,iBAAA,CAAkB,YAAA;AAAA,QAClB,iBAAA,CAAkB,SAAA;AAAA,QAClB,iBAAA,CAAkB,SAAS,QAAA,EAAS;AAAA,QACpC,iBAAA,CAAkB;AAAA,OACpB;AAAA,MACA;AAAA,QACE,QAAA,EAAU;AAAA;AACZ;AACF,GACF;AAAA,EACA,OAAA,CAAQ,eAAA,EAAiB,EAAE,MAAA,EAAO,EAAG;AACnC,IAAA,OAAO,eAAA,CAAgB;AAAA,MACrB,IAAA,EAAM,WAAA;AAAA,MACN,QAAA,EAAU,YAAA;AAAA,MACV,QAAQ,MAAM;AACZ,QAAA,MAAM,QAAA,GAAW,MAAA,CAAO,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,MAAY;AAAA,UAC/C,IAAA,EAAM,OAAA,CAAQ,GAAA,CAAI,iBAAA,CAAkB,SAAS,CAAA;AAAA,UAC7C,KAAA,EAAO,OAAA,CAAQ,GAAA,CAAI,iBAAA,CAAkB,KAAK,CAAA;AAAA,UAC1C,QAAA,EAAU,OAAA,CAAQ,GAAA,CAAI,iBAAA,CAAkB,YAAY;AAAA,SACtD,CAAE,CAAA;AACF,QAAA,OAAO,OAAO,yCAA4B,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,yBAC9C,CAAA,CAAE,YAAA,EAAF,EAAe,QAAA,EAAoB,CACrC,CAAA;AAAA,MACH;AAAA,KACD,CAAA;AAAA,EACH;AACF,CAAC;AAGM,MAAM,eAAA,GAAkB,iBAAiB,IAAA,CAAK;AAAA,EACnD,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,UAAA;AAAA,IACP,QAAA,EAAU,YAAA;AAAA,IACV,IAAA,EAAM;AAAA;AAEV,CAAC;AAGD,aAAe,oBAAA,CAAqB;AAAA,EAClC,QAAA,EAAU,UAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,wBAAoB,CAAA,EAAE;AAAA,EACxD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAA,EAAY,CAAC,WAAA,EAAa,YAAA,EAAc,eAAe;AACzD,CAAC,CAAA;;;;"}

package/dist/alpha.d.ts

@@ -33,8 +33,6 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         };
     }>;
     "page:devtools": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
-        kind: "page";
-        name: undefined;
         config: {
             path: string | undefined;
         };
@@ -44,7 +42,16 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         output: _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
             optional: true;
         }>;
-        inputs: {};
+        inputs: {
+            contents: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.title", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+                optional: true;
+            }>, {
+                singleton: false;
+                optional: true;
+            }>;
+        };
+        kind: "page";
+        name: undefined;
         params: {
             defaultPath?: [Error: `Use the 'path' param instead`];
             path: string;

package/dist/components/DefaultDevToolsPage/DefaultDevToolsPage.esm.js

@@ -1,17 +1,27 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { devToolsInfoReadPermission, devToolsConfigReadPermission } from '@backstage/plugin-devtools-common';
-import { devToolsTaskSchedulerReadPermission } from '@backstage/plugin-devtools-common/alpha';
 import { ConfigContent } from '../Content/ConfigContent/ConfigContent.esm.js';
-import { DevToolsLayout } from '../DevToolsLayout/DevToolsLayout.esm.js';
 import { InfoContent } from '../Content/InfoContent/InfoContent.esm.js';
-import { RequirePermission } from '@backstage/plugin-permission-react';
+import '../Content/ExternalDependenciesContent/ExternalDependenciesContent.esm.js';
 import { ScheduledTasksContent } from '../Content/ScheduledTasksContent/ScheduledTasksContent.esm.js';
 import '../Content/ScheduledTasksContent/ScheduledTaskDetailedPanel.esm.js';
+import { devToolsTaskSchedulerReadPermission } from '@backstage/plugin-devtools-common/alpha';
+import { DevToolsLayout } from '../DevToolsLayout/DevToolsLayout.esm.js';
+import { RequirePermission } from '@backstage/plugin-permission-react';
 
-const DefaultDevToolsPage = () => /* @__PURE__ */ jsxs(DevToolsLayout, { children: [
+const DefaultDevToolsPage = ({ contents }) => /* @__PURE__ */ jsxs(DevToolsLayout, { children: [
   /* @__PURE__ */ jsx(DevToolsLayout.Route, { path: "info", title: "Info", children: /* @__PURE__ */ jsx(RequirePermission, { permission: devToolsInfoReadPermission, children: /* @__PURE__ */ jsx(InfoContent, {}) }) }),
   /* @__PURE__ */ jsx(DevToolsLayout.Route, { path: "config", title: "Config", children: /* @__PURE__ */ jsx(RequirePermission, { permission: devToolsConfigReadPermission, children: /* @__PURE__ */ jsx(ConfigContent, {}) }) }),
-  /* @__PURE__ */ jsx(DevToolsLayout.Route, { path: "scheduled-tasks", title: "Scheduled Tasks", children: /* @__PURE__ */ jsx(RequirePermission, { permission: devToolsTaskSchedulerReadPermission, children: /* @__PURE__ */ jsx(ScheduledTasksContent, {}) }) })
+  /* @__PURE__ */ jsx(DevToolsLayout.Route, { path: "scheduled-tasks", title: "Scheduled Tasks", children: /* @__PURE__ */ jsx(RequirePermission, { permission: devToolsTaskSchedulerReadPermission, children: /* @__PURE__ */ jsx(ScheduledTasksContent, {}) }) }),
+  contents?.map((content, index) => /* @__PURE__ */ jsx(
+    DevToolsLayout.Route,
+    {
+      path: content.path,
+      title: content.title,
+      children: content.children
+    },
+    `extension-${index}`
+  ))
 ] });
 
 export { DefaultDevToolsPage };

package/dist/components/DefaultDevToolsPage/DefaultDevToolsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultDevToolsPage.esm.js","sources":["../../../src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  devToolsConfigReadPermission,\n  devToolsInfoReadPermission,\n} from '@backstage/plugin-devtools-common';\nimport { devToolsTaskSchedulerReadPermission } from '@backstage/plugin-devtools-common/alpha';\nimport { ConfigContent } from '../Content/ConfigContent';\nimport { DevToolsLayout } from '../DevToolsLayout';\nimport { InfoContent } from '../Content/InfoContent';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { ScheduledTasksContent } from '../Content/ScheduledTasksContent';\n\n/** @public */\nexport const DefaultDevToolsPage = () => (\n  <DevToolsLayout>\n    <DevToolsLayout.Route path=\"info\" title=\"Info\">\n      <RequirePermission permission={devToolsInfoReadPermission}>\n        <InfoContent />\n      </RequirePermission>\n    </DevToolsLayout.Route>\n    <DevToolsLayout.Route path=\"config\" title=\"Config\">\n      <RequirePermission permission={devToolsConfigReadPermission}>\n        <ConfigContent />\n      </RequirePermission>\n    </DevToolsLayout.Route>\n    <DevToolsLayout.Route path=\"scheduled-tasks\" title=\"Scheduled Tasks\">\n      <RequirePermission permission={devToolsTaskSchedulerReadPermission}>\n        <ScheduledTasksContent />\n      </RequirePermission>\n    </DevToolsLayout.Route>\n  </DevToolsLayout>\n);\n"],"names":[],"mappings":";;;;;;;;;;AA4BO,MAAM,mBAAA,GAAsB,sBACjC,IAAA,CAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,cAAA,CAAe,KAAA,EAAf,EAAqB,IAAA,EAAK,QAAO,KAAA,EAAM,MAAA,EACtC,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,UAAA,EAAY,0BAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,GACf,CAAA,EACF,CAAA;AAAA,kBACA,GAAA,CAAC,cAAA,CAAe,KAAA,EAAf,EAAqB,MAAK,QAAA,EAAS,KAAA,EAAM,QAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,qBAAkB,UAAA,EAAY,4BAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,GACjB,CAAA,EACF,CAAA;AAAA,kBACA,GAAA,CAAC,cAAA,CAAe,KAAA,EAAf,EAAqB,MAAK,iBAAA,EAAkB,KAAA,EAAM,iBAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,qBAAkB,UAAA,EAAY,mCAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,GACzB,CAAA,EACF;AAAA,CAAA,EACF;;;;"}
+{"version":3,"file":"DefaultDevToolsPage.esm.js","sources":["../../../src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  devToolsConfigReadPermission,\n  devToolsInfoReadPermission,\n} from '@backstage/plugin-devtools-common';\n\nimport { ConfigContent } from '../Content';\nimport { devToolsTaskSchedulerReadPermission } from '@backstage/plugin-devtools-common/alpha';\nimport { DevToolsLayout } from '../DevToolsLayout';\nimport { InfoContent } from '../Content';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { ScheduledTasksContent } from '../Content/ScheduledTasksContent';\nimport { DevToolsPageProps } from '../DevToolsPage';\n\n/** @public */\nexport const DefaultDevToolsPage = ({ contents }: DevToolsPageProps) => (\n  <DevToolsLayout>\n    <DevToolsLayout.Route path=\"info\" title=\"Info\">\n      <RequirePermission permission={devToolsInfoReadPermission}>\n        <InfoContent />\n      </RequirePermission>\n    </DevToolsLayout.Route>\n    <DevToolsLayout.Route path=\"config\" title=\"Config\">\n      <RequirePermission permission={devToolsConfigReadPermission}>\n        <ConfigContent />\n      </RequirePermission>\n    </DevToolsLayout.Route>\n    <DevToolsLayout.Route path=\"scheduled-tasks\" title=\"Scheduled Tasks\">\n      <RequirePermission permission={devToolsTaskSchedulerReadPermission}>\n        <ScheduledTasksContent />\n      </RequirePermission>\n    </DevToolsLayout.Route>\n    {contents?.map((content, index) => (\n      <DevToolsLayout.Route\n        key={`extension-${index}`}\n        path={content.path}\n        title={content.title}\n      >\n        {content.children}\n      </DevToolsLayout.Route>\n    ))}\n  </DevToolsLayout>\n);\n"],"names":[],"mappings":";;;;;;;;;;;AA8BO,MAAM,sBAAsB,CAAC,EAAE,QAAA,EAAS,0BAC5C,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,cAAA,CAAe,KAAA,EAAf,EAAqB,IAAA,EAAK,QAAO,KAAA,EAAM,MAAA,EACtC,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,UAAA,EAAY,0BAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,GACf,CAAA,EACF,CAAA;AAAA,kBACA,GAAA,CAAC,cAAA,CAAe,KAAA,EAAf,EAAqB,MAAK,QAAA,EAAS,KAAA,EAAM,QAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,qBAAkB,UAAA,EAAY,4BAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,GACjB,CAAA,EACF,CAAA;AAAA,kBACA,GAAA,CAAC,cAAA,CAAe,KAAA,EAAf,EAAqB,MAAK,iBAAA,EAAkB,KAAA,EAAM,iBAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,qBAAkB,UAAA,EAAY,mCAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,GACzB,CAAA,EACF,CAAA;AAAA,EACC,QAAA,EAAU,GAAA,CAAI,CAAC,OAAA,EAAS,KAAA,qBACvB,GAAA;AAAA,IAAC,cAAA,CAAe,KAAA;AAAA,IAAf;AAAA,MAEC,MAAM,OAAA,CAAQ,IAAA;AAAA,MACd,OAAO,OAAA,CAAQ,KAAA;AAAA,MAEd,QAAA,EAAA,OAAA,CAAQ;AAAA,KAAA;AAAA,IAJJ,aAAa,KAAK,CAAA;AAAA,GAM1B;AAAA,CAAA,EACH;;;;"}

package/dist/components/DevToolsPage/DevToolsPage.esm.js

@@ -2,9 +2,9 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useOutlet } from 'react-router-dom';
 import { DefaultDevToolsPage } from '../DefaultDevToolsPage/DefaultDevToolsPage.esm.js';
 
-const DevToolsPage = () => {
+const DevToolsPage = ({ contents }) => {
   const outlet = useOutlet();
-  return /* @__PURE__ */ jsx(Fragment, { children: outlet || /* @__PURE__ */ jsx(DefaultDevToolsPage, {}) });
+  return /* @__PURE__ */ jsx(Fragment, { children: outlet || /* @__PURE__ */ jsx(DefaultDevToolsPage, { contents }) });
 };
 
 export { DevToolsPage };

package/dist/components/DevToolsPage/DevToolsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsPage.esm.js","sources":["../../../src/components/DevToolsPage/DevToolsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useOutlet } from 'react-router-dom';\nimport { DefaultDevToolsPage } from '../DefaultDevToolsPage';\n\nexport const DevToolsPage = () => {\n  const outlet = useOutlet();\n\n  return <>{outlet || <DefaultDevToolsPage />}</>;\n};\n"],"names":[],"mappings":";;;;AAmBO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,MAAA,oBAAU,GAAA,CAAC,mBAAA,EAAA,EAAoB,CAAA,EAAG,CAAA;AAC9C;;;;"}
+{"version":3,"file":"DevToolsPage.esm.js","sources":["../../../src/components/DevToolsPage/DevToolsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useOutlet } from 'react-router-dom';\nimport { DefaultDevToolsPage } from '../DefaultDevToolsPage';\nimport { ReactElement } from 'react';\n\n/**\n  @public\n */\nexport interface DevToolsPageProps {\n  contents?: DevToolsPageContent[];\n}\n\n/**\n  @public\n */\nexport interface DevToolsPageContent {\n  title: string;\n  path: string;\n  children: ReactElement;\n}\n\nexport const DevToolsPage = ({ contents }: DevToolsPageProps) => {\n  const outlet = useOutlet();\n\n  return <>{outlet || <DefaultDevToolsPage contents={contents} />}</>;\n};\n"],"names":[],"mappings":";;;;AAoCO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAAyB;AAC/D,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,MAAA,oBAAU,GAAA,CAAC,mBAAA,EAAA,EAAoB,UAAoB,CAAA,EAAG,CAAA;AAClE;;;;"}

package/dist/index.d.ts

@@ -1,15 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ElementType, ReactElement } from 'react';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { TaskApiTasksResponse } from '@backstage/plugin-devtools-common/alpha';
 import { TabProps } from '@material-ui/core/Tab';
-import { ReactNode, ElementType } from 'react';
-
-/** @public */
-declare const devToolsPlugin: _backstage_core_plugin_api.BackstagePlugin<{
-    root: _backstage_core_plugin_api.RouteRef<undefined>;
-}, {}>;
-/** @public */
-declare const DevToolsPage: () => react_jsx_runtime.JSX.Element;
 
 /** @public */
 declare const ConfigContent: () => react_jsx_runtime.JSX.Element;
@@ -61,5 +54,27 @@ declare const DevToolsLayout: {
     Route: (props: SubRoute) => null;
 };
 
+/**
+  @public
+ */
+interface DevToolsPageProps {
+    contents?: DevToolsPageContent[];
+}
+/**
+  @public
+ */
+interface DevToolsPageContent {
+    title: string;
+    path: string;
+    children: ReactElement;
+}
+
+/** @public */
+declare const devToolsPlugin: _backstage_core_plugin_api.BackstagePlugin<{
+    root: _backstage_core_plugin_api.RouteRef<undefined>;
+}, {}>;
+/** @public */
+declare const DevToolsPage: ({ contents }: DevToolsPageProps) => react_jsx_runtime.JSX.Element;
+
 export { ConfigContent, DevToolsLayout, DevToolsPage, ExternalDependenciesContent, InfoContent, ScheduledTaskDetailPanel, ScheduledTasksContent, devToolsPlugin };
-export type { DevToolsLayoutProps, SubRoute };
+export type { DevToolsLayoutProps, DevToolsPageContent, DevToolsPageProps, SubRoute };

package/dist/package.json.esm.js

@@ -1,12 +1,13 @@
 var name = "@backstage/plugin-devtools";
-var version = "0.1.35-next.1";
+var version = "0.1.35";
 var backstage = {
 	role: "frontend-plugin",
 	pluginId: "devtools",
 	pluginPackages: [
 		"@backstage/plugin-devtools",
 		"@backstage/plugin-devtools-backend",
-		"@backstage/plugin-devtools-common"
+		"@backstage/plugin-devtools-common",
+		"@backstage/plugin-devtools-react"
 	]
 };
 var publishConfig = {
@@ -57,6 +58,7 @@ var dependencies = {
 	"@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",

package/dist/package.json.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@backstage/plugin-devtools",
-  "version": "0.1.35-next.1",
+  "version": "0.1.35",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "devtools",
     "pluginPackages": [
       "@backstage/plugin-devtools",
       "@backstage/plugin-devtools-backend",
-      "@backstage/plugin-devtools-common"
+      "@backstage/plugin-devtools-common",
+      "@backstage/plugin-devtools-react"
     ],
     "features": {
       "./alpha": "@backstage/FrontendPlugin"
@@ -64,13 +65,14 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-compat-api": "0.5.6-next.0",
-    "@backstage/core-components": "0.18.5-next.0",
-    "@backstage/core-plugin-api": "1.12.1",
-    "@backstage/errors": "1.2.7",
-    "@backstage/frontend-plugin-api": "0.13.2",
-    "@backstage/plugin-devtools-common": "0.1.20",
-    "@backstage/plugin-permission-react": "0.4.39",
+    "@backstage/core-compat-api": "^0.5.6",
+    "@backstage/core-components": "^0.18.5",
+    "@backstage/core-plugin-api": "^1.12.1",
+    "@backstage/errors": "^1.2.7",
+    "@backstage/frontend-plugin-api": "^0.13.3",
+    "@backstage/plugin-devtools-common": "^0.1.21",
+    "@backstage/plugin-devtools-react": "^0.1.0",
+    "@backstage/plugin-permission-react": "^0.4.39",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
@@ -79,8 +81,8 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.35.2-next.1",
-    "@backstage/dev-utils": "1.1.19-next.2",
+    "@backstage/cli": "^0.35.2",
+    "@backstage/dev-utils": "^1.1.19",
     "@testing-library/jest-dom": "^6.0.0",
     "@types/lodash": "^4.14.151",
     "@types/react": "^18.0.0",