kafka: migrate to new composability API

.changeset/sixty-lemons-agree.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kafka': patch
+---
+
+Migrate to new composability API, exporting the plugin instance as `kafkaPlugin`, entity content as `EntityKafkaContent`, and entity conditional as `isKafkaAvailable`.

plugins/kafka/dev/index.tsx

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

plugins/kafka/src/Router.tsx

@@ -17,7 +17,7 @@
 import { Entity } from '@backstage/catalog-model';
 import React from 'react';
 import { Route, Routes } from 'react-router';
-
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { rootCatalogKafkaRouteRef } from './plugin';
 import { KAFKA_CONSUMER_GROUP_ANNOTATION } from './constants';
 import { KafkaTopicsForConsumer } from './components/ConsumerGroupOffsets/ConsumerGroupOffsets';
@@ -26,10 +26,23 @@ import { MissingAnnotationEmptyState } from '@backstage/core';
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[KAFKA_CONSUMER_GROUP_ANNOTATION]);
 
-export const Router = ({ entity }: { entity: Entity }) => {
-  return !isPluginApplicableToEntity(entity) ? (
-    <MissingAnnotationEmptyState annotation={KAFKA_CONSUMER_GROUP_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={KAFKA_CONSUMER_GROUP_ANNOTATION}
+      />
+    );
+  }
+
+  return (
     <Routes>
       <Route
         path={`${rootCatalogKafkaRouteRef.path}`}

plugins/kafka/src/index.ts

@@ -13,6 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { plugin } from './plugin';
+export {
+  kafkaPlugin,
+  kafkaPlugin as plugin,
+  EntityKafkaContent,
+} from './plugin';
 export { KAFKA_CONSUMER_GROUP_ANNOTATION } from './constants';
-export { Router, isPluginApplicableToEntity } from './Router';
+export {
+  Router,
+  isPluginApplicableToEntity,
+  isPluginApplicableToEntity as isKafkaAvailable,
+} from './Router';

plugins/kafka/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 { kafkaPlugin } from './plugin';
 
 describe('kafka', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(kafkaPlugin).toBeDefined();
   });
 });

plugins/kafka/src/plugin.ts

@@ -16,6 +16,7 @@
 import {
   createApiFactory,
   createPlugin,
+  createRoutableExtension,
   createRouteRef,
   discoveryApiRef,
 } from '@backstage/core';
@@ -27,7 +28,7 @@ export const rootCatalogKafkaRouteRef = createRouteRef({
   title: 'Kafka',
 });
 
-export const plugin = createPlugin({
+export const kafkaPlugin = createPlugin({
   id: 'kafka',
   apis: [
     createApiFactory({
@@ -36,4 +37,14 @@ export const plugin = createPlugin({
       factory: ({ discoveryApi }) => new KafkaBackendClient({ discoveryApi }),
     }),
   ],
+  routes: {
+    entityContent: rootCatalogKafkaRouteRef,
+  },
 });
+
+export const EntityKafkaContent = kafkaPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./Router').then(m => m.Router),
+    mountPoint: rootCatalogKafkaRouteRef,
+  }),
+);