Open file import

Summary: This change only adds the PWA as capable of handling files with the ".flipper" extension.

Reviewed By: aigoncharov

Differential Revision: D48353437

fbshipit-source-id: fd78942ac4dffb7d26d5ca5be826290018465b93

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

@@ -10,7 +10,7 @@
 import {Store} from '../reducers/index';
 import {Logger} from 'flipper-common';
 import {
-  importFileToStore,
+  importDataToStore,
   IMPORT_FLIPPER_TRACE_EVENT,
 } from '../utils/exportData';
 import {tryCatchReportPlatformFailures} from 'flipper-common';
@@ -67,9 +67,9 @@ export default (store: Store, logger: Logger) => {
     });
   });
 
-  renderHost.onIpcEvent('open-flipper-file', (url: string) => {
+  renderHost.onIpcEvent('open-flipper-file', (name: string, data: string) => {
     tryCatchReportPlatformFailures(() => {
-      return importFileToStore(url, store);
+      return importDataToStore(name, data, store);
     }, `${IMPORT_FLIPPER_TRACE_EVENT}:Deeplink`);
   });
 };

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

@@ -26,7 +26,10 @@ import {Store} from '../reducers/index';
 import {Dispatcher} from './types';
 import {notNull} from '../utils/typeUtils';
 
-export default function (store: Store, logger: Logger): () => Promise<void> {
+export default async function (
+  store: Store,
+  logger: Logger,
+): Promise<() => Promise<void>> {
   // This only runs in development as when the reload
   // kicks in it doesn't unregister the shortcuts
   const dispatchers: Array<Dispatcher> = [
@@ -43,10 +46,11 @@ export default function (store: Store, logger: Logger): () => Promise<void> {
     pluginChangeListener,
     pluginsSourceUpdateListener,
   ].filter(notNull);
-  const globalCleanup = dispatchers
-    .map((dispatcher) => dispatcher(store, logger))
-    .filter(Boolean);
-  return () => {
-    return Promise.all(globalCleanup).then(() => {});
+  const globalCleanup = await Promise.all(
+    dispatchers.map((dispatcher) => dispatcher(store, logger)).filter(Boolean),
+  );
+
+  return async () => {
+    await Promise.all(globalCleanup);
   };
 }

desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx

@@ -196,5 +196,4 @@ function registerStartupTime(logger: Logger) {
   });
 
   renderHost.sendIpcEvent('getLaunchTime');
-  renderHost.sendIpcEvent('componentDidMount');
 }

desktop/flipper-ui-core/src/startFlipperDesktop.tsx

@@ -149,9 +149,10 @@ function init(flipperServer: FlipperServer) {
   loadTheme(settings.darkMode);
 
   // rehydrate app state before exposing init
-  const persistor = persistStore(store, undefined, () => {
+  const persistor = persistStore(store, undefined, async () => {
     // Make sure process state is set before dispatchers run
-    dispatcher(store, logger);
+    await dispatcher(store, logger);
+    getRenderHostInstance().sendIpcEvent('storeRehydrated');
   });
 
   setPersistor(persistor);
@@ -168,17 +169,17 @@ function init(flipperServer: FlipperServer) {
 
   connectFlipperServerToStore(flipperServer, store, logger);
 
+  enableConsoleHook();
+  enableConnectivityHook(flipperServer);
+
   // TODO T116224873: Return the following code back instead of ReactDOM.react when the following issue is fixed: https://github.com/react-component/trigger/issues/288
   // const root = createRoot(document.getElementById('root')!);
   // root.render(<AppFrame logger={logger} persistor={persistor} />);
 
-  ReactDOM.render(
-    <AppFrame logger={logger} persistor={persistor} />,
-    document.getElementById('root')!,
-  );
-
-  enableConsoleHook();
-  enableConnectivityHook(flipperServer);
+  const root = document.getElementById('root');
+  if (root) {
+    ReactDOM.render(<AppFrame logger={logger} persistor={persistor} />, root);
+  }
 
   const launcherMessage =
     getRenderHostInstance().serverConfig.processConfig.launcherMsg;
@@ -193,8 +194,8 @@ function init(flipperServer: FlipperServer) {
   }
 }
 
-export async function startFlipperDesktop(flipperServer: FlipperServer) {
-  getRenderHostInstance(); // renderHost instance should be set at this point!
+export function startFlipperDesktop(flipperServer: FlipperServer) {
+  getRenderHostInstance();
   init(flipperServer);
 }
 

desktop/flipper-ui-core/src/utils/exportData.tsx

@@ -30,7 +30,7 @@ import {TestIdler} from './Idler';
 import {processMessageQueue} from './messageQueue';
 import {getPluginTitle} from './pluginUtils';
 import {capture} from './screenshot';
-import {Dialog, getFlipperLib, Idler, path} from 'flipper-plugin';
+import {Dialog, getFlipperLib, Idler} from 'flipper-plugin';
 import {ClientQuery} from 'flipper-common';
 import ShareSheetExportUrl from '../chrome/ShareSheetExportUrl';
 import ShareSheetExportFile from '../chrome/ShareSheetExportFile';
@@ -43,6 +43,7 @@ import {safeFilename} from './safeFilename';
 import {getExportablePlugins} from '../selectors/connections';
 import {notification} from 'antd';
 import openSupportRequestForm from '../fb-stubs/openSupportRequestForm';
+import {getStore} from '../store';
 
 export const IMPORT_FLIPPER_TRACE_EVENT = 'import-flipper-trace';
 export const EXPORT_FLIPPER_TRACE_EVENT = 'export-flipper-trace';
@@ -526,7 +527,7 @@ export const exportStoreToFile = (
 export async function importDataToStore(
   source: string,
   data: string,
-  store: Store,
+  store: Store = getStore(),
 ) {
   getLogger().track('usage', IMPORT_FLIPPER_TRACE_EVENT);
   const json: ExportType = JSON.parse(data);