Merge pull request #30954 from backstage/blam/nfs/compat-unwrap

`nfs`: fix `compatWrapper` behavior in NFS to not render `ForwardsCompatWrappers`

.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

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 (
+      <OriginalComponent>
+        <div data-testid="backwards-compat-provider">{children}</div>
+      </OriginalComponent>
+    );
+  },
+}));
+
+jest.mock('./ForwardsCompatProvider', () => ({
+  ForwardsCompatProvider: ({ children }: { children: React.ReactNode }) => {
+    const OriginalComponent = jest.requireActual(
+      './ForwardsCompatProvider',
+    ).ForwardsCompatProvider;
+    return (
+      <OriginalComponent>
+        <div data-testid="forwards-compat-provider">{children}</div>
+      </OriginalComponent>
+    );
+  },
+}));
+
 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(<div data-testid="test-content" />)),
+      ),
+    );
+
+    expect(screen.getByTestId('test-content')).toBeInTheDocument();
+
+    expect(screen.queryAllByTestId('forwards-compat-provider').length).toBe(0);
+    expect(screen.queryAllByTestId('backwards-compat-provider').length).toBe(1);
+  });
+});

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 <BackwardsCompatProvider {...props} />;
   }
 
-  return <ForwardsCompatProvider {...props} />;
+  if (isInOldApp && !isInNewApp) {
+    return <ForwardsCompatProvider {...props} />;
+  }
+
+  return props.children;
 }
 
 /**