plugins: cleanup unnecessary use of compatWrapper

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/metal-humans-lose.md

@@ -0,0 +1,21 @@
+---
+'@backstage/plugin-catalog-unprocessed-entities': patch
+'@backstage/plugin-app-visualizer': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-catalog-graph': patch
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-notifications': patch
+'@backstage/plugin-user-settings': patch
+'@backstage/plugin-kubernetes': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-devtools': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-home': patch
+'@backstage/plugin-app': patch
+'@backstage/plugin-org': patch
+---
+
+Remove unnecessary use of `compatWrapper` for the new frontend system.

plugins/api-docs/src/alpha.tsx

@@ -23,10 +23,7 @@ import {
   createFrontendPlugin,
 } from '@backstage/frontend-plugin-api';
 
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 
 import {
   ApiEntity,
@@ -48,7 +45,7 @@ const apiDocsNavItem = NavItemBlueprint.make({
   params: {
     title: 'APIs',
     routeRef: convertLegacyRouteRef(rootRoute),
-    icon: () => compatWrapper(<AppIcon id="kind:api" />),
+    icon: () => <AppIcon id="kind:api" />,
   },
 });
 
@@ -82,13 +79,11 @@ const apiDocsExplorerPage = PageBlueprint.makeWithOverrides({
       path: '/api-docs',
       routeRef: convertLegacyRouteRef(rootRoute),
       loader: () =>
-        import('./components/ApiExplorerPage').then(m =>
-          compatWrapper(
-            <m.ApiExplorerIndexPage
-              initiallySelectedFilter={config.initiallySelectedFilter}
-            />,
-          ),
-        ),
+        import('./components/ApiExplorerPage').then(m => (
+          <m.ApiExplorerIndexPage
+            initiallySelectedFilter={config.initiallySelectedFilter}
+          />
+        )),
     });
   },
 });
@@ -109,10 +104,7 @@ const apiDocsHasApisEntityCard = EntityCardBlueprint.make({
         )!!
       );
     },
-    loader: () =>
-      import('./components/ApisCards').then(m =>
-        compatWrapper(<m.HasApisCard />),
-      ),
+    loader: () => import('./components/ApisCards').then(m => <m.HasApisCard />),
   },
 });
 
@@ -121,9 +113,9 @@ const apiDocsDefinitionEntityCard = EntityCardBlueprint.make({
   params: {
     filter: 'kind:api',
     loader: () =>
-      import('./components/ApiDefinitionCard').then(m =>
-        compatWrapper(<m.ApiDefinitionCard />),
-      ),
+      import('./components/ApiDefinitionCard').then(m => (
+        <m.ApiDefinitionCard />
+      )),
   },
 });
 
@@ -135,9 +127,7 @@ const apiDocsConsumedApisEntityCard = EntityCardBlueprint.make({
     // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
     filter: 'kind:component',
     loader: () =>
-      import('./components/ApisCards').then(m =>
-        compatWrapper(<m.ConsumedApisCard />),
-      ),
+      import('./components/ApisCards').then(m => <m.ConsumedApisCard />),
   },
 });
 
@@ -149,9 +139,7 @@ const apiDocsProvidedApisEntityCard = EntityCardBlueprint.make({
     // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
     filter: 'kind:component',
     loader: () =>
-      import('./components/ApisCards').then(m =>
-        compatWrapper(<m.ProvidedApisCard />),
-      ),
+      import('./components/ApisCards').then(m => <m.ProvidedApisCard />),
   },
 });
 
@@ -163,9 +151,9 @@ const apiDocsConsumingComponentsEntityCard = EntityCardBlueprint.make({
     // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
     filter: 'kind:api',
     loader: () =>
-      import('./components/ComponentsCards').then(m =>
-        compatWrapper(<m.ConsumingComponentsCard />),
-      ),
+      import('./components/ComponentsCards').then(m => (
+        <m.ConsumingComponentsCard />
+      )),
   },
 });
 
@@ -177,9 +165,9 @@ const apiDocsProvidingComponentsEntityCard = EntityCardBlueprint.make({
     // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
     filter: 'kind:api',
     loader: () =>
-      import('./components/ComponentsCards').then(m =>
-        compatWrapper(<m.ProvidingComponentsCard />),
-      ),
+      import('./components/ComponentsCards').then(m => (
+        <m.ProvidingComponentsCard />
+      )),
   },
 });
 
