Enable flipper import/export

Summary: These two functions were not enabled for the browser experience.

Reviewed By: antonk52

Differential Revision: D48315991

fbshipit-source-id: 2944a386d9de8a06b043305e7ceb8a6c41e11209

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

@@ -13,15 +13,16 @@ import {reportPlatformFailures} from 'flipper-common';
 import {Logger} from 'flipper-common';
 import {IdlerImpl} from '../utils/Idler';
 import {
-  exportStoreToFile,
   EXPORT_FLIPPER_TRACE_EVENT,
   displayFetchMetadataErrors,
+  exportStore,
 } from '../utils/exportData';
 import ShareSheetErrorList from './ShareSheetErrorList';
 import ShareSheetPendingDialog from './ShareSheetPendingDialog';
 import {ReactReduxContext, ReactReduxContextValue} from 'react-redux';
 import {MiddlewareAPI} from '../reducers/index';
 import {Modal} from 'antd';
+import {getRenderHostInstance} from 'flipper-frontend-core';
 
 const Container = styled(FlexColumn)({
   padding: 20,
@@ -47,7 +48,6 @@ const InfoText = styled(Text)({
 
 type Props = {
   onHide: () => void;
-  file: string;
   logger: Logger;
 };
 
@@ -88,19 +88,11 @@ export default class ShareSheetExportFile extends Component<Props, State> {
     const mark = 'shareSheetExportFile';
     performance.mark(mark);
     try {
-      if (!this.props.file) {
-        return;
-      }
-      const {fetchMetaDataErrors} = await reportPlatformFailures(
-        exportStoreToFile(
-          this.props.file,
-          this.store,
-          false,
-          this.idler,
-          (msg: string) => {
+      const {serializedString, fetchMetaDataErrors} =
+        await reportPlatformFailures(
+          exportStore(this.store, false, this.idler, (msg: string) => {
             this.setState({statusUpdate: msg});
-          },
-        ),
+          }),
           `${EXPORT_FLIPPER_TRACE_EVENT}:UI_FILE`,
         );
       this.setState({
@@ -109,6 +101,12 @@ export default class ShareSheetExportFile extends Component<Props, State> {
           ? {error: JSON.stringify(fetchMetaDataErrors) as any, kind: 'error'}
           : {kind: 'success'},
       });
+
+      await getRenderHostInstance().exportFile(serializedString, {
+        defaultPath: 'export.flipper',
+        encoding: 'utf-8',
+      });
+
       this.props.logger.trackTimeSince(mark, 'export:file-success');
     } catch (err) {
       const result: {

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

@@ -45,11 +45,9 @@ import NetworkGraph from '../chrome/NetworkGraph';
 import {errorCounterAtom} from '../chrome/ConsoleLogs';
 import {filterNotifications} from './notification/notificationUtils';
 import {
-  canFileExport,
-  canOpenDialog,
   exportEverythingEverywhereAllAtOnce,
   ExportEverythingEverywhereAllAtOnceStatus,
-  showOpenDialog,
+  startFileImport,
   startFileExport,
   startLinkExport,
 } from '../utils/exportData';
@@ -591,9 +589,9 @@ function ExtrasMenu() {
     () => startLinkExport(store.dispatch),
     [store.dispatch],
   );
-  const startImportTracked = useTrackedCallback(
+  const startFileImportTracked = useTrackedCallback(
     'File import',
-    () => showOpenDialog(store),
+    () => startFileImport(store),
     [store],
   );
 
@@ -627,16 +625,12 @@ function ExtrasMenu() {
               }}>
               Add Plugins
             </Menu.Item>
-            {canOpenDialog() ? (
-              <Menu.Item key="importFlipperFile" onClick={startImportTracked}>
+            <Menu.Item key="importFlipperFile" onClick={startFileImportTracked}>
               Import Flipper file
             </Menu.Item>
-            ) : null}
-            {canFileExport() ? (
-              <Menu.Item key="exportFile" onClick={startFileExportTracked}>
+            <Menu.Item key="exportFlipperFile" onClick={startFileExportTracked}>
               Export Flipper file
             </Menu.Item>
-            ) : null}
             {constants.ENABLE_SHAREABLE_LINK ? (
               <Menu.Item
                 key="exportShareableLink"

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

@@ -26,7 +26,6 @@ import {DevicePluginMap, ClientPluginMap} from '../plugin';
 import {BaseDevice} from 'flipper-frontend-core';
 import {ArchivedDevice} from 'flipper-frontend-core';
 import {v4 as uuidv4} from 'uuid';
-import {tryCatchReportPlatformFailures} from 'flipper-common';
 import {TestIdler} from './Idler';
 import {processMessageQueue} from './messageQueue';
 import {getPluginTitle} from './pluginUtils';
@@ -594,26 +593,14 @@ export const importFileToStore = async (file: string, store: Store) => {
   }
 };
 
-export function canOpenDialog() {
-  return !!getRenderHostInstance().showOpenDialog;
-}
-
-export function showOpenDialog(store: Store) {
-  return getRenderHostInstance()
-    .showOpenDialog?.({
-      filter: {extensions: ['flipper', 'json', 'txt'], name: 'Flipper files'},
-    })
-    .then((filePath) => {
-      if (filePath) {
-        tryCatchReportPlatformFailures(() => {
-          importFileToStore(filePath, store);
-        }, `${IMPORT_FLIPPER_TRACE_EVENT}:UI`);
-      }
+export async function startFileImport(store: Store) {
+  const file = await getRenderHostInstance().importFile({
+    extensions: ['flipper', 'json', 'txt'],
   });
-}
-
-export function canFileExport() {
-  return !!getRenderHostInstance().showSaveDialog;
+  if (!file || typeof file.data !== 'string') {
+    return;
+  }
+  importDataToStore(file.name, file.data as string, store);
 }
 
 async function startDeviceFlipperFolderExport() {
@@ -765,25 +752,15 @@ export async function exportEverythingEverywhereAllAtOnce(
 }
 
 export async function startFileExport(dispatch: Store['dispatch']) {
-  const file = await getRenderHostInstance().showSaveDialog?.({
-    title: 'FlipperExport',
-    defaultPath: path.join(
-      getRenderHostInstance().serverConfig.paths.homePath,
-      'FlipperExport.flipper',
-    ),
-  });
-  if (!file) {
-    return;
-  }
   const plugins = await selectPlugins();
   if (plugins === false) {
-    return; // cancelled
+    return;
   }
   // TODO: no need to put this in the store,
-  // need to be cleaned up later in combination with SupportForm
+  // need to be cleaned up later in combination with SupportForm.
   dispatch(selectedPlugins(plugins));
   Dialog.showModal((onHide) => (
-    <ShareSheetExportFile onHide={onHide} file={file} logger={getLogger()} />
+    <ShareSheetExportFile onHide={onHide} logger={getLogger()} />
   ));
 }