Network Plugin - Minor UI fixes (#1864)

Summary:
Made UI fixes to Network Plugin (mostly to Route screens) to continue migration to the new design framework.  This consisted mostly of replacing FlexColumn and FlexRow with Layout.Container and Layout.Horizontal.

Also, contains some cosmetic changes to "Mock Network Response" page.

Here is the screenshot with UI changes:

![image](https://user-images.githubusercontent.com/337874/105937062-6d0e4500-601a-11eb-97ce-d9c4ae0c184f.png)

This was the old screen for comparison:

![image](https://user-images.githubusercontent.com/337874/105937028-5667ee00-601a-11eb-84a9-a2bd4bb78846.png)

## Changelog

Network Plugin - UI changes to continue migration to Sandy design framework

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

Test Plan: Manual testing to ensure that all data still displayed with new UI changes (especially the Data and Headers info in the "Route Info" section)

Reviewed By: passy

Differential Revision: D26125656

Pulled By: mweststrate

fbshipit-source-id: a25104274ed25788e5c0738ac0a9609f2cead751

desktop/plugins/network/ManageMockResponsePanel.tsx

@@ -13,7 +13,6 @@ import {
   Text,
   FlexBox,
   FlexRow,
-  FlexColumn,
   Glyph,
   styled,
   colors,
@@ -48,24 +47,6 @@ const Button = styled(FlexBox)({
   textOverflow: 'ellipsis',
 });
 
-const Container = styled(FlexRow)({
-  flex: 1,
-  justifyContent: 'space-around',
-  alignItems: 'stretch',
-  height: '100%',
-  width: '100%',
-});
-
-const LeftPanel = styled(FlexColumn)({
-  height: '100%',
-  width: '35%',
-});
-
-const RightPanel = styled(FlexColumn)({
-  flex: 2,
-  height: '100%',
-});
-
 const TextEllipsis = styled(Text)({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
@@ -189,8 +170,9 @@ export function ManageMockResponsePanel(props: Props) {
     props.routes,
   ]);
   return (
-    <Container style={{height: 560}}>
-      <LeftPanel>
+    <Layout.Container style={{height: 550}}>
+      <Layout.Left>
+        <Layout.Container width={450} pad={10} gap={5}>
           <Button
             onClick={() => {
               networkRouteManager.addRoute();
@@ -219,16 +201,14 @@ export function ManageMockResponsePanel(props: Props) {
             />
             &nbsp;Copy Highlighted Calls
           </Button>
-        <hr
-          style={{
-            height: 1,
-            backgroundColor: colors.grey,
-            width: '95%',
-          }}
-        />
+          <Panel
+            grow={true}
+            collapsable={false}
+            floating={false}
+            heading={'Routes'}>
             <ManagedTable
               hideHeader={true}
-          multiline={true}
+              multiline={false}
               columnSizes={ColumnSizes}
               columns={Columns}
               rows={_buildRows(props.routes, duplicatedIds, (id) => {
@@ -246,8 +226,9 @@ export function ManageMockResponsePanel(props: Props) {
               }}
               highlightedRows={new Set(selectedId)}
             />
-      </LeftPanel>
-      <RightPanel>
+          </Panel>
+        </Layout.Container>
+        <Layout.Container>
           {selectedId && props.routes.hasOwnProperty(selectedId) && (
             <ManagedMockResponseRightPanel
               id={selectedId}
@@ -255,7 +236,8 @@ export function ManageMockResponsePanel(props: Props) {
               isDuplicated={duplicatedIds.includes(selectedId)}
             />
           )}
-      </RightPanel>
-    </Container>
+        </Layout.Container>
+      </Layout.Left>
+    </Layout.Container>
   );
 }

desktop/plugins/network/MockResponseDialog.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {FlexColumn, Button, styled, Layout, Spacer} from 'flipper';
+import {Button, styled, Layout, Spacer} from 'flipper';
 
 import {ManageMockResponsePanel} from './ManageMockResponsePanel';
 import {Route, Request, Response} from './types';
@@ -30,30 +30,24 @@ const Title = styled('div')({
   marginTop: 8,
 });
 
-const Container = styled(FlexColumn)({
+const StyledContainer = styled(Layout.Container)({
   padding: 10,
-  width: 800,
-  height: 550,
-});
-
-const Row = styled(FlexColumn)({
-  alignItems: 'flex-end',
-  marginTop: 16,
+  width: 1200,
 });
 
 export function MockResponseDialog(props: Props) {
   const networkRouteManager = useContext(NetworkRouteContext);
   return (
-    <Layout.Container pad width={1200}>
+    <StyledContainer pad gap width={1200}>
       <Title>Mock Network Responses</Title>
-      <Layout.Horizontal>
+      <Layout.Container>
         <ManageMockResponsePanel
           routes={props.routes}
           highlightedRows={props.highlightedRows}
           requests={props.requests}
           responses={props.responses}
         />
-      </Layout.Horizontal>
+      </Layout.Container>
       <Layout.Horizontal gap>
         <Button
           compact
@@ -84,6 +78,6 @@ export function MockResponseDialog(props: Props) {
           Close
         </Button>
       </Layout.Horizontal>
-    </Layout.Container>
+    </StyledContainer>
   );
 }

desktop/plugins/network/index.tsx

@@ -14,8 +14,7 @@ import {message} from 'antd';
 
 import {
   ContextMenu,
-  FlexColumn,
-  FlexRow,
+  Layout,
   Button,
   Text,
   Glyph,
@@ -592,7 +591,7 @@ export function Component() {
   const networkRouteManager = useValue(instance.networkRouteManager);
 
   return (
-    <FlexColumn grow={true}>
+    <Layout.Container grow={true}>
       <NetworkRouteContext.Provider value={networkRouteManager}>
         <NetworkTable
           requests={requests || {}}
@@ -610,7 +609,7 @@ export function Component() {
         />
         <Sidebar />
       </NetworkRouteContext.Provider>
-    </FlexColumn>
+    </Layout.Container>
   );
 }
 
@@ -898,7 +897,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
       <>
         <NetworkTable.ContextMenu
           items={this.contextMenuItems()}
-          component={FlexColumn}>
+          component={Layout.Container}>
           <SearchableTable
             virtual={true}
             multiline={false}
@@ -918,12 +917,12 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
             clearSearchTerm={this.props.searchTerm !== ''}
             defaultSearchTerm={this.props.searchTerm}
             actions={
-              <FlexRow>
+              <Layout.Horizontal gap>
                 <Button onClick={this.props.clear}>Clear Table</Button>
                 {this.props.isMockResponseSupported && (
                   <Button onClick={this.props.onMockButtonPressed}>Mock</Button>
                 )}
-              </FlexRow>
+              </Layout.Horizontal>
             }
           />
         </NetworkTable.ContextMenu>