Update documentation drawer look & feel

src/browser/components/drawer/Drawer.tsx

@@ -21,7 +21,7 @@
 import styled from 'styled-components'
 
 export const Drawer = styled.div`
-  width: 285px;
+  width: 290px;
   display: flex;
   flex-direction: column;
   height: 100vh;

src/browser/index.html

@@ -13,6 +13,9 @@
         width: 100%;
         height: 100%;
       }
+      a {
+        color: #68bdf4 !important;
+      }
     </style>
     <link
       rel="apple-touch-icon"

src/browser/modules/Sidebar/DocumentItems.tsx

@@ -19,8 +19,6 @@
  */
 import React from 'react'
 import { connect } from 'react-redux'
-import { withBus } from 'react-suber'
-import { SET_CONTENT, setContent } from 'shared/modules/editor/editorDuck'
 import {
   DrawerSubHeader,
   DrawerSection,
@@ -29,51 +27,89 @@ import {
 import {
   StyledHelpLink,
   StyledHelpItem,
-  StyledDocumentActionLink
+  StyledCommandListItem,
+  StyledCommandNamePair,
+  StyledName,
+  StyledCommand
 } from './styled'
+import {
+  commandSources,
+  executeCommand
+} from 'shared/modules/commands/commandsDuck'
+import styled from 'styled-components'
+const DrawerSubHeaderWithMargin = styled(DrawerSubHeader)`
+  margin: 0 24px 0 24px;
+`
+
+type DocumentItemsOwnProps = {
+  header: string
+  items: (Link | Command)[]
+}
+
+type DocumentItemsProps = DocumentItemsOwnProps & {
+  executeCommand: (item: string) => void
+}
+
+type Link = {
+  name: string
+  url: string
+}
+
+type Command = {
+  name: string
+  command: string
+}
+
+export const DocumentItems = ({
+  header,
+  items,
+  executeCommand
+}: DocumentItemsProps): JSX.Element => {
+  const listOfItems = items.map(item =>
+    'url' in item ? (
+      <StyledHelpItem key={item.url}>
+        <StyledHelpLink href={item.url} target="_blank" rel="noreferrer">
+          {item.name}
+        </StyledHelpLink>
+      </StyledHelpItem>
+    ) : (
+      <CommandItem
+        key={item.command}
+        name={item.name}
+        command={item.command}
+        executeCommand={executeCommand}
+      />
+    )
+  )
 
-export const DocumentItems = ({ header, items, onItemClick = null }: any) => {
-  const listOfItems = items.map((item: any) => {
-    switch (item.type) {
-      case 'link':
-        return (
-          <StyledHelpItem key={item.command}>
-            <StyledHelpLink
-              href={item.command}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {item.name}
-            </StyledHelpLink>
-          </StyledHelpItem>
-        )
-      default:
-        return (
-          <StyledDocumentActionLink
-            key={item.command}
-            onClick={() => onItemClick(item.command)}
-            name={item.name}
-            type={item.type}
-          />
-        )
-    }
-  })
   return (
     <DrawerSection>
-      <DrawerSubHeader>{header}</DrawerSubHeader>
+      <DrawerSubHeaderWithMargin>{header}</DrawerSubHeaderWithMargin>
       <DrawerSectionBody>
-        <ul className="document">{listOfItems}</ul>
+        <ul>{listOfItems}</ul>
       </DrawerSectionBody>
     </DrawerSection>
   )
 }
 
-const mapDispatchToProps = (_dispatch: any, ownProps: any) => {
-  return {
-    onItemClick: (cmd: any) => {
-      ownProps.bus.send(SET_CONTENT, setContent(cmd))
-    }
+type CommandItemProps = Command & { executeCommand: (cmd: string) => void }
+const CommandItem = ({ name, command, executeCommand }: CommandItemProps) => (
+  <StyledCommandListItem onClick={() => executeCommand(command)}>
+    <StyledCommandNamePair>
+      <StyledName> {name} </StyledName>
+      <StyledCommand> {command} </StyledCommand>
+    </StyledCommandNamePair>
+  </StyledCommandListItem>
+)
+
+const mapDispatchToProps = (dispatch: any) => ({
+  executeCommand: (cmd: string) => {
+    dispatch(
+      executeCommand(cmd, {
+        source: commandSources.sidebar
+      })
+    )
   }
-}
+})
 
-export default withBus(connect(null, mapDispatchToProps)(DocumentItems))
+export default connect(null, mapDispatchToProps)(DocumentItems)

src/browser/modules/Sidebar/Documents.tsx

@@ -23,124 +23,119 @@ import semver from 'semver'
 import { getVersion } from 'shared/modules/dbMeta/dbMetaDuck'
 import DocumentItems from './DocumentItems'
 import { Drawer, DrawerBody, DrawerHeader } from 'browser-components/drawer'
+import styled from 'styled-components'
+const FullSizeDrawerBody = styled(DrawerBody)`
+  padding: 0;
+`
 
-export const formatDocVersion = (v: any) => {
+export const formatDocVersion = (v = ''): string => {
   if (!semver.valid(v)) {
+    // All non-strings return
     return 'current'
   }
   if (semver.prerelease(v)) {
     return `${semver.major(v)}.${semver.minor(v)}-preview`
   }
   return `${semver.major(v)}.${semver.minor(v)}` || 'current'
 }
-export const shouldLinkToNewRefs = (v: any) => {
+export const shouldLinkToNewRefs = (v: string): boolean => {
   if (!semver.valid(v)) return false
   return semver.gte(v, '3.5.0-alpha01')
 }
 
-const intro = [
-  { name: 'Getting started', command: ':play intro', type: 'play' },
-  { name: 'Basic graph concepts', command: ':play concepts', type: 'play' },
-  { name: 'Writing Cypher queries', command: ':play cypher', type: 'play' }
-]
-const help = [
-  { name: 'Help', command: ':help help', type: 'help' },
-  { name: 'Cypher syntax', command: ':help cypher', type: 'help' },
-  { name: 'Available commands', command: ':help commands', type: 'help' },
-  { name: 'Keyboard shortcuts', command: ':help keys', type: 'help' }
-]
-
-const getReferences = (version: any, v: any) => {
+const getReferences = (version: string, v: string) => {
   const newRefs = [
     {
-      name: 'Getting Started',
-      command: `https://neo4j.com/docs/getting-started/${v}`,
-      type: 'link'
+      name: 'Getting Started with Neo4j',
+      url: `https://neo4j.com/docs/getting-started/${v}`
     },
     {
       name: 'Cypher Introduction',
-      command: ` https://neo4j.com/docs/cypher-manual/${v}/introduction/ `,
-      type: 'link'
+      url: ` https://neo4j.com/docs/cypher-manual/${v}/introduction/ `
     }
   ]
   const oldRefs = [
     {
       name: 'Getting Started',
-      command: `https://neo4j.com/docs/developer-manual/${v}/get-started/`,
-      type: 'link'
+      url: `https://neo4j.com/docs/developer-manual/${v}/get-started/`
     },
     {
       name: 'Developer Manual',
-      command: `https://neo4j.com/docs/developer-manual/${v}/`,
-      type: 'link'
+      url: `https://neo4j.com/docs/developer-manual/${v}/`
     },
     {
       name: 'Cypher Introduction',
-      command: `https://neo4j.com/docs/developer-manual/${v}/cypher/`,
-      type: 'link'
+      url: `https://neo4j.com/docs/developer-manual/${v}/cypher/`
     }
   ]
