circleci: migrate to new composability API

.changeset/curly-crabs-compete.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-circleci': patch
+---
+
+Migrated to new composability API, exporting the plugin instance as `circleCIPlugin`, the entity page content as `EntityCircleCIContent`, and entity conditional as `isCircleCIAvailable`.

plugins/circleci/dev/index.tsx

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

plugins/circleci/src/components/Router.tsx

@@ -21,15 +21,25 @@ import { BuildWithStepsPage } from './BuildWithStepsPage/';
 import { BuildsPage } from './BuildsPage';
 import { CIRCLECI_ANNOTATION } from '../constants';
 import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { MissingAnnotationEmptyState } from '@backstage/core';
 
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[CIRCLECI_ANNOTATION]);
 
-export const Router = ({ entity }: { entity: Entity }) =>
-  !isPluginApplicableToEntity(entity) ? (
-    <MissingAnnotationEmptyState annotation={CIRCLECI_ANNOTATION} />
-  ) : (
+type Props = {
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
+};
+
+export const Router = (_props: Props) => {
+  const { entity } = useEntity();
+
+  if (!isPluginApplicableToEntity(entity)) {
+    return <MissingAnnotationEmptyState annotation={CIRCLECI_ANNOTATION} />;
+  }
+
+  return (
     <Routes>
       <Route path={`/${circleCIRouteRef.path}`} element={<BuildsPage />} />
       <Route
@@ -38,3 +48,4 @@ export const Router = ({ entity }: { entity: Entity }) =>
       />
     </Routes>
   );
+};

plugins/circleci/src/index.ts

@@ -14,8 +14,16 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  circleCIPlugin,
+  circleCIPlugin as plugin,
+  EntityCircleCIContent,
+} from './plugin';
 export * from './api';
 export * from './route-refs';
-export { Router, isPluginApplicableToEntity } from './components/Router';
+export {
+  Router,
+  isPluginApplicableToEntity,
+  isPluginApplicableToEntity as isCircleCIAvailable,
+} from './components/Router';
 export { CIRCLECI_ANNOTATION } from './constants';

plugins/circleci/src/plugin.test.ts

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

plugins/circleci/src/plugin.ts

@@ -18,10 +18,12 @@ import {
   createPlugin,
   createApiFactory,
   discoveryApiRef,
+  createRoutableExtension,
 } from '@backstage/core';
 import { circleCIApiRef, CircleCIApi } from './api';
+import { circleCIRouteRef } from './route-refs';
 
-export const plugin = createPlugin({
+export const circleCIPlugin = createPlugin({
   id: 'circleci',
   apis: [
     createApiFactory({
@@ -31,3 +33,10 @@ export const plugin = createPlugin({
     }),
   ],
 });
+
+export const EntityCircleCIContent = circleCIPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/Router').then(m => m.Router),
+    mountPoint: circleCIRouteRef,
+  }),
+);