@@ -190,15 +178,13 @@ const apiDocsDefinitionEntityContent = EntityContentBlueprint.make({
     title: 'Definition',
     filter: 'kind:api',
     loader: async () =>
-      import('./components/ApiDefinitionCard').then(m =>
-        compatWrapper(
-          <Grid container spacing={3}>
-            <Grid item xs={12}>
-              <m.ApiDefinitionCard />
-            </Grid>
-          </Grid>,
-        ),
-      ),
+      import('./components/ApiDefinitionCard').then(m => (
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <m.ApiDefinitionCard />
+          </Grid>
+        </Grid>
+      )),
   },
 });
 
@@ -209,18 +195,16 @@ const apiDocsApisEntityContent = EntityContentBlueprint.make({
     title: 'APIs',
     filter: 'kind:component',
     loader: async () =>
-      import('./components/ApisCards').then(m =>
-        compatWrapper(
-          <Grid container spacing={3} alignItems="stretch">
-            <Grid item xs={12}>
-              <m.ProvidedApisCard />
-            </Grid>
-            <Grid item xs={12}>
-              <m.ConsumedApisCard />
-            </Grid>
-          </Grid>,
-        ),
-      ),
+      import('./components/ApisCards').then(m => (
+        <Grid container spacing={3} alignItems="stretch">
+          <Grid item xs={12}>
+            <m.ProvidedApisCard />
+          </Grid>
+          <Grid item xs={12}>
+            <m.ConsumedApisCard />
+          </Grid>
+        </Grid>
+      )),
   },
 });
 

plugins/catalog-graph/src/alpha.tsx

@@ -19,10 +19,7 @@ import {
   createFrontendPlugin,
   PageBlueprint,
 } from '@backstage/frontend-plugin-api';
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
 import { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';
 import {
@@ -53,9 +50,9 @@ const CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({
   factory(originalFactory, { config }) {
     return originalFactory({
       loader: async () =>
-        import('./components/CatalogGraphCard').then(m =>
-          compatWrapper(<m.CatalogGraphCard {...config} />),
-        ),
+        import('./components/CatalogGraphCard').then(m => (
+          <m.CatalogGraphCard {...config} />
+        )),
     });
   },
 });
@@ -83,9 +80,9 @@ const CatalogGraphPage = PageBlueprint.makeWithOverrides({
       path: '/catalog-graph',
       routeRef: convertLegacyRouteRef(catalogGraphRouteRef),
       loader: () =>
-        import('./components/CatalogGraphPage').then(m =>
-          compatWrapper(<m.CatalogGraphPage {...config} />),
-        ),
+        import('./components/CatalogGraphPage').then(m => (
+          <m.CatalogGraphPage {...config} />
+        )),
     });
   },
 });

plugins/catalog-import/src/alpha.tsx

@@ -19,10 +19,7 @@ import {
   discoveryApiRef,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import {
   createFrontendPlugin,
   PageBlueprint,
@@ -47,13 +44,11 @@ const catalogImportPage = PageBlueprint.make({
     path: '/catalog-import',
     routeRef: convertLegacyRouteRef(rootRouteRef),
     loader: () =>
-      import('./components/ImportPage').then(m =>
-        compatWrapper(
-          <RequirePermission permission={catalogEntityCreatePermission}>
-            <m.ImportPage />
-          </RequirePermission>,
-        ),
-      ),
+      import('./components/ImportPage').then(m => (
+        <RequirePermission permission={catalogEntityCreatePermission}>
+          <m.ImportPage />
+        </RequirePermission>
+      )),
   },
 });
 

plugins/catalog-unprocessed-entities/src/alpha/plugin.tsx

@@ -27,10 +27,7 @@ import {
   catalogUnprocessedEntitiesApiRef,
   CatalogUnprocessedEntitiesClient,
 } from '../api';
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import QueueIcon from '@material-ui/icons/Queue';
 import { rootRouteRef } from '../routes';
 
@@ -54,9 +51,9 @@ export const catalogUnprocessedEntitiesPage = PageBlueprint.make({
     path: '/catalog-unprocessed-entities',
     routeRef: convertLegacyRouteRef(rootRouteRef),
     loader: () =>
-      import('../components/UnprocessedEntities').then(m =>
-        compatWrapper(<m.UnprocessedEntities />),
-      ),
+      import('../components/UnprocessedEntities').then(m => (
+        <m.UnprocessedEntities />
+      )),
   },
 });
 

