Merge pull request #4395 from backstage/rugvip/migranizing

plugins: migrate gitops-profiles, pagerduty, search, register-component and techdocs to new composability API

plugins/gitops-profiles/dev/index.tsx

@@ -15,6 +15,6 @@
  */
 
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { gitopsProfilesPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(gitopsProfilesPlugin).render();

plugins/gitops-profiles/src/index.ts

@@ -14,5 +14,11 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  gitopsProfilesPlugin,
+  gitopsProfilesPlugin as plugin,
+  GitopsProfilesClusterListPage,
+  GitopsProfilesClusterPage,
+  GitopsProfilesCreatePage,
+} from './plugin';
 export * from './api';

plugins/gitops-profiles/src/plugin.test.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { gitopsProfilesPlugin } from './plugin';
 
 describe('gitops-profiles', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(gitopsProfilesPlugin).toBeDefined();
   });
 });

plugins/gitops-profiles/src/plugin.ts

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { createPlugin, createApiFactory } from '@backstage/core';
+import {
+  createPlugin,
+  createApiFactory,
+  createRoutableExtension,
+} from '@backstage/core';
 import ProfileCatalog from './components/ProfileCatalog';
 import ClusterPage from './components/ClusterPage';
 import ClusterList from './components/ClusterList';
@@ -25,7 +29,7 @@ import {
 } from './routes';
 import { gitOpsApiRef, GitOpsRestApi } from './api';
 
-export const plugin = createPlugin({
+export const gitopsProfilesPlugin = createPlugin({
   id: 'gitops-profiles',
   apis: [
     createApiFactory(gitOpsApiRef, new GitOpsRestApi('http://localhost:3008')),
@@ -35,4 +39,30 @@ export const plugin = createPlugin({
     router.addRoute(gitOpsClusterDetailsRoute, ClusterPage);
     router.addRoute(gitOpsClusterCreateRoute, ProfileCatalog);
   },
+  routes: {
+    listPage: gitOpsClusterListRoute,
+    detailsPage: gitOpsClusterDetailsRoute,
+    createPage: gitOpsClusterCreateRoute,
+  },
 });
+
+export const GitopsProfilesClusterListPage = gitopsProfilesPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/ClusterList').then(m => m.default),
+    mountPoint: gitOpsClusterListRoute,
+  }),
+);
+
+export const GitopsProfilesClusterPage = gitopsProfilesPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/ClusterPage').then(m => m.default),
+    mountPoint: gitOpsClusterDetailsRoute,
+  }),
+);
+
+export const GitopsProfilesCreatePage = gitopsProfilesPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/ProfileCatalog').then(m => m.default),
+    mountPoint: gitOpsClusterCreateRoute,
+  }),
+);

plugins/gitops-profiles/src/routes.ts

