1559c1ef2c
Summary: The current UI for managing mock network request definitions (routes) has some issues - too small for the amount of information it displays - no formatting for JSON response bodies - uses the older design system (not ant) - no separation between commands for creating routes and the list of routes The following screen images show these problems.   ## Changelog Enhance UI for Mocks dialog in Network Plugin Pull Request resolved: https://github.com/facebook/flipper/pull/1831 Test Plan: Ran multiple manual tests using the Android sample app. Here is a screen image (at 1280 x 720) for the enhanced UI.  Reviewed By: mweststrate Differential Revision: D25922798 Pulled By: priteshrnandgaonkar fbshipit-source-id: d27ba30a7eb51105a8d381097ecaafd82624cad5
61 lines
1.4 KiB
TypeScript
61 lines
1.4 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 {FlexColumn, Button, styled, Layout} from 'flipper';
|
|
|
|
import {ManageMockResponsePanel} from './ManageMockResponsePanel';
|
|
import {Route, Request, Response} from './types';
|
|
import React 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 Container = styled(FlexColumn)({
|
|
padding: 10,
|
|
width: 800,
|
|
height: 550,
|
|
});
|
|
|
|
const Row = styled(FlexColumn)({
|
|
alignItems: 'flex-end',
|
|
marginTop: 16,
|
|
});
|
|
|
|
export function MockResponseDialog(props: Props) {
|
|
return (
|
|
<Layout.Container pad width={1200}>
|
|
<Title>Mock Network Responses</Title>
|
|
<Layout.Horizontal>
|
|
<ManageMockResponsePanel
|
|
routes={props.routes}
|
|
highlightedRows={props.highlightedRows}
|
|
requests={props.requests}
|
|
responses={props.responses}
|
|
/>
|
|
</Layout.Horizontal>
|
|
<Layout.Horizontal>
|
|
<Button compact padded onClick={props.onHide}>
|
|
Close
|
|
</Button>
|
|
</Layout.Horizontal>
|
|
</Layout.Container>
|
|
);
|
|
}
|