From 061be1c8bafcbae0c9f7c2ea1f23322f043689a5 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 20 Mar 2024 17:08:25 +0100
Subject: [PATCH] Guard against legacy context being not supported in DevTools
 fixture

Legacy context was removed from experimental builds so the default setup would hide important fixtures.

Now it just assumes that any crash within the tree rendering legacy context is due to legacy context not being supported.

I didn't remove since this fixture can be used with older versions of React where we would want to check if legacy
context still works.
---
 .../src/app/InspectableElements/Contexts.js   | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
index 256cd908518f2..ace7af6d55d3b 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
@@ -273,15 +273,46 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
   }
 }
 
+type LegacyContextState = {
+  supportsLegacyContext: boolean,
+};
+class LegacyContext extends React.Component {
+  state: LegacyContextState = {supportsLegacyContext: true};
+
+  static getDerivedStateFromError(error: any): LegacyContextState {
+    return {supportsLegacyContext: false};
+  }
+
+  componentDidCatch(error: any, info: any) {
+    console.info(
+      'Assuming legacy context is not supported in this React version due to: ',
+      error,
+      info,
+    );
+  }
+
+  render(): React.Node {
+    if (!this.state.supportsLegacyContext) {
+      return <p>This version of React does not support legacy context.</p>;
+    }
+
+    return (
+      <React.Fragment>
+        <LegacyContextProvider>
+          <LegacyContextConsumer />
+        </LegacyContextProvider>
+        <LegacyContextProviderWithUpdates />
+      </React.Fragment>
+    );
+  }
+}
+
 export default function Contexts(): React.Node {
   return (
     <div>
       <h1>Contexts</h1>
       <ul>
-        <LegacyContextProvider>
-          <LegacyContextConsumer />
-        </LegacyContextProvider>
-        <LegacyContextProviderWithUpdates />
+        <LegacyContext />
         <ModernContext.Provider value={contextData}>
           <ModernContext.Consumer>
             {(value: $FlowFixMe) =>