From 1d3844b12078f56683f41cc9c88033010167cd85 Mon Sep 17 00:00:00 2001
From: Sanjeet Uppal <sanjeet.uppal92@gmail.com>
Date: Thu, 14 Sep 2017 16:30:21 -0700
Subject: [PATCH] Fix https://github.com/readmeio/api-explorer/issues/30

---
 .../__tests__/SecurityInput.test.jsx          |  23 ++++
 packages/api-explorer-ui/lib/create-docs.js   | 104 +-----------------
 .../api-explorer-ui/src/SecurityInput.jsx     |  21 ++++
 3 files changed, 45 insertions(+), 103 deletions(-)

diff --git a/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx b/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
index 122983480..698c1ae26 100644
--- a/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
+++ b/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
@@ -34,6 +34,29 @@ describe('oauth2', () => {
   });
 });
 
+describe('apiKey', () => {
+  const props = {
+    scheme: { type: 'apiKey', name: 'api_key', _key: 'api_key' },
+    onChange: () => {},
+  };
+
+  test('should send auth apiKey into onChange()', () => {
+    const onChange = jest.fn();
+    const securityInput = mount(<SecurityInput {...props} onChange={onChange} />);
+
+    securityInput.find('input').node.value = 'user';
+    securityInput.find('input').simulate('change');
+
+    expect(onChange.mock.calls[0]).toEqual([
+      {
+        auth: {
+          api_key: 'user',
+        },
+      },
+    ]);
+  });
+});
+
 describe('basic', () => {
   const props = { scheme: { type: 'basic', _key: 'test-basic' }, onChange: () => {} };
 
diff --git a/packages/api-explorer-ui/lib/create-docs.js b/packages/api-explorer-ui/lib/create-docs.js
index ba42cbc54..8fd163690 100644
--- a/packages/api-explorer-ui/lib/create-docs.js
+++ b/packages/api-explorer-ui/lib/create-docs.js
@@ -29,109 +29,7 @@ module.exports = (oas, apiSetting) => {
           category: { apiSetting },
           api: { method },
           swagger: { path },
-          body: `
-          [block:textarea]
-          {
-            "text": "# This is text area"
-          }
-          [/block]
-          [block:html]
-          {
-            "html": "<p>This is an html</p>"
-
-          }
-          [/block]
-          [block:api-header]
-          {
-            "title": "This is cool header",
-            "sidebar": true
-          }
-          [/block]
-
-          [block:callout]
-          {
-            "type": "info",
-            "title": "Callout"
-          }
-          [/block]
-
-          [block:image]
-          {
-             "images": [
-              {
-                "image": [
-                  "https://files.readme.io/924824e-fullsizeoutput_314.jpeg",
-                  "fullsizeoutput_314.jpeg",
-                  640,
-                  1136,
-                  "#c8b396"
-                ]
-              }
-            ]
-          }
-          [/block]
-
-          [block:image]
-          {
-            "images": [
-              {
-                "image": [
-                  "https://files.readme.io/dce21f0-IMG_0418.JPG",
-                  "IMG_0418.JPG",
-                  640,
-                  1136,
-                  "#9e918d"
-                ],
-                "caption": "*doggo*"
-              }
-            ]
-          }
-          [/block]
-
-          [block:code]
-          {
-            "codes": [
-               {
-                  "code": "whjdwhjwejhkwhjk",
-                  "language": "text",
-                  "status": 400,
-                  "name": "    "
-                },
-                {
-                  "code": "var a = 1;",
-                  "language": "javascript"
-                }
-            ]
-          }
-          [/block]
-
-          [block:parameters]
-          {
-            "data": {
-              "0-0": "*arbitrary*",
-              "0-1": "info",
-              "0-2": "test",
-              "h-0": "test",
-              "h-1": "1",
-              "h-2": "2"
-            },
-            "cols": 3,
-            "rows": 1
-          }
-          [/block]
-
-        [block:embed]
-        {
-          "html": "<iframe class=\\"embedly-embed\\" src=\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FjYjDqzZ4gjY%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjYjDqzZ4gjY&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FjYjDqzZ4gjY%2Fhqdefault.jpg&key=f2aa6fc3595946d0afc3d76cbbd25dc3&type=text%2Fhtml&schema=youtube\\" width=\\"640\\" height=\\"480\\" scrolling=\\"no\\" frameborder=\\"0\\" allowfullscreen></iframe>",
-          "url": "https://www.youtube.com/watch?v=jYjDqzZ4gjY",
-          "title": "White kids Watch me whip school Chorus - chorus white kids singing Watch me whip",
-          "favicon": "https://s.ytimg.com/yts/img/ringo/img/favicon-vfl8qSV2F.ico",
-          "image": "https://i.ytimg.com/vi/jYjDqzZ4gjY/hqdefault.jpg",
-          "sidebar": true
-        }
-        [/block]
-
-          `,
+          body: '',
         });
       }
     });
diff --git a/packages/api-explorer-ui/src/SecurityInput.jsx b/packages/api-explorer-ui/src/SecurityInput.jsx
index 4ce3fa590..b96aa79db 100644
--- a/packages/api-explorer-ui/src/SecurityInput.jsx
+++ b/packages/api-explorer-ui/src/SecurityInput.jsx
@@ -56,6 +56,25 @@ Oauth2.defaultProps = {
   oauthUrl: '',
 };
 
+function ApiKey(apiKey) {
+  return (
+    <div className="row">
+      <div className="col-xs-5">
+        <label htmlFor="apiKey">{apiKey.scheme.name}</label>
+      </div>
+      <div className="col-xs-7">
+        <input type="text" onChange={e => apiKey.change(e.currentTarget.value)} />
+      </div>
+    </div>
+  );
+}
+
+ApiKey.propTypes = {
+  scheme: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
 class Basic extends React.Component {
   constructor(props) {
     super(props);
@@ -109,6 +128,8 @@ function SecurityInput(props) {
       return <Oauth2 {...props} change={change} />;
     case 'basic':
       return <Basic {...props} change={change} />;
+    case 'apiKey':
+      return <ApiKey {...props} change={change} />;
     default:
       return <span />;
   }