107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { connect } from "react-redux";
|
||
|
|
import { withRouter, RouteComponentProps } from "react-router";
|
||
|
|
import FormRow from "./FormRow";
|
||
|
|
import { BaseText } from "../canvas/TextViewComponent";
|
||
|
|
import { BaseTabbedView } from "../canvas/TabbedView";
|
||
|
|
import JSONViewer from "./JSONViewer";
|
||
|
|
import styled from "styled-components";
|
||
|
|
import { AppState } from "../../reducers";
|
||
|
|
import { ActionApiResponse } from "../../reducers/entityReducers/actionsReducer";
|
||
|
|
|
||
|
|
const ResponseWrapper = styled.div`
|
||
|
|
flex: 4;
|
||
|
|
`;
|
||
|
|
const ResponseMetaInfo = styled.div`
|
||
|
|
display: flex;
|
||
|
|
${BaseText} {
|
||
|
|
color: #768896;
|
||
|
|
margin: 0 5px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
interface ReduxStateProps {
|
||
|
|
responses: {
|
||
|
|
[id: string]: ActionApiResponse;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const TableWrapper = styled.div`
|
||
|
|
&&& {
|
||
|
|
table {
|
||
|
|
table-layout: fixed;
|
||
|
|
width: 100%;
|
||
|
|
td {
|
||
|
|
font-size: 12px;
|
||
|
|
width: 50%;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const ResponseHeadersView = (props: {
|
||
|
|
data: { [name: string]: Array<string> };
|
||
|
|
}) => {
|
||
|
|
if (!props.data) return <div />;
|
||
|
|
return (
|
||
|
|
<TableWrapper>
|
||
|
|
<table className="bp3-html-table bp3-html-table-striped bp3-html-table-condensed">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Key</th>
|
||
|
|
<th>Value</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{Object.keys(props.data).map(k => (
|
||
|
|
<tr key={k}>
|
||
|
|
<td>{k}</td>
|
||
|
|
<td>{props.data[k].join(", ")}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</TableWrapper>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
type Props = ReduxStateProps & RouteComponentProps<{ id: string }>;
|
||
|
|
|
||
|
|
const ApiResponseView = (props: Props) => {
|
||
|
|
const response = props.responses[props.match.params.id] || {};
|
||
|
|
return (
|
||
|
|
<ResponseWrapper>
|
||
|
|
<FormRow>
|
||
|
|
<BaseText styleName="secondary">{response.statusCode}</BaseText>
|
||
|
|
<ResponseMetaInfo>
|
||
|
|
<BaseText styleName="secondary">300ms</BaseText>
|
||
|
|
<BaseText styleName="secondary">203 kb</BaseText>
|
||
|
|
</ResponseMetaInfo>
|
||
|
|
</FormRow>
|
||
|
|
<BaseTabbedView
|
||
|
|
tabs={[
|
||
|
|
{
|
||
|
|
key: "body",
|
||
|
|
title: "Response Body",
|
||
|
|
panelComponent: <JSONViewer data={response.body} />,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "headers",
|
||
|
|
title: "Response Headers",
|
||
|
|
panelComponent: <ResponseHeadersView data={response.headers} />,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</ResponseWrapper>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const mapStateToProps = (state: AppState): ReduxStateProps => ({
|
||
|
|
responses: state.entities.actions.responses,
|
||
|
|
});
|
||
|
|
|
||
|
|
export default connect(mapStateToProps)(withRouter(ApiResponseView));
|