Display status in titlebar of response and redirects

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 (
     <StyledHeader expandable onClick={onClick}>
       <h3>
-        Redirect ({(time / 1000).toFixed(3)}s) - <a href={url} className="text-muted">{url}</a>
+        <StatusChip statusCode={statusCode} />
+        Redirect ({(time / 1000).toFixed(3)}s)
+        <a href={url} className="text-muted">{url}</a>
       </h3>
     </StyledHeader>
   );
@@ -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 (
     <StyledResponse
       collapsible
       expanded={isExpanded}
-      header={<Titlebar method={method} url={url} time={time} onClick={setExpanded} />}
+      header={(
+        <Titlebar
+          method={method}
+          statusCode={statusCode}
+          url={url}
+          time={time}
+          onClick={setExpanded}
+        />
+      )}
     >
-      <h3>
-        <Status
-          green={response.statusCode >= 200 && response.statusCode < 300}
-          red={response.statusCode >= 400 && response.statusCode < 600}
-        >
-          {response.statusCode}
-        </Status>
-        <small> {response.statusLine && response.statusLine.replace(/.*\d{3} /, '')}</small>
-      </h3>
-
       <Headers expanded headers={headers} />
     </StyledResponse>
   );

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 (
     <StyledHeader>
       <h3>
-        Response ({time}) - <a href={url} className="text-muted">{url}</a>
+        <StatusChip statusCode={statusCode} />
+        Response ({time})
+        <a href={url} className="text-muted">{url}</a>
       </h3>
     </StyledHeader>
   );
@@ -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 (
     <StyledResponse
       wrapResponse={wrapResponse}
-      header={<Titlebar method={method} url={url} time={time} />}
+      header={<Titlebar statusCode={status} method={method} url={url} time={time} />}
     >
-      <h3>
-        <Status
-          green={response.status >= 200 && response.status < 300}
-          red={response.status >= 400 && response.status < 600}
-        >
-          {response.status}
-        </Status>
-        <small> {response.statusText}</small>
-      </h3>
-
       <Headers headers={interceptedResponse.responseHeaders} />
       {type.html && <RenderedResponse html={body} />}
 

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 (
+    <Label bsStyle={labelStyle}>{statusCode}</Label>
+  );
+}
+
+StatusChip.propTypes = {
+  statusCode: PropTypes.number.isRequired,
+};
+
+export default StatusChip;
+

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;

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"
   >
     <div
-      className="fOYyKI"
+      className="cYruAa"
     >
       <h3>
+        <span
+          className="label label-success"
+        >
+          200
+        </span>
         Response (
         0.123s
-        ) - 
+        )
         <a
           className="text-muted"
           href="http://example.com"
@@ -27,17 +32,6 @@ exports[`response component renders a result when given one 1`] = `
   <div
     className="panel-body"
   >
-    <h3>
-      <span
-        className="cSFbuC"
-      >
-        200
-      </span>
-      <small>
-
-        OK
-      </small>
-    </h3>
     <div
       className="hNpSwj"
     >

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(
-      <Provider store={store}>
-        <Response {...props} loading={false} />
-      </Provider>,
-    );
-
-    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(
       <Provider store={store}>
         <Response {...props} loading={false} />
@@ -94,8 +80,11 @@ describe('response component', () => {
       </a>
     );
 
-    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();
   });
 });