plugins/catalog/src/alpha/contextMenuItems.tsx

@@ -37,7 +37,6 @@ import {
 import { rootRouteRef, unregisterRedirectRouteRef } from '../routes';
 import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common/alpha';
 import { useEffect } from 'react';
-import { compatWrapper } from '@backstage/core-compat-api';
 
 export const copyEntityUrlContextMenuItem = EntityContextMenuItemBlueprint.make(
   {
@@ -111,23 +110,21 @@ export const unregisterEntityContextMenuItem =
           title: t('entityContextMenu.unregisterMenuTitle'),
           disabled: !unregisterPermission.allowed,
           onClick: async () => {
-            dialogApi.showModal(({ dialog }: { dialog: DialogApiDialog }) =>
-              compatWrapper(
-                <UnregisterEntityDialog
-                  open
-                  entity={entity}
-                  onClose={() => dialog.close()}
-                  onConfirm={() => {
-                    dialog.close();
-                    navigate(
-                      unregisterRedirectRoute
-                        ? unregisterRedirectRoute()
-                        : catalogRoute(),
-                    );
-                  }}
-                />,
-              ),
-            );
+            dialogApi.showModal(({ dialog }: { dialog: DialogApiDialog }) => (
+              <UnregisterEntityDialog
+                open
+                entity={entity}
+                onClose={() => dialog.close()}
+                onConfirm={() => {
+                  dialog.close();
+                  navigate(
+                    unregisterRedirectRoute
+                      ? unregisterRedirectRoute()
+                      : catalogRoute(),
+                  );
+                }}
+              />
+            ));
           },
         };
       },

plugins/catalog/src/alpha/entityCards.tsx

@@ -18,7 +18,6 @@ import {
   EntityIconLinkBlueprint,
   EntityCardBlueprint,
 } from '@backstage/plugin-catalog-react/alpha';
-import { compatWrapper } from '@backstage/core-compat-api';
 import { createExtensionInput } from '@backstage/frontend-plugin-api';
 import {
   HeaderIconLinkRow,
@@ -65,8 +64,8 @@ export const catalogAboutEntityCard = EntityCardBlueprint.makeWithOverrides({
         const { InternalAboutCard } = await import(
           '../components/AboutCard/AboutCard'
         );
-        return compatWrapper(
-          <InternalAboutCard variant="gridItem" subheader={<Subheader />} />,
+        return (
+          <InternalAboutCard variant="gridItem" subheader={<Subheader />} />
         );
       },
     });
@@ -79,9 +78,9 @@ export const catalogLinksEntityCard = EntityCardBlueprint.make({
     type: 'info',
     filter: { 'metadata.links': { $exists: true } },
     loader: async () =>
-      import('../components/EntityLinksCard').then(m =>
-        compatWrapper(<m.EntityLinksCard variant="gridItem" />),
-      ),
+      import('../components/EntityLinksCard').then(m => (
+        <m.EntityLinksCard variant="gridItem" />
+      )),
   },
 });
 
@@ -91,9 +90,9 @@ export const catalogLabelsEntityCard = EntityCardBlueprint.make({
     type: 'info',
     filter: { 'metadata.labels': { $exists: true } },
     loader: async () =>
-      import('../components/EntityLabelsCard').then(m =>
-        compatWrapper(<m.EntityLabelsCard variant="gridItem" />),
-      ),
+      import('../components/EntityLabelsCard').then(m => (
+        <m.EntityLabelsCard variant="gridItem" />
+      )),
   },
 });
 
