diff --git a/.changeset/hot-rules-shout.md b/.changeset/hot-rules-shout.md
new file mode 100644
index 0000000000..c88f4b01dc
--- /dev/null
+++ b/.changeset/hot-rules-shout.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Add `children` option to `addPage`, which will be rendered as the children of the `Route`.
diff --git a/.changeset/selfish-kids-know.md b/.changeset/selfish-kids-know.md
new file mode 100644
index 0000000000..f434559135
--- /dev/null
+++ b/.changeset/selfish-kids-know.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Finalize migration to new composability API, with the plugin instance now exported `catalogPlugin`.
diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx
index b4ec540f9c..e1bdf4d0e9 100644
--- a/packages/dev-utils/src/devApp/render.tsx
+++ b/packages/dev-utils/src/devApp/render.tsx
@@ -38,6 +38,7 @@ import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied'
const GatheringRoute: (props: {
path: string;
element: JSX.Element;
+ children?: ReactNode;
}) => JSX.Element = ({ element }) => element;
attachComponentData(GatheringRoute, 'core.gatherMountPoints', true);
@@ -45,6 +46,7 @@ attachComponentData(GatheringRoute, 'core.gatherMountPoints', true);
type RegisterPageOptions = {
path?: string;
element: JSX.Element;
+ children?: JSX.Element;
title?: string;
icon?: IconComponent;
};
@@ -112,7 +114,12 @@ class DevAppBuilder {
);
}
this.routes.push(
- ,
+ ,
);
return this;
}
diff --git a/plugins/catalog-react/src/routes.ts b/plugins/catalog-react/src/routes.ts
index 2983b464ac..0fced32f59 100644
--- a/plugins/catalog-react/src/routes.ts
+++ b/plugins/catalog-react/src/routes.ts
@@ -19,6 +19,7 @@ import { createRouteRef } from '@backstage/core';
const NoIcon = () => null;
+// TODO(Rugvip): Move these route refs back to the catalog plugin once we're all ported to using external routes
export const rootRoute = createRouteRef({
icon: NoIcon,
path: '',
diff --git a/plugins/catalog/dev/index.tsx b/plugins/catalog/dev/index.tsx
index 812a5585d4..34f23071b0 100644
--- a/plugins/catalog/dev/index.tsx
+++ b/plugins/catalog/dev/index.tsx
@@ -14,7 +14,31 @@
* limitations under the License.
*/
+import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import {
+ catalogPlugin,
+ CatalogIndexPage,
+ CatalogEntityPage,
+ EntityLayout,
+} from '../src';
-createDevApp().registerPlugin(plugin).render();
+createDevApp()
+ .registerPlugin(catalogPlugin)
+ .addPage({
+ path: '/catalog',
+ title: 'Catalog',
+ element: ,
+ })
+ .addPage({
+ path: '/catalog/:namespace/:kind/:name',
+ element: ,
+ children: (
+
+
+ Overview
+
+
+ ),
+ })
+ .render();
diff --git a/plugins/catalog/src/extensions.tsx b/plugins/catalog/src/extensions.tsx
deleted file mode 100644
index 1eaa30b769..0000000000
--- a/plugins/catalog/src/extensions.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { createRoutableExtension } from '@backstage/core';
-import {
- catalogRouteRef,
- entityRouteRef,
-} from '@backstage/plugin-catalog-react';
-import { plugin } from './plugin';
-
-export const CatalogIndexPage = plugin.provide(
- createRoutableExtension({
- component: () =>
- import('./components/CatalogPage').then(m => m.CatalogPage),
- mountPoint: catalogRouteRef,
- }),
-);
-
-export const CatalogEntityPage = plugin.provide(
- createRoutableExtension({
- component: () =>
- import('./components/CatalogEntityPage/CatalogEntityPage').then(
- m => m.CatalogEntityPage,
- ),
- mountPoint: entityRouteRef,
- }),
-);
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 80367f80e4..3ef79680c4 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -19,5 +19,9 @@ export { EntityLayout } from './components/EntityLayout';
export { EntityPageLayout } from './components/EntityPageLayout';
export * from './components/EntitySwitch';
export { Router } from './components/Router';
-export * from './extensions';
-export { plugin } from './plugin';
+export {
+ catalogPlugin,
+ catalogPlugin as plugin,
+ CatalogIndexPage,
+ CatalogEntityPage,
+} from './plugin';
diff --git a/plugins/catalog/src/plugin.test.ts b/plugins/catalog/src/plugin.test.ts
index 427efc39e1..d2cf0e4bf5 100644
--- a/plugins/catalog/src/plugin.test.ts
+++ b/plugins/catalog/src/plugin.test.ts
@@ -14,10 +14,10 @@
* limitations under the License.
*/
-import { plugin } from './plugin';
+import { catalogPlugin } from './plugin';
describe('catalog', () => {
it('should export plugin', () => {
- expect(plugin).toBeDefined();
+ expect(catalogPlugin).toBeDefined();
});
});
diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts
index 69a1285ab4..c19925775d 100644
--- a/plugins/catalog/src/plugin.ts
+++ b/plugins/catalog/src/plugin.ts
@@ -19,6 +19,7 @@ import {
createApiFactory,
createPlugin,
discoveryApiRef,
+ createRoutableExtension,
} from '@backstage/core';
import {
catalogApiRef,
@@ -26,7 +27,7 @@ import {
entityRouteRef,
} from '@backstage/plugin-catalog-react';
-export const plugin = createPlugin({
+export const catalogPlugin = createPlugin({
id: 'catalog',
apis: [
createApiFactory({
@@ -40,3 +41,21 @@ export const plugin = createPlugin({
catalogEntity: entityRouteRef,
},
});
+
+export const CatalogIndexPage = catalogPlugin.provide(
+ createRoutableExtension({
+ component: () =>
+ import('./components/CatalogPage').then(m => m.CatalogPage),
+ mountPoint: catalogRouteRef,
+ }),
+);
+
+export const CatalogEntityPage = catalogPlugin.provide(
+ createRoutableExtension({
+ component: () =>
+ import('./components/CatalogEntityPage/CatalogEntityPage').then(
+ m => m.CatalogEntityPage,
+ ),
+ mountPoint: entityRouteRef,
+ }),
+);