Network Plugin - New functions to import, export and clear Routes (#1855)

Summary:
In the network plugin, add features to import and export routes as described in issue https://github.com/facebook/flipper/issues/1651

Primary use case is that external testers (such as QA teams) would be able to create test data, convert it to mocks and save the mocks to make bug fixes easier for devs.

Here is a screenshot showing location of buttons to perform import/export (and clearing) of mock routes:

![image](https://user-images.githubusercontent.com/337874/105658269-cb58ed80-5e8b-11eb-8118-f13efc96bf6d.png)

Here is another screenshot showing export dialog:

![image](https://user-images.githubusercontent.com/337874/105657733-afa11780-5e8a-11eb-9725-120617e1dd71.png)

Changelog: [Network] Mock routes can now be imported and exported. Thanks bizzguy!

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

Test Plan:
Performed manual testing

- create new mocks
- export mocks
- clear mocks
- import mocks
- verify that mocks still work by making GET/POST requests in sample app

Performed various permutations of above manual tests, including restarting Flipper at various points to ensure that test plan still worked.  Also performed visual inspection of exported files to verify correctness.

Would be very interested in learning how to create automated tests for this functionality.

Reviewed By: passy

Differential Revision: D26072928

Pulled By: mweststrate

fbshipit-source-id: 51bd5e19e78d830b94add850d5dc9b9e45fa6fad

desktop/plugins/network/ManageMockResponsePanel.tsx

@@ -38,7 +38,7 @@ const ColumnSizes = {route: 'flex'};
 
 const Columns = {route: {value: 'Route', resizable: false}};
 
-const AddRouteButton = styled(FlexBox)({
+const Button = styled(FlexBox)({
   color: colors.blackAlpha50,
   alignItems: 'center',
   padding: 5,
@@ -48,16 +48,6 @@ const AddRouteButton = styled(FlexBox)({
   textOverflow: 'ellipsis',
 });
 
-const CopyHighlightedCallsButton = styled(FlexBox)({
-  color: colors.blueDark,
-  alignItems: 'center',
-  padding: 5,
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
 const Container = styled(FlexRow)({
   flex: 1,
   justifyContent: 'space-around',
@@ -199,9 +189,9 @@ export function ManageMockResponsePanel(props: Props) {
     props.routes,
   ]);
   return (
-    <Container style={{height: 580}}>
+    <Container style={{height: 560}}>
       <LeftPanel>
-        <AddRouteButton
+        <Button
           onClick={() => {
             networkRouteManager.addRoute();
           }}>
@@ -212,8 +202,8 @@ export function ManageMockResponsePanel(props: Props) {
             color={colors.blackAlpha30}
           />
           &nbsp;Add Route
-        </AddRouteButton>
-        <CopyHighlightedCallsButton
+        </Button>
+        <Button
           onClick={() => {
             networkRouteManager.copyHighlightedCalls(
               props.highlightedRows as Set<string>,
@@ -228,7 +218,7 @@ export function ManageMockResponsePanel(props: Props) {
             color={colors.blackAlpha30}
           />
           &nbsp;Copy Highlighted Calls
-        </CopyHighlightedCallsButton>
+        </Button>
         <hr
           style={{
             height: 1,