6df117ba04
Summary: In the network plugin, add features to import and export routes as described in issue https://github.com/facebook/flipper/issues/1651 Primary use case is that external testers (such as QA teams) would be able to create test data, convert it to mocks and save the mocks to make bug fixes easier for devs. Here is a screenshot showing location of buttons to perform import/export (and clearing) of mock routes:  Here is another screenshot showing export dialog:  Changelog: [Network] Mock routes can now be imported and exported. Thanks bizzguy! Pull Request resolved: https://github.com/facebook/flipper/pull/1855 Test Plan: Performed manual testing - create new mocks - export mocks - clear mocks - import mocks - verify that mocks still work by making GET/POST requests in sample app Performed various permutations of above manual tests, including restarting Flipper at various points to ensure that test plan still worked. Also performed visual inspection of exported files to verify correctness. Would be very interested in learning how to create automated tests for this functionality. Reviewed By: passy Differential Revision: D26072928 Pulled By: mweststrate fbshipit-source-id: 51bd5e19e78d830b94add850d5dc9b9e45fa6fad
90 lines
2.1 KiB
TypeScript
90 lines
2.1 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, 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 Container = styled(FlexColumn)({
|
|
padding: 10,
|
|
width: 800,
|
|
height: 550,
|
|
});
|
|
|
|
const Row = styled(FlexColumn)({
|
|
alignItems: 'flex-end',
|
|
marginTop: 16,
|
|
});
|
|
|
|
export function MockResponseDialog(props: Props) {
|
|
const networkRouteManager = useContext(NetworkRouteContext);
|
|
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 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>
|
|
</Layout.Container>
|
|
);
|
|
}
|