diff --git a/src/components/Response/Redirect.js b/src/components/Response/Redirect.js index 5c46e47..f97abdf 100644 --- a/src/components/Response/Redirect.js +++ b/src/components/Response/Redirect.js @@ -1,14 +1,17 @@ import React, { PropTypes } from 'react'; import responsePropTypes, { redirectShape } from 'propTypes/redirect'; -import { StyledResponse, StyledHeader, Status } from './StyledComponents'; +import { StyledResponse, StyledHeader } from './StyledComponents'; import Headers from './Headers'; +import StatusChip from './StatusChip'; -function Titlebar({ url, time, onClick }) { +function Titlebar({ url, time, statusCode, onClick }) { return (

- Redirect ({(time / 1000).toFixed(3)}s) - {url} + + Redirect ({(time / 1000).toFixed(3)}s) + {url}

); @@ -17,6 +20,7 @@ function Titlebar({ url, time, onClick }) { Titlebar.propTypes = { url: redirectShape.url, time: redirectShape.time, + statusCode: PropTypes.number.isRequired, onClick: PropTypes.func.isRequired, }; @@ -30,24 +34,22 @@ function Redirect(props) { if (!response || !headers) return null; - const { method, url, time } = response; + const { method, url, time, statusCode } = response; return ( } + header={( + + )} > -

- = 200 && response.statusCode < 300} - red={response.statusCode >= 400 && response.statusCode < 600} - > - {response.statusCode} - - {response.statusLine && response.statusLine.replace(/.*\d{3} /, '')} -

- ); diff --git a/src/components/Response/Response.js b/src/components/Response/Response.js index b90e6fa..c088e7e 100644 --- a/src/components/Response/Response.js +++ b/src/components/Response/Response.js @@ -10,15 +10,18 @@ import responsePropTypes, { responseShape } from 'propTypes/response'; import getContentType from 'utils/contentType'; import approximateSizeFromLength from 'utils/approximateSizeFromLength'; -import { StyledResponse, StyledHeader, Status } from './StyledComponents'; +import { StyledResponse, StyledHeader } from './StyledComponents'; import Headers from './Headers'; import RenderedResponse from './RenderedResponse'; +import StatusChip from './StatusChip'; -function Titlebar({ url, time }) { +function Titlebar({ url, time, statusCode }) { return (

- Response ({time}) - {url} + + Response ({time}) + {url}

); @@ -27,6 +30,7 @@ function Titlebar({ url, time }) { Titlebar.propTypes = { url: responseShape.url, time: PropTypes.node.isRequired, + statusCode: PropTypes.number.isRequired, }; export function Response(props) { @@ -41,7 +45,7 @@ export function Response(props) { if (!response || !interceptedResponse) return null; - const { method, url, totalTime } = response; + const { method, url, totalTime, status } = response; let { body } = response; let time; @@ -78,18 +82,8 @@ export function Response(props) { return ( } + header={} > -

- = 200 && response.status < 300} - red={response.status >= 400 && response.status < 600} - > - {response.status} - - {response.statusText} -

- {type.html && } diff --git a/src/components/Response/StatusChip.js b/src/components/Response/StatusChip.js new file mode 100644 index 0000000..1249287 --- /dev/null +++ b/src/components/Response/StatusChip.js @@ -0,0 +1,20 @@ +import React, { PropTypes } from 'react'; + +import { Label } from 'react-bootstrap'; + +function StatusChip({ statusCode }) { + let labelStyle = 'default'; + if (statusCode >= 200 && statusCode < 300) labelStyle = 'success'; + else if (statusCode >= 400 && statusCode < 600) labelStyle = 'danger'; + + return ( + + ); +} + +StatusChip.propTypes = { + statusCode: PropTypes.number.isRequired, +}; + +export default StatusChip; + diff --git a/src/components/Response/StyledComponents.js b/src/components/Response/StyledComponents.js index 0259365..431b0f3 100644 --- a/src/components/Response/StyledComponents.js +++ b/src/components/Response/StyledComponents.js @@ -28,16 +28,12 @@ export const StyledHeader = styled.div` h3 { font-size: 15px; margin: 4px 0; + display: flex; + align-items: center; + gap: 8px; } `; -export const Status = styled.span` - fontSize: 32px; - color: orange; - ${props => props.green && 'color: green;'} - ${props => props.red && 'color: red;'} -`; - export const PreviewContainer = styled(Panel)` .panel-body { padding: 0; diff --git a/test/components/response/__snapshots__/response.test.js.snap b/test/components/response/__snapshots__/response.test.js.snap index 7047547..0a493d6 100644 --- a/test/components/response/__snapshots__/response.test.js.snap +++ b/test/components/response/__snapshots__/response.test.js.snap @@ -9,12 +9,17 @@ exports[`response component renders a result when given one 1`] = ` className="panel-heading" >

+ + 200 + Response ( 0.123s - ) - + ) -

- - 200 - - - - OK - -

diff --git a/test/components/response/response.test.js b/test/components/response/response.test.js index 6fcbfa1..dece9d7 100644 --- a/test/components/response/response.test.js +++ b/test/components/response/response.test.js @@ -67,21 +67,7 @@ describe('response component', () => { expect(tree).toMatchSnapshot(); }); - it('displays the status and statusText', () => { - const tree = mount( - - - , - ); - - const h3 = tree.find('.panel-body h3'); - expect(h3.text()).toEqual('200 OK'); - - const small = h3.find('small'); - expect(small.prop('children')).toContain('OK'); - }); - - it('displays the URL and method in the titlebar', () => { + it('displays the URL and status in the titlebar', () => { const tree = mount( @@ -94,8 +80,11 @@ describe('response component', () => { ); - const heading = tree.find('.panel-heading'); + const heading = tree.find('.panel-heading h3'); + const statusLabel = heading.find('.label-success'); + expect(heading.contains(expectedLink)).toEqual(true); + expect(statusLabel).toBePresent(); }); });