Allow switching between internal and OSS DevTools (#3139)

Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/3139

This commit adds new UI in the top level toolbar to allow internal FB users to switch between the internal build of devtools and the OSS one.

## Scenarios

**Internal (when `client.isFB`)**

- DevTools version will default to the internal version, and will render a `Select` component with option to switch to the OSS version.
- If a global install of DevTools is present, the selection menu will also offer the option to switch to the global DevTools version.

**External (when `!client.isFB`)**
Will preserve previous behavior:

- Uses the OSS version by default, and doesn't provide option to switch to internal version.
- If a global installation is present, will render a `Switch` component that allows switching between OSS and global installation.

### Implementation

This commit refactors some parts of the DevTools plugin to provide a bit more clarity in the loading sequence by renaming and modifying some of the messaging, and fixing lint warnings.

A change introduced here is that when switching or loading devtools, when we attempt to reload the device via Metro, don't immediately show a "Retry" button, since at that point nothing has gone wrong, and the Retry button will only occur if the Metro reload doesn't occur after a few seconds.

In a future commit, this [PR in Devtools](https://github.com/facebook/react/pull/22848) will allow us to clear any loading messages once DevTools has successfully connected.

Reviewed By: lunaruan, mweststrate

Differential Revision: D32773200

fbshipit-source-id: aa15ffecba7b2b2ea74e109e9f16334d47bf5868
This commit is contained in:
Juan Tejada
2021-12-06 12:40:16 -08:00
committed by Facebook GitHub Bot
parent 618670d00a
commit f9547e024e
2 changed files with 207 additions and 70 deletions

View File

@@ -0,0 +1,14 @@
/**
* 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.
*
* @format
*/
export function getInternalDevToolsModule<TModule>(): TModule {
throw new Error(
"Can't require internal version of React DevTools from public version of Flipper.",
);
}