Misc UI fixes (#1873)

Summary:
Continue with cleanup of Network plugin mock screens.  This mostly consists of replacing FlexColumn, FlexRow and FlexBox with equivalent Sandy components.

Here is the new screen:

- replace text buttons with Button
- add NUX info to "Copy Highlighted Calls" button
- add message when no calls have been highlighted
- in routes list remove padding on line items

![image](https://user-images.githubusercontent.com/337874/106415468-d58f6480-6414-11eb-93a8-498fd81b54d9.png)

Here is the prior screen:

![image](https://user-images.githubusercontent.com/337874/106415499-e8099e00-6414-11eb-8e0e-48875a945621.png)

## Changelog

Network Plugin - Additional cleanup of UI on mock screen

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

Test Plan:
Create and modify mocks
Verify that the functionality has not been affected by UI changes

Reviewed By: passy

Differential Revision: D26172915

Pulled By: mweststrate

fbshipit-source-id: f0af143d8509b53585076737832657fb095e75a6

desktop/plugins/network/ManageMockResponsePanel.tsx

@@ -8,11 +8,9 @@
  */
 
 import {
-  Layout,
+  Button,
   ManagedTable,
   Text,
-  FlexBox,
-  FlexRow,
   Glyph,
   styled,
   colors,
@@ -26,6 +24,9 @@ import {MockResponseDetails} from './MockResponseDetails';
 import {NetworkRouteContext} from './index';
 import {RequestId} from './types';
 
+import {message} from 'antd';
+import {NUX, Layout} from 'flipper-plugin';
+
 type Props = {
   routes: {[id: string]: Route};
   highlightedRows: Set<string> | null | undefined;
@@ -37,16 +38,6 @@ const ColumnSizes = {route: 'flex'};
 
 const Columns = {route: {value: 'Route', resizable: false}};
 
-const Button = styled(FlexBox)({
-  color: colors.blackAlpha50,
-  alignItems: 'center',
-  padding: 5,
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
 const TextEllipsis = styled(Text)({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
@@ -110,11 +101,11 @@ function RouteRow(props: {
   handleRemoveId: () => void;
 }) {
   return (
-    <FlexRow grow={true}>
-      <FlexRow onClick={props.handleRemoveId}>
+    <Layout.Horizontal>
+      <Layout.Horizontal onClick={props.handleRemoveId}>
         <Icon name="cross-circle" color={colors.red} />
-      </FlexRow>
-      <FlexRow grow={true}>
+      </Layout.Horizontal>
+      <Layout.Horizontal>
         {props.showWarning && (
           <Icon name="caution-triangle" color={colors.yellow} />
         )}
@@ -125,8 +116,8 @@ function RouteRow(props: {
         ) : (
           <TextEllipsis>{props.text}</TextEllipsis>
         )}
-      </FlexRow>
-    </FlexRow>
+      </Layout.Horizontal>
+    </Layout.Horizontal>
   );
 }
 
@@ -173,35 +164,37 @@ export function ManageMockResponsePanel(props: Props) {
     <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>
+          <Layout.Horizontal gap>
+            <Button
+              onClick={() => {
+                networkRouteManager.addRoute();
+              }}>
+              Add Route
+            </Button>
+            <NUX
+              title="It is now possible to highlight calls from the network call list and convert them into mock routes."
+              placement="bottom">
+              <Button
+                onClick={() => {
+                  if (
+                    !props.highlightedRows ||
+                    props.highlightedRows.size == 0
+                  ) {
+                    message.info('No network calls have been highlighted');
+                    return;
+                  }
+                  networkRouteManager.copyHighlightedCalls(
+                    props.highlightedRows as Set<string>,
+                    props.requests,
+                    props.responses,
+                  );
+                }}>
+                Copy Highlighted Calls
+              </Button>
+            </NUX>
+          </Layout.Horizontal>
           <Panel
+            padded={false}
             grow={true}
             collapsable={false}
             floating={false}

desktop/plugins/network/MockResponseDetails.tsx

@@ -10,8 +10,8 @@
 import {
   FlexRow,
   FlexColumn,
-  FlexBox,
   Layout,
+  Button,
   Input,
   Text,
   Tabs,
@@ -103,17 +103,6 @@ const Warning = styled(FlexRow)({
   marginTop: 8,
 });
 
-const AddHeaderButton = styled(FlexBox)({
-  color: colors.blackAlpha50,
-  marginTop: 8,
-  alignItems: 'center',
-  padding: 10,
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
 const HeadersColumnSizes = {
   close: '4%',
   warning: '4%',
@@ -210,7 +199,7 @@ function _buildMockResponseHeaderRows(
         },
         close: {
           value: (
-            <FlexBox
+            <Layout.Container
               onClick={() => {
                 const newHeaders = produce(
                   route.responseHeaders,
@@ -223,7 +212,7 @@ function _buildMockResponseHeaderRows(
                 });
               }}>
               <HeaderGlyph name="cross-circle" color={colors.red} />
-            </FlexBox>
+            </Layout.Container>
           ),
         },
       },
@@ -317,26 +306,25 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
         </Tab>
         <Tab key={'headers'} label={'Headers'}>
           <Layout.Container style={{width: '100%'}}>
-            <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>
-            <Layout.ScrollContainer style={{width: '100%'}}>
+            <Layout.Horizontal>
+              <Button
+                onClick={() => {
+                  const newHeaders = {
+                    ...route.responseHeaders,
+                    [nextHeaderId.toString()]: {key: '', value: ''},
+                  };
+                  setNextHeaderId(nextHeaderId + 1);
+                  networkRouteManager.modifyRoute(id, {
+                    responseHeaders: newHeaders,
+                  });
+                }}
+                compact
+                padded
+                style={{marginBottom: 10}}>
+                Add Header
+              </Button>
+            </Layout.Horizontal>
+            <Layout.ScrollContainer>
               <ManagedTable
                 hideHeader={true}
                 multiline={true}