Update serverlessops-catalog plugin for new frontend system

src/package.json

@@ -50,7 +50,9 @@
   },
   "resolutions": {
     "@types/react": "^18",
-    "@types/react-dom": "^18"
+    "@types/react-dom": "^18",
+    "knex": "3.2.10",
+    "tarn": "3.0.2"
   },
   "prettier": "@backstage/cli/config/prettier-config",
   "lint-staged": {

src/packages/app/src/App.tsx

@@ -1,5 +1,6 @@
 import { createApp } from '@backstage/frontend-defaults';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
+import serverlessOpsCatalogPlugin from '@internal/backstage-plugin-serverlessops-catalog';
 import { navModule } from './modules/nav';
 import { configApiRef, googleAuthApiRef, useApi } from '@backstage/core-plugin-api';
 import { SignInPageBlueprint } from '@backstage/plugin-app-react';
@@ -47,6 +48,7 @@ export default createApp({
   features: [
     catalogPlugin,
     navModule,
+    serverlessOpsCatalogPlugin,
     createFrontendModule({
       pluginId: 'app',
       extensions: [signInPage],

src/plugins/serverlessops-catalog/dev/index.tsx

@@ -1,11 +1,6 @@
-import { createDevApp } from '@backstage/dev-utils';
-import { soCatalogPlugin, SoTabbedCatalogIndexPage } from '../src/plugin';
+import { createDevApp } from '@backstage/frontend-dev-utils'
+import serverlessOpsCatalogPlugin from '../src'
 
-createDevApp()
-  .registerPlugin(soCatalogPlugin)
-  .addPage({
-    element: <SoTabbedCatalogIndexPage />,
-    title: 'Root Page',
-    path: '/catalog',
-  })
-  .render();
+createDevApp({
+    features: [serverlessOpsCatalogPlugin],
+})

src/plugins/serverlessops-catalog/package.json

@@ -11,7 +11,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "frontend-plugin"
+    "role": "frontend-plugin",
+    "pluginId": "serverlessops-catalog"
   },
   "sideEffects": false,
   "scripts": {
@@ -27,6 +28,7 @@
     "@backstage/catalog-model": "backstage:^",
     "@backstage/core-components": "backstage:^",
     "@backstage/core-plugin-api": "backstage:^",
+    "@backstage/frontend-plugin-api": "backstage:^",
     "@backstage/plugin-api-docs": "backstage:^",
     "@backstage/plugin-catalog": "backstage:^",
     "@backstage/plugin-catalog-graph": "backstage:^",
@@ -43,12 +45,13 @@
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@backstage/cli": "backstage:^",
     "@backstage/core-app-api": "backstage:^",
-    "@backstage/dev-utils": "backstage:^",
+    "@backstage/frontend-dev-utils": "backstage:^",
     "@backstage/test-utils": "backstage:^",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",

src/plugins/serverlessops-catalog/src/index.ts

@@ -1,6 +1,5 @@
 export {
-    soCatalogPlugin,
-    SoCatalogIndexPageEntityList,
-    SoTabbedCatalogIndexPage,
-    SoTabbedDirectoryIndexPage
+    SoCatalogTabbedIndexPage,
+    SoCatalogTabbedDirectoryIndexPage,
+    serverlessOpsCatalogPlugin as default,
 } from './plugin';

src/plugins/serverlessops-catalog/src/plugin.test.ts

@@ -1,17 +1,17 @@
 import {
-  SoCatalogIndexPageEntityList,
-  SoTabbedCatalogIndexPage,
-  SoTabbedDirectoryIndexPage,
+  SoCatalogTabbedDirectoryIndexPage,
+  SoCatalogTabbedIndexPage,
+  serverlessOpsCatalogPlugin,
 } from './plugin';
 
 describe('catalog', () => {
-  it('should export plugin SoCatalogIndexPageEntityList', () => {
-    expect(SoCatalogIndexPageEntityList).toBeDefined();
+  it('should export plugin SoCatalogTabbedDirectoryIndexPage', () => {
+    expect(SoCatalogTabbedDirectoryIndexPage).toBeDefined();
   });
-  it('should export plugin SoTabbedCatalogIndexPage', () => {
-    expect(SoTabbedCatalogIndexPage).toBeDefined();
+  it('should export plugin SoCatalogTabbedIndexPage', () => {
+    expect(SoCatalogTabbedIndexPage).toBeDefined();
   });
-  it('should export plugin SoTabbedDirectoryIndexPage', () => {
-    expect(SoTabbedDirectoryIndexPage).toBeDefined();
+  it('should export default plugin surface', () => {
+    expect(serverlessOpsCatalogPlugin).toBeDefined();
   });
 });

src/plugins/serverlessops-catalog/src/plugin.tsx

@@ -0,0 +1,51 @@
+import { createElement } from 'react'
+import {
+    createFrontendPlugin,
+    createRouteRef,
+    PageBlueprint,
+} from '@backstage/frontend-plugin-api'
+
+export { TabbedCatalogIndexPage } from './components/TabbedCatalogIndexPage'
+
+const catalogIndexRouteRef = createRouteRef()
+const tabbedCatalogRouteRef = createRouteRef()
+const tabbedDirectoryRouteRef = createRouteRef()
+
+export const SoCatalogTabbedIndexPage = PageBlueprint.make({
+    name: 'serverlessops-catalog-tabbed-index',
+    params: {
+      path: '/serverlessops-catalog/catalog',
+        routeRef: tabbedCatalogRouteRef,
+        loader: () =>
+            import('./components/TabbedCatalogIndexPage').then(m =>
+                createElement(m.TabbedCatalogIndexPage)
+            ),
+    },
+})
+
+export const SoCatalogTabbedDirectoryIndexPage = PageBlueprint.make({
+  name: 'serverlessops-catalog-tabbed-directory-index',
+    params: {
+        path: '/serverlessops-catalog/directory',
+        routeRef: tabbedDirectoryRouteRef,
+        loader: () =>
+            import('./components/TabbedDirectoryIndexPage').then(m =>
+                createElement(m.TabbedDirectoryIndexPage)
+            ),
+    },
+})
+
+const serverlessOpsCatalogPlugin = createFrontendPlugin({
+    pluginId: 'serverlessops-catalog',
+    routes: {
+        catalogIndex: catalogIndexRouteRef,
+        tabbedCatalog: tabbedCatalogRouteRef,
+        tabbedDirectory: tabbedDirectoryRouteRef,
+    },
+    extensions: [
+        SoCatalogTabbedIndexPage,
+        SoCatalogTabbedDirectoryIndexPage,
+    ],
+})
+
+export { serverlessOpsCatalogPlugin }

src/plugins/serverlessops-catalog/src/routes.ts

@@ -1,5 +1,3 @@
-import { createRouteRef } from '@backstage/core-plugin-api';
+import { createRouteRef } from '@backstage/frontend-plugin-api'
 
-export const rootRouteRef = createRouteRef({
-  id: 'serverlessops-catalog',
-});
+export const rootRouteRef = createRouteRef()