@@ -102,9 +101,9 @@ export const catalogDependsOnComponentsEntityCard = EntityCardBlueprint.make({
   params: {
     filter: { kind: 'component' },
     loader: async () =>
-      import('../components/DependsOnComponentsCard').then(m =>
-        compatWrapper(<m.DependsOnComponentsCard variant="gridItem" />),
-      ),
+      import('../components/DependsOnComponentsCard').then(m => (
+        <m.DependsOnComponentsCard variant="gridItem" />
+      )),
   },
 });
 
@@ -113,9 +112,9 @@ export const catalogDependsOnResourcesEntityCard = EntityCardBlueprint.make({
   params: {
     filter: { kind: 'component' },
     loader: async () =>
-      import('../components/DependsOnResourcesCard').then(m =>
-        compatWrapper(<m.DependsOnResourcesCard variant="gridItem" />),
-      ),
+      import('../components/DependsOnResourcesCard').then(m => (
+        <m.DependsOnResourcesCard variant="gridItem" />
+      )),
   },
 });
 
@@ -124,9 +123,9 @@ export const catalogHasComponentsEntityCard = EntityCardBlueprint.make({
   params: {
     filter: { kind: 'system' },
     loader: async () =>
-      import('../components/HasComponentsCard').then(m =>
-        compatWrapper(<m.HasComponentsCard variant="gridItem" />),
-      ),
+      import('../components/HasComponentsCard').then(m => (
+        <m.HasComponentsCard variant="gridItem" />
+      )),
   },
 });
 
@@ -135,9 +134,9 @@ export const catalogHasResourcesEntityCard = EntityCardBlueprint.make({
   params: {
     filter: { kind: 'system' },
     loader: async () =>
-      import('../components/HasResourcesCard').then(m =>
-        compatWrapper(<m.HasResourcesCard variant="gridItem" />),
-      ),
+      import('../components/HasResourcesCard').then(m => (
+        <m.HasResourcesCard variant="gridItem" />
+      )),
   },
 });
 
@@ -146,9 +145,9 @@ export const catalogHasSubcomponentsEntityCard = EntityCardBlueprint.make({
   params: {
     filter: { kind: 'component' },
     loader: async () =>
-      import('../components/HasSubcomponentsCard').then(m =>
-        compatWrapper(<m.HasSubcomponentsCard variant="gridItem" />),
-      ),
+      import('../components/HasSubcomponentsCard').then(m => (
+        <m.HasSubcomponentsCard variant="gridItem" />
+      )),
   },
 });
 
@@ -157,9 +156,9 @@ export const catalogHasSubdomainsEntityCard = EntityCardBlueprint.make({
   params: {
     filter: { kind: 'domain' },
     loader: async () =>
-      import('../components/HasSubdomainsCard').then(m =>
-        compatWrapper(<m.HasSubdomainsCard variant="gridItem" />),
-      ),
+      import('../components/HasSubdomainsCard').then(m => (
+        <m.HasSubdomainsCard variant="gridItem" />
+      )),
   },
 });
 
@@ -168,9 +167,9 @@ export const catalogHasSystemsEntityCard = EntityCardBlueprint.make({
   params: {
     filter: { kind: 'domain' },
     loader: async () =>
-      import('../components/HasSystemsCard').then(m =>
-        compatWrapper(<m.HasSystemsCard variant="gridItem" />),
-      ),
+      import('../components/HasSystemsCard').then(m => (
+        <m.HasSystemsCard variant="gridItem" />
+      )),
   },
 });
 

plugins/catalog/src/alpha/pages.tsx

@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import {
   coreExtensionData,
   createExtensionInput,
@@ -65,11 +62,11 @@ export const catalogPage = PageBlueprint.makeWithOverrides({
         const filters = inputs.filters.map(filter =>
           filter.get(coreExtensionData.reactElement),
         );
-        return compatWrapper(
+        return (
           <BaseCatalogPage
             filters={<>{filters}</>}
             pagination={config.pagination}
-          />,
+          />
         );
       },
     });
@@ -220,7 +217,7 @@ export const catalogEntityPage = PageBlueprint.makeWithOverrides({
           );
         };
 
-        return compatWrapper(<Component />);
+        return <Component />;
       },
     });
   },

plugins/devtools/src/alpha/plugin.tsx

