lighthouse: migrate to new composability API

.changeset/fifty-dolls-doubt.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-lighthouse': patch
+---
+
+Migrate to new composability API, exporting the plugin instance as `lighthousePlugin`, the top-level page as `LighthousePage`, the entity card as `EntityLastLighthouseAuditCard`, and the entity content as `EntityLighthouseContent`.

plugins/lighthouse/dev/index.tsx

@@ -15,11 +15,11 @@
  */
 
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { lighthousePlugin } from '../src/plugin';
 import { lighthouseApiRef, LighthouseRestApi } from '../src';
 
 createDevApp()
-  .registerPlugin(plugin)
+  .registerPlugin(lighthousePlugin)
   .registerApi({
     api: lighthouseApiRef,
     deps: {},

plugins/lighthouse/src/Router.tsx

@@ -16,7 +16,6 @@
 
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { createAuditRouteRef, rootRouteRef, viewAuditRouteRef } from './plugin';
 import AuditList from './components/AuditList';
 import AuditView, { AuditViewContent } from './components/AuditView';
 import CreateAudit, { CreateAuditContent } from './components/CreateAudit';
@@ -25,32 +24,26 @@ import { LIGHTHOUSE_WEBSITE_URL_ANNOTATION } from '../constants';
 import { AuditListForEntity } from './components/AuditList/AuditListForEntity';
 import { MissingAnnotationEmptyState } from '@backstage/core';
 
-export const isPluginApplicableToEntity = (entity: Entity) =>
+export const isLighthouseAvailable = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[LIGHTHOUSE_WEBSITE_URL_ANNOTATION]);
 
 export const Router = () => (
   <Routes>
-    <Route path={`/${rootRouteRef.path}`} element={<AuditList />} />
-    <Route path={`/${viewAuditRouteRef.path}`} element={<AuditView />} />
-    <Route path={`/${createAuditRouteRef.path}`} element={<CreateAudit />} />
+    <Route path="/" element={<AuditList />} />
+    <Route path="/audit/:id" element={<AuditView />} />
+    <Route path="/create-audit" element={<CreateAudit />} />
   </Routes>
 );
 
 export const EmbeddedRouter = ({ entity }: { entity: Entity }) =>
-  !isPluginApplicableToEntity(entity) ? (
+  !isLighthouseAvailable(entity) ? (
     <MissingAnnotationEmptyState
       annotation={LIGHTHOUSE_WEBSITE_URL_ANNOTATION}
     />
   ) : (
     <Routes>
-      <Route path={`/${rootRouteRef.path}`} element={<AuditListForEntity />} />
-      <Route
-        path={`/${viewAuditRouteRef.path}`}
-        element={<AuditViewContent />}
-      />
-      <Route
-        path={`/${createAuditRouteRef.path}`}
-        element={<CreateAuditContent />}
-      />
+      <Route path="/" element={<AuditListForEntity />} />
+      <Route path="/audit/:id" element={<AuditViewContent />} />
+      <Route path="/create-audit" element={<CreateAuditContent />} />
     </Routes>
   );

plugins/lighthouse/src/components/AuditList/AuditListTable.tsx

@@ -25,7 +25,6 @@ import {
 } from '../../utils';
 import { Link, generatePath } from 'react-router-dom';
 import AuditStatusIcon from '../AuditStatusIcon';
-import { viewAuditRouteRef } from '../../plugin';
 
 const columns: TableColumn[] = [
   {
@@ -99,11 +98,7 @@ export const AuditListTable = ({ items }: { items: Website[] }) => {
 
     return {
       websiteUrl: (
-        <Link
-          to={generatePath(viewAuditRouteRef.path, {
-            id: website.lastAudit.id,
-          })}
-        >
+        <Link to={generatePath('audit/:id', { id: website.lastAudit.id })}>
           {website.url}
         </Link>
       ),

plugins/lighthouse/src/components/AuditList/index.tsx

@@ -35,7 +35,6 @@ import { useQuery } from '../../utils';
 import LighthouseSupportButton from '../SupportButton';
 import LighthouseIntro, { LIGHTHOUSE_INTRO_LOCAL_STORAGE } from '../Intro';
 import AuditListTable from './AuditListTable';
-import { createAuditRouteRef } from '../../plugin';
 
 export const LIMIT = 10;
 
@@ -110,7 +109,7 @@ const AuditList = () => {
           <Button
             variant="contained"
             color="primary"
-            onClick={() => navigate(createAuditRouteRef.path)}
+            onClick={() => navigate('create-audit')}
           >
             Create Audit
           </Button>

plugins/lighthouse/src/components/AuditView/index.tsx

@@ -47,7 +47,6 @@ import { lighthouseApiRef, Website, Audit } from '../../api';
 import AuditStatusIcon from '../AuditStatusIcon';
 import LighthouseSupportButton from '../SupportButton';
 import { formatTime } from '../../utils';
-import { viewAuditRouteRef, createAuditRouteRef } from '../../plugin';
 
 const useStyles = makeStyles({
   contentGrid: {
@@ -78,12 +77,7 @@ const AuditLinkList = ({ audits = [], selectedId }: AuditLinkListProps) => (
         button
         component={Link}
         replace
-        to={resolvePath(
-          generatePath(viewAuditRouteRef.path, {
-            id: audit.id,
-          }),
-          '../../',
-        )}
+        to={resolvePath(generatePath('audit/:id', { id: audit.id }), '../../')}
       >
         <ListItemIcon>
           <AuditStatusIcon audit={audit} />
@@ -163,7 +157,7 @@ export const AuditViewContent = () => {
     );
   }
 
-  let createAuditButtonUrl = createAuditRouteRef.path;
+  let createAuditButtonUrl = 'create-audit';
   if (value?.url) {
     createAuditButtonUrl += `?url=${encodeURIComponent(value.url)}`;
   }

plugins/lighthouse/src/index.ts

@@ -14,7 +14,18 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
-export { Router, isPluginApplicableToEntity, EmbeddedRouter } from './Router';
+export {
+  lighthousePlugin,
+  lighthousePlugin as plugin,
+  LighthousePage,
+  EntityLighthouseContent,
+  EntityLastLighthouseAuditCard,
+} from './plugin';
+export {
+  Router,
+  isLighthouseAvailable as isPluginApplicableToEntity,
+  isLighthouseAvailable,
+  EmbeddedRouter,
+} from './Router';
 export * from './api';
 export * from './components/Cards';

plugins/lighthouse/src/plugin.test.ts

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

plugins/lighthouse/src/plugin.ts

@@ -19,6 +19,8 @@ import {
   createRouteRef,
   createApiFactory,
   configApiRef,
+  createRoutableExtension,
+  createComponentExtension,
 } from '@backstage/core';
 import { lighthouseApiRef, LighthouseRestApi } from './api';
 
@@ -37,7 +39,11 @@ export const createAuditRouteRef = createRouteRef({
   title: 'Create Lighthouse Audit',
 });
 
-export const plugin = createPlugin({
+export const entityContentRouteRef = createRouteRef({
+  title: 'Lighthouse Entity Content',
+});
+
+export const lighthousePlugin = createPlugin({
   id: 'lighthouse',
   apis: [
     createApiFactory({
@@ -46,4 +52,31 @@ export const plugin = createPlugin({
       factory: ({ configApi }) => LighthouseRestApi.fromConfig(configApi),
     }),
   ],
+  routes: {
+    root: createAuditRouteRef,
+    entityContent: entityContentRouteRef,
+  },
 });
+
+export const LighthousePage = lighthousePlugin.provide(
+  createRoutableExtension({
+    component: () => import('./Router').then(m => m.Router),
+    mountPoint: rootRouteRef,
+  }),
+);
+
+export const EntityLighthouseContent = lighthousePlugin.provide(
+  createRoutableExtension({
+    component: () => import('./Router').then(m => m.EmbeddedRouter),
+    mountPoint: entityContentRouteRef,
+  }),
+);
+
+export const EntityLastLighthouseAuditCard = lighthousePlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/Cards').then(m => m.LastLighthouseAuditCard),
+    },
+  }),
+);