8c3abf7450
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:  This was the old screen for comparison:  ## 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
84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {Button, styled, Layout, Spacer} from 'flipper';
|
|
|
|
import {ManageMockResponsePanel} from './ManageMockResponsePanel';
|
|
import {Route, Request, Response} from './types';
|
|
import React from 'react';
|
|
|
|
import {NetworkRouteContext} from './index';
|
|
import {useContext} from 'react';
|
|
|
|
type Props = {
|
|
routes: {[id: string]: Route};
|
|
onHide: () => void;
|
|
highlightedRows: Set<string> | null | undefined;
|
|
requests: {[id: string]: Request};
|
|
responses: {[id: string]: Response};
|
|
};
|
|
|
|
const Title = styled('div')({
|
|
fontWeight: 500,
|
|
marginBottom: 10,
|
|
marginTop: 8,
|
|
});
|
|
|
|
const StyledContainer = styled(Layout.Container)({
|
|
padding: 10,
|
|
width: 1200,
|
|
});
|
|
|
|
export function MockResponseDialog(props: Props) {
|
|
const networkRouteManager = useContext(NetworkRouteContext);
|
|
return (
|
|
<StyledContainer pad gap width={1200}>
|
|
<Title>Mock Network Responses</Title>
|
|
<Layout.Container>
|
|
<ManageMockResponsePanel
|
|
routes={props.routes}
|
|
highlightedRows={props.highlightedRows}
|
|
requests={props.requests}
|
|
responses={props.responses}
|
|
/>
|
|
</Layout.Container>
|
|
<Layout.Horizontal gap>
|
|
<Button
|
|
compact
|
|
padded
|
|
onClick={() => {
|
|
networkRouteManager.importRoutes();
|
|
}}>
|
|
Import
|
|
</Button>
|
|
<Button
|
|
compact
|
|
padded
|
|
onClick={() => {
|
|
networkRouteManager.exportRoutes();
|
|
}}>
|
|
Export
|
|
</Button>
|
|
<Button
|
|
compact
|
|
padded
|
|
onClick={() => {
|
|
networkRouteManager.clearRoutes();
|
|
}}>
|
|
Clear
|
|
</Button>
|
|
<Spacer />
|
|
<Button compact padded onClick={props.onHide}>
|
|
Close
|
|
</Button>
|
|
</Layout.Horizontal>
|
|
</StyledContainer>
|
|
);
|
|
}
|