@@ -24,10 +24,7 @@ import {
 } from '@backstage/frontend-plugin-api';
 
 import { devToolsApiRef, DevToolsClient } from '../api';
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import BuildIcon from '@material-ui/icons/Build';
 import { rootRouteRef } from '../routes';
 
@@ -51,9 +48,7 @@ export const devToolsPage = PageBlueprint.make({
     path: '/devtools',
     routeRef: convertLegacyRouteRef(rootRouteRef),
     loader: () =>
-      import('../components/DevToolsPage').then(m =>
-        compatWrapper(<m.DevToolsPage />),
-      ),
+      import('../components/DevToolsPage').then(m => <m.DevToolsPage />),
   },
 });
 

plugins/home/package.json

@@ -60,7 +60,6 @@
     "@backstage/catalog-model": "workspace:^",
     "@backstage/config": "workspace:^",
     "@backstage/core-app-api": "workspace:^",
-    "@backstage/core-compat-api": "workspace:^",
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/frontend-plugin-api": "workspace:^",

plugins/home/src/alpha.tsx

@@ -26,7 +26,6 @@ import {
   storageApiRef,
   ApiBlueprint,
 } from '@backstage/frontend-plugin-api';
-import { compatWrapper } from '@backstage/core-compat-api';
 import { VisitListener } from './components/';
 import { visitsApiRef, VisitsStorageApi } from './api';
 
@@ -57,14 +56,12 @@ const homePage = PageBlueprint.makeWithOverrides({
       path: '/home',
       routeRef: rootRouteRef,
       loader: () =>
-        import('./components/').then(m =>
-          compatWrapper(
-            <m.HomepageCompositionRoot
-              children={inputs.props?.get(coreExtensionData.reactElement)}
-              title={inputs.props?.get(titleExtensionDataRef)}
-            />,
-          ),
-        ),
+        import('./components/').then(m => (
+          <m.HomepageCompositionRoot
+            children={inputs.props?.get(coreExtensionData.reactElement)}
+            title={inputs.props?.get(titleExtensionDataRef)}
+          />
+        )),
     });
   },
 });

plugins/kubernetes/src/alpha/entityContents.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { compatWrapper } from '@backstage/core-compat-api';
 import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';
 import { isKubernetesAvailable } from '../Router';
 
@@ -26,8 +25,6 @@ export const entityKubernetesContent = EntityContentBlueprint.make({
     group: 'deployment',
     filter: isKubernetesAvailable,
     loader: () =>
-      import('./KubernetesContentPage').then(m =>
-        compatWrapper(<m.KubernetesContentPage />),
-      ),
+      import('./KubernetesContentPage').then(m => <m.KubernetesContentPage />),
   },
 });

plugins/kubernetes/src/alpha/pages.tsx

@@ -14,11 +14,8 @@
  * limitations under the License.
  */
 
-import { PageBlueprint } from '@backstage/frontend-plugin-api'; // Add this line to import React
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { PageBlueprint } from '@backstage/frontend-plugin-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import { rootCatalogKubernetesRouteRef } from '../plugin';
 
 export const kubernetesPage = PageBlueprint.make({
@@ -28,6 +25,6 @@ export const kubernetesPage = PageBlueprint.make({
     // by wrapping into the convertLegacyRouteRef.
     routeRef: convertLegacyRouteRef(rootCatalogKubernetesRouteRef),
     // these inputs usually match the props required by the component.
-    loader: () => import('../Router').then(m => compatWrapper(<m.Router />)),
+    loader: () => import('../Router').then(m => <m.Router />),
   },
 });

plugins/notifications/src/alpha.tsx

@@ -23,7 +23,6 @@ import {
 } from '@backstage/frontend-plugin-api';
 import { rootRouteRef } from './routes';
 import {
-  compatWrapper,
   convertLegacyRouteRef,
   convertLegacyRouteRefs,
 } from '@backstage/core-compat-api';
@@ -34,9 +33,9 @@ const page = PageBlueprint.make({
     path: '/notifications',
     routeRef: convertLegacyRouteRef(rootRouteRef),
     loader: () =>
-      import('./components/NotificationsPage').then(m =>
-        compatWrapper(<m.NotificationsPage />),
-      ),
+      import('./components/NotificationsPage').then(m => (
+        <m.NotificationsPage />
+      )),
   },
 });
 

plugins/org/src/alpha.tsx

@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  compatWrapper,
-  convertLegacyRouteRefs,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRefs } from '@backstage/core-compat-api';
 import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
 import { catalogIndexRouteRef } from './routes';
 import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
@@ -29,8 +26,8 @@ const EntityGroupProfileCard = EntityCardBlueprint.make({
     type: 'info',
     filter: { kind: 'group' },
     loader: async () =>
-      import('./components/Cards/Group/GroupProfile/GroupProfileCard').then(m =>
-        compatWrapper(<m.GroupProfileCard />),
+      import('./components/Cards/Group/GroupProfile/GroupProfileCard').then(
+        m => <m.GroupProfileCard />,
       ),
   },
 });
@@ -49,12 +46,12 @@ const EntityMembersListCard = EntityCardBlueprint.makeWithOverrides({
     return originalFactory({
       filter: { kind: 'group' },
       loader: async () =>
-        import('./components/Cards/Group/MembersList/MembersListCard').then(m =>
-          compatWrapper(
+        import('./components/Cards/Group/MembersList/MembersListCard').then(
+          m => (
             <m.MembersListCard
               relationAggregation={config.initialRelationAggregation}
               showAggregateMembersToggle={config.showAggregateMembersToggle}
-            />,
+            />
           ),
         ),
     });
@@ -75,19 +72,16 @@ const EntityOwnershipCard = EntityCardBlueprint.makeWithOverrides({
     return originalFactory({
       filter: { kind: { $in: ['group', 'user'] } },
       loader: async () =>
-        import('./components/Cards/OwnershipCard/OwnershipCard').then(m =>
-          compatWrapper(
-            <m.OwnershipCard
-              relationAggregation={config.initialRelationAggregation}
-              // harmonize the exposed alpha endpoints, but keep the default behaviour
-              hideRelationsToggle={
-                config.showAggregateMembersToggle === undefined
-                  ? undefined
-                  : !config.showAggregateMembersToggle
-              }
-            />,
-          ),
-        ),
+        import('./components/Cards/OwnershipCard/OwnershipCard').then(m => (
+          <m.OwnershipCard
+            relationAggregation={config.initialRelationAggregation}
+            hideRelationsToggle={
+              config.showAggregateMembersToggle === undefined
+                ? undefined
+                : !config.showAggregateMembersToggle
+            }
+          />
+        )),
     });
   },
 });
@@ -107,13 +101,12 @@ const EntityUserProfileCard = EntityCardBlueprint.makeWithOverrides({
       filter: { kind: 'user' },
       loader: async () =>
         import('./components/Cards/User/UserProfileCard/UserProfileCard').then(
-          m =>
-            compatWrapper(
-              <m.UserProfileCard
-                maxRelations={config.maxRelations}
-                hideIcons={config.hideIcons}
-              />,
-            ),
+          m => (
+            <m.UserProfileCard
+              maxRelations={config.maxRelations}
+              hideIcons={config.hideIcons}
+            />
+          ),
         ),
     });
   },

plugins/scaffolder/src/alpha/extensions.tsx

@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  compatWrapper,
-  convertLegacyRouteRef,
-} from '@backstage/core-compat-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import {
   ApiBlueprint,
   createExtensionInput,
@@ -48,11 +45,9 @@ export const scaffolderPage = PageBlueprint.makeWithOverrides({
       routeRef: convertLegacyRouteRef(rootRouteRef),
       path: '/create',
       loader: () =>
-        import('../components/Router/Router').then(m =>
-          compatWrapper(
-            <m.InternalRouter formFieldLoaders={formFieldLoaders} />,
-          ),
-        ),
+        import('../components/Router/Router').then(m => (
+          <m.InternalRouter formFieldLoaders={formFieldLoaders} />
+        )),
     });
   },
 });

plugins/search/src/alpha.tsx

@@ -69,7 +69,6 @@ import { SearchClient } from './apis';
 import { SearchType } from './components/SearchType';
 import { UrlUpdater } from './components/SearchPage/SearchPage';
 import {
-  compatWrapper,
   convertLegacyRouteRef,
   convertLegacyRouteRefs,
 } from '@backstage/core-compat-api';
@@ -254,11 +253,11 @@ export const searchPage = PageBlueprint.makeWithOverrides({
           );
         };
 
-        return compatWrapper(
+        return (
           <SearchContextProvider>
             <UrlUpdater />
             <Component />
-          </SearchContextProvider>,
+          </SearchContextProvider>
         );
       },
     });

plugins/techdocs/src/alpha/index.tsx

@@ -30,7 +30,6 @@ import {
   fetchApiRef,
 } from '@backstage/core-plugin-api';
 import {
-  compatWrapper,
   convertLegacyRouteRef,
   convertLegacyRouteRefs,
 } from '@backstage/core-compat-api';
@@ -123,10 +122,9 @@ export const techDocsSearchResultListItemExtension =
           const { TechDocsSearchResultListItem } = await import(
             '../search/components/TechDocsSearchResultListItem'
           );
-          return props =>
-            compatWrapper(
-              <TechDocsSearchResultListItem {...props} {...config} />,
-            );
+          return props => (
+            <TechDocsSearchResultListItem {...props} {...config} />
+          );
         },
       });
     },
@@ -142,9 +140,9 @@ const techDocsPage = PageBlueprint.make({
     path: '/docs',
     routeRef: convertLegacyRouteRef(rootRouteRef),
     loader: () =>
-      import('../home/components/TechDocsIndexPage').then(m =>
-        compatWrapper(<m.TechDocsIndexPage />),
-      ),
+      import('../home/components/TechDocsIndexPage').then(m => (
+        <m.TechDocsIndexPage />
+      )),
   },
 });
 
@@ -170,14 +168,12 @@ const techDocsReaderPage = PageBlueprint.makeWithOverrides({
       path: '/docs/:namespace/:kind/:name',
       routeRef: convertLegacyRouteRef(rootDocsRouteRef),
       loader: async () =>
-        await import('../Router').then(({ TechDocsReaderRouter }) => {
-          return compatWrapper(
-            <TechDocsReaderRouter>
-              <TechDocsReaderLayout />
-              <TechDocsAddons>{addons}</TechDocsAddons>
-            </TechDocsReaderRouter>,
-          );
-        }),
+        await import('../Router').then(({ TechDocsReaderRouter }) => (
+          <TechDocsReaderRouter>
+            <TechDocsReaderLayout />
+            <TechDocsAddons>{addons}</TechDocsAddons>
+          </TechDocsReaderRouter>
+        )),
     });
   },
 });
@@ -212,14 +208,14 @@ const techDocsEntityContent = EntityContentBlueprint.makeWithOverrides({
               attachTechDocsAddonComponentData(Addon, options);
               return <Addon key={options.name} />;
             });
-            return compatWrapper(
+            return (
               <EmbeddedDocsRouter
                 emptyState={context.inputs.emptyState?.get(
                   coreExtensionData.reactElement,
                 )}
               >
                 <TechDocsAddons>{addons}</TechDocsAddons>
-              </EmbeddedDocsRouter>,
+              </EmbeddedDocsRouter>
             );
           }),
       },

plugins/user-settings/src/alpha.tsx

@@ -23,7 +23,6 @@ import {
 import {
   convertLegacyRouteRef,
   convertLegacyRouteRefs,
-  compatWrapper,
 } from '@backstage/core-compat-api';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { settingsRouteRef } from './plugin';
@@ -42,15 +41,13 @@ const userSettingsPage = PageBlueprint.makeWithOverrides({
       path: '/settings',
       routeRef: convertLegacyRouteRef(settingsRouteRef),
       loader: () =>
-        import('./components/SettingsPage').then(m =>
-          compatWrapper(
-            <m.SettingsPage
-              providerSettings={inputs.providerSettings?.get(
-                coreExtensionData.reactElement,
-              )}
-            />,
-          ),
-        ),
+        import('./components/SettingsPage').then(m => (
+          <m.SettingsPage
+            providerSettings={inputs.providerSettings?.get(
+              coreExtensionData.reactElement,
+            )}
+          />
+        )),
     });
   },
 });