diff --git a/.changeset/fifty-dolls-doubt.md b/.changeset/fifty-dolls-doubt.md
new file mode 100644
index 0000000000..1abd7a16b9
--- /dev/null
+++ b/.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`.
diff --git a/plugins/lighthouse/dev/index.tsx b/plugins/lighthouse/dev/index.tsx
index bf761965f1..1ea54e5871 100644
--- a/plugins/lighthouse/dev/index.tsx
+++ b/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: {},
diff --git a/plugins/lighthouse/src/Router.tsx b/plugins/lighthouse/src/Router.tsx
index d264f3bc1b..0634a0aaa0 100644
--- a/plugins/lighthouse/src/Router.tsx
+++ b/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 = () => (
- } />
- } />
- } />
+ } />
+ } />
+ } />
);
export const EmbeddedRouter = ({ entity }: { entity: Entity }) =>
- !isPluginApplicableToEntity(entity) ? (
+ !isLighthouseAvailable(entity) ? (
) : (
- } />
- }
- />
- }
- />
+ } />
+ } />
+ } />
);
diff --git a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx b/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx
index 0fb66a317b..8a59869266 100644
--- a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx
+++ b/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: (
-
+
{website.url}
),
diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx
index b022482da4..ce0fcdb46e 100644
--- a/plugins/lighthouse/src/components/AuditList/index.tsx
+++ b/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 = () => {
diff --git a/plugins/lighthouse/src/components/AuditView/index.tsx b/plugins/lighthouse/src/components/AuditView/index.tsx
index 2a99339a84..2be284183c 100644
--- a/plugins/lighthouse/src/components/AuditView/index.tsx
+++ b/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 }), '../../')}
>
@@ -163,7 +157,7 @@ export const AuditViewContent = () => {
);
}
- let createAuditButtonUrl = createAuditRouteRef.path;
+ let createAuditButtonUrl = 'create-audit';
if (value?.url) {
createAuditButtonUrl += `?url=${encodeURIComponent(value.url)}`;
}
diff --git a/plugins/lighthouse/src/index.ts b/plugins/lighthouse/src/index.ts
index 64fe2f8cc0..bf51bbbf35 100644
--- a/plugins/lighthouse/src/index.ts
+++ b/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';
diff --git a/plugins/lighthouse/src/plugin.test.ts b/plugins/lighthouse/src/plugin.test.ts
index 70b1844ec2..642f438e03 100644
--- a/plugins/lighthouse/src/plugin.test.ts
+++ b/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();
});
});
diff --git a/plugins/lighthouse/src/plugin.ts b/plugins/lighthouse/src/plugin.ts
index e9055b4db7..c2a8521da7 100644
--- a/plugins/lighthouse/src/plugin.ts
+++ b/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),
+ },
+ }),
+);