Try to fetch remote guide if not found locally

Author: oskarhane

package.json

@@ -46,7 +46,8 @@
       "afterEach",
       "neo",
       "FileReader",
-      "Blob"
+      "Blob",
+      "fetch"
     ]
   },
   "repository": {},

src/browser/modules/Stream/PlayFrame.jsx

@@ -18,35 +18,80 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { Component } from 'preact'
+import { withBus } from 'preact-suber'
+import { connect } from 'preact-redux'
+import { getAutoResolveRemoteGuidesUrl } from 'shared/modules/settings/settingsDuck'
+import { fetchRemoteGuideAction } from 'shared/modules/commands/commandsDuck'
+
 import Guides from '../Guides/Guides'
 import * as html from '../Guides/html'
 import FrameTemplate from './FrameTemplate'
+import ErrorsView from './Views/ErrorsView'
 
-const PlayFrame = ({frame}) => {
-  let guide = 'Play guide not specified'
-  if (frame.result) {
-    guide = <Guides withDirectives html={frame.result} />
-  } else {
-    const guideName = frame.cmd.replace(':play', '').replace(/\s|-/g, '').trim() || 'start'
-    if (guideName !== '') {
-      const content = html[guideName]
-      if (content !== undefined) {
-        guide = <Guides withDirectives html={content} />
-      } else {
-        if (frame.error && frame.error.error) {
-          guide = frame.error.error
-        } else {
-          guide = <Guides withDirectives html={html['unfound']} />
+export class PlayFrame extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      guide: null
+    }
+  }
+  componentDidMount () {
+    if (this.props.frame.result) { // Found remote guide
+      this.setState({ guide: <Guides withDirectives html={this.props.frame.result} /> })
+      return
+    }
+    if (this.props.frame.response && this.props.frame.error && this.props.frame.error.error) { // Not found remotely (or other error)
+      if (this.props.frame.response.status === 404) return this.setState({ guide: <Guides withDirectives html={html['unfound']} /> })
+      return this.setState({
+        guide: (
+          <ErrorsView
+            error={{
+              message: 'Error: The remote server responded with the following error: ' + this.props.frame.response.status,
+              code: 'Remote guide error'
+            }}
+          />)
+      })
+    }
+    if (this.props.frame.error && this.props.frame.error.error) { // Some other error. Whitelist error etc.
+      return this.setState({ guide: <ErrorsView error={{
+        message: this.props.frame.error.error,
+        code: 'Remote guide error'
+      }} /> })
+    }
+    const guideName = this.props.frame.cmd.replace(':play', '').replace(/\s|-/g, '').trim() || 'start'
+    if (typeof html[guideName] !== 'undefined') { // Found it locally
+      this.setState({ guide: <Guides withDirectives html={html[guideName]} /> })
+      return
+    }
+    // Not found remotely or locally
+    // Try to find it remotely by name
+    if (this.props.bus) {
+      const action = fetchRemoteGuideAction(this.props.remoteUrl + guideName)
+      this.props.bus.self(action.type, action, (res) => {
+        if (!res.success) { // No luck
+          return this.setState({ guide: <Guides withDirectives html={html['unfound']} /> })
         }
-      }
+        this.setState({ guide: <Guides withDirectives html={res.result} /> })
+      })
+    } else { // No bus. Give up
+      return this.setState({ guide: <Guides withDirectives html={html['unfound']} /> })
     }
   }
-  return (
-    <FrameTemplate
-      className='playFrame'
-      header={frame}
-      contents={guide}
-    />
-  )
+  render () {
+    return (
+      <FrameTemplate
+        className='playFrame'
+        header={this.props.frame}
+        contents={this.state.guide}
+      />
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    remoteUrl: getAutoResolveRemoteGuidesUrl(state)
+  }
 }
-export default PlayFrame
+export default withBus(connect(mapStateToProps)(PlayFrame))

src/shared/modules/commands/commandsDuck.js

@@ -18,11 +18,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import Rx from 'rxjs'
 import { getInterpreter, isNamedInterpreter, cleanCommand } from 'services/commandUtils'
 import { hydrate } from 'services/duckUtils'
 import helper from 'services/commandInterpreterHelper'
 import { addHistory } from '../history/historyDuck'
 import { getCmdChar, getMaxHistory } from '../settings/settingsDuck'
+import { fetchRemoteGuide } from './helpers/play'
 import { CONNECTION_SUCCESS } from '../connections/connectionsDuck'
 import { UPDATE_SETTINGS, getAvailableSettings, fetchMetaData } from '../dbMeta/dbMetaDuck'
 import { USER_CLEAR } from 'shared/modules/app/appDuck'
@@ -36,6 +38,7 @@ export const SHOW_ERROR_MESSAGE = NAME + '/SHOW_ERROR_MESSAGE'
 export const CYPHER = NAME + '/CYPHER'
 export const CYPHER_SUCCEEDED = NAME + '/CYPHER_SUCCEEDED'
 export const CYPHER_FAILED = NAME + '/CYPHER_FAILED'
+export const FETCH_REMOTE_GUIDE = NAME + '/FETCH_REMOTE_GUIDE'
 
 const initialState = {
   lastCommandWasUnknown: false
@@ -91,6 +94,7 @@ export const showErrorMessage = (errorMessage) => ({
 export const cypher = (query) => ({ type: CYPHER, query })
 export const successfulCypher = (query) => ({ type: CYPHER_SUCCEEDED, query })
 export const unsuccessfulCypher = (query) => ({ type: CYPHER_FAILED, query })
+export const fetchRemoteGuideAction = (url) => ({ type: FETCH_REMOTE_GUIDE, url })
 
 // Epics
 export const handleCommandsEpic = (action$, store) =>
@@ -138,3 +142,12 @@ export const postConnectCmdEpic = (some$, store) =>
       }
     })
     .mapTo({ type: 'NOOP' })
+
+export const fetchRemoteGuideEpic = (some$, store) =>
+  some$.ofType(FETCH_REMOTE_GUIDE)
+    .mergeMap((action) => {
+      if (!action.$$responseChannel || !action.url) return Rx.Observable.of({ type: 'NOOP' })
+      return fetchRemoteGuide(action.url)
+        .then((r) => ({type: action.$$responseChannel, success: true, result: r}))
+        .catch((e) => ({type: action.$$responseChannel, success: false, error: e}))
+    })

src/shared/modules/commands/helpers/play.js

@@ -31,6 +31,8 @@ export const fetchRemoteGuide = (url) => {
     if (!hostIsAllowed(url, whitelist)) {
       throw new Error('Hostname is not allowed according to server whitelist')
     }
-    return remote.get(url).then((r) => cleanHtml(r))
+    return remote.get(url).then((r) => {
+      return cleanHtml(r)
+    })
   })
 }

