packages/dev-utils: update to reflect changes in core and include proper alert display

packages/dev-utils/src/devApp/apiFactories.test.ts

@@ -15,12 +15,14 @@
  */
 
 import * as apiFactories from './apiFactories';
-import { ApiTestRegistry } from '@backstage/core';
+import { ApiTestRegistry, ApiFactory } from '@backstage/core';
 
 describe('apiFactories', () => {
   it('should be possible to get an instance of each API', () => {
     const registry = new ApiTestRegistry();
-    const factories = Object.values(apiFactories);
+    const factories: ApiFactory<unknown, unknown, unknown>[] = Object.values(
+      apiFactories,
+    );
 
     for (const factory of factories) {
       registry.register(factory);

packages/dev-utils/src/devApp/apiFactories.ts

@@ -20,6 +20,8 @@ import {
   ErrorApiForwarder,
   AlertApi,
   createApiFactory,
+  ErrorAlerter,
+  AlertApiForwarder,
 } from '@backstage/core';
 
 // TODO(rugvip): We should likely figure out how to reuse all of these between apps
@@ -30,18 +32,12 @@ import {
 export const alertApiFactory = createApiFactory({
   implements: alertApiRef,
   deps: {},
-  factory: (): AlertApi => ({
-    // TODO: Figure out how to ship a nicer implementation without having
-    // to export any external references.
-    post(alertConfig) {
-      // eslint-disable-next-line no-alert
-      alert(`Alert[${alertConfig.severity}]: ${alertConfig.message}`);
-    },
-  }),
+  factory: (): AlertApi => new AlertApiForwarder(),
 });
 
 export const errorApiFactory = createApiFactory({
   implements: errorApiRef,
   deps: { alertApi: alertApiRef },
-  factory: ({ alertApi }) => new ErrorApiForwarder(alertApi),
+  factory: ({ alertApi }) =>
+    new ErrorAlerter(alertApi, new ErrorApiForwarder()),
 });

packages/dev-utils/src/devApp/render.tsx

@@ -29,6 +29,7 @@ import {
   createPlugin,
   ApiTestRegistry,
   ApiHolder,
+  AlertDisplay,
 } from '@backstage/core';
 import * as defaultApiFactories from './apiFactories';
 
@@ -77,6 +78,7 @@ class DevAppBuilder {
     const DevApp: FC<{}> = () => {
       return (
         <AppProvider>
+          <AlertDisplay />
           <BrowserRouter>
             <SidebarPage>
               {sidebar}