feat: refactor to error display instead

Signed-off-by: benjdlambert <ben@blam.sh>

packages/frontend-plugin-api/src/apis/definitions/SwappableComponentsApi.ts

@@ -40,5 +40,5 @@ export interface SwappableComponentsApi {
  * @public
  */
 export const swappableComponentsApiRef = createApiRef<SwappableComponentsApi>({
-  id: 'core.swappableComponents',
+  id: 'core.swappable-components',
 });

packages/frontend-plugin-api/src/components/DefaultSwappableComponents.ts

@@ -15,7 +15,7 @@
  */
 
 import {
-  CoreErrorBoundaryFallbackProps,
+  CoreErrorDisplayProps,
   CoreNotFoundErrorPageProps,
   CoreProgressProps,
 } from '../types';
@@ -39,7 +39,6 @@ export const NotFoundErrorPage =
 /**
  * @public
  */
-export const ErrorBoundary =
-  createSwappableComponent<CoreErrorBoundaryFallbackProps>({
-    id: 'core.components.errorBoundary',
-  });
+export const ErrorDisplay = createSwappableComponent<CoreErrorDisplayProps>({
+  id: 'core.components.errorDisplay',
+});

packages/frontend-plugin-api/src/components/ErrorBoundary.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { Component, ComponentType, PropsWithChildren } from 'react';
+import { Component, PropsWithChildren } from 'react';
 import { FrontendPlugin } from '../wiring';
-import { CoreErrorBoundaryFallbackProps } from '../types';
+import { ErrorDisplay } from './DefaultSwappableComponents';
 
 type ErrorBoundaryProps = PropsWithChildren<{
   plugin?: FrontendPlugin;
-  Fallback: ComponentType<CoreErrorBoundaryFallbackProps>;
 }>;
 type ErrorBoundaryState = { error?: Error };
 
@@ -41,13 +40,15 @@ export class ErrorBoundary extends Component<
 
   render() {
     const { error } = this.state;
-    const { plugin, children, Fallback } = this.props;
+    const { plugin, children } = this.props;
 
     if (error) {
       return (
-        <Fallback
+        <ErrorDisplay
+          // todo: do we want to just use useAppNode hook in the ErrorDisplay instead?
           plugin={plugin}
           error={error}
+          // todo: probably change this to onResetError
           resetError={this.handleErrorReset}
         />
       );

packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx

@@ -29,7 +29,6 @@ import { AppNode } from '../apis';
 import { Progress } from '@backstage/core-components';
 import { coreExtensionData } from '../wiring';
 import { AppNodeProvider } from './AppNodeProvider';
-import { ErrorBoundary as ErrorBoundaryComponent } from './DefaultSwappableComponents';
 
 type RouteTrackerProps = PropsWithChildren<{
   enabled?: boolean;
@@ -77,7 +76,7 @@ export function ExtensionBoundary(props: ExtensionBoundaryProps) {
   return (
     <AppNodeProvider node={node}>
       <Suspense fallback={<Progress />}>
-        <ErrorBoundary plugin={plugin} Fallback={ErrorBoundaryComponent}>
+        <ErrorBoundary plugin={plugin}>
           <AnalyticsContext attributes={attributes}>
             <RouteTracker enabled={hasRoutePathOutput}>{children}</RouteTracker>
           </AnalyticsContext>

packages/frontend-plugin-api/src/components/createSwappableComponent.test.tsx

@@ -21,7 +21,7 @@ describe('createSwappableComponent', () => {
   it('can be created and read', () => {
     const { ref } = createSwappableComponent({ id: 'foo' });
     expect(ref.id).toBe('foo');
-    expect(String(ref)).toBe('ComponentRef{id=foo}');
+    expect(String(ref)).toBe('SwappableComponentRef{id=foo}');
   });
 
   it('should allow defining a default component implementation', () => {

packages/frontend-plugin-api/src/index.ts

@@ -34,5 +34,5 @@ export * from './wiring';
 export type {
   CoreProgressProps,
   CoreNotFoundErrorPageProps,
-  CoreErrorBoundaryFallbackProps,
+  CoreErrorDisplayProps,
 } from './types';

packages/frontend-plugin-api/src/types.ts

@@ -26,7 +26,7 @@ export type CoreNotFoundErrorPageProps = {
 };
 
 /** @public */
-export type CoreErrorBoundaryFallbackProps = {
+export type CoreErrorDisplayProps = {
   plugin?: FrontendPlugin;
   error: Error;
   resetError: () => void;