DevTools shows unsupported renderer version dialog (#16897)

* DevTools shows unsupported renderer version dialog

* Optimistic CHANGELOG udpate

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -24,6 +24,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
+import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 
 import styles from './DevTools.css';
@@ -51,6 +52,7 @@ export type Props = {|
   showTabBar?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
+  warnIfUnsupportedVersionDetected?: boolean,
   viewElementSourceFunction?: ?ViewElementSource,
 
   // This property is used only by the web extension target.
@@ -92,6 +94,7 @@ export default function DevTools({
   showTabBar = false,
   store,
   warnIfLegacyBackendDetected = false,
+  warnIfUnsupportedVersionDetected = false,
   viewElementSourceFunction,
 }: Props) {
   const [tab, setTab] = useState(defaultTab);
@@ -164,6 +167,7 @@ export default function DevTools({
             </ViewElementSourceContext.Provider>
           </SettingsContextController>
           {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
+          {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
         </ModalDialogContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>

packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.css

@@ -0,0 +1,20 @@
+.Row {  
+  display: flex;  
+  flex-direction: row;  
+  align-items: center;  
+} 
+
+.Column { 
+  display: flex;  
+  flex-direction: column; 
+  align-items: center;  
+} 
+
+.Title {  
+  font-size: var(--font-size-sans-large); 
+  margin-bottom: 0.5rem;  
+} 
+
+.ReleaseNotesLink { 
+  color: var(--color-button-active);  
+}

packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext, useEffect, useState} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {ModalDialogContext} from './ModalDialog';
+import {StoreContext} from './context';
+import {UNSUPPORTED_VERSION_URL} from 'react-devtools-shared/src/constants';
+
+import styles from './UnsupportedVersionDialog.css';
+
+type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';
+
+export default function UnsupportedVersionDialog(_: {||}) {
+  const {dispatch} = useContext(ModalDialogContext);
+  const store = useContext(StoreContext);
+  const [state, setState] = useState<DAILOG_STATE>('dialog-not-shown');
+
+  useEffect(
+    () => {
+      if (state === 'dialog-not-shown') {
+        const showDialog = () => {
+          batchedUpdates(() => {
+            setState('show-dialog');
+            dispatch({
+              canBeDismissed: true,
+              type: 'SHOW',
+              content: <DialogContent />,
+            });
+          });
+        };
+
+        if (store.unsupportedRendererVersionDetected) {
+          showDialog();
+        } else {
+          store.addListener('unsupportedRendererVersionDetected', showDialog);
+          return () => {
+            store.removeListener(
+              'unsupportedRendererVersionDetected',
+              showDialog,
+            );
+          };
+        }
+      }
+    },
+    [state, store],
+  );
+
+  return null;
+}
+
+function DialogContent(_: {||}) {
+  return (
+    <Fragment>
+      <div className={styles.Row}>
+        <div>
+          <div className={styles.Title}>Unsupported React version detected</div>
+          <p>
+            This version of React DevTools supports React DOM v15+ and React
+            Native v61+.
+          </p>
+          <p>
+            In order to use DevTools with an older version of React, you'll need
+            to{' '}
+            <a
+              className={styles.ReleaseNotesLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              href={UNSUPPORTED_VERSION_URL}>
+              install an older version of the extension
+            </a>.
+          </p>
+        </div>
+      </div>
+    </Fragment>
+  );
+}