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

Introduce button to copy request / response body to clipboard

Browse Source 
Summary: Changelog: [Network] Introduce a copy button for request / response bodies

Reviewed By: passy

Differential Revision: D28222152

fbshipit-source-id: db33c8e91cbbe733502b32df75de14290e6f3d95
This commit is contained in:
Michel Weststrate
2021-05-06 04:26:41 -07:00
committed by Facebook GitHub Bot
parent 72e34bbd0d
commit 9c5967caf9
3 changed files with 53 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
desktop/plugins/public/network/RequestDetails.tsx
View File

@@ -23,11 +23,18 @@ import {
} from 'flipper-plugin';
import {Select, Typography} from 'antd';
import {bodyAsBinary, bodyAsString, formatBytes, getHeaderValue} from './utils';
import {
bodyAsBinary,
bodyAsString,
formatBytes,
getHeaderValue,
isTextual,
} from './utils';
import {Request, Header, Insights, RetryInsights} from './types';
import {BodyOptions} from './index';
import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository';
import {KeyValueItem, KeyValueTable} from './KeyValueTable';
import {CopyOutlined} from '@ant-design/icons';
const {Text} = Typography;
@@ -35,6 +42,7 @@ type RequestDetailsProps = {
request: Request;
bodyFormat: string;
onSelectFormat: (bodyFormat: string) => void;
onCopyText(test: string): void;
};
export default class RequestDetails extends Component<RequestDetailsProps> {
urlColumns = (url: URL) => {
@@ -59,7 +67,7 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
};
render() {
const {request, bodyFormat, onSelectFormat} = this.props;
const {request, bodyFormat, onSelectFormat, onCopyText} = this.props;
const url = new URL(request.url);
const formattedText = bodyFormat == 'formatted';
@@ -83,7 +91,21 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
) : null}
{request.requestData != null ? (
<Panel key="requestData" title={'Request Body'} pad>
<Panel
key="requestData"
title={'Request Body'}
extraActions={
isTextual(request.requestHeaders) ? (
<CopyOutlined
title="Copy request body"
onClick={(e) => {
e.stopPropagation();
onCopyText(request.requestData as string);
}}
/>
) : null
}
pad>
<RequestBodyInspector
formattedText={formattedText}
request={request}
@@ -106,6 +128,17 @@ export default class RequestDetails extends Component<RequestDetailsProps> {
title={`Response Body${
request.responseIsMock ? ' (Mocked)' : ''
}`}
extraActions={
isTextual(request.responseHeaders) && request.responseData ? (
<CopyOutlined
title="Copy response body"
onClick={(e) => {
e.stopPropagation();
onCopyText(request.responseData as string);
}}
/>
) : null
}
pad>
<ResponseBodyInspector
formattedText={formattedText}