Merge pull request #20586 from backstage/camilaibs/improve-error-boundary-component

[DI]  Improve `ExtensionBoundary` component

plugins/catalog/src/alpha.tsx

@@ -51,7 +51,6 @@ import {
   rootRouteRef,
   viewTechDocRouteRef,
 } from './routes';
-import { Progress } from '@backstage/core-components';
 import { useEntityFromUrl } from './components/CatalogEntityPage/useEntityFromUrl';
 
 /** @alpha */
@@ -97,8 +96,10 @@ export function createCatalogFilterExtension<
   configSchema?: PortableSchema<TConfig>;
   loader: (options: { config: TConfig }) => Promise<JSX.Element>;
 }) {
+  const id = `catalog.filter.${options.id}`;
+
   return createExtension({
-    id: `catalog.filter.${options.id}`,
+    id,
     attachTo: { id: 'plugin.catalog.page.index', input: 'filters' },
     inputs: options.inputs ?? {},
     configSchema: options.configSchema,
@@ -106,7 +107,7 @@ export function createCatalogFilterExtension<
       element: coreExtensionData.reactElement,
     },
     factory({ bind, config, source }) {
-      const LazyComponent = React.lazy(() =>
+      const ExtensionComponent = React.lazy(() =>
         options
           .loader({ config })
           .then(element => ({ default: () => element })),
@@ -114,10 +115,8 @@ export function createCatalogFilterExtension<
 
       bind({
         element: (
-          <ExtensionBoundary source={source}>
-            <React.Suspense fallback={<Progress />}>
-              <LazyComponent />
-            </React.Suspense>
+          <ExtensionBoundary id={id} source={source}>
+            <ExtensionComponent />
           </ExtensionBoundary>
         ),
       });

plugins/search-react/src/alpha.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { lazy, Suspense } from 'react';
+import React, { lazy } from 'react';
 
 import { ListItemProps } from '@material-ui/core';
 
@@ -25,7 +25,6 @@ import {
   createExtensionDataRef,
   createSchemaFromZod,
 } from '@backstage/frontend-plugin-api';
-import { Progress } from '@backstage/core-components';
 import { SearchDocument, SearchResult } from '@backstage/plugin-search-common';
 
 import { SearchResultListItemExtension } from './extensions';
@@ -87,6 +86,8 @@ export type SearchResultItemExtensionOptions<
 export function createSearchResultListItemExtension<
   TConfig extends { noTrack?: boolean },
 >(options: SearchResultItemExtensionOptions<TConfig>) {
+  const id = `plugin.search.result.item.${options.id}`;
+
   const configSchema =
     'configSchema' in options
       ? options.configSchema
@@ -95,15 +96,19 @@ export function createSearchResultListItemExtension<
             noTrack: z.boolean().default(false),
           }),
         ) as PortableSchema<TConfig>);
+
   return createExtension({
-    id: `plugin.search.result.item.${options.id}`,
-    attachTo: options.attachTo ?? { id: 'plugin.search.page', input: 'items' },
+    id,
+    attachTo: options.attachTo ?? {
+      id: 'plugin.search.page',
+      input: 'items',
+    },
     configSchema,
     output: {
       item: searchResultItemExtensionData,
     },
     factory({ bind, config, source }) {
-      const LazyComponent = lazy(() =>
+      const ExtensionComponent = lazy(() =>
         options
           .component({ config })
           .then(component => ({ default: component })),
@@ -113,16 +118,14 @@ export function createSearchResultListItemExtension<
         item: {
           predicate: options.predicate,
           component: props => (
-            <ExtensionBoundary source={source}>
-              <Suspense fallback={<Progress />}>
-                <SearchResultListItemExtension
-                  rank={props.rank}
-                  result={props.result}
-                  noTrack={config.noTrack}
-                >
-                  <LazyComponent {...props} />
-                </SearchResultListItemExtension>
-              </Suspense>
+            <ExtensionBoundary id={id} source={source}>
+              <SearchResultListItemExtension
+                rank={props.rank}
+                result={props.result}
+                noTrack={config.noTrack}
+              >
+                <ExtensionComponent {...props} />
+              </SearchResultListItemExtension>
             </ExtensionBoundary>
           ),
         },