From a3ce3ef0c47b033c9fae3ee26e03d460ace5cb90 Mon Sep 17 00:00:00 2001 From: Gabriel Ratcliff Date: Thu, 5 Mar 2020 15:17:23 -0800 Subject: [PATCH 1/7] Rendering workaround for anchor tags. Temporarily rendering h1 tags until compenents have a chance to lazy load --- packages/api-explorer/__tests__/index.test.jsx | 15 +++++++++++++++ packages/api-explorer/src/Doc.jsx | 7 ++++++- packages/api-explorer/src/index.jsx | 14 ++++++++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/packages/api-explorer/__tests__/index.test.jsx b/packages/api-explorer/__tests__/index.test.jsx index 453bea62e..112eecb02 100644 --- a/packages/api-explorer/__tests__/index.test.jsx +++ b/packages/api-explorer/__tests__/index.test.jsx @@ -307,3 +307,18 @@ describe('auth', () => { expect(explorer.state('auth')).toStrictEqual({ api_key: '7890', petstore_auth: '123456' }); }); }); + +describe('onDocRender()', () => { + it('should set a key to true if passed', () => { + const explorer = mount(); + explorer.instance().onDocRender({ '123': true }); + expect(explorer.state('docRenderMap')).toStrictEqual({ '123': true }); + }); + + it('should not set key if previously set', () => { + const explorer = mount(); + explorer.instance().onDocRender({ '123': true }); + explorer.instance().onDocRender({ '123': false }); + expect(explorer.state('docRenderMap')).toStrictEqual({ '123': true }); + }); +}); diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx index 3420b5ad0..c18dafdd3 100644 --- a/packages/api-explorer/src/Doc.jsx +++ b/packages/api-explorer/src/Doc.jsx @@ -232,6 +232,7 @@ class Doc extends React.Component { renderEndpoint() { const { doc } = this.props; + this.props.onDocRender(doc._id); return ( @@ -336,7 +337,7 @@ class Doc extends React.Component { {renderEndpoint()} - + {!this.props.rendered && } { // TODO maybe we dont need to do this with a hidden input now // cos we can just pass it around? @@ -355,6 +356,7 @@ Doc.propTypes = { auth: PropTypes.shape({}).isRequired, baseUrl: PropTypes.string, doc: PropTypes.shape({ + _id: PropTypes.string, api: PropTypes.shape({ examples: PropTypes.shape({ codes: PropTypes.arrayOf( @@ -370,6 +372,7 @@ Doc.propTypes = { codes: PropTypes.arrayOf(PropTypes.shape({})), }), }), + body: PropTypes.string, excerpt: PropTypes.string, slug: PropTypes.string.isRequired, swagger: PropTypes.shape({ @@ -394,7 +397,9 @@ Doc.propTypes = { oas: PropTypes.shape({}), oauth: PropTypes.bool.isRequired, onAuthChange: PropTypes.func.isRequired, + onDocRender: PropTypes.func.isRequired, onGroupChange: PropTypes.func.isRequired, + rendered: PropTypes.bool, setLanguage: PropTypes.func.isRequired, suggestedEdits: PropTypes.bool.isRequired, tryItMetrics: PropTypes.func.isRequired, diff --git a/packages/api-explorer/src/index.jsx b/packages/api-explorer/src/index.jsx index 10dd558c4..4a85cb6c5 100644 --- a/packages/api-explorer/src/index.jsx +++ b/packages/api-explorer/src/index.jsx @@ -23,6 +23,7 @@ class ApiExplorer extends React.Component { this.getDefaultLanguage = this.getDefaultLanguage.bind(this); this.changeSelected = this.changeSelected.bind(this); this.onAuthChange = this.onAuthChange.bind(this); + this.onDocRender = this.onDocRender.bind(this); this.state = { auth: getAuth(this.props.variables.user, this.props.oasFiles), @@ -32,6 +33,7 @@ class ApiExplorer extends React.Component { selected: '', changeSelected: this.changeSelected, }, + docRenderMap: {}, }; this.onGroupChange = this.onGroupChange.bind(this); @@ -109,6 +111,16 @@ class ApiExplorer extends React.Component { }); } + onDocRender(docId) { + if (!(docId in this.state.docRenderMap)) { + this.setState(prevState => { + const docRenderMap = { ...prevState.docRenderMap }; + docRenderMap[docId] = true; + return { docRenderMap }; + }); + } + } + isLazy(index) { if (this.props.dontLazyLoad) return false; return this.lazyHash[index]; @@ -197,7 +209,9 @@ class ApiExplorer extends React.Component { oas={this.getOas(doc)} oauth={this.props.oauth} onAuthChange={this.onAuthChange} + onDocRender={this.onDocRender} onGroupChange={this.onGroupChange} + rendered={this.state.docRenderMap[doc._id]} setLanguage={this.setLanguage} suggestedEdits={this.props.suggestedEdits} tryItMetrics={this.props.tryItMetrics} From 095df321b3ff9d23cad32e489157a0dafaaf73f1 Mon Sep 17 00:00:00 2001 From: Gabriel Ratcliff Date: Thu, 5 Mar 2020 15:55:22 -0800 Subject: [PATCH 2/7] Adding required methods for testbed --- packages/api-explorer/__tests__/Doc.test.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/api-explorer/__tests__/Doc.test.jsx b/packages/api-explorer/__tests__/Doc.test.jsx index 4656e8117..54b47842f 100644 --- a/packages/api-explorer/__tests__/Doc.test.jsx +++ b/packages/api-explorer/__tests__/Doc.test.jsx @@ -25,6 +25,7 @@ const props = { oauth: false, onAuthChange: () => {}, setLanguage: () => {}, + onDocRender: () => {}, suggestedEdits: false, tryItMetrics: () => {}, }; @@ -105,6 +106,7 @@ test('should work without a doc.swagger/doc.path/oas', () => { language="node" oauth={false} onAuthChange={() => {}} + onDocRender={() => {}} setLanguage={() => {}} suggestedEdits tryItMetrics={() => {}} @@ -128,6 +130,7 @@ test('should still display `Content` with column-style layout', () => { language="node" oauth={false} onAuthChange={() => {}} + onDocRender={() => {}} setLanguage={() => {}} suggestedEdits tryItMetrics={() => {}} From 194c5fd8e250c035e988ce6d01a259fca2a3ab42 Mon Sep 17 00:00:00 2001 From: Gabriel Ratcliff Date: Thu, 5 Mar 2020 16:08:48 -0800 Subject: [PATCH 3/7] Test dep updates --- packages/api-explorer/__tests__/Doc.test.jsx | 8 +++++++- packages/api-explorer/__tests__/index.test.jsx | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/api-explorer/__tests__/Doc.test.jsx b/packages/api-explorer/__tests__/Doc.test.jsx index 54b47842f..aa7fabdee 100644 --- a/packages/api-explorer/__tests__/Doc.test.jsx +++ b/packages/api-explorer/__tests__/Doc.test.jsx @@ -37,7 +37,8 @@ function assertDocElements(component, doc) { } test('should output a div', () => { - const doc = shallow(); + const onRender = () => {}; + const doc = shallow(); doc.setState({ showEndpoint: true }); @@ -68,6 +69,8 @@ test('should render straight away if `appearance.splitReferenceDocs` is true', ( test('should render a manual endpoint', () => { const myProps = JSON.parse(JSON.stringify(props)); + const onRender = () => {}; + myProps.doc.swagger.path = '/nonexistant'; myProps.doc.api.examples = { codes: [], @@ -90,6 +93,7 @@ test('should render a manual endpoint', () => { appearance={{ splitReferenceDocs: true, }} + onDocRender={onRender} /> ); @@ -107,6 +111,7 @@ test('should work without a doc.swagger/doc.path/oas', () => { oauth={false} onAuthChange={() => {}} onDocRender={() => {}} + rendered={true} setLanguage={() => {}} suggestedEdits tryItMetrics={() => {}} @@ -131,6 +136,7 @@ test('should still display `Content` with column-style layout', () => { oauth={false} onAuthChange={() => {}} onDocRender={() => {}} + rendered={true} setLanguage={() => {}} suggestedEdits tryItMetrics={() => {}} diff --git a/packages/api-explorer/__tests__/index.test.jsx b/packages/api-explorer/__tests__/index.test.jsx index 112eecb02..30e43dd02 100644 --- a/packages/api-explorer/__tests__/index.test.jsx +++ b/packages/api-explorer/__tests__/index.test.jsx @@ -312,13 +312,13 @@ describe('onDocRender()', () => { it('should set a key to true if passed', () => { const explorer = mount(); explorer.instance().onDocRender({ '123': true }); - expect(explorer.state('docRenderMap')).toStrictEqual({ '123': true }); + expect(explorer.state('docRenderMap')['123']).toBe(true); }); it('should not set key if previously set', () => { const explorer = mount(); explorer.instance().onDocRender({ '123': true }); explorer.instance().onDocRender({ '123': false }); - expect(explorer.state('docRenderMap')).toStrictEqual({ '123': true }); + expect(explorer.state('docRenderMap')['123']).toBe(true); }); }); From 63ca0cf3b4b35fbb60a850903d5fcff653b191cd Mon Sep 17 00:00:00 2001 From: Gabriel Ratcliff Date: Thu, 5 Mar 2020 16:36:45 -0800 Subject: [PATCH 4/7] Test completion --- packages/api-explorer/__tests__/Doc.test.jsx | 3 +-- packages/api-explorer/__tests__/index.test.jsx | 9 +-------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/api-explorer/__tests__/Doc.test.jsx b/packages/api-explorer/__tests__/Doc.test.jsx index aa7fabdee..178081f40 100644 --- a/packages/api-explorer/__tests__/Doc.test.jsx +++ b/packages/api-explorer/__tests__/Doc.test.jsx @@ -37,8 +37,7 @@ function assertDocElements(component, doc) { } test('should output a div', () => { - const onRender = () => {}; - const doc = shallow(); + const doc = shallow(); doc.setState({ showEndpoint: true }); diff --git a/packages/api-explorer/__tests__/index.test.jsx b/packages/api-explorer/__tests__/index.test.jsx index 30e43dd02..a8c9a3fb0 100644 --- a/packages/api-explorer/__tests__/index.test.jsx +++ b/packages/api-explorer/__tests__/index.test.jsx @@ -311,14 +311,7 @@ describe('auth', () => { describe('onDocRender()', () => { it('should set a key to true if passed', () => { const explorer = mount(); - explorer.instance().onDocRender({ '123': true }); - expect(explorer.state('docRenderMap')['123']).toBe(true); - }); - - it('should not set key if previously set', () => { - const explorer = mount(); - explorer.instance().onDocRender({ '123': true }); - explorer.instance().onDocRender({ '123': false }); + explorer.instance().onDocRender('123'); expect(explorer.state('docRenderMap')['123']).toBe(true); }); }); From 95b4048928b4a08f5a6816ad310acf87f02f79bb Mon Sep 17 00:00:00 2001 From: Gabriel Ratcliff Date: Fri, 6 Mar 2020 11:06:14 -0800 Subject: [PATCH 5/7] Swapping slugs for docIds. Future proofing for model pruning --- packages/api-explorer/src/Doc.jsx | 2 +- packages/api-explorer/src/index.jsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx index c18dafdd3..5a0865074 100644 --- a/packages/api-explorer/src/Doc.jsx +++ b/packages/api-explorer/src/Doc.jsx @@ -232,7 +232,7 @@ class Doc extends React.Component { renderEndpoint() { const { doc } = this.props; - this.props.onDocRender(doc._id); + this.props.onDocRender(doc.slug); return ( diff --git a/packages/api-explorer/src/index.jsx b/packages/api-explorer/src/index.jsx index 4a85cb6c5..1f1141715 100644 --- a/packages/api-explorer/src/index.jsx +++ b/packages/api-explorer/src/index.jsx @@ -111,11 +111,11 @@ class ApiExplorer extends React.Component { }); } - onDocRender(docId) { - if (!(docId in this.state.docRenderMap)) { + onDocRender(slug) { + if (!(slug in this.state.docRenderMap)) { this.setState(prevState => { const docRenderMap = { ...prevState.docRenderMap }; - docRenderMap[docId] = true; + docRenderMap[slug] = true; return { docRenderMap }; }); } @@ -211,7 +211,7 @@ class ApiExplorer extends React.Component { onAuthChange={this.onAuthChange} onDocRender={this.onDocRender} onGroupChange={this.onGroupChange} - rendered={this.state.docRenderMap[doc._id]} + rendered={this.state.docRenderMap[doc.slug]} setLanguage={this.setLanguage} suggestedEdits={this.props.suggestedEdits} tryItMetrics={this.props.tryItMetrics} From 329ba43593786ea8a2dfedaacbc5a51ed2c1d8c5 Mon Sep 17 00:00:00 2001 From: Gabriel Ratcliff Date: Fri, 6 Mar 2020 11:07:04 -0800 Subject: [PATCH 6/7] Removing doc id from proptypes --- packages/api-explorer/src/Doc.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx index 5a0865074..4e6c89888 100644 --- a/packages/api-explorer/src/Doc.jsx +++ b/packages/api-explorer/src/Doc.jsx @@ -356,7 +356,6 @@ Doc.propTypes = { auth: PropTypes.shape({}).isRequired, baseUrl: PropTypes.string, doc: PropTypes.shape({ - _id: PropTypes.string, api: PropTypes.shape({ examples: PropTypes.shape({ codes: PropTypes.arrayOf( From ebe197203b6df1d8eed37d24bd8696d873c098ae Mon Sep 17 00:00:00 2001 From: Gabriel Ratcliff Date: Fri, 6 Mar 2020 11:20:08 -0800 Subject: [PATCH 7/7] Prop default for docs --- packages/api-explorer/src/Doc.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx index 4e6c89888..fd4fcdd57 100644 --- a/packages/api-explorer/src/Doc.jsx +++ b/packages/api-explorer/src/Doc.jsx @@ -419,6 +419,7 @@ Doc.defaultProps = { lazy: true, Logs: undefined, oas: {}, + rendered: false, user: {}, };