Setting apiKey on the state so it goes into the code samples

packages/api-explorer/__tests__/Doc.test.jsx

@@ -254,3 +254,13 @@ describe('stripe theme', () => {
     expect(doc.find('.hub-reference-right').find('Response').length).toBe(1);
   });
 });
+
+describe('`apiKey`', () => {
+  test('should set apiKey in formData if passed in', () => {
+    const apiKey = '123456';
+
+    const doc = mount(<Doc {...props} apiKey={apiKey} />);
+
+    expect(doc.state('formData').auth).toEqual({ api_key: apiKey });
+  });
+});

packages/api-explorer/src/AuthBox.jsx

@@ -4,7 +4,7 @@ const classNames = require('classnames');
 const SecurityInput = require('./SecurityInput');
 const { Operation } = require('./lib/Oas');
 
-function renderSecurities(authInputRef, operation, onChange, oauth, onSubmit) {
+function renderSecurities(authInputRef, operation, onChange, oauth, apiKey, onSubmit) {
   const securityTypes = operation.prepareSecurity();
   return Object.keys(securityTypes).map(type => {
     const securities = securityTypes[type];
@@ -29,7 +29,7 @@ function renderSecurities(authInputRef, operation, onChange, oauth, onSubmit) {
               <SecurityInput
                 key={security._key}
                 scheme={security}
-                apiKey=""
+                apiKey={apiKey}
                 onChange={onChange}
                 authInputRef={authInputRef}
                 oauth={oauth}
@@ -59,7 +59,7 @@ class AuthBox extends React.Component {
     });
   }
   render() {
-    const { authInputRef, operation, onSubmit, open, needsAuth, toggle, oauth } = this.props;
+    const { authInputRef, operation, onSubmit, open, needsAuth, toggle, oauth, apiKey } = this.props;
 
     if (Object.keys(operation.prepareSecurity()).length === 0) return null;
 
@@ -72,7 +72,7 @@ class AuthBox extends React.Component {
         <div className="nopad">
           <div className="triangle" />
           <div>
-            {renderSecurities(authInputRef, operation, this.onChange, oauth, e => {
+            {renderSecurities(authInputRef, operation, this.onChange, oauth, apiKey, e => {
               e.preventDefault();
               onSubmit();
             })}

packages/api-explorer/src/Doc.jsx

@@ -37,6 +37,24 @@ class Doc extends React.Component {
     this.toggleAuth = this.toggleAuth.bind(this);
     this.hideResults = this.hideResults.bind(this);
     this.waypointEntered = this.waypointEntered.bind(this);
+
+    this.setApiKey();
+  }
+
+  setApiKey() {
+    if (!this.props.apiKey) return;
+
+    const operation = this.getOperation();
+
+    if (!operation) return;
+
+    try {
+      const firstSecurity = this.operation.getSecurity()[0];
+
+      this.state.formData.auth = { [Object.keys(firstSecurity)[0]]: this.props.apiKey };
+    } catch(e) {
+      console.error('There was a problem setting the api key', e); // eslint-disable-line no-console
+    }
   }
 
   onChange(formData) {
@@ -220,6 +238,7 @@ class Doc extends React.Component {
         toggleAuth={this.toggleAuth}
         onSubmit={this.onSubmit}
         authInputRef={el => (this.authInput = el)}
+        apiKey={this.props.apiKey}
       />
     );
   }

packages/api-explorer/src/PathUrl.jsx

@@ -28,6 +28,7 @@ function PathUrl({
   toggleAuth,
   onSubmit,
   oauth,
+  apiKey,
 }) {
   return (
     <div className="api-definition-parent">
@@ -44,6 +45,7 @@ function PathUrl({
                 toggle={toggleAuth}
                 authInputRef={authInputRef}
                 oauth={oauth}
+                apiKey={apiKey}
               />
 
               <button

packages/api-explorer/src/index.jsx

@@ -64,6 +64,7 @@ class ApiExplorer extends React.Component {
               language={this.state.language}
               oauth={this.props.oauth}
               suggestedEdits={this.props.suggestedEdits}
+              apiKey={this.state.apiKey}
             />
           ))}
         </div>