-  const commonRefs = [
+  const common = [
     {
-      name: 'Operations Manual',
-      command: `https://neo4j.com/docs/operations-manual/${v}/`,
-      type: 'link'
+      name: 'Cypher Refcard',
+      url: `https://neo4j.com/docs/cypher-refcard/${v}/`
     },
     {
       name: 'Drivers Manual',
-      command: `https://neo4j.com/docs/driver-manual/current/`,
-      type: 'link'
-    },
-    {
-      name: 'Cypher Refcard',
-      command: `https://neo4j.com/docs/cypher-refcard/${v}/`,
-      type: 'link'
-    },
+      url: `https://neo4j.com/docs/driver-manual/current/`
+    }
+  ]
+
+  const docs = [
+    ...(shouldLinkToNewRefs(version) ? newRefs : oldRefs),
+    ...common
+  ]
+  const other = [
     {
-      name: 'GraphGists',
-      command: 'https://neo4j.com/graphgists/',
-      type: 'link'
+      name: 'Operations Manual',
+      url: `https://neo4j.com/docs/operations-manual/${v}/`
     },
     {
       name: 'Developer Site',
-      command: 'https://www.neo4j.com/developer/',
-      type: 'link'
+      url: 'https://www.neo4j.com/developer/'
     },
     {
       name: 'Knowledge Base',
-      command: 'https://neo4j.com/developer/kb/',
-      type: 'link'
+      url: 'https://neo4j.com/developer/kb/'
     },
     {
       name: 'Neo4j Browser Developer Pages',
-      command: 'https://neo4j.com/developer/neo4j-browser/',
-      type: 'link'
+      url: 'https://neo4j.com/developer/neo4j-browser/'
     }
   ]
