Add Opt-in Switch to Sandy UI

Summary:
With the new design from vpileggi, this diff separated a new app UI to the current one.

This diffs show the toggle switch to enable Sandy UI for devs who are in `flipper_sandy` GK. When toggled, it will bring Sandy UI up.

Reviewed By: mweststrate

Differential Revision: D23599398

fbshipit-source-id: d85c707e0fe7726a418b3551cedb36e455fb7d14

desktop/app/src/chrome/SettingsSheet.tsx

@@ -25,6 +25,7 @@ import KeyboardShortcutInput from './settings/KeyboardShortcutInput';
 import {isEqual} from 'lodash';
 import restartFlipper from '../utils/restartFlipper';
 import LauncherSettingsPanel from '../fb-stubs/LauncherSettingsPanel';
+import SandySettingsPanel from '../fb-stubs/SandySettingsPanel';
 import {reportUsage} from '../utils/metrics';
 
 const Container = styled(FlexColumn)({
@@ -183,6 +184,17 @@ class SettingsSheet extends Component<Props, State> {
             });
           }}
         />
+        <SandySettingsPanel
+          toggled={this.state.updatedSettings.enableSandy}
+          onChange={(v) => {
+            this.setState({
+              updatedSettings: {
+                ...this.state.updatedSettings,
+                enableSandy: v,
+              },
+            });
+          }}
+        />
         <ToggledSection
           label="React Native keyboard shortcuts"
           toggled={reactNative.shortcuts.enabled}

desktop/app/src/fb-stubs/App.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {useState, useEffect} from 'react';
+import FlipperApp from '../App';
+import WarningEmployee from '../chrome/WarningEmployee';
+import fbConfig from '../fb-stubs/config';
+import {isFBEmployee} from '../utils/fbEmployee';
+import {Logger} from '../fb-interfaces/Logger';
+
+type Props = {logger: Logger};
+
+export default function App(props: Props) {
+  const [warnEmployee, setWarnEmployee] = useState(false);
+  useEffect(() => {
+    if (fbConfig.warnFBEmployees) {
+      isFBEmployee().then((isEmployee) => {
+        setWarnEmployee(isEmployee);
+      });
+    }
+  }, []);
+  return warnEmployee ? (
+    <WarningEmployee
+      onClick={() => {
+        setWarnEmployee(false);
+      }}
+    />
+  ) : (
+    <FlipperApp logger={props.logger} />
+  );
+}

desktop/app/src/fb-stubs/SandySettingsPanel.tsx

@@ -0,0 +1,15 @@
+/**
+ * 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 default function (_props: {
+  toggled: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return null;
+}

desktop/app/src/init.tsx

@@ -9,12 +9,11 @@
 
 import {Provider} from 'react-redux';
 import ReactDOM from 'react-dom';
-import {useState, useEffect} from 'react';
 
 import ContextMenuProvider from './ui/components/ContextMenuProvider';
 import GK from './fb-stubs/GK';
 import {init as initLogger} from './fb-stubs/Logger';
-import App from './App';
+import App from './fb-stubs/App';
 import setupPrefetcher from './fb-stubs/Prefetcher';
 import {persistStore} from 'redux-persist';
 import {Store} from './reducers/index';
@@ -22,9 +21,6 @@ import dispatcher from './dispatcher/index';
 import TooltipProvider from './ui/components/TooltipProvider';
 import config from './utils/processConfig';
 import {initLauncherHooks} from './utils/launcher';
-import fbConfig from './fb-stubs/config';
-import {isFBEmployee} from './utils/fbEmployee';
-import WarningEmployee from './chrome/WarningEmployee';
 import {setPersistor} from './utils/persistor';
 import React from 'react';
 import path from 'path';
@@ -59,38 +55,19 @@ enableMapSet();
 
 GK.init();
 
-const AppFrame = () => {
+const AppFrame = () => (
-  const [warnEmployee, setWarnEmployee] = useState(false);
+  <TooltipProvider>
-  useEffect(() => {
+    <PopoverProvider>
-    if (fbConfig.warnFBEmployees) {
+      <ContextMenuProvider>
-      isFBEmployee().then((isEmployee) => {
+        <Provider store={store}>
-        setWarnEmployee(isEmployee);
+          <CacheProvider value={cache}>
-      });
+            <App logger={logger} />
-    }
+          </CacheProvider>
-  }, []);
+        </Provider>
-
+      </ContextMenuProvider>
-  return (
+    </PopoverProvider>
-    <TooltipProvider>
+  </TooltipProvider>
-      <PopoverProvider>
+);
-        <ContextMenuProvider>
-          <Provider store={store}>
-            <CacheProvider value={cache}>
-              {warnEmployee ? (
-                <WarningEmployee
-                  onClick={() => {
-                    setWarnEmployee(false);
-                  }}
-                />
-              ) : (
-                <App logger={logger} />
-              )}
-            </CacheProvider>
-          </Provider>
-        </ContextMenuProvider>
-      </PopoverProvider>
-    </TooltipProvider>
-  );
-};
 
 function setProcessState(store: Store) {
   const settings = store.getState().settingsState;
@@ -116,7 +93,6 @@ function init() {
   initializeFlipperLibImplementation(store, logger);
   ReactDOM.render(<AppFrame />, document.getElementById('root'));
   initLauncherHooks(config(), store);
-  const sessionId = store.getState().application.sessionId;
   registerRecordingHooks(store);
   enableConsoleHook();
   window.flipperGlobalStoreDispatch = store.dispatch;

desktop/app/src/reducers/settings.tsx

@@ -43,6 +43,7 @@ export type Settings = {
       openDevMenu: string;
     };
   };
+  enableSandy: boolean;
 };
 
 export type Action =
@@ -75,6 +76,7 @@ const initialState: Settings = {
       openDevMenu: 'Alt+Shift+D',
     },
   },
+  enableSandy: false,
 };
 
 export default function reducer(