Display response status code and status text in response tab

src/components/Collapsable.js

@@ -8,11 +8,15 @@ export default class Collapsable extends React.Component {
     object: React.PropTypes.object.isRequired,
     topLevel: React.PropTypes.bool,
     opened: React.PropTypes.bool,
-    requestOpen: React.PropTypes.func.isRequired,
+    requestOpen: React.PropTypes.func,
     fragments: React.PropTypes.array.isRequired,
     closable: React.PropTypes.bool.isRequired,
   };
 
+  static defaultProps = {
+    requestOpen: () => {},
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -43,19 +47,19 @@ export default class Collapsable extends React.Component {
     return (
       <div className="collapsable">
         <div className={`nameParamWrapper ${fields && closable && 'hasChildren'} ${opened ? 'opened' : 'closed'}`} onClick={() => requestOpen(object.name)}>
-          <p className="name" onClick={() => requestOpen(object.name)}>
+          <div className="name" onClick={() => requestOpen(object.name)}>
             {object.kind !== 'FragmentSpread' && object.name}
             {object.kind === 'FragmentSpread' && (
               <Computed
                 request={fragments.filter(x => x.name === object.name)[0]}
                 fragments={fragments}
               />
             )}
-          </p>
+          </div>
           {object.params && object.params.length > 0 && (
             <div className="params">
-              {object.params.map(param => (
-                <div className="param">
+              {object.params.map((param, i) => (
+                <div className="param" key={`param-${i}`}>
                   <span className="paramName">{param.name}</span>
                   <Value value={param.value} kind={param.kind} />
                 </div>
@@ -65,13 +69,14 @@ export default class Collapsable extends React.Component {
         </div>
         {fields && opened && (
           <div className="fields">
-            {fields.map(field => (
+            {fields.map((field, i) => (
               <Collapsable
                 closable
                 object={field}
                 fragments={fragments}
                 opened={openChildren.indexOf(field.name) !== -1}
                 requestOpen={this.openIsRequested}
+                key={`field-${i}`}
               />
             ))}
           </div>

src/components/Computed.js

@@ -8,8 +8,8 @@ export default function Computed({
   const { operations } = request;
   return (
     <div className="computed">
-      {operations.map(x => (
-        <div className="computed-operation">
+      {operations.map((x, i) => (
+        <div className="computed-operation" key={`computed-operation-${i}`}>
           <Collapsable
             closable={false}
             object={x}

src/components/LongInformation.js

@@ -46,7 +46,8 @@ export default class LongInformation extends React.Component {
           )}
           {view === 'response' && (
             <Response
-              response={entry.responseBody}
+              response={entry.response}
+              responseBody={entry.responseBody}
             />
           )}
         </div>

src/components/Request.js

@@ -37,8 +37,8 @@ export default function Request({
   return (
     <div className={'request'}>
       <span>{`- ${name}`}</span>
-      {operations.map(x => (
-        <Operation operation={x} />
+      {operations.map((x, i) => (
+        <Operation operation={x} key={`operation-${i}`}/>
       ))}
     </div>
   );

src/components/Response.js

@@ -2,22 +2,30 @@ import React from 'react';
 import CollapsableObject from './CollapsableObject';
 
 export default function Response({
+  responseBody,
   response,
 }) {
   return (
     <div className="response">
       <h3>Response</h3>
-      <div className="responseJson">
-        <CollapsableObject
-          object={response}
-          topLevel
-          open
-        />
-      </div>
+      <h4>Status</h4>
+      <p>{response.status}{response.statusText && (': ' + response.statusText)}</p>
+      <h4>Body</h4>
+      {responseBody != null ? (
+        <div className="responseJson">
+          <CollapsableObject
+            object={responseBody}
+            topLevel
+            open
+          />
+        </div>
+      ) : (
+        <em>empty response body</em>
+      )}
     </div>
   );
 }
 
 Response.propTypes = {
-  response: React.PropTypes.string.isRequired,
+  response: React.PropTypes.object,
 };

src/lib/utils.js

@@ -134,7 +134,7 @@ export function parseEntry(entry) {
 
   return new Promise(resolve => {
     entry.getContent(responseBody => {
-      const parsedResponseBody = JSON.parse(responseBody);
+      const parsedResponseBody = (typeof responseBody === 'string' && responseBody.length === 0) ? null : JSON.parse(responseBody);
 
       resolve(parsedQueries.map((parsedQuery, i) => {
         return {