A bunch of small fixes for box

Fix keys.api_key -> keys[0].api_key
Example responses for manual apis show up
Code samples show up if try it now is disabled

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

@@ -4,10 +4,11 @@ const example = require('./fixtures/example-results/oas');
 
 const ExampleTabs = require('../src/ExampleTabs');
 const Oas = require('../src/lib/Oas');
+const showCodeResults = require('../src/lib/show-code-results');
 
 const oas = new Oas(example);
 const props = {
-  operation: oas.operation('/results', 'get'),
+  examples: showCodeResults(oas.operation('/results', 'get')),
   selected: 0,
   setExampleTab: () => {},
 };

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

@@ -151,9 +151,9 @@ describe('oas', () => {
 describe('apiKey', () => {
   afterEach(() => Cookie.remove('user_data'));
 
-  it('should read apiKey from `user_data.keys.api_key` cookie', () => {
+  it('should read apiKey from `user_data.apiKey` cookie', () => {
     const apiKey = '123456';
-    Cookie.set('user_data', JSON.stringify({ keys: { api_key: apiKey } }));
+    Cookie.set('user_data', JSON.stringify({ apiKey }));
 
     const explorer = shallow(<ApiExplorer {...props} />);
 

packages/api-explorer/src/Doc.jsx

@@ -15,7 +15,7 @@ const Response = require('./Response');
 const ResponseSchema = require('./ResponseSchema');
 
 const Oas = require('./lib/Oas');
-const showCode = require('./lib/show-code');
+// const showCode = require('./lib/show-code');
 const parseResponse = require('./lib/parse-response');
 const Content = require('./block-types/Content');
 
@@ -111,8 +111,12 @@ class Doc extends React.Component {
     this.setState({ showEndpoint: true });
   }
 
+  // TODO: I couldn't figure out why this existed
+  // Shouldn't we always show code samples?
+  // eslint-disable-next-line
   shouldShowCode() {
-    return showCode(this.oas, this.getOperation());
+    return true;
+    // return showCode(this.oas, this.getOperation());
   }
 
   themeMain(doc) {
@@ -193,13 +197,20 @@ class Doc extends React.Component {
   }
 
   renderResponse() {
+    let exampleResponses;
+    try {
+      exampleResponses = this.props.doc.api.results.codes;
+    } catch (e) {
+      exampleResponses = [];
+    }
     return (
       <Response
         result={this.state.result}
         oas={this.oas}
         operation={this.getOperation()}
         oauth={this.props.oauth}
         hideResults={this.hideResults}
+        exampleResponses={exampleResponses}
       />
     );
   }
@@ -322,6 +333,11 @@ Doc.propTypes = {
           }),
         ),
       }),
+      results: PropTypes.shape({
+        codes: PropTypes.arrayOf(
+          PropTypes.shape({}), // TODO: Jsinspect threw an error because this was too similar to L330
+        ),
+      }),
     }),
     swagger: PropTypes.shape({
       path: PropTypes.string.isRequired,

packages/api-explorer/src/Example.jsx

@@ -12,14 +12,18 @@ const Oas = require('./lib/Oas');
 
 const { Operation } = Oas;
 
-function Example({ operation, result, oas, selected, setExampleTab }) {
+function Example({ operation, result, oas, selected, setExampleTab, exampleResponses }) {
+  const examples = exampleResponses.length || showCodeResults(operation);
+  const hasExamples = examples.find(e => e.code && e.code !== '{}');
   return (
     <div className="hub-reference-results-examples code-sample">
-      {showCodeResults(operation).length > 0 && (
+      {examples &&
+      examples.length > 0 &&
+      hasExamples && (
         <span>
-          <ExampleTabs operation={operation} selected={selected} setExampleTab={setExampleTab} />
+          <ExampleTabs examples={examples} selected={selected} setExampleTab={setExampleTab} />
           <div className="code-sample-body">
-            {showCodeResults(operation).map((example, index) => {
+            {examples.map((example, index) => {
               return (
                 <pre
                   className={`tomorrow-night tabber-body tabber-body-${index}`}
@@ -35,8 +39,7 @@ function Example({ operation, result, oas, selected, setExampleTab }) {
           </div>
         </span>
       )}
-      {showCodeResults(operation).length === 0 &&
-      result === null && (
+      {(examples.length === 0 || (!hasExamples && result === null)) && (
         <div className="hub-no-code">
           {oas[extensions.EXPLORER_ENABLED] ? (
             'Try the API to see Results'
@@ -57,8 +60,10 @@ Example.propTypes = {
   operation: PropTypes.instanceOf(Operation).isRequired,
   selected: PropTypes.number.isRequired,
   setExampleTab: PropTypes.func.isRequired,
+  exampleResponses: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 Example.defaultProps = {
   result: {},
+  exampleResponses: [],
 };

packages/api-explorer/src/ExampleTabs.jsx

@@ -1,17 +1,12 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const showCodeResults = require('./lib/show-code-results');
 const IconStatus = require('./IconStatus');
 const Tab = require('./Tab');
 
-const Oas = require('./lib/Oas');
-
-const { Operation } = Oas;
-
-function ExampleTabs({ operation, selected, setExampleTab }) {
+function ExampleTabs({ examples, selected, setExampleTab }) {
   return (
     <ul className="code-sample-tabs hub-reference-results-header">
-      {showCodeResults(operation).map((example, index) => {
+      {examples.map((example, index) => {
         return (
           <Tab
             selected={index === selected}
@@ -31,7 +26,7 @@ function ExampleTabs({ operation, selected, setExampleTab }) {
 module.exports = ExampleTabs;
 
 ExampleTabs.propTypes = {
-  operation: PropTypes.instanceOf(Operation).isRequired,
+  examples: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   selected: PropTypes.number.isRequired,
   setExampleTab: PropTypes.func.isRequired,
 };

packages/api-explorer/src/IconStatus.jsx

@@ -7,6 +7,8 @@ const statusCodes = require('./lib/statuscodes');
 function IconStatus({ status }) {
   const statusCode = statusCodes(status);
 
+  if (!statusCode) return <span />;
+
   return (
     <span
       className={classNames({
@@ -22,7 +24,11 @@ function IconStatus({ status }) {
 }
 
 IconStatus.propTypes = {
-  status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  status: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+IconStatus.defaultProps = {
+  status: 200, // TODO: For some reason this wasn't getting passed sometimes
 };
 
 module.exports = IconStatus;

packages/api-explorer/src/Response.jsx

@@ -31,7 +31,7 @@ class Response extends React.Component {
   }
 
   render() {
-    const { result, oas, operation, oauth, hideResults } = this.props;
+    const { result, oas, operation, oauth, hideResults, exampleResponses } = this.props;
     const { responseTab } = this.state;
     const securities = operation.prepareSecurity();
 
@@ -67,6 +67,7 @@ class Response extends React.Component {
             oas={oas}
             selected={this.state.exampleTab}
             setExampleTab={this.setExampleTab}
+            exampleResponses={exampleResponses}
           />
         </div>
       </div>
@@ -82,8 +83,10 @@ Response.propTypes = {
   operation: PropTypes.instanceOf(Operation).isRequired,
   oauth: PropTypes.bool.isRequired,
   hideResults: PropTypes.func.isRequired,
+  exampleResponses: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 Response.defaultProps = {
   result: {},
+  exampleResponses: [],
 };

packages/api-explorer/src/index.jsx

@@ -9,7 +9,9 @@ class ApiExplorer extends React.Component {
   static getApiKey() {
     try {
       const userData = Cookie.getJSON('user_data');
-      return userData.keys.api_key;
+      // TODO: This needs to work for legacy api_key
+      // as well as keys[].apiKey
+      return userData.apiKey || userData.keys[0].api_key;
     } catch (e) {
       return undefined;
     }

packages/api-explorer/src/lib/create-code-shower.js

@@ -19,10 +19,10 @@ module.exports = type => {
       .map(status => {
         const response = pathOperation.responses[status];
 
-        const language = getLanguage(response);
+        const language = response.language || getLanguage(response);
         if (!language) return false;
 
-        const example = getExample(response, language);
+        const example = response.code || getExample(response, language);
         if (!example) return false;
 
         return {

packages/api-explorer/src/lib/generate-code-snippet.js

@@ -66,6 +66,14 @@ module.exports = (oas, operation, values, lang) => {
   const snippet = new HTTPSnippet(har);
 
   const language = supportedLanguages[lang];
+
+  // Prevents errors if non-generated code snippet is selected
+  // and there isn't a way to generate a code snippet for it
+  // ex) shell
+  if (!language) {
+    return undefined;
+  }
+
   return syntaxHighlighter(snippet.convert(...language.httpsnippet), language.highlight, true);
 };