@@ -28,6 +28,7 @@ export const gitOpsClusterDetailsRoute = createRouteRef({
   icon: NoIcon,
   path: '/gitops-cluster/:owner/:repo',
   title: 'GitOps Cluster details',
+  params: ['owner', 'repo'],
 });
 
 export const gitOpsClusterCreateRoute = createRouteRef({

plugins/pagerduty/dev/index.tsx

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { pagerDutyPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(pagerDutyPlugin).render();

plugins/pagerduty/package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^0.7.1",
+    "@backstage/plugin-catalog-react": "^0.0.2",
     "@backstage/core": "^0.6.0",
     "@backstage/theme": "^0.2.3",
     "@material-ui/core": "^4.11.0",

plugins/pagerduty/src/components/PagerDutyCard.test.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import { render, waitFor, fireEvent, act } from '@testing-library/react';
 import { PagerDutyCard } from './PagerDutyCard';
 import { Entity } from '@backstage/catalog-model';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import {
   alertApiRef,
@@ -80,7 +81,9 @@ describe('PageDutyCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <PagerDutyCard entity={entity} />
+          <EntityProvider entity={entity}>
+            <PagerDutyCard />
+          </EntityProvider>
         </ApiProvider>,
       ),
     );
@@ -99,7 +102,9 @@ describe('PageDutyCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <PagerDutyCard entity={entity} />
+          <EntityProvider entity={entity}>
+            <PagerDutyCard />
+          </EntityProvider>
         </ApiProvider>,
       ),
     );
@@ -114,7 +119,9 @@ describe('PageDutyCard', () => {
     const { getByText, queryByTestId } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <PagerDutyCard entity={entity} />
+          <EntityProvider entity={entity}>
+            <PagerDutyCard />
+          </EntityProvider>
         </ApiProvider>,
       ),
     );
@@ -134,7 +141,9 @@ describe('PageDutyCard', () => {
     const { getByText, queryByTestId, getByTestId, getByRole } = render(
       wrapInTestApp(
         <ApiProvider apis={apis}>
-          <PagerDutyCard entity={entity} />
+          <EntityProvider entity={entity}>
+            <PagerDutyCard />
+          </EntityProvider>
         </ApiProvider>,
       ),
     );

plugins/pagerduty/src/components/PagerDutyCard.tsx

@@ -16,6 +16,7 @@
 import React, { useState, useCallback } from 'react';
 import { useApi, Progress, HeaderIconLinkRow } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   Button,
   makeStyles,
@@ -56,11 +57,13 @@ export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY]);
 
 type Props = {
-  entity: Entity;
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
 };
 
-export const PagerDutyCard = ({ entity }: Props) => {
+export const PagerDutyCard = (_props: Props) => {
   const classes = useStyles();
+  const { entity } = useEntity();
   const api = useApi(pagerDutyApiRef);
   const [showDialog, setShowDialog] = useState<boolean>(false);
   const [refreshIncidents, setRefreshIncidents] = useState<boolean>(false);

plugins/pagerduty/src/index.ts

@@ -13,9 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { plugin } from './plugin';
+export {
+  pagerDutyPlugin,
+  pagerDutyPlugin as plugin,
+  EntityPagerDutyCard,
+} from './plugin';
 export {
   isPluginApplicableToEntity,
+  isPluginApplicableToEntity as isPagerDutyAvailable,
   PagerDutyCard,
 } from './components/PagerDutyCard';
 export {

plugins/pagerduty/src/plugin.test.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { plugin } from './plugin';
+import { pagerDutyPlugin } from './plugin';
 
 describe('pagerduty', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(pagerDutyPlugin).toBeDefined();
   });
 });

plugins/pagerduty/src/plugin.ts

@@ -19,6 +19,7 @@ import {
   createRouteRef,
   discoveryApiRef,
   configApiRef,
+  createComponentExtension,
 } from '@backstage/core';
 import { pagerDutyApiRef, PagerDutyClient } from './api';
 
@@ -27,7 +28,7 @@ export const rootRouteRef = createRouteRef({
   title: 'pagerduty',
 });
 
-export const plugin = createPlugin({
+export const pagerDutyPlugin = createPlugin({
   id: 'pagerduty',
   apis: [
     createApiFactory({
@@ -38,3 +39,12 @@ export const plugin = createPlugin({
     }),
   ],
 });
+
+export const EntityPagerDutyCard = pagerDutyPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/PagerDutyCard').then(m => m.PagerDutyCard),
+    },
+  }),
+);

plugins/register-component/dev/index.tsx

@@ -15,6 +15,6 @@
  */
 
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { registerComponentPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(registerComponentPlugin).render();

plugins/register-component/src/index.ts

@@ -14,5 +14,9 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  registerComponentPlugin,
+  registerComponentPlugin as plugin,
+  RegisterComponentPage,
+} from './plugin';
 export { Router } from './components/Router';

plugins/register-component/src/plugin.test.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { registerComponentPlugin } from './plugin';
 
 describe('register-component', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(registerComponentPlugin).toBeDefined();
   });
 });

plugins/register-component/src/plugin.ts

@@ -14,8 +14,29 @@
  * limitations under the License.
  */
 
-import { createPlugin } from '@backstage/core';
+import {
+  createPlugin,
+  createRoutableExtension,
+  createRouteRef,
+} from '@backstage/core';
 
-export const plugin = createPlugin({
-  id: 'register-component',
+const rootRouteRef = createRouteRef({
+  title: 'Register Component',
 });
+
+export const registerComponentPlugin = createPlugin({
+  id: 'register-component',
+  routes: {
+    root: rootRouteRef,
+  },
+});
+
+export const RegisterComponentPage = registerComponentPlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/RegisterComponentPage').then(
+        m => m.RegisterComponentPage,
+      ),
+    mountPoint: rootRouteRef,
+  }),
+);

plugins/search/dev/index.tsx

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { searchPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(searchPlugin).render();

plugins/search/src/index.ts

@@ -13,5 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { plugin } from './plugin';
-export * from './components';
+export { searchPlugin, searchPlugin as plugin, SearchPage } from './plugin';
+export {
+  Filters,
+  FiltersButton,
+  SearchBar,
+  SearchPage as Router,
+  SearchResult,
+  SidebarSearch,
+} from './components';
+export type { FiltersState } from './components';

plugins/search/src/plugin.test.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { plugin } from './plugin';
+import { searchPlugin } from './plugin';
 
 describe('search', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(searchPlugin).toBeDefined();
   });
 });

plugins/search/src/plugin.ts

@@ -13,17 +13,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createPlugin, createRouteRef } from '@backstage/core';
-import { SearchPage } from './components/SearchPage';
+import {
+  createPlugin,
+  createRouteRef,
+  createRoutableExtension,
+} from '@backstage/core';
+import { SearchPage as SearchPageComponent } from './components/SearchPage';
 
 export const rootRouteRef = createRouteRef({
   path: '/search',
   title: 'search',
 });
 
-export const plugin = createPlugin({
+export const searchPlugin = createPlugin({
   id: 'search',
   register({ router }) {
-    router.addRoute(rootRouteRef, SearchPage);
+    router.addRoute(rootRouteRef, SearchPageComponent);
+  },
+  routes: {
+    root: rootRouteRef,
   },
 });
+
+export const SearchPage = searchPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/SearchPage').then(m => m.SearchPage),
+    mountPoint: rootRouteRef,
+  }),
+);

plugins/techdocs/dev/index.tsx

@@ -16,7 +16,7 @@
 
 import { configApiRef, discoveryApiRef } from '@backstage/core';
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { techdocsPlugin } from '../src/plugin';
 import { TechDocsDevStorageApi } from './api';
 import { techdocsStorageApiRef } from '../src';
 
@@ -30,5 +30,5 @@ createDevApp()
         discoveryApi,
       }),
   })
-  .registerPlugin(plugin)
+  .registerPlugin(techdocsPlugin)
   .render();

plugins/techdocs/src/Router.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { Route, Routes } from 'react-router-dom';
 import { MissingAnnotationEmptyState } from '@backstage/core';
 import {
@@ -38,7 +39,14 @@ export const Router = () => {
   );
 };
 
-export const EmbeddedDocsRouter = ({ entity }: { entity: Entity }) => {
+type Props = {
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
+};
+
+export const EmbeddedDocsRouter = (_props: Props) => {
+  const { entity } = useEntity();
+
   const projectId = entity.metadata.annotations?.[TECHDOCS_ANNOTATION];
 
   if (!projectId) {

plugins/techdocs/src/index.ts

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  techdocsPlugin,
+  techdocsPlugin as plugin,
+  TechdocsPage,
+  EntityTechdocsContent,
+} from './plugin';
 export { Router, EmbeddedDocsRouter } from './Router';
 export * from './reader';
 export * from './api';

plugins/techdocs/src/plugin.test.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { techdocsPlugin } from './plugin';
 
 describe('techdocs', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(techdocsPlugin).toBeDefined();
   });
 });

plugins/techdocs/src/plugin.ts

@@ -35,6 +35,7 @@ import {
   createApiFactory,
   configApiRef,
   discoveryApiRef,
+  createRoutableExtension,
 } from '@backstage/core';
 import {
   techdocsStorageApiRef,
@@ -58,7 +59,7 @@ export const rootCatalogDocsRouteRef = createRouteRef({
   title: 'Docs',
 });
 
-export const plugin = createPlugin({
+export const techdocsPlugin = createPlugin({
   id: 'techdocs',
   apis: [
     createApiFactory({
@@ -80,4 +81,22 @@ export const plugin = createPlugin({
         }),
     }),
   ],
+  routes: {
+    root: rootRouteRef,
+    entityContent: rootCatalogDocsRouteRef,
+  },
 });
+
+export const TechdocsPage = techdocsPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./Router').then(m => m.Router),
+    mountPoint: rootRouteRef,
+  }),
+);
+
+export const EntityTechdocsContent = techdocsPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./Router').then(m => m.EmbeddedDocsRouter),
+    mountPoint: rootCatalogDocsRouteRef,
+  }),
+);