src/shared/modules/settings/settingsDuck.js

@@ -38,6 +38,7 @@ export const getMaxNeighbours = (state) => state[NAME].maxNeighbours || initialS
 export const getMaxRows = (state) => state[NAME].maxRows || initialState.maxRows
 export const getInitialNodeDisplay = (state) => state[NAME].initialNodeDisplay || initialState.initialNodeDisplay
 export const shouldReportUdc = (state) => state[NAME].shouldReportUdc !== false
+export const getAutoResolveRemoteGuidesUrl = (state) => state[NAME].autoResolveRemoteGuidesUrl || initialState.autoResolveRemoteGuidesUrl
 
 const browserSyncConfig = {
   authWindowUrl: 'https://auth.neo4j.com/indexNewBrowser.html',
@@ -61,7 +62,8 @@ const initialState = {
   showSampleScripts: true,
   browserSyncDebugServer: null,
   maxRows: 1000,
-  shouldReportUdc: true
+  shouldReportUdc: true,
+  autoResolveRemoteGuidesUrl: 'https://guides.neo4j.com/'
 }
 
 export default function settings (state = initialState, action) {

src/shared/rootEpic.js

@@ -19,7 +19,7 @@
  */
 
 import { combineEpics } from 'redux-observable'
-import { handleCommandsEpic, postConnectCmdEpic } from './modules/commands/commandsDuck'
+import { handleCommandsEpic, postConnectCmdEpic, fetchRemoteGuideEpic } from './modules/commands/commandsDuck'
 import { checkSettingsForRoutingDriver, connectEpic, disconnectEpic, startupConnectEpic, disconnectSuccessEpic, startupConnectionSuccessEpic, startupConnectionFailEpic, detectActiveConnectionChangeEpic, connectionLostEpic } from './modules/connections/connectionsDuck'
 import { dbMetaEpic, clearMetaOnDisconnectEpic } from './modules/dbMeta/dbMetaDuck'
 import { cancelRequestEpic } from './modules/requests/requestsDuck'
@@ -35,6 +35,7 @@ import { bootEpic, incrementEventEpic, udcStartupEpic, trackSyncLogoutEpic, trac
 export default combineEpics(
   handleCommandsEpic,
   postConnectCmdEpic,
+  fetchRemoteGuideEpic,
   connectionLostEpic,
   checkSettingsForRoutingDriver,
   connectEpic,

src/shared/services/commandInterpreterHelper.js

@@ -121,7 +121,7 @@ const availableCommands = [{
       .then((r) => {
         put(frames.add({...action, type: 'play-remote', result: r}))
       }).catch((e) => {
-        put(frames.add({...action, type: 'play-remote', error: CouldNotFetchRemoteGuideError(e.name + ': ' + e.message)}))
+        put(frames.add({...action, type: 'play-remote', response: (e.response || null), error: CouldNotFetchRemoteGuideError(e.name + ': ' + e.message)}))
       })
   }
 }, {

src/shared/services/remote.js

@@ -18,7 +18,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import fetch from 'isomorphic-fetch'
+/* global fetch */
+import 'isomorphic-fetch'
 
 function request (method, url, data = null) {
   return fetch(url, {
@@ -30,12 +31,15 @@ function request (method, url, data = null) {
     },
     body: data
   })
+  .then(checkStatus)
 }
 
 function get (url) {
   return fetch(url, {
     method: 'get'
-  }).then(function (response) {
+  })
+  .then(checkStatus)
+  .then(function (response) {
     return response.text()
   })
 }
@@ -53,6 +57,16 @@ function getJSON (url) {
   })
 }
 
+function checkStatus (response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response
+  } else {
+    var error = new Error(response.status + ' ' + response.statusText)
+    error.response = response
+    throw error
+  }
+}
+
 export default {
   get,
   getJSON,