Back out "remove shortcuts"

Summary:
Original commit changeset: fbb59b416f92

Original Phabricator Diff: D51159922

Reviewed By: lblasa

Differential Revision: D51586735

fbshipit-source-id: 3317b590ec72e0040a67be41e74ddb5a72722598

desktop/flipper-common/src/settings.tsx

@@ -29,6 +29,13 @@ export type Settings = {
    */
   enablePrefetching: Tristate;
   idbPath: string;
+  reactNative: {
+    shortcuts: {
+      enabled: boolean;
+      reload: string;
+      openDevMenu: string;
+    };
+  };
   darkMode: 'dark' | 'light' | 'system';
   showWelcomeAtStartup: boolean;
   suppressPluginErrors: boolean;

desktop/flipper-server-core/src/utils/settings.tsx

@@ -57,6 +57,13 @@ async function getDefaultSettings(): Promise<Settings> {
     enablePhysicalIOS: os.platform() === 'darwin',
     enablePrefetching: Tristate.Unset,
     idbPath: '/usr/local/bin/idb',
+    reactNative: {
+      shortcuts: {
+        enabled: false,
+        reload: 'Alt+Shift+R',
+        openDevMenu: 'Alt+Shift+D',
+      },
+    },
     darkMode: 'light',
     showWelcomeAtStartup: true,
     suppressPluginErrors: false,

desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx

@@ -23,6 +23,7 @@ import {
   ConfigText,
   URLConfigField,
 } from './settings/configFields';
+import KeyboardShortcutInput from './settings/KeyboardShortcutInput';
 import {isEqual, isMatch, isEmpty} from 'lodash';
 import LauncherSettingsPanel from '../fb-stubs/LauncherSettingsPanel';
 import {
@@ -123,6 +124,7 @@ class SettingsSheet extends Component<Props, State> {
       enablePhysicalIOS,
       enablePrefetching,
       idbPath,
+      reactNative,
       darkMode,
       suppressPluginErrors,
       persistDeviceData,
@@ -292,6 +294,60 @@ class SettingsSheet extends Component<Props, State> {
             <Radio.Button value="system">Use System Setting</Radio.Button>
           </Radio.Group>
         </Layout.Container>
+        <ToggledSection
+          label="React Native keyboard shortcuts"
+          toggled={reactNative.shortcuts.enabled}
+          onChange={(enabled) => {
+            this.setState((prevState) => ({
+              updatedSettings: {
+                ...prevState.updatedSettings,
+                reactNative: {
+                  ...prevState.updatedSettings.reactNative,
+                  shortcuts: {
+                    ...prevState.updatedSettings.reactNative.shortcuts,
+                    enabled,
+                  },
+                },
+              },
+            }));
+          }}>
+          <KeyboardShortcutInput
+            label="Reload application"
+            value={reactNative.shortcuts.reload}
+            onChange={(reload) => {
+              this.setState((prevState) => ({
+                updatedSettings: {
+                  ...prevState.updatedSettings,
+                  reactNative: {
+                    ...prevState.updatedSettings.reactNative,
+                    shortcuts: {
+                      ...prevState.updatedSettings.reactNative.shortcuts,
+                      reload,
+                    },
+                  },
+                },
+              }));
+            }}
+          />
+          <KeyboardShortcutInput
+            label="Open developer menu"
+            value={reactNative.shortcuts.openDevMenu}
+            onChange={(openDevMenu) => {
+              this.setState((prevState) => ({
+                updatedSettings: {
+                  ...prevState.updatedSettings,
+                  reactNative: {
+                    ...prevState.updatedSettings.reactNative,
+                    shortcuts: {
+                      ...prevState.updatedSettings.reactNative.shortcuts,
+                      openDevMenu,
+                    },
+                  },
+                },
+              }));
+            }}
+          />
+        </ToggledSection>
         <NUX
           // TODO: provide link to Flipper doc with more details
           title="Plugin marketplace serve as a way to distribute private/internal plugins"

desktop/flipper-ui-core/src/dispatcher/index.tsx

@@ -14,6 +14,7 @@ import notifications from './notifications';
 import plugins from './plugins';
 import user from './fb-stubs/user';
 import pluginManager from './pluginManager';
+import reactNative from './reactNative';
 import pluginMarketplace from './pluginMarketplace';
 import pluginDownloads from './pluginDownloads';
 import info from '../utils/info';
@@ -38,6 +39,7 @@ export default async function (
     plugins,
     user,
     pluginManager,
+    reactNative,
     pluginMarketplace,
     pluginDownloads,
     info,

desktop/flipper-ui-core/src/dispatcher/reactNative.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 {Store} from '../reducers';
+import {registerShortcut} from '../utils/registerShortcut';
+
+type ShortcutEventCommand =
+  | {
+      shortcut: string;
+      command: string;
+    }
+  | '';
+
+export default (store: Store) => {
+  const settings = store.getState().settingsState.reactNative;
+
+  if (!settings?.shortcuts.enabled) {
+    return;
+  }
+
+  const shortcuts: ShortcutEventCommand[] = [
+    settings.shortcuts.reload && {
+      shortcut: settings.shortcuts.reload,
+      command: 'reload',
+    },
+    settings.shortcuts.openDevMenu && {
+      shortcut: settings.shortcuts.openDevMenu,
+      command: 'devMenu',
+    },
+  ];
+
+  shortcuts.forEach(
+    (shortcut: ShortcutEventCommand) =>
+      shortcut &&
+      shortcut.shortcut &&
+      registerShortcut(shortcut.shortcut, () => {
+        const devices = store
+          .getState()
+          .connections.devices.filter(
+            (device) => device.os === 'Metro' && !device.isArchived,
+          );
+
+        devices.forEach((device) =>
+          device.flipperServer.exec(
+            'metro-command',
+            device.serial,
+            shortcut.command,
+          ),
+        );
+      }),
+  );
+};

desktop/scripts/jest-setup-after.tsx

@@ -184,6 +184,9 @@ function createStubRenderHost(): RenderHost {
       enablePhysicalIOS: false,
       enablePrefetching: Tristate.False,
       idbPath: `/dev/null`,
+      reactNative: {
+        shortcuts: {enabled: false, openDevMenu: '', reload: ''},
+      },
       showWelcomeAtStartup: false,
       suppressPluginErrors: false,
       persistDeviceData: false,