diff --git a/.changeset/sixty-places-push.md b/.changeset/sixty-places-push.md
new file mode 100644
index 0000000000..523e466158
--- /dev/null
+++ b/.changeset/sixty-places-push.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-compat-api': patch
+---
+
+Fix for `compatWrapper` creating many wrapping `Providers` when they should not
diff --git a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx
index fe9dab9910..554bba4352 100644
--- a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx
+++ b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx
@@ -40,6 +40,32 @@ import {
import { convertLegacyRouteRef } from '../convertLegacyRouteRef';
import { renderInTestApp as renderInOldTestApp } from '@backstage/test-utils';
+jest.mock('./BackwardsCompatProvider', () => ({
+ BackwardsCompatProvider: ({ children }: { children: React.ReactNode }) => {
+ const OriginalComponent = jest.requireActual(
+ './BackwardsCompatProvider',
+ ).BackwardsCompatProvider;
+ return (
+
+ {children}
+
+ );
+ },
+}));
+
+jest.mock('./ForwardsCompatProvider', () => ({
+ ForwardsCompatProvider: ({ children }: { children: React.ReactNode }) => {
+ const OriginalComponent = jest.requireActual(
+ './ForwardsCompatProvider',
+ ).ForwardsCompatProvider;
+ return (
+
+ {children}
+
+ );
+ },
+}));
+
describe('BackwardsCompatProvider', () => {
it('should convert the app context', () => {
// TODO(Rugvip): Replace with the new renderInTestApp once it's available, and have some plugins
@@ -146,3 +172,18 @@ describe('ForwardsCompatProvider', () => {
expect(screen.getByText('link: /test')).toBeInTheDocument();
});
});
+
+describe('BidirectionalCompatProvider', () => {
+ it('should never render a ForwardsCompatWrapper when in the new system, with one backwards compat provider', () => {
+ renderInNewTestApp(
+ compatWrapper(
+ compatWrapper(compatWrapper(
)),
+ ),
+ );
+
+ expect(screen.getByTestId('test-content')).toBeInTheDocument();
+
+ expect(screen.queryAllByTestId('forwards-compat-provider').length).toBe(0);
+ expect(screen.queryAllByTestId('backwards-compat-provider').length).toBe(1);
+ });
+});
diff --git a/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx b/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx
index 206422ffa9..8955b87747 100644
--- a/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx
+++ b/packages/core-compat-api/src/compatWrapper/compatWrapper.tsx
@@ -18,15 +18,21 @@ import { useVersionedContext } from '@backstage/version-bridge';
import { ReactNode } from 'react';
import { BackwardsCompatProvider } from './BackwardsCompatProvider';
import { ForwardsCompatProvider } from './ForwardsCompatProvider';
+import { appTreeApiRef, useApiHolder } from '@backstage/frontend-plugin-api';
function BidirectionalCompatProvider(props: { children: ReactNode }) {
- const isInNewApp = !useVersionedContext<{ 1: unknown }>('app-context');
+ const isInOldApp = useVersionedContext<{ 1: unknown }>('app-context');
+ const isInNewApp = Boolean(useApiHolder().get(appTreeApiRef));
- if (isInNewApp) {
+ if (isInNewApp && !isInOldApp) {
return ;
}
- return ;
+ if (isInOldApp && !isInNewApp) {
+ return ;
+ }
+
+ return props.children;
}
/**