diff --git a/packages/api-explorer/__tests__/Doc.test.jsx b/packages/api-explorer/__tests__/Doc.test.jsx index dbf1aab69..0500a8fb2 100644 --- a/packages/api-explorer/__tests__/Doc.test.jsx +++ b/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(); + + expect(doc.state('formData').auth).toEqual({ api_key: apiKey }); + }); +}); diff --git a/packages/api-explorer/src/AuthBox.jsx b/packages/api-explorer/src/AuthBox.jsx index 81aac7194..db3f82da8 100644 --- a/packages/api-explorer/src/AuthBox.jsx +++ b/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) {
- {renderSecurities(authInputRef, operation, this.onChange, oauth, e => { + {renderSecurities(authInputRef, operation, this.onChange, oauth, apiKey, e => { e.preventDefault(); onSubmit(); })} diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx index bea46a308..f44e1a2cf 100644 --- a/packages/api-explorer/src/Doc.jsx +++ b/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} /> ); } diff --git a/packages/api-explorer/src/PathUrl.jsx b/packages/api-explorer/src/PathUrl.jsx index a02cc61e8..85b637bd6 100644 --- a/packages/api-explorer/src/PathUrl.jsx +++ b/packages/api-explorer/src/PathUrl.jsx @@ -28,6 +28,7 @@ function PathUrl({ toggleAuth, onSubmit, oauth, + apiKey, }) { return (
@@ -44,6 +45,7 @@ function PathUrl({ toggle={toggleAuth} authInputRef={authInputRef} oauth={oauth} + apiKey={apiKey} />