catalog: finalize port to new composability API + tweak dev-utils

.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`.

.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`.

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(
-      <GatheringRoute key={path} path={path} element={opts.element} />,
+      <GatheringRoute
+        key={path}
+        path={path}
+        element={opts.element}
+        children={opts.children}
+      />,
     );
     return this;
   }

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: '',

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: <CatalogIndexPage />,
+  })
+  .addPage({
+    path: '/catalog/:namespace/:kind/:name',
+    element: <CatalogEntityPage />,
+    children: (
+      <EntityLayout>
+        <EntityLayout.Route path="/" title="Overview">
+          <h1>Overview</h1>
+        </EntityLayout.Route>
+      </EntityLayout>
+    ),
+  })
+  .render();

plugins/catalog/src/extensions.tsx

@@ -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,
-  }),
-);

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

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();
   });
 });

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,
+  }),
+);