From 67b9a039827a751d09d2645f09d9d26f3ca127d3 Mon Sep 17 00:00:00 2001
From: Dom Harrington <dom@harrington-mail.com>
Date: Thu, 2 Nov 2017 14:31:38 -0700
Subject: [PATCH] Move response metadata into a separate component

---
 .../src/CodeSampleResponse.jsx                | 56 +---------------
 .../api-explorer-ui/src/ResponseMetadata.jsx  | 67 +++++++++++++++++++
 2 files changed, 69 insertions(+), 54 deletions(-)
 create mode 100644 packages/api-explorer-ui/src/ResponseMetadata.jsx

diff --git a/packages/api-explorer-ui/src/CodeSampleResponse.jsx b/packages/api-explorer-ui/src/CodeSampleResponse.jsx
index 310c0785f..84cdee556 100644
--- a/packages/api-explorer-ui/src/CodeSampleResponse.jsx
+++ b/packages/api-explorer-ui/src/CodeSampleResponse.jsx
@@ -9,6 +9,7 @@ const { getLangName } = require('./lib/generate-code-snippet');
 const syntaxHighlighter = require('../../readme-syntax-highlighter');
 const codemirror = require('../../readme-syntax-highlighter/codemirror');
 const IconStatus = require('./IconStatus');
+const ResponseMetadata = require('./ResponseMetadata');
 
 const Oas = require('./lib/Oas');
 
@@ -147,60 +148,7 @@ class CodeSampleResponse extends React.Component {
                   )}
                 </div>
 
-                <div
-                  className="hub-reference-results-meta tabber-body-metadata tabber-body"
-                  style={{ display: this.state.selectedTab === 'metadata' ? 'block' : 'none' }}
-                >
-                  <div className="meta">
-                    {
-                      // eslint-disable-next-line jsx-a11y/label-has-for
-                      <label>Method</label>
-                    }
-                    <div>{result.method.toString()}</div>
-                  </div>
-
-                  <div className="meta">
-                    {
-                      // eslint-disable-next-line jsx-a11y/label-has-for
-                      <label>URL</label>
-                    }
-                    <div>{result.url}</div>
-                  </div>
-
-                  <div className="meta">
-                    {
-                      // eslint-disable-next-line jsx-a11y/label-has-for
-                      <label>Request Headers</label>
-                    }
-                    <pre>{result.requestHeaders.join('\n')}</pre>
-                  </div>
-
-                  <div className="meta">
-                    {
-                      // eslint-disable-next-line jsx-a11y/label-has-for
-                      <label>Request Data</label>
-                    }
-                    <pre>{JSON.stringify(result.responseBody)}</pre>
-                  </div>
-
-                  <div className="meta">
-                    {
-                      // eslint-disable-next-line jsx-a11y/label-has-for
-                      <label> Status</label>
-                    }
-                    <span className="httpstatus">
-                      <IconStatus result={result} />
-                    </span>
-                  </div>
-
-                  <div className="meta">
-                    {
-                      // eslint-disable-next-line jsx-a11y/label-has-for
-                      <label>Response Headers</label>
-                    }
-                    <pre>{result.responseHeaders.join('\n')}</pre>
-                  </div>
-                </div>
+                { this.state.selectedTab === 'metadata' && <ResponseMetadata result={result} /> }
               </span>
             )}
           </div>
diff --git a/packages/api-explorer-ui/src/ResponseMetadata.jsx b/packages/api-explorer-ui/src/ResponseMetadata.jsx
new file mode 100644
index 000000000..98606e57c
--- /dev/null
+++ b/packages/api-explorer-ui/src/ResponseMetadata.jsx
@@ -0,0 +1,67 @@
+const React = require('react');
+const IconStatus = require('./IconStatus');
+const PropTypes = require('prop-types');
+
+function ResponseMetadata({ result }) {
+  return (
+    <div className="hub-reference-results-meta tabber-body-metadata tabber-body"
+      style={{ display: 'block' }}
+      >
+      <div className="meta">
+        {
+          // eslint-disable-next-line jsx-a11y/label-has-for
+          <label>Method</label>
+        }
+        <div>{result.method.toString()}</div>
+      </div>
+
+      <div className="meta">
+        {
+          // eslint-disable-next-line jsx-a11y/label-has-for
+          <label>URL</label>
+        }
+        <div>{result.url}</div>
+      </div>
+
+      <div className="meta">
+        {
+          // eslint-disable-next-line jsx-a11y/label-has-for
+          <label>Request Headers</label>
+        }
+        <pre>{result.requestHeaders.join('\n')}</pre>
+      </div>
+
+      <div className="meta">
+        {
+          // eslint-disable-next-line jsx-a11y/label-has-for
+          <label>Request Data</label>
+        }
+        <pre>{JSON.stringify(result.responseBody)}</pre>
+      </div>
+
+      <div className="meta">
+        {
+          // eslint-disable-next-line jsx-a11y/label-has-for
+          <label> Status</label>
+        }
+        <span className="httpstatus">
+          <IconStatus result={result} />
+        </span>
+      </div>
+
+      <div className="meta">
+        {
+          // eslint-disable-next-line jsx-a11y/label-has-for
+          <label>Response Headers</label>
+        }
+        <pre>{result.responseHeaders.join('\n')}</pre>
+      </div>
+    </div>
+  );
+}
+
+module.exports = ResponseMetadata;
+
+ResponseMetadata.propTypes = {
+  result: PropTypes.shape({}).isRequired,
+};