Migrate Network plugin to Sandy (#1583)

Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/1583

Migrate Network plugin to Sandy

Reviewed By: mweststrate

Differential Revision: D24108772

fbshipit-source-id: e889b9f6b00398cd5f98cf15660b42b1d5496cea

desktop/plugins/network/__tests__/chunks.node.tsx

@@ -8,8 +8,8 @@
  */
 
 import {combineBase64Chunks} from '../chunks';
-import network from '../index';
+import {TestUtils} from 'flipper-plugin';
-import {PersistedState} from '../types';
+import * as NetworkPlugin from '..';
 
 test('Test assembling base64 chunks', () => {
   const message = 'wassup john?';
@@ -24,12 +24,10 @@ test('Test assembling base64 chunks', () => {
 });
 
 test('Reducer correctly adds initial chunk', () => {
-  const state: PersistedState = {
+  const {instance, sendEvent} = TestUtils.startPlugin(NetworkPlugin);
-    requests: {},
+  expect(instance.partialResponses.get()).toEqual({});
-    responses: {},
+
-    partialResponses: {},
+  sendEvent('partialResponse', {
-  };
-  const result = network.persistedStateReducer(state, 'partialResponse', {
     id: '1',
     timestamp: 123,
     status: 200,
@@ -41,7 +39,8 @@ test('Reducer correctly adds initial chunk', () => {
     index: 0,
     totalChunks: 2,
   });
-  expect(result.partialResponses['1']).toMatchInlineSnapshot(`
+
+  expect(instance.partialResponses.get()['1']).toMatchInlineSnapshot(`
     Object {
       "followupChunks": Object {},
       "initialResponse": Object {
@@ -61,18 +60,16 @@ test('Reducer correctly adds initial chunk', () => {
 });
 
 test('Reducer correctly adds followup chunk', () => {
-  const state: PersistedState = {
+  const {instance, sendEvent} = TestUtils.startPlugin(NetworkPlugin);
-    requests: {},
+  expect(instance.partialResponses.get()).toEqual({});
-    responses: {},
+
-    partialResponses: {},
+  sendEvent('partialResponse', {
-  };
-  const result = network.persistedStateReducer(state, 'partialResponse', {
     id: '1',
     totalChunks: 2,
     index: 1,
     data: 'hello',
   });
-  expect(result.partialResponses['1']).toMatchInlineSnapshot(`
+  expect(instance.partialResponses.get()['1']).toMatchInlineSnapshot(`
     Object {
       "followupChunks": Object {
         "1": "hello",
@@ -82,35 +79,34 @@ test('Reducer correctly adds followup chunk', () => {
 });
 
 test('Reducer correctly combines initial response and followup chunk', () => {
-  const state: PersistedState = {
+  const {instance, sendEvent} = TestUtils.startPlugin(NetworkPlugin);
-    requests: {},
+  instance.partialResponses.set({
-    responses: {},
+    '1': {
-    partialResponses: {
+      followupChunks: {},
-      '1': {
+      initialResponse: {
-        followupChunks: {},
+        data: 'aGVs',
-        initialResponse: {
+        headers: [],
-          data: 'aGVs',
+        id: '1',
-          headers: [],
+        insights: null,
-          id: '1',
+        isMock: false,
-          insights: null,
+        reason: 'nothing',
-          isMock: false,
+        status: 200,
-          reason: 'nothing',
+        timestamp: 123,
-          status: 200,
+        index: 0,
-          timestamp: 123,
+        totalChunks: 2,
-          index: 0,
-          totalChunks: 2,
-        },
       },
     },
-  };
+  });
-  const result = network.persistedStateReducer(state, 'partialResponse', {
+  expect(instance.responses.get()).toEqual({});
+  sendEvent('partialResponse', {
     id: '1',
     totalChunks: 2,
     index: 1,
     data: 'bG8=',
   });
-  expect(result.partialResponses).toEqual({});
+
-  expect(result.responses['1']).toMatchInlineSnapshot(`
+  expect(instance.partialResponses.get()).toEqual({});
+  expect(instance.responses.get()['1']).toMatchInlineSnapshot(`
     Object {
       "data": "aGVsbG8=",
       "headers": Array [],

desktop/plugins/network/index.tsx

@@ -23,7 +23,6 @@ import {
   DetailSidebar,
   styled,
   SearchableTable,
-  FlipperPlugin,
   Sheet,
   TableHighlightedRows,
   TableRows,
@@ -36,8 +35,8 @@ import {
   Response,
   Route,
   ResponseFollowupChunk,
-  PersistedState,
   Header,
+  MockRoute,
 } from './types';
 import {convertRequestToCurlCommand, getHeaderValue, decodeBody} from './utils';
 import RequestDetails from './RequestDetails';
@@ -45,7 +44,7 @@ import {clipboard} from 'electron';
 import {URL} from 'url';
 import {MockResponseDialog} from './MockResponseDialog';
 import {combineBase64Chunks} from './chunks';
-import {DefaultKeyboardAction} from 'flipper-plugin';
+import {PluginClient, createState, usePlugin, useValue} from 'flipper-plugin';
 
 const LOCALSTORAGE_MOCK_ROUTE_LIST_KEY = '__NETWORK_CACHED_MOCK_ROUTE_LIST';
 
@@ -54,17 +53,14 @@ export const BodyOptions = {
   parsed: 'parsed',
 };
 
-type State = {
+type Events = {
-  selectedIds: Array<RequestId>;
+  newRequest: Request;
-  searchTerm: string;
+  newResponse: Response;
-  routes: {[id: string]: Route};
+  partialResponse: Response | ResponseFollowupChunk;
-  nextRouteId: number;
+};
-  isMockResponseSupported: boolean;
+
-  showMockResponseDialog: boolean;
+type Methods = {
-  detailBodyFormat: string;
+  mockResponses(params: {routes: MockRoute[]}): Promise<void>;
-  highlightedRows: Set<string> | null | undefined;
-  requests: {[id: string]: Request};
-  responses: {[id: string]: Response};
 };
 
 const COLUMN_SIZE = {
@@ -146,119 +142,131 @@ export const NetworkRouteContext = createContext<NetworkRouteManager>(
   nullNetworkRouteManager,
 );
 
-export default class extends FlipperPlugin<State, any, PersistedState> {
+export function plugin(client: PluginClient<Events, Methods>) {
-  static keyboardActions: Array<DefaultKeyboardAction> = ['clear'];
+  const networkRouteManager = createState<NetworkRouteManager>(
-  static subscribed = [];
+    nullNetworkRouteManager,
-  static defaultPersistedState: PersistedState = {
+  );
-    requests: {},
-    responses: {},
-    partialResponses: {},
-  };
-  networkRouteManager: NetworkRouteManager = nullNetworkRouteManager;
 
-  static metricsReducer(persistedState: PersistedState) {
+  const selectedIds = createState<Array<RequestId>>([]);
-    const failures = Object.values(persistedState.responses).reduce(function (
+  const searchTerm = createState<string>('');
-      previous,
+  const routes = createState<{[id: string]: Route}>({});
-      values,
+  const nextRouteId = createState<number>(0);
-    ) {
+  const isMockResponseSupported = createState<boolean>(false);
-      return previous + (values.status >= 400 ? 1 : 0);
+  const showMockResponseDialog = createState<boolean>(false);
-    },
+  const detailBodyFormat = createState<string>(BodyOptions.parsed);
-    0);
+  const highlightedRows = createState<Set<string> | null | undefined>(
-    return Promise.resolve({NUMBER_NETWORK_FAILURES: failures});
+    new Set(),
-  }
+  );
+  const isDeeplinked = createState<boolean>(false);
+  const requests = createState<{[id: string]: Request}>(
+    {},
+    {persist: 'requests'},
+  );
+  const responses = createState<{[id: string]: Response}>(
+    {},
+    {persist: 'responses'},
+  );
 
-  static persistedStateReducer(
+  const partialResponses = createState<{
-    persistedState: PersistedState,
+    [id: string]: {
-    method: string,
+      initialResponse?: Response;
-    data: Request | Response | ResponseFollowupChunk,
+      followupChunks: {[id: number]: string};
-  ) {
+    };
-    switch (method) {
+  }>({}, {persist: 'partialResponses'});
-      case 'newRequest':
-        return Object.assign({}, persistedState, {
-          requests: {...persistedState.requests, [data.id]: data as Request},
-        });
-      case 'newResponse':
-        const response: Response = data as Response;
-        return Object.assign({}, persistedState, {
-          responses: {
-            ...persistedState.responses,
-            [response.id]: response,
-          },
-        });
-      case 'partialResponse':
-        /* Some clients (such as low end Android devices) struggle to serialise large payloads in one go, so partial responses allow them
-           to split payloads into chunks and serialise each individually.
 
-           Such responses will be distinguished between normal responses by both:
+  client.onDeepLink((payload: unknown) => {
-             * Being sent to the partialResponse method.
+    if (typeof payload === 'string') {
-             * Having a totalChunks value > 1.
+      parseDeepLinkPayload(payload);
-
+      isDeeplinked.set(true);
-           The first chunk will always be included in the initial response. This response must have index 0.
-           The remaining chunks will be sent in ResponseFollowupChunks, which each contain another piece of the payload, along with their index from 1 onwards.
-           The payload of each chunk is individually encoded in the same way that full responses are.
-
-           The order that initialResponse, and followup chunks are recieved is not guaranteed to be in index order.
-        */
-        const message: Response | ResponseFollowupChunk = data as
-          | Response
-          | ResponseFollowupChunk;
-        if (message.index !== undefined && message.index > 0) {
-          // It's a follow up chunk
-          const followupChunk: ResponseFollowupChunk = message as ResponseFollowupChunk;
-          const partialResponseEntry = persistedState.partialResponses[
-            followupChunk.id
-          ] ?? {followupChunks: []};
-          const newPartialResponseEntry = {
-            ...partialResponseEntry,
-            followupChunks: {
-              ...partialResponseEntry.followupChunks,
-              [followupChunk.index]: followupChunk.data,
-            },
-          };
-          const newPersistedState = {
-            ...persistedState,
-            partialResponses: {
-              ...persistedState.partialResponses,
-              [followupChunk.id]: newPartialResponseEntry,
-            },
-          };
-          return this.assembleChunksIfResponseIsComplete(
-            newPersistedState,
-            followupChunk.id,
-          );
-        }
-        // It's an initial chunk
-        const partialResponse: Response = message as Response;
-        const partialResponseEntry = persistedState.partialResponses[
-          partialResponse.id
-        ] ?? {
-          followupChunks: {},
-        };
-        const newPartialResponseEntry = {
-          ...partialResponseEntry,
-          initialResponse: partialResponse,
-        };
-        const newPersistedState = {
-          ...persistedState,
-          partialResponses: {
-            ...persistedState.partialResponses,
-            [partialResponse.id]: newPartialResponseEntry,
-          },
-        };
-        return this.assembleChunksIfResponseIsComplete(
-          newPersistedState,
-          partialResponse.id,
-        );
-      default:
-        return persistedState;
     }
-  }
+  });
 
-  static assembleChunksIfResponseIsComplete(
+  client.addMenuEntry({
-    persistedState: PersistedState,
+    action: 'clear',
+    handler: clearLogs,
+  });
+
+  client.onConnect(() => {
+    init();
+  });
+
+  client.onDeactivate(() => {
+    isDeeplinked.set(false);
+  });
+
+  client.onMessage('newRequest', (data) => {
+    requests.update((draft) => {
+      draft[data.id] = data;
+    });
+  });
+
+  client.onMessage('newResponse', (data) => {
+    responses.update((draft) => {
+      draft[data.id] = data;
+    });
+  });
+
+  client.onMessage('partialResponse', (data) => {
+    /* Some clients (such as low end Android devices) struggle to serialise large payloads in one go, so partial responses allow them
+        to split payloads into chunks and serialise each individually.
+
+        Such responses will be distinguished between normal responses by both:
+          * Being sent to the partialResponse method.
+          * Having a totalChunks value > 1.
+
+        The first chunk will always be included in the initial response. This response must have index 0.
+        The remaining chunks will be sent in ResponseFollowupChunks, which each contain another piece of the payload, along with their index from 1 onwards.
+        The payload of each chunk is individually encoded in the same way that full responses are.
+
+        The order that initialResponse, and followup chunks are recieved is not guaranteed to be in index order.
+    */
+    const message: Response | ResponseFollowupChunk = data as
+      | Response
+      | ResponseFollowupChunk;
+    if (message.index !== undefined && message.index > 0) {
+      // It's a follow up chunk
+      const followupChunk: ResponseFollowupChunk = message as ResponseFollowupChunk;
+      const partialResponseEntry = partialResponses.get()[followupChunk.id] ?? {
+        followupChunks: {},
+      };
+
+      const newPartialResponseEntry = produce(partialResponseEntry, (draft) => {
+        draft.followupChunks[followupChunk.index] = followupChunk.data;
+      });
+      const newPartialResponse = {
+        ...partialResponses.get(),
+        [followupChunk.id]: newPartialResponseEntry,
+      };
+
+      assembleChunksIfResponseIsComplete(newPartialResponse, followupChunk.id);
+      return;
+    }
+    // It's an initial chunk
+    const partialResponse: Response = message as Response;
+    const partialResponseEntry = partialResponses.get()[partialResponse.id] ?? {
+      followupChunks: {},
+    };
+    const newPartialResponseEntry = {
+      ...partialResponseEntry,
+      initialResponse: partialResponse,
+    };
+    const newPartialResponse = {
+      ...partialResponses.get(),
+      [partialResponse.id]: newPartialResponseEntry,
+    };
+    assembleChunksIfResponseIsComplete(newPartialResponse, partialResponse.id);
+  });
+
+  function assembleChunksIfResponseIsComplete(
+    partialResp: {
+      [id: string]: {
+        initialResponse?: Response;
+        followupChunks: {[id: number]: string};
+      };
+    },
     responseId: string,
-  ): PersistedState {
+  ) {
-    const partialResponseEntry = persistedState.partialResponses[responseId];
+    const partialResponseEntry = partialResp[responseId];
     const numChunks = partialResponseEntry.initialResponse?.totalChunks;
     if (
       !partialResponseEntry.initialResponse ||
@@ -266,7 +274,8 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
       Object.keys(partialResponseEntry.followupChunks).length + 1 < numChunks
     ) {
       // Partial response not yet complete, do nothing.
-      return persistedState;
+      partialResponses.set(partialResp);
+      return;
     }
     // Partial response has all required chunks, convert it to a full Response.
 
@@ -289,213 +298,131 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
       data: btoa(data),
     };
 
-    return {
+    responses.update((draft) => {
-      ...persistedState,
+      draft[newResponse.id] = newResponse;
-      responses: {
-        ...persistedState.responses,
-        [newResponse.id]: newResponse,
-      },
-      partialResponses: Object.fromEntries(
-        Object.entries(persistedState.partialResponses).filter(
-          ([k, _v]: [string, unknown]) => k !== newResponse.id,
-        ),
-      ),
-    };
-  }
-
-  static deserializePersistedState = (serializedString: string) => {
-    return JSON.parse(serializedString);
-  };
-
-  static getActiveNotifications(persistedState: PersistedState) {
-    const responses = persistedState
-      ? persistedState.responses || new Map()
-      : new Map();
-    const r: Array<Response> = Object.values(responses);
-    return (
-      r
-        // Show error messages for all status codes indicating a client or server error
-        .filter((response: Response) => response.status >= 400)
-        .map((response: Response) => {
-          const request = persistedState.requests[response.id];
-          const url: string = (request && request.url) || '(URL missing)';
-          return {
-            id: response.id,
-            title: `HTTP ${response.status}: Network request failed`,
-            message: `Request to ${url} failed. ${response.reason}`,
-            severity: 'error' as 'error',
-            timestamp: response.timestamp,
-            category: `HTTP${response.status}`,
-            action: response.id,
-          };
-        })
-    );
-  }
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      selectedIds: [],
-      searchTerm: '',
-      routes: {},
-      nextRouteId: 0,
-      isMockResponseSupported: false,
-      showMockResponseDialog: false,
-      detailBodyFormat: BodyOptions.parsed,
-      highlightedRows: new Set(),
-      requests: {},
-      responses: {},
-    };
-  }
-
-  init() {
-    this.client.supportsMethod('mockResponses').then((result) => {
-      const routes = JSON.parse(
-        localStorage.getItem(LOCALSTORAGE_MOCK_ROUTE_LIST_KEY) || '{}',
-      );
-      this.setState({
-        routes: routes,
-        isMockResponseSupported: result,
-        showMockResponseDialog: false,
-        nextRouteId: Object.keys(routes).length,
-      });
-      informClientMockChange(routes);
     });
 
-    this.setState(this.parseDeepLinkPayload(this.props.deepLinkPayload));
+    partialResponses.update((draft) => {
+      delete draft[newResponse.id];
+    });
+  }
+
+  function init() {
+    client.supportsMethod('mockResponses').then((result) => {
+      const newRoutes = JSON.parse(
+        localStorage.getItem(LOCALSTORAGE_MOCK_ROUTE_LIST_KEY) || '{}',
+      );
+      routes.set(newRoutes);
+      isMockResponseSupported.set(result);
+      showMockResponseDialog.set(false);
+      nextRouteId.set(Object.keys(routes).length);
+
+      informClientMockChange(routes.get());
+    });
 
     // declare new variable to be called inside the interface
-    const setState = this.setState.bind(this);
+    networkRouteManager.set({
-    const informClientMockChange = this.informClientMockChange.bind(this);
-    this.networkRouteManager = {
       addRoute() {
-        setState(
+        const newNextRouteId = nextRouteId.get();
-          produce((draftState: State) => {
+        routes.update((draft) => {
-            const nextRouteId = draftState.nextRouteId;
+          draft[newNextRouteId.toString()] = {
-            draftState.routes[nextRouteId.toString()] = {
+            requestUrl: '',
-              requestUrl: '',
+            requestMethod: 'GET',
-              requestMethod: 'GET',
+            responseData: '',
-              responseData: '',
+            responseHeaders: {},
-              responseHeaders: {},
+            responseStatus: '200',
-              responseStatus: '200',
+          };
-            };
+        });
-            draftState.nextRouteId = nextRouteId + 1;
+        nextRouteId.set(newNextRouteId + 1);
-          }),
-        );
       },
       modifyRoute(id: string, routeChange: Partial<Route>) {
-        setState(
+        if (!routes.get().hasOwnProperty(id)) {
-          produce((draftState: State) => {
+          return;
-            if (!draftState.routes.hasOwnProperty(id)) {
+        }
-              return;
+        routes.update((draft) => {
-            }
+          Object.assign(draft[id], routeChange);
-            draftState.routes[id] = {...draftState.routes[id], ...routeChange};
+        });
-            informClientMockChange(draftState.routes);
+        informClientMockChange(routes.get());
-          }),
-        );
       },
       removeRoute(id: string) {
-        setState(
+        if (routes.get().hasOwnProperty(id)) {
-          produce((draftState: State) => {
+          routes.update((draft) => {
-            if (draftState.routes.hasOwnProperty(id)) {
+            delete draft[id];
-              delete draftState.routes[id];
+          });
-            }
+        }
-            informClientMockChange(draftState.routes);
+        informClientMockChange(routes.get());
-          }),
-        );
       },
       copyHighlightedCalls(
         highlightedRows: Set<string> | null | undefined,
         requests: {[id: string]: Request},
         responses: {[id: string]: Response},
       ) {
-        setState((state) => {
+        // iterate through highlighted rows
-          const nextState = produce(state, (state: State) => {
+        highlightedRows?.forEach((row) => {
-            // iterate through highlighted rows
+          const response = responses[row];
-            highlightedRows?.forEach((row) => {
+          // convert headers
-              const response = responses[row];
+          const headers: {[id: string]: Header} = {};
-              // convert headers
+          response.headers.forEach((e) => {
-              const headers: {[id: string]: Header} = {};
+            headers[e.key] = e;
-              response.headers.forEach((e) => {
-                headers[e.key] = e;
-              });
-
-              // convert data
-              const responseData =
-                response && response.data ? decodeBody(response) : null;
-
-              const nextRouteId = state.nextRouteId;
-              state.routes[nextRouteId.toString()] = {
-                requestUrl: requests[row].url,
-                requestMethod: requests[row].method,
-                responseData: responseData as string,
-                responseHeaders: headers,
-                responseStatus: responses[row].status.toString(),
-              };
-              state.nextRouteId = nextRouteId + 1;
-            });
           });
-          informClientMockChange(nextState.routes);
+
-          return nextState;
+          // convert data
+          const responseData =
+            response && response.data ? decodeBody(response) : null;
+
+          const newNextRouteId = nextRouteId.get();
+          routes.update((draft) => {
+            draft[newNextRouteId.toString()] = {
+              requestUrl: requests[row].url,
+              requestMethod: requests[row].method,
+              responseData: responseData as string,
+              responseHeaders: headers,
+              responseStatus: responses[row].status.toString(),
+            };
+          });
+          nextRouteId.set(newNextRouteId + 1);
         });
+
+        informClientMockChange(routes.get());
       },
-    };
+    });
   }
 
-  teardown() {}
+  function parseDeepLinkPayload(deepLinkPayload: unknown) {
-
-  onKeyboardAction = (action: string) => {
-    if (action === 'clear') {
-      this.clearLogs();
-    }
-  };
-
-  parseDeepLinkPayload = (
-    deepLinkPayload: unknown,
-  ): Pick<State, 'selectedIds' | 'searchTerm'> => {
     const searchTermDelim = 'searchTerm=';
     if (typeof deepLinkPayload !== 'string') {
-      return {
+      selectedIds.set([]);
-        selectedIds: [],
+      searchTerm.set('');
-        searchTerm: '',
-      };
     } else if (deepLinkPayload.startsWith(searchTermDelim)) {
-      return {
+      selectedIds.set([]);
-        selectedIds: [],
+      searchTerm.set(deepLinkPayload.slice(searchTermDelim.length));
-        searchTerm: deepLinkPayload.slice(searchTermDelim.length),
+    } else {
-      };
+      selectedIds.set([deepLinkPayload]);
+      searchTerm.set('');
     }
-    return {
+  }
-      selectedIds: [deepLinkPayload],
-      searchTerm: '',
-    };
-  };
 
-  onRowHighlighted = (selectedIds: Array<RequestId>) =>
+  function clearLogs() {
-    this.setState({selectedIds});
+    selectedIds.set([]);
+    responses.set({});
+    requests.set({});
+  }
 
-  copyRequestCurlCommand = () => {
+  function copyRequestCurlCommand() {
-    const {requests} = this.props.persistedState;
-    const {selectedIds} = this.state;
     // Ensure there is only one row highlighted.
-    if (selectedIds.length !== 1) {
+    if (selectedIds.get().length !== 1) {
       return;
     }
 
-    const request = requests[selectedIds[0]];
+    const request = requests.get()[selectedIds.get()[0]];
     if (!request) {
       return;
     }
     const command = convertRequestToCurlCommand(request);
     clipboard.writeText(command);
-  };
+  }
 
-  clearLogs = () => {
+  async function informClientMockChange(routes: {[id: string]: Route}) {
-    this.setState({selectedIds: []});
-    this.props.setPersistedState({responses: {}, requests: {}});
-  };
-
-  informClientMockChange = (routes: {[id: string]: Route}) => {
     const existedIdSet: {[id: string]: {[method: string]: boolean}} = {};
     const filteredRoutes: {[id: string]: Route} = Object.entries(routes).reduce(
       (accRoutes, [id, route]) => {
@@ -520,91 +447,96 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
       {},
     );
 
-    if (this.state.isMockResponseSupported) {
+    if (isMockResponseSupported.get()) {
       const routesValuesArray = Object.values(filteredRoutes);
       localStorage.setItem(
         LOCALSTORAGE_MOCK_ROUTE_LIST_KEY,
         JSON.stringify(routesValuesArray),
       );
-      this.client.call('mockResponses', {
+
-        routes: routesValuesArray.map((route: Route) => ({
+      try {
-          requestUrl: route.requestUrl,
+        await client.send('mockResponses', {
-          method: route.requestMethod,
+          routes: routesValuesArray.map((route: Route) => ({
-          data: route.responseData,
+            requestUrl: route.requestUrl,
-          headers: [...Object.values(route.responseHeaders)],
+            method: route.requestMethod,
-          status: route.responseStatus,
+            data: route.responseData,
-        })),
+            headers: [...Object.values(route.responseHeaders)],
-      });
+            status: route.responseStatus,
+          })),
+        });
+      } catch (e) {
+        console.error('Failed to mock responses.', e);
+      }
     }
-  };
-
-  onMockButtonPressed = () => {
-    this.setState({showMockResponseDialog: true});
-  };
-
-  onCloseButtonPressed = () => {
-    this.setState({showMockResponseDialog: false});
-  };
-
-  onSelectFormat = (bodyFormat: string) => {
-    this.setState({detailBodyFormat: bodyFormat});
-  };
-
-  renderSidebar = () => {
-    const {requests, responses} = this.props.persistedState;
-    const {selectedIds, detailBodyFormat} = this.state;
-    const selectedId = selectedIds.length === 1 ? selectedIds[0] : null;
-
-    if (!selectedId) {
-      return null;
-    }
-    const requestWithId = requests[selectedId];
-    if (!requestWithId) {
-      return null;
-    }
-    return (
-      <RequestDetails
-        key={selectedId}
-        request={requestWithId}
-        response={responses[selectedId]}
-        bodyFormat={detailBodyFormat}
-        onSelectFormat={this.onSelectFormat}
-      />
-    );
-  };
-
-  render() {
-    const {requests, responses} = this.props.persistedState;
-    const {
-      selectedIds,
-      searchTerm,
-      routes,
-      isMockResponseSupported,
-      showMockResponseDialog,
-    } = this.state;
-
-    return (
-      <FlexColumn grow={true}>
-        <NetworkRouteContext.Provider value={this.networkRouteManager}>
-          <NetworkTable
-            requests={requests || {}}
-            responses={responses || {}}
-            routes={routes}
-            onMockButtonPressed={this.onMockButtonPressed}
-            onCloseButtonPressed={this.onCloseButtonPressed}
-            showMockResponseDialog={showMockResponseDialog}
-            clear={this.clearLogs}
-            copyRequestCurlCommand={this.copyRequestCurlCommand}
-            onRowHighlighted={this.onRowHighlighted}
-            highlightedRows={selectedIds ? new Set(selectedIds) : null}
-            searchTerm={searchTerm}
-            isMockResponseSupported={isMockResponseSupported}
-          />
-          <DetailSidebar width={500}>{this.renderSidebar()}</DetailSidebar>
-        </NetworkRouteContext.Provider>
-      </FlexColumn>
-    );
   }
+
+  return {
+    selectedIds,
+    searchTerm,
+    routes,
+    nextRouteId,
+    isMockResponseSupported,
+    showMockResponseDialog,
+    detailBodyFormat,
+    highlightedRows,
+    isDeeplinked,
+    requests,
+    responses,
+    partialResponses,
+    networkRouteManager,
+    clearLogs,
+    onRowHighlighted(selectedIdsArr: Array<RequestId>) {
+      selectedIds.set(selectedIdsArr);
+    },
+    onMockButtonPressed() {
+      showMockResponseDialog.set(true);
+    },
+    onCloseButtonPressed() {
+      showMockResponseDialog.set(false);
+    },
+    onSelectFormat(bodyFormat: string) {
+      detailBodyFormat.set(bodyFormat);
+    },
+    copyRequestCurlCommand,
+    init,
+  };
+}
+
+export function Component() {
+  const instance = usePlugin(plugin);
+
+  const requests = useValue(instance.requests);
+  const responses = useValue(instance.responses);
+  const selectedIds = useValue(instance.selectedIds);
+  const searchTerm = useValue(instance.searchTerm);
+  const routes = useValue(instance.routes);
+  const isMockResponseSupported = useValue(instance.isMockResponseSupported);
+  const showMockResponseDialog = useValue(instance.showMockResponseDialog);
+  const networkRouteManager = useValue(instance.networkRouteManager);
+
+  return (
+    <FlexColumn grow={true}>
+      <NetworkRouteContext.Provider value={networkRouteManager}>
+        <NetworkTable
+          requests={requests || {}}
+          responses={responses || {}}
+          routes={routes}
+          onMockButtonPressed={instance.onMockButtonPressed}
+          onCloseButtonPressed={instance.onCloseButtonPressed}
+          showMockResponseDialog={showMockResponseDialog}
+          clear={instance.clearLogs}
+          copyRequestCurlCommand={instance.copyRequestCurlCommand}
+          onRowHighlighted={instance.onRowHighlighted}
+          highlightedRows={selectedIds ? new Set(selectedIds) : null}
+          searchTerm={searchTerm}
+          isMockResponseSupported={isMockResponseSupported}
+        />
+        <DetailSidebar width={500}>
+          <Sidebar />
+        </DetailSidebar>
+      </NetworkRouteContext.Provider>
+    </FlexColumn>
+  );
 }
 
 type NetworkTableProps = {
@@ -809,6 +741,33 @@ function calculateState(
   };
 }
 
+function Sidebar() {
+  const instance = usePlugin(plugin);
+  const requests = useValue(instance.requests);
+  const responses = useValue(instance.responses);
+  const selectedIds = useValue(instance.selectedIds);
+  const detailBodyFormat = useValue(instance.detailBodyFormat);
+  const selectedId = selectedIds.length === 1 ? selectedIds[0] : null;
+
+  if (!selectedId) {
+    return null;
+  }
+  const requestWithId = requests[selectedId];
+  if (!requestWithId) {
+    return null;
+  }
+
+  return (
+    <RequestDetails
+      key={selectedId}
+      request={requestWithId}
+      response={responses[selectedId]}
+      bodyFormat={detailBodyFormat}
+      onSelectFormat={instance.onSelectFormat}
+    />
+  );
+}
+
 class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
   static ContextMenu = styled(ContextMenu)({
     flex: 1,

desktop/plugins/network/package.json

@@ -21,6 +21,10 @@
     "pako": "^1.0.11",
     "xml-beautifier": "^0.4.0"
   },
+  "peerDependencies": {
+    "flipper": "0.59.0",
+    "flipper-plugin": "0.59.0"
+  },
   "devDependencies": {
     "@types/pako": "^1.0.1"
   }

desktop/plugins/network/types.tsx

@@ -72,6 +72,14 @@ export type Route = {
   responseStatus: string;
 };
 
+export type MockRoute = {
+  requestUrl: string;
+  method: string;
+  data: string;
+  headers: Header[];
+  status: string;
+};
+
 export type PersistedState = {
   requests: {[id: string]: Request};
   responses: {[id: string]: Response};