Remove fs.readFile from some plugins

Summary:
1. Remove fs.readFile from some plugins
2. Add "importFile" to FlipperLib and RenderHost

See D32492149 for context

Followups:

1. Decapitate Stella's sendToPhone
2. Decapitate crash reporter
3. Figure out how to approach navigation
4. Figure out how to approach FileSelector

Reviewed By: mweststrate

Differential Revision: D32496775

fbshipit-source-id: e150aa56a2c2c1eb12a4c03c801f76cd76485a9d

desktop/app/src/electron/initializeElectron.tsx

@@ -111,6 +111,26 @@ export function initializeElectron() {
           return undefined;
         });
     },
+    async importFile({defaultPath, extensions} = {}) {
+      const {filePaths} = await remote.dialog.showOpenDialog({
+        defaultPath,
+        properties: ['openFile'],
+        filters: extensions ? [{extensions, name: ''}] : undefined,
+      });
+
+      if (!filePaths.length) {
+        return;
+      }
+
+      const filePath = filePaths[0];
+      const fileName = path.basename(filePath);
+
+      const data = await fs.promises.readFile(filePath, {encoding: 'utf-8'});
+      return {
+        data,
+        name: fileName,
+      };
+    },
     async exportFile(data, {defaultPath} = {}) {
       const {filePath} = await remote.dialog.showSaveDialog({
         defaultPath,

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -97,6 +97,7 @@ test('Correct top level API exposed', () => {
       "ElementSearchResultSet",
       "ElementsInspectorElement",
       "ElementsInspectorProps",
+      "FileDescriptor",
       "FlipperLib",
       "HighlightManager",
       "Idler",

desktop/flipper-plugin/src/index.ts

@@ -37,6 +37,7 @@ export {
   FlipperLib,
   getFlipperLib,
   setFlipperLibImplementation as _setFlipperLibImplementation,
+  FileDescriptor,
 } from './plugin/FlipperLib';
 export {
   MenuEntry,

desktop/flipper-plugin/src/plugin/FlipperLib.tsx

@@ -14,6 +14,11 @@ import {RealFlipperClient} from './Plugin';
 import {Notification} from './Notification';
 import {DetailSidebarProps} from '../ui/DetailSidebar';
 
+export interface FileDescriptor {
+  data: string;
+  name: string;
+}
+
 /**
  * This interface exposes all global methods for which an implementation will be provided by Flipper itself
  */
@@ -42,6 +47,20 @@ export interface FlipperLib {
       name: string;
     };
   }): Promise<string | undefined>;
+  /**
+   * @returns
+   * Imported file data.
+   * If user cancelled a file selection - undefined.
+   */
+  importFile(options: {
+    defaultPath?: string;
+    extensions?: string[];
+  }): Promise<FileDescriptor | undefined>;
+  /**
+   * @returns
+   * An exported file path (if available) or a file name.
+   * If user cancelled a file selection - undefined.
+   */
   exportFile(
     data: string,
     options?: {

desktop/flipper-plugin/src/test-utils/test-utils.tsx

@@ -380,6 +380,7 @@ export function createMockFlipperLib(options?: StartPluginOptions): FlipperLib {
     openLink: jest.fn(),
     showNotification: jest.fn(),
     exportFile: jest.fn(),
+    importFile: jest.fn(),
     paths: {
       appPath: process.cwd(),
       homePath: `/dev/null`,

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

@@ -66,8 +66,13 @@ export interface RenderHost {
     message?: string;
     title?: string;
   }): Promise<string | undefined>;
+  /**
+   * @deprecated
+   * TODO: Remove in favor of "importFile"
+   */
   showOpenDialog?: FlipperLib['showOpenDialog'];
   showSelectDirectoryDialog?(defaultPath?: string): Promise<string | undefined>;
+  importFile: FlipperLib['importFile'];
   exportFile: FlipperLib['exportFile'];
   /**
    * @returns
@@ -106,6 +111,9 @@ if (process.env.NODE_ENV === 'test') {
       return '';
     },
     writeTextToClipboard() {},
+    async importFile() {
+      return undefined;
+    },
     async exportFile() {
       return undefined;
     },

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

@@ -60,6 +60,7 @@ export function initializeFlipperLibImplementation(
       );
     },
     DetailsSidebarImplementation: DetailSidebarImpl,
+    importFile: renderHost.importFile,
     exportFile: renderHost.exportFile,
     showOpenDialog: renderHost.showOpenDialog,
     paths: {

desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx

@@ -7,11 +7,9 @@
  * @format
  */
 
-import fs from 'fs';
 import {Atom, DataTableManager, getFlipperLib} from 'flipper-plugin';
 import {createContext} from 'react';
 import {Header, Request} from '../types';
-import {message} from 'antd';
 
 export type Route = {
   requestUrl: string;
@@ -136,17 +134,12 @@ export function createNetworkManager(
     },
     importRoutes() {
       getFlipperLib()
-        .showOpenDialog?.({
-          filter: {extensions: ['json'], name: 'Flipper Route Files'},
+        .importFile({
+          extensions: ['.json'],
         })
-        .then((filePath) => {
-          if (filePath) {
-            fs.readFile(filePath, 'utf8', (err, data) => {
-              if (err) {
-                message.error('Unable to import file');
-                return;
-              }
-              const importedRoutes = JSON.parse(data);
+        .then((res) => {
+          if (res) {
+            const importedRoutes = JSON.parse(res.data);
             importedRoutes?.forEach((importedRoute: Route) => {
               if (importedRoute != null) {
                 const newNextRouteId = nextRouteId.get();
@@ -164,7 +157,6 @@ export function createNetworkManager(
               }
             });
             informClientMockChange(routes.get());
-            });
           }
         })
         .catch((e) =>