Network Plugin - Update UI for routes (#1831)

Summary:
The current UI for managing mock network request definitions (routes) has some issues
- too small for the amount of information it displays
- no formatting for JSON response bodies
- uses the older design system (not ant)
- no separation between commands for creating routes and the list of routes

The following screen images show these problems.

![image](https://user-images.githubusercontent.com/337874/104691438-deb9cb00-56cb-11eb-92df-9e2d122f65c2.png)

![image](https://user-images.githubusercontent.com/337874/104691471-eda07d80-56cb-11eb-8f82-444d591ff966.png)

## Changelog

Enhance UI for Mocks dialog in Network Plugin

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

Test Plan:
Ran multiple manual tests using the Android sample app.  Here is a screen image (at 1280 x 720) for the enhanced UI.

![image](https://user-images.githubusercontent.com/337874/104691649-37896380-56cc-11eb-849f-4e470bb7fbc4.png)

Reviewed By: mweststrate

Differential Revision: D25922798

Pulled By: priteshrnandgaonkar

fbshipit-source-id: d27ba30a7eb51105a8d381097ecaafd82624cad5

desktop/plugins/network/ManageMockResponsePanel.tsx

@@ -8,6 +8,7 @@
  */
 
 import {
+  Layout,
   ManagedTable,
   Text,
   FlexBox,
@@ -61,14 +62,17 @@ const Container = styled(FlexRow)({
   flex: 1,
   justifyContent: 'space-around',
   alignItems: 'stretch',
+  height: '100%',
+  width: '100%',
 });
 
 const LeftPanel = styled(FlexColumn)({
-  flex: 1,
+  height: '100%',
+  width: '35%',
 });
 
 const RightPanel = styled(FlexColumn)({
-  flex: 3,
+  flex: 2,
   height: '100%',
 });
 
@@ -195,7 +199,7 @@ export function ManageMockResponsePanel(props: Props) {
     props.routes,
   ]);
   return (
-    <Container>
+    <Container style={{height: 580}}>
       <LeftPanel>
         <AddRouteButton
           onClick={() => {
@@ -225,6 +229,13 @@ export function ManageMockResponsePanel(props: Props) {
           />
           &nbsp;Copy Highlighted Calls
         </CopyHighlightedCallsButton>
+        <hr
+          style={{
+            height: 1,
+            backgroundColor: colors.grey,
+            width: '95%',
+          }}
+        />
         <ManagedTable
           hideHeader={true}
           multiline={true}

desktop/plugins/network/MockResponseDetails.tsx

@@ -53,7 +53,7 @@ const StyledText = styled(Text)({
 const textAreaStyle: React.CSSProperties = {
   width: '100%',
   marginTop: 8,
-  height: 300,
+  height: 430,
   fontSize: 15,
   color: '#333',
   padding: 10,
@@ -240,6 +240,14 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
   const [nextHeaderId, setNextHeaderId] = useState(0);
 
   const {requestUrl, requestMethod, responseData, responseStatus} = route;
+
+  let formattedResponse = '';
+  try {
+    formattedResponse = JSON.stringify(JSON.parse(responseData), null, 2);
+  } catch (e) {
+    formattedResponse = responseData;
+  }
+
   return (
     <Container>
       <FlexRow style={{width: '100%'}}>
@@ -298,7 +306,7 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
             wrap="soft"
             autoComplete="off"
             spellCheck={false}
-            value={responseData}
+            value={formattedResponse}
             onChange={(event) =>
               networkRouteManager.modifyRoute(id, {
                 responseData: event.target.value,
@@ -308,6 +316,25 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
         </Tab>
         <Tab key={'headers'} label={'Headers'}>
           <FlexColumn>
+            <AddHeaderButton
+              onClick={() => {
+                const newHeaders = {
+                  ...route.responseHeaders,
+                  [nextHeaderId.toString()]: {key: '', value: ''},
+                };
+                setNextHeaderId(nextHeaderId + 1);
+                networkRouteManager.modifyRoute(id, {
+                  responseHeaders: newHeaders,
+                });
+              }}>
+              <Glyph
+                name="plus-circle"
+                size={16}
+                variant="outline"
+                color={colors.blackAlpha30}
+              />
+              &nbsp;Add Header
+            </AddHeaderButton>
             <ManagedTable
               hideHeader={true}
               multiline={true}
@@ -322,31 +349,11 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
               stickyBottom={true}
               autoHeight={true}
               floating={false}
-              // height={300}
               zebra={false}
               onRowHighlighted={setSelectedHeaderIds}
               highlightedRows={new Set(selectedHeaderIds)}
             />
           </FlexColumn>
-          <AddHeaderButton
-            onClick={() => {
-              const newHeaders = {
-                ...route.responseHeaders,
-                [nextHeaderId.toString()]: {key: '', value: ''},
-              };
-              setNextHeaderId(nextHeaderId + 1);
-              networkRouteManager.modifyRoute(id, {
-                responseHeaders: newHeaders,
-              });
-            }}>
-            <Glyph
-              name="plus-circle"
-              size={16}
-              variant="outline"
-              color={colors.blackAlpha30}
-            />
-            &nbsp;Add Header
-          </AddHeaderButton>
         </Tab>
       </Tabs>
     </Container>

desktop/plugins/network/MockResponseDialog.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {FlexColumn, Button, styled} from 'flipper';
+import {FlexColumn, Button, styled, Layout} from 'flipper';
 
 import {ManageMockResponsePanel} from './ManageMockResponsePanel';
 import {Route, Request, Response} from './types';
@@ -40,19 +40,21 @@ const Row = styled(FlexColumn)({
 
 export function MockResponseDialog(props: Props) {
   return (
-    <Container>
+    <Layout.Container pad width={1200}>
       <Title>Mock Network Responses</Title>
-      <ManageMockResponsePanel
+      <Layout.Horizontal>
-        routes={props.routes}
+        <ManageMockResponsePanel
-        highlightedRows={props.highlightedRows}
+          routes={props.routes}
-        requests={props.requests}
+          highlightedRows={props.highlightedRows}
-        responses={props.responses}
+          requests={props.requests}
-      />
+          responses={props.responses}
-      <Row>
+        />
+      </Layout.Horizontal>
+      <Layout.Horizontal>
         <Button compact padded onClick={props.onHide}>
           Close
         </Button>
-      </Row>
+      </Layout.Horizontal>
-    </Container>
+    </Layout.Container>
   );
 }