diff --git a/src/browser/components/drawer/Drawer.tsx b/src/browser/components/drawer/Drawer.tsx index b5010d6fe05..0c9db72ff2b 100644 --- a/src/browser/components/drawer/Drawer.tsx +++ b/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; diff --git a/src/browser/index.html b/src/browser/index.html index dff3fef172d..560ee8ab1bd 100644 --- a/src/browser/index.html +++ b/src/browser/index.html @@ -13,6 +13,9 @@ width: 100%; height: 100%; } + a { + color: #68bdf4 !important; + } 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 ? ( + + + {item.name} + + + ) : ( + + ) + ) -export const DocumentItems = ({ header, items, onItemClick = null }: any) => { - const listOfItems = items.map((item: any) => { - switch (item.type) { - case 'link': - return ( - - - {item.name} - - - ) - default: - return ( - onItemClick(item.command)} - name={item.name} - type={item.type} - /> - ) - } - }) return ( - {header} + {header} -
    {listOfItems}
+
    {listOfItems}
 ) } -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) => ( + executeCommand(command)}> + + {name} + {command} + + +) + +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) diff --git a/src/browser/modules/Sidebar/Documents.tsx b/src/browser/modules/Sidebar/Documents.tsx index 23bd3db0403..3118ae0e49c 100644 --- a/src/browser/modules/Sidebar/Documents.tsx +++ b/src/browser/modules/Sidebar/Documents.tsx @@ -23,9 +23,14 @@ 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)) { @@ -33,114 +38,104 @@ export const formatDocVersion = (v: any) => { } 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 ( - Help & Resources - - - - - + Help & Learn + + + + + + ) } diff --git a/src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap b/src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap index ca281bc76bf..9c0c08fd2ba 100644 --- a/src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap +++ b/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