0a06d6c546
Summary: Add feature to Network mocks in the Network Plugin which would allow a user to highlight network requests and copy into new routes (mocks). For many production apps, network requests can contain many headers (easily 20 or more) and a large amount of data returned in the response (1000's of characters). Creating mocks for these manually is time consuming and error prone. It would be better to make mocks automatically by allowing the user to highlight desired requests and have them automatically copied into new routes, also copying the headers and the response data. Changelog: [network] Allow user to create new mock routes by highlighting existing network requests in the Network plugin Pull Request resolved: https://github.com/facebook/flipper/pull/1447 Test Plan: Tested this change manually by running through the following scenario using the sample Android app: 1). Run a GET request from the Sample app. Verify that the request/response is correct. Highlight the request to be copied.  2). Go to the Mock dialog by clicking on the "Mock" button  3). Click on "Copy Highlighted Call" to create a mock Route from the selected request. Verify that the "data" and "headers" tab panels are correct.   Close the Dialog 4). Run the request again from the sample app and verify that a mock request is returned with the correct data.   Reviewed By: cekkaewnumchai Differential Revision: D23027793 Pulled By: mweststrate fbshipit-source-id: 197fd5c3d120a20b6bc5d9121ae781923d69b748
59 lines
1.3 KiB
TypeScript
59 lines
1.3 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} 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 (
|
|
<Container>
|
|
<Title>Mock Network Responses</Title>
|
|
<ManageMockResponsePanel
|
|
routes={props.routes}
|
|
highlightedRows={props.highlightedRows}
|
|
requests={props.requests}
|
|
responses={props.responses}
|
|
/>
|
|
<Row>
|
|
<Button compact padded onClick={props.onHide}>
|
|
Close
|
|
</Button>
|
|
</Row>
|
|
</Container>
|
|
);
|
|
}
|