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/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>