Fix for box. Their apiSetting id isnt stored on the category it's sto…

…red on the api.apiSetting

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

@@ -88,3 +88,62 @@ describe('selected language', () => {
     expect(explorer.state('language')).toBe('curl');
   });
 });
+
+describe('oas', () => {
+  const baseDoc = {
+    _id: 1,
+    title: 'title',
+    slug: 'slug',
+    type: 'endpoint',
+    category: {},
+    api: { method: 'get' },
+  };
+
+  // Swagger apis and some legacies
+  it('should fetch it from `doc.category.apiSetting`', () => {
+    const explorer = shallow(
+      <ApiExplorer
+        {...props}
+        oasFiles={{
+          'api-setting': oas,
+        }}
+        docs={[Object.assign({}, baseDoc, { category: { apiSetting: 'api-setting' } })]}
+      />,
+    );
+
+    expect(explorer.find('Doc').get(0).props.oas).toBe(oas);
+  });
+
+  // Some other legacy APIs where Endpoints are created in arbitrary categories
+  it('should fetch it from `doc.api.apiSetting._id`', () => {
+    const explorer = shallow(
+      <ApiExplorer
+        {...props}
+        oasFiles={{
+          'api-setting': oas,
+        }}
+        docs={[
+          Object.assign({}, baseDoc, {
+            api: { method: 'get', apiSetting: { _id: 'api-setting' } },
+          }),
+        ]}
+      />,
+    );
+
+    expect(explorer.find('Doc').get(0).props.oas).toBe(oas);
+  });
+
+  it('should set it to empty object', () => {
+    const explorer = shallow(
+      <ApiExplorer
+        {...props}
+        oasFiles={{
+          'api-setting': oas,
+        }}
+        docs={[baseDoc]}
+      />,
+    );
+
+    expect(explorer.find('Doc').get(0).props.oas).toEqual({});
+  });
+});

packages/api-explorer/src/index.jsx

@@ -26,6 +26,13 @@ class ApiExplorer extends React.Component {
       return 'curl';
     }
   }
+  getOas(doc) {
+    // Get the apiSetting id either from the category, or the api if api is set
+    // This will return undefined if apiSetting is not set
+    const apiSetting = doc.category.apiSetting || (doc.api.apiSetting && doc.api.apiSetting._id);
+
+    return this.props.oasFiles[apiSetting];
+  }
   render() {
     const theme = this.props.flags.stripe ? 'stripe' : '';
     return (
@@ -38,7 +45,7 @@ class ApiExplorer extends React.Component {
             <Doc
               key={doc._id}
               doc={doc}
-              oas={doc.category.apiSetting && this.props.oasFiles[doc.category.apiSetting]}
+              oas={this.getOas(doc)}
               setLanguage={this.setLanguage}
               flags={this.props.flags}
               language={this.state.language}