Persist the Network mock data (#1218)

Summary:
Persist the Network mock data, so it can survive after switching the plugins

Closes https://github.com/facebook/flipper/issues/1206
## Changelog

- Persist the Network mock data
- Remove the pref-filled '/' when creating a mock route
Pull Request resolved: https://github.com/facebook/flipper/pull/1218

Test Plan: <img width="807" alt="Screenshot 2020-06-02 at 11 45 15 PM" src="https://user-images.githubusercontent.com/410850/83540614-27e95000-a52b-11ea-8fc8-d7ad1373e904.png">

Reviewed By: mweststrate

Differential Revision: D21863561

Pulled By: passy

fbshipit-source-id: 4706ede721c7990a6bcc0bfe51f41e80306ffac7

desktop/plugins/network/ManageMockResponsePanel.tsx

@@ -129,7 +129,13 @@ function RouteRow(props: {
         {props.showWarning && (
           <Icon name="caution-triangle" color={colors.yellow} />
         )}
+        {props.text.length === 0 ? (
+          <TextEllipsis style={{color: colors.blackAlpha50}}>
+            untitled
+          </TextEllipsis>
+        ) : (
           <TextEllipsis>{props.text}</TextEllipsis>
+        )}
       </FlexRow>
       {showCloseButton && (
         <FlexRow onClick={props.handleRemoveId}>

desktop/plugins/network/index.tsx

@@ -38,6 +38,8 @@ import {URL} from 'url';
 import {DefaultKeyboardAction} from 'app/src/MenuBar';
 import {MockResponseDialog} from './MockResponseDialog';
 
+const LOCALSTORAGE_MOCK_ROUTE_LIST_KEY = '__NETWORK_CACHED_MOCK_ROUTE_LIST';
+
 type PersistedState = {
   requests: {[id: string]: Request};
   responses: {[id: string]: Response};
@@ -206,14 +208,18 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
   }
 
   init() {
-    this.client.supportsMethod('mockResponses').then((result) =>
+    this.client.supportsMethod('mockResponses').then((result) => {
+      const routes = JSON.parse(
+        localStorage.getItem(LOCALSTORAGE_MOCK_ROUTE_LIST_KEY) || '{}',
+      );
       this.setState({
-        routes: {},
+        routes: routes,
         isMockResponseSupported: result,
         showMockResponseDialog: false,
-      }),
+        nextRouteId: routes.length,
-    );
+      });
-    this.informClientMockChange({});
+    });
+
     this.setState(this.parseDeepLinkPayload(this.props.deepLinkPayload));
 
     // declare new variable to be called inside the interface
@@ -225,7 +231,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
           produce((draftState: State) => {
             const nextRouteId = draftState.nextRouteId;
             draftState.routes[nextRouteId.toString()] = {
-              requestUrl: '/',
+              requestUrl: '',
               requestMethod: 'GET',
               responseData: '',
               responseHeaders: {},
@@ -258,10 +264,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
     };
   }
 
-  teardown() {
+  teardown() {}
-    // Remove mock response inside client
-    this.informClientMockChange({});
-  }
 
   onKeyboardAction = (action: string) => {
     if (action === 'clear') {
@@ -341,6 +344,10 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
 
     if (this.state.isMockResponseSupported) {
       const routesValuesArray = Object.values(filteredRoutes);
+      localStorage.setItem(
+        LOCALSTORAGE_MOCK_ROUTE_LIST_KEY,
+        JSON.stringify(routesValuesArray),
+      );
       this.client.call('mockResponses', {
         routes: routesValuesArray.map((route: Route) => ({
           requestUrl: route.requestUrl,