From ae9c07c8f3206c3548ff73a0b9d6fcbcb6c51b84 Mon Sep 17 00:00:00 2001
From: ZHANG Qichuan <qichuan@zhangqichuan.com>
Date: Fri, 19 Jun 2020 05:25:27 -0700
Subject: [PATCH] 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
---
 .../network/ManageMockResponsePanel.tsx       |  8 +++++-
 desktop/plugins/network/index.tsx             | 27 ++++++++++++-------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/desktop/plugins/network/ManageMockResponsePanel.tsx b/desktop/plugins/network/ManageMockResponsePanel.tsx
index ba0b60847..8f7427ce9 100644
--- a/desktop/plugins/network/ManageMockResponsePanel.tsx
+++ b/desktop/plugins/network/ManageMockResponsePanel.tsx
@@ -129,7 +129,13 @@ function RouteRow(props: {
         {props.showWarning && (
           <Icon name="caution-triangle" color={colors.yellow} />
         )}
-        <TextEllipsis>{props.text}</TextEllipsis>
+        {props.text.length === 0 ? (
+          <TextEllipsis style={{color: colors.blackAlpha50}}>
+            untitled
+          </TextEllipsis>
+        ) : (
+          <TextEllipsis>{props.text}</TextEllipsis>
+        )}
       </FlexRow>
       {showCloseButton && (
         <FlexRow onClick={props.handleRemoveId}>
diff --git a/desktop/plugins/network/index.tsx b/desktop/plugins/network/index.tsx
index 311c6b5de..6ac60a35c 100644
--- a/desktop/plugins/network/index.tsx
+++ b/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,
-      }),
-    );
-    this.informClientMockChange({});
+        nextRouteId: routes.length,
+      });
+    });
+
     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() {
-    // Remove mock response inside client
-    this.informClientMockChange({});
-  }
+  teardown() {}
 
   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,