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,26 +316,6 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
         </Tab>
         <Tab key={'headers'} label={'Headers'}>
           <FlexColumn>
-            <ManagedTable
-              hideHeader={true}
-              multiline={true}
-              columnSizes={HeadersColumnSizes}
-              columns={HeadersColumns}
-              rows={_buildMockResponseHeaderRows(
-                id,
-                route,
-                selectedHeaderIds.length === 1 ? selectedHeaderIds[0] : null,
-                networkRouteManager,
-              )}
-              stickyBottom={true}
-              autoHeight={true}
-              floating={false}
-              // height={300}
-              zebra={false}
-              onRowHighlighted={setSelectedHeaderIds}
-              highlightedRows={new Set(selectedHeaderIds)}
-            />
-          </FlexColumn>
             <AddHeaderButton
               onClick={() => {
                 const newHeaders = {
@@ -347,6 +335,25 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
               />
               &nbsp;Add Header
             </AddHeaderButton>
+            <ManagedTable
+              hideHeader={true}
+              multiline={true}
+              columnSizes={HeadersColumnSizes}
+              columns={HeadersColumns}
+              rows={_buildMockResponseHeaderRows(
+                id,
+                route,
+                selectedHeaderIds.length === 1 ? selectedHeaderIds[0] : null,
+                networkRouteManager,
+              )}
+              stickyBottom={true}
+              autoHeight={true}
+              floating={false}
+              zebra={false}
+              onRowHighlighted={setSelectedHeaderIds}
+              highlightedRows={new Set(selectedHeaderIds)}
+            />
+          </FlexColumn>
         </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>
+      <Layout.Horizontal>
         <ManageMockResponsePanel
           routes={props.routes}
           highlightedRows={props.highlightedRows}
           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>
   );
 }