-  return ([] as any[]).concat(
-    shouldLinkToNewRefs(version) ? newRefs : oldRefs,
-    commonRefs
-  )
+  return { docs, other }
 }
 
-const getStaticItems = (version: any, urlVersion: any) => {
-  return {
-    help,
-    intro,
-    reference: getReferences(version, urlVersion)
-  }
-}
+type DocumentsProps = { version: string; urlVersion: string }
+const Documents = ({ version, urlVersion }: DocumentsProps) => {
+  const useful = [
+    { name: 'Help by topic', command: ':help' },
+    { name: 'Cypher help', command: ':help cypher' },
+    { name: 'Available commands', command: ':help commands' },
+    { name: 'Keybindings', command: ':help keys' },
+    { name: 'Command history', command: ':history' },
+    { name: 'Show schema', command: 'CALL db.schema.visualization()' },
+    { name: 'System info', command: ':sysinfo' }
+  ]
+
+  const guides = [
+    { name: 'Intro to Neo4j Browser', command: ':play intro' },
+    { name: 'Cypher basics', command: ':play cypher' },
+    { name: 'Queries with Cypher - Movies use case', command: ':play movies' },
+    {
+      name: 'More guides',
+      url: 'https://neo4j.com/graphgists/'
+    }
+  ]
 
-const Documents = ({ version, urlVersion }: any) => {
-  const items = getStaticItems(version, urlVersion)
+  const { docs, other } = getReferences(version, urlVersion)
   return (
     <Drawer id="db-documents">
-      <DrawerHeader>Help &amp; Resources</DrawerHeader>
-      <DrawerBody>
-        <DocumentItems header="Introduction" items={items.intro} />
-        <DocumentItems header="Help" items={items.help} />
-        <DocumentItems header="Useful Resources" items={items.reference} />
-      </DrawerBody>
+      <DrawerHeader>Help &amp; Learn</DrawerHeader>
+      <FullSizeDrawerBody>
+        <DocumentItems header="Useful commands" items={useful} />
+        <DocumentItems header="Built-in guides" items={guides} />
+        <DocumentItems header="Documentation links" items={docs} />
+        <DocumentItems header="Other Resources" items={other} />
+      </FullSizeDrawerBody>
     </Drawer>
   )
 }

src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap

@@ -26,15 +26,15 @@ exports[`Settings renders with strange characters in display name 1`] = `
             Test åäö settings
           </h5>
           <div
-            class="sc-chPdSV eGhoub"
+            class="sc-kAzzGY fnYWtX"
           >
             <label
-              class="sc-kgoBCf lbJgVL"
+              class="sc-chPdSV jsUXtn"
               title=""
             >
               åäö üüü
               <input
-                class="sc-kpOJdX lazVFV testSetting"
+                class="sc-kGXeez khypDc testSetting"
                 title=""
                 value="true"
               />

src/browser/modules/Sidebar/docsUtils.test.ts

@@ -22,10 +22,7 @@ import { formatDocVersion } from './Documents'
 
 test('formatDocVersion', () => {
   const tests = [
-    { test: null, expect: 'current' },
     { test: undefined, expect: 'current' },
-    { test: true, expect: 'current' },
-    { test: false, expect: 'current' },
     { test: '', expect: 'current' },
     { test: '1.1.0', expect: '1.1' },
     { test: '1.1.0-beta01', expect: '1.1-preview' },