jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Network Plugin - Minor UI fixes (#1864)

Browse Source 
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
This commit is contained in:
bizzguy
2021-01-29 09:00:44 -08:00
committed by Facebook GitHub Bot
parent 4b711716f2
commit 8c3abf7450
3 changed files with 82 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
desktop/plugins/network/ManageMockResponsePanel.tsx
View File

@@ -13,7 +13,6 @@ import {
Text, Text,
FlexBox, FlexBox,
FlexRow, FlexRow,
FlexColumn,
Glyph, Glyph,
styled, styled,
colors, colors,
@@ -48,24 +47,6 @@ const Button = styled(FlexBox)({
textOverflow: 'ellipsis', 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)({ const TextEllipsis = styled(Text)({
overflowX: 'hidden', overflowX: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
@@ -189,73 +170,74 @@ export function ManageMockResponsePanel(props: Props) {
props.routes, props.routes,
]); ]);
return ( return (
<Container style={{height: 560}}> <Layout.Container style={{height: 550}}>
<LeftPanel> <Layout.Left>
<Button <Layout.Container width={450} pad={10} gap={5}>
onClick={() => { <Button
networkRouteManager.addRoute(); onClick={() => {
}}> networkRouteManager.addRoute();
<Glyph }}>
name="plus-circle" <Glyph
size={16} name="plus-circle"
variant="outline" size={16}
color={colors.blackAlpha30} variant="outline"
/> color={colors.blackAlpha30}
&nbsp;Add Route />
</Button> &nbsp;Add Route
<Button </Button>
onClick={() => { <Button
networkRouteManager.copyHighlightedCalls( onClick={() => {
props.highlightedRows as Set<string>, networkRouteManager.copyHighlightedCalls(
props.requests, props.highlightedRows as Set<string>,
props.responses, props.requests,
); props.responses,
}}> );
<Glyph }}>
name="plus-circle" <Glyph
size={16} name="plus-circle"
variant="outline" size={16}
color={colors.blackAlpha30} variant="outline"
/> color={colors.blackAlpha30}
&nbsp;Copy Highlighted Calls />
</Button> &nbsp;Copy Highlighted Calls
<hr </Button>
style={{ <Panel
height: 1, grow={true}
backgroundColor: colors.grey, collapsable={false}
width: '95%', floating={false}
}} heading={'Routes'}>
/> <ManagedTable
<ManagedTable hideHeader={true}
hideHeader={true} multiline={false}
multiline={true} columnSizes={ColumnSizes}
columnSizes={ColumnSizes} columns={Columns}
columns={Columns} rows={_buildRows(props.routes, duplicatedIds, (id) => {
rows={_buildRows(props.routes, duplicatedIds, (id) => { networkRouteManager.removeRoute(id);
networkRouteManager.removeRoute(id); setSelectedId(null);
setSelectedId(null); })}
})} stickyBottom={true}
stickyBottom={true} autoHeight={false}
autoHeight={false} floating={false}
floating={false} zebra={false}
zebra={false} onRowHighlighted={(selectedIds) => {
onRowHighlighted={(selectedIds) => { const newSelectedId =
const newSelectedId = selectedIds.length === 1 ? selectedIds[0] : null;
selectedIds.length === 1 ? selectedIds[0] : null; setSelectedId(newSelectedId);
setSelectedId(newSelectedId); }}
}} highlightedRows={new Set(selectedId)}
highlightedRows={new Set(selectedId)} />
/> </Panel>
</LeftPanel> </Layout.Container>
<RightPanel> <Layout.Container>
{selectedId && props.routes.hasOwnProperty(selectedId) && ( {selectedId && props.routes.hasOwnProperty(selectedId) && (
<ManagedMockResponseRightPanel <ManagedMockResponseRightPanel
id={selectedId} id={selectedId}
route={props.routes[selectedId]} route={props.routes[selectedId]}
isDuplicated={duplicatedIds.includes(selectedId)} isDuplicated={duplicatedIds.includes(selectedId)}
/> />
)} )}
</RightPanel> </Layout.Container>
</Container> </Layout.Left>
</Layout.Container>
); );
} }

20
desktop/plugins/network/MockResponseDialog.tsx
View File

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

13
desktop/plugins/network/index.tsx
View File

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