Basic guide resolving done

Author: OskarDamkjaer

src/browser/modules/Sidebar/GuideDrawer.tsx renamed to src/browser/modules/Sidebar/GuidesDrawer.tsx

@@ -21,9 +21,17 @@
 import React, { useEffect, useState } from 'react'
 import { Drawer, DrawerBody, DrawerHeader } from 'browser-components/drawer'
 import styled from 'styled-components'
-import { GuideChapter, isGuideChapter } from 'browser/documentation'
-import docs from '../../documentation'
-import Docs from '../Docs/Docs'
+import Directives from 'browser-components/Directives'
+import { CarouselButton } from 'browser-components/buttons'
+import {
+  SlidePreviousIcon,
+  SlideNextIcon
+} from 'browser-components/icons/Icons'
+import { useRef } from 'react'
+import { connect } from 'react-redux'
+import { getGuide } from 'shared/modules/guides/guidesDuck'
+import { GlobalState } from 'shared/globalState'
+import { Guide } from '../../../shared/modules/guides/guidesDuck'
 
 const StyledCarousel = styled.div`
   padding-bottom: 20px;
@@ -162,65 +170,34 @@ const StyledUl = styled.ul`
 const WideDrawer = styled(Drawer)`
   width: 500px;
   position: relative;
-  background-color: ${props => props.theme.primaryBackground};
+  background-color: ${props => props.theme.secondaryBackground};
 `
 
-const sidebarGuides: GuideChapter[] = [
-  'allGuides',
-  'intro',
-  'concepts',
-  'cypher',
-  'movies',
-  'northwind'
-]
-
 const GuideContent = styled.div`
   padding-bottom: 40px;
 `
+const defaultGuide: Guide = { guideName: 'intro', initialSlide: 0, slides: [] }
 
-function GuideDrawer(): JSX.Element {
-  const [selectedGuide, setSelectedGuide] = useState<GuideChapter>('allGuides')
-  function onSelectChange(e: React.FormEvent<HTMLSelectElement>) {
-    e.preventDefault()
-    if (!isGuideChapter(e.currentTarget.value)) {
-      throw Error('invalid select target')
-    }
-    setSelectedGuide(e.currentTarget.value)
-  }
-
+type GuideDrawerProps = { guide: Guide | null }
+// default är switchern
+function GuideDrawer({ guide }: GuideDrawerProps): JSX.Element {
+  const guideOrDefault = guide ?? defaultGuide
   return (
     <WideDrawer id="guide-drawer">
       <DrawerHeader>Neo4j Browser Guides</DrawerHeader>
       <DrawerBody>
-        <select
-          style={{ color: 'black' }}
-          value={selectedGuide}
-          onChange={onSelectChange}
-        >
-          {sidebarGuides.map(guideName => (
-            <option key={guideName} value={guideName}>
-              {guideName}
-            </option>
-          ))}
-        </select>
         <GuideContent>
-          <Carousel slides={docs.play.chapters[selectedGuide].slides} />
+          <Carousel slides={guideOrDefault.slides} />
         </GuideContent>
       </DrawerBody>
     </WideDrawer>
   )
 }
-export default GuideDrawer
-
-import Directives from 'browser-components/Directives'
-import { CarouselButton } from 'browser-components/buttons'
-import {
-  SlidePreviousIcon,
-  SlideNextIcon
-} from 'browser-components/icons/Icons'
-import { useRef } from 'react'
+const mapStateToProps = (state: GlobalState) => ({ guide: getGuide(state) })
+export default connect(mapStateToProps)(GuideDrawer)
 
 type CarouselProps = { slides?: JSX.Element[]; initialSlide?: number }
+// TODO handle there only being one slide
 function Carousel({
   slides = [],
   initialSlide = 0

src/browser/modules/Sidebar/Sidebar.tsx

@@ -24,7 +24,7 @@ import DatabaseDrawer from '../DBMSInfo/DBMSInfo'
 import DocumentsDrawer from './Documents'
 import AboutDrawer from './About'
 import SettingsDrawer from './Settings'
-import GuideDrawer from './GuideDrawer'
+import GuideDrawer from './GuidesDrawer'
 import Favorites from './favorites'
 import StaticScripts from './static-scripts'
 import ProjectFilesDrawer from './ProjectFiles'

src/shared/globalState.ts

@@ -57,6 +57,7 @@ import { NAME as folders, Folder } from './modules/favorites/foldersDuck'
 import { NAME as commands } from './modules/commands/commandsDuck'
 import { NAME as udc, udcState } from './modules/udc/udcDuck'
 import { NAME as app } from './modules/app/appDuck'
+import { NAME as guides, GuideState } from './modules/guides/guidesDuck'
 import {
   NAME as experimentalFeatures,
   initialState as experimentalFeaturesInitialState
@@ -83,4 +84,5 @@ export interface GlobalState {
   [udc]: udcState
   [app]: Record<string, unknown>
   [experimentalFeatures]: typeof experimentalFeaturesInitialState
+  [guides]: GuideState
 }

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

@@ -23,7 +23,7 @@ import { cleanHtml } from 'services/remoteUtils'
 import remote from 'services/remote'
 
 export const fetchRemoteGuide = (url: any, allowlist = null) => {
-  return new Promise((resolve, reject) => {
+  return new Promise<void>((resolve, reject) => {
     if (!hostIsAllowed(url, allowlist)) {
       return reject(
         new Error('Hostname is not allowed according to server allowlist')

src/shared/modules/guides/guidesDuck.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { GlobalState } from 'shared/globalState'
+
+export const NAME = 'guides'
+export const START_GUIDE = 'sidebar/START_GUIDE'
+
+export const getGuide = (state: GlobalState): Guide | null => state[NAME].guide
+// Todo the refactor I want is for this to include
+// everything needed to show the guide not this
+// half measure
+export type Guide = {
+  initialSlide: number
+  guideName: string
+  slides: JSX.Element[]
+}
+
+export interface GuideState {
+  guide: Guide | null
+}
+const initialState: GuideState = {
+  guide: null
+}
+
+type GuideAction = StartAction
+
+interface StartAction {
+  type: typeof START_GUIDE
+  guide: Guide
+}
+
+export default function reducer(
+  state = initialState,
+  action: GuideAction
+): GuideState {
+  switch (action.type) {
+    case START_GUIDE:
+      return { ...state, guide: action.guide }
+    default:
+      return state
+  }
+}
+
+export function startGuide(guide: Guide): StartAction {
+  return { type: START_GUIDE, guide }
+}

src/shared/modules/history/historyDuck.test.ts

@@ -35,10 +35,10 @@ describe('editor reducer', () => {
     // Given
     const helpAction = actions.addHistory(':help', 20)
     const historyAction = actions.addHistory(':history', 20)
-    const initalState = [':help']
+    const initialState = [':help']
 
     // When
-    const nextState = reducer(initalState, helpAction)
+    const nextState = reducer(initialState, helpAction)
 
     // Then
     expect(nextState).toEqual([':help'])
@@ -51,18 +51,18 @@ describe('editor reducer', () => {
   })
 
   test('takes editor.actionTypes.SET_MAX_HISTORY into account', () => {
-    const initalState = [':help', ':help', ':help']
+    const initialState = [':help', ':help', ':help']
 
     const helpAction = actions.addHistory(':history', 3)
-    const nextState = reducer(initalState, helpAction)
+    const nextState = reducer(initialState, helpAction)
     expect(nextState).toEqual([':history', ':help', ':help'])
   })
 
   test('handles editor.actionTypes.CLEAR_HISTORY', () => {
     // Given
-    const initalState = [':emily']
+    const initialState = [':emily']
     const anAction = actions.addHistory(':elliot', 3)
-    const state = reducer(initalState, anAction)
+    const state = reducer(initialState, anAction)
 
     // When
     const nextState = reducer(state, actions.clearHistory())

src/shared/modules/sidebar/sidebarDuck.ts

@@ -48,6 +48,7 @@ type DrawerId =
   | 'documents'
   | 'sync'
   | 'favorites'
+  | 'guides'
   | 'about'
   | 'project files'
   | 'settings'

src/shared/rootReducer.ts

@@ -62,6 +62,7 @@ import commandsReducer, {
 } from 'shared/modules/commands/commandsDuck'
 import udcReducer, { NAME as udc } from 'shared/modules/udc/udcDuck'
 import appReducer, { NAME as app } from 'shared/modules/app/appDuck'
+import guideReducer, { NAME as guides } from 'shared/modules/guides/guidesDuck'
 import experimentalFeaturesReducer, {
   NAME as experimentalFeatures
 } from 'shared/modules/experimentalFeatures/experimentalFeaturesDuck'
@@ -86,5 +87,6 @@ export default {
   [commands]: commandsReducer,
   [udc]: udcReducer,
   [app]: appReducer,
+  [guides]: guideReducer,
   [experimentalFeatures]: experimentalFeaturesReducer
 }

src/shared/services/commandInterpreterHelper.ts

@@ -35,6 +35,8 @@ import {
   useDb,
   getUseDb
 } from 'shared/modules/connections/connectionsDuck'
+import { open } from 'shared/modules/sidebar/sidebarDuck'
+import { startGuide } from 'shared/modules/guides/guidesDuck'
 import { getParams } from 'shared/modules/params/paramsDuck'
 import { getUserCapabilities } from 'shared/modules/features/featuresDuck'
 import {
@@ -99,6 +101,7 @@ import {
 } from './commandUtils'
 import { unescapeCypherIdentifier } from './utils'
 import { getLatestFromFrameStack } from 'browser/modules/Stream/stream.utils'
+import { resolveGuide } from './guideResolverHelper'
 
 const PLAY_FRAME_TYPES = ['play', 'play-remote']
 
@@ -467,6 +470,25 @@ const availableCommands = [
       }
     }
   },
+  {
+    name: 'guide',
+    match: (cmd: any) => /^guide(\s|$)/.test(cmd),
+    exec(action: any, put: any, store: any) {
+      const guideName = action.cmd.substr(':guide'.length).trim()
+      const initialSlide = tryGetRemoteInitialSlideFromUrl(action.cmd)
+      resolveGuide(guideName, store).then(({ slides }) => {
+        put(
+          startGuide({
+            initialSlide,
+            guideName,
+            slides
+          })
+        )
+
+        put(open('guides'))
+      })
+    }
+  },
   {
     name: 'play-remote',
     match: (cmd: any) => /^play(\s|$)https?/.test(cmd),