Migrate to Backstage new frontend system

dev/index.tsx

@@ -1,9 +1,11 @@
+import { PropsWithChildren } from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
 import { setupWorker } from 'msw';
-import { PropsWithChildren } from 'react';
-import { flagsmithPlugin, FlagsTab, FlagsmithOverviewCard, FlagsmithUsageCard } from '../src';
+import { FlagsTab } from '../src/components/FlagsTab';
+import { FlagsmithOverviewCard } from '../src/components/FlagsmithOverviewCard';
+import { FlagsmithUsageCard } from '../src/components/FlagsmithUsageCard';
 import { handlers } from './mockHandlers';
 
 // Start MSW worker for API mocking
@@ -37,7 +39,6 @@ const EntityWrapper = ({ children }: PropsWithChildren<{}>) => (
 );
 
 createDevApp()
-  .registerPlugin(flagsmithPlugin)
   .addPage({
     element: (
       <EntityWrapper>

package.json

@@ -33,9 +33,14 @@
       "backstage-cli package lint --fix"
     ]
   },
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
   "dependencies": {
     "@backstage/core-components": "^0.18.2",
     "@backstage/core-plugin-api": "^1.11.1",
+    "@backstage/frontend-plugin-api": "^0.13.2",
     "@backstage/plugin-catalog-react": "^1.13.3",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",

src/index.ts

@@ -1,4 +1,66 @@
-// Frontend plugin exports
-export { flagsmithPlugin, FlagsTab } from './plugin';
-export { FlagsmithOverviewCard } from './components/FlagsmithOverviewCard';
-export { FlagsmithUsageCard } from './components/FlagsmithUsageCard';
+import { createElement } from 'react';
+import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import {
+  EntityContentBlueprint,
+  EntityCardBlueprint,
+} from '@backstage/plugin-catalog-react/alpha';
+
+/**
+ * Entity content (tab) for FlagsTab - displays feature flags for an entity
+ * Requires annotation: flagsmith.com/project-id
+ */
+const flagsTabContent = EntityContentBlueprint.make({
+  name: 'flags',
+  params: {
+    path: '/flagsmith',
+    title: 'Feature Flags',
+    filter: 'has:annotation:flagsmith.com/project-id',
+    loader: () =>
+      import('./components/FlagsTab').then(m => createElement(m.FlagsTab)),
+  },
+});
+
+/**
+ * Entity card for FlagsmithOverviewCard - shows flag overview in entity page
+ * Requires annotation: flagsmith.com/project-id
+ */
+const overviewCard = EntityCardBlueprint.make({
+  name: 'overview',
+  params: {
+    filter: 'has:annotation:flagsmith.com/project-id',
+    loader: () =>
+      import('./components/FlagsmithOverviewCard').then(m =>
+        createElement(m.FlagsmithOverviewCard),
+      ),
+  },
+});
+
+/**
+ * Entity card for FlagsmithUsageCard - shows 30-day usage analytics
+ * Requires annotations: flagsmith.com/project-id, flagsmith.com/org-id
+ */
+const usageCard = EntityCardBlueprint.make({
+  name: 'usage',
+  params: {
+    filter: 'has:annotation:flagsmith.com/project-id,flagsmith.com/org-id',
+    loader: () =>
+      import('./components/FlagsmithUsageCard').then(m =>
+        createElement(m.FlagsmithUsageCard),
+      ),
+  },
+});
+
+/**
+ * Flagsmith plugin for Backstage's new frontend system.
+ *
+ * This plugin provides:
+ * - Entity content tab showing feature flags
+ * - Overview card for entity pages
+ * - Usage analytics card
+ */
+const flagsmithPlugin = createFrontendPlugin({
+  pluginId: 'flagsmith',
+  extensions: [flagsTabContent, overviewCard, usageCard],
+});
+
+export default flagsmithPlugin;