From b37501a3d1ff20e6f79229b7ccc5a0cd510f9c63 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 2 Feb 2021 15:07:33 +0100 Subject: [PATCH] catalog: finalize port to new composability API + tweak dev-utils --- .changeset/hot-rules-shout.md | 5 +++ .changeset/selfish-kids-know.md | 5 +++ packages/dev-utils/src/devApp/render.tsx | 9 +++++- plugins/catalog-react/src/routes.ts | 1 + plugins/catalog/dev/index.tsx | 28 +++++++++++++++-- plugins/catalog/src/extensions.tsx | 40 ------------------------ plugins/catalog/src/index.ts | 8 +++-- plugins/catalog/src/plugin.test.ts | 4 +-- plugins/catalog/src/plugin.ts | 21 ++++++++++++- 9 files changed, 73 insertions(+), 48 deletions(-) create mode 100644 .changeset/hot-rules-shout.md create mode 100644 .changeset/selfish-kids-know.md delete mode 100644 plugins/catalog/src/extensions.tsx 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, + }), +);