From 8c3abf7450f0b655c41f31701770a6d3d75a74ea Mon Sep 17 00:00:00 2001
From: bizzguy <jamesharmon@gmail.com>
Date: Fri, 29 Jan 2021 09:00:44 -0800
Subject: [PATCH] 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
---
 .../network/ManageMockResponsePanel.tsx       | 156 ++++++++----------
 .../plugins/network/MockResponseDialog.tsx    |  20 +--
 desktop/plugins/network/index.tsx             |  13 +-
 3 files changed, 82 insertions(+), 107 deletions(-)

diff --git a/desktop/plugins/network/ManageMockResponsePanel.tsx b/desktop/plugins/network/ManageMockResponsePanel.tsx
index 10c735d20..5f3d902de 100644
--- a/desktop/plugins/network/ManageMockResponsePanel.tsx
+++ b/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,73 +170,74 @@ export function ManageMockResponsePanel(props: Props) {
     props.routes,
   ]);
   return (
-    <Container style={{height: 560}}>
-      <LeftPanel>
-        <Button
-          onClick={() => {
-            networkRouteManager.addRoute();
-          }}>
-          <Glyph
-            name="plus-circle"
-            size={16}
-            variant="outline"
-            color={colors.blackAlpha30}
-          />
-          &nbsp;Add Route
-        </Button>
-        <Button
-          onClick={() => {
-            networkRouteManager.copyHighlightedCalls(
-              props.highlightedRows as Set<string>,
-              props.requests,
-              props.responses,
-            );
-          }}>
-          <Glyph
-            name="plus-circle"
-            size={16}
-            variant="outline"
-            color={colors.blackAlpha30}
-          />
-          &nbsp;Copy Highlighted Calls
-        </Button>
-        <hr
-          style={{
-            height: 1,
-            backgroundColor: colors.grey,
-            width: '95%',
-          }}
-        />
-        <ManagedTable
-          hideHeader={true}
-          multiline={true}
-          columnSizes={ColumnSizes}
-          columns={Columns}
-          rows={_buildRows(props.routes, duplicatedIds, (id) => {
-            networkRouteManager.removeRoute(id);
-            setSelectedId(null);
-          })}
-          stickyBottom={true}
-          autoHeight={false}
-          floating={false}
-          zebra={false}
-          onRowHighlighted={(selectedIds) => {
-            const newSelectedId =
-              selectedIds.length === 1 ? selectedIds[0] : null;
-            setSelectedId(newSelectedId);
-          }}
-          highlightedRows={new Set(selectedId)}
-        />
-      </LeftPanel>
-      <RightPanel>
-        {selectedId && props.routes.hasOwnProperty(selectedId) && (
-          <ManagedMockResponseRightPanel
-            id={selectedId}
-            route={props.routes[selectedId]}
-            isDuplicated={duplicatedIds.includes(selectedId)}
-          />
-        )}
-      </RightPanel>
-    </Container>
+    <Layout.Container style={{height: 550}}>
+      <Layout.Left>
+        <Layout.Container width={450} pad={10} gap={5}>
+          <Button
+            onClick={() => {
+              networkRouteManager.addRoute();
+            }}>
+            <Glyph
+              name="plus-circle"
+              size={16}
+              variant="outline"
+              color={colors.blackAlpha30}
+            />
+            &nbsp;Add Route
+          </Button>
+          <Button
+            onClick={() => {
+              networkRouteManager.copyHighlightedCalls(
+                props.highlightedRows as Set<string>,
+                props.requests,
+                props.responses,
+              );
+            }}>
+            <Glyph
+              name="plus-circle"
+              size={16}
+              variant="outline"
+              color={colors.blackAlpha30}
+            />
+            &nbsp;Copy Highlighted Calls
+          </Button>
+          <Panel
+            grow={true}
+            collapsable={false}
+            floating={false}
+            heading={'Routes'}>
+            <ManagedTable
+              hideHeader={true}
+              multiline={false}
+              columnSizes={ColumnSizes}
+              columns={Columns}
+              rows={_buildRows(props.routes, duplicatedIds, (id) => {
+                networkRouteManager.removeRoute(id);
+                setSelectedId(null);
+              })}
+              stickyBottom={true}
+              autoHeight={false}
+              floating={false}
+              zebra={false}
+              onRowHighlighted={(selectedIds) => {
+                const newSelectedId =
+                  selectedIds.length === 1 ? selectedIds[0] : null;
+                setSelectedId(newSelectedId);
+              }}
+              highlightedRows={new Set(selectedId)}
+            />
+          </Panel>
+        </Layout.Container>
+        <Layout.Container>
+          {selectedId && props.routes.hasOwnProperty(selectedId) && (
+            <ManagedMockResponseRightPanel
+              id={selectedId}
+              route={props.routes[selectedId]}
+              isDuplicated={duplicatedIds.includes(selectedId)}
+            />
+          )}
+        </Layout.Container>
+      </Layout.Left>
+    </Layout.Container>
   );
 }
diff --git a/desktop/plugins/network/MockResponseDialog.tsx b/desktop/plugins/network/MockResponseDialog.tsx
index 3d7aa10ec..7c7df38ed 100644
--- a/desktop/plugins/network/MockResponseDialog.tsx
+++ b/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>
   );
 }
diff --git a/desktop/plugins/network/index.tsx b/desktop/plugins/network/index.tsx
index e1fea2983..bc15b3443 100644
--- a/desktop/plugins/network/index.tsx
+++ b/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>