Immersive guides (#1354)

* Add icon and empty drawer * Move link and command styling to be reusable * Add help message in guide sidebar * Add types to documenation * Add carousel * Reset slide and add background * Basic guide resolving done * Remove dialog and support fullscreen * landing page * Move carousel to own file * Only render next slide buttons when we have lides * Revert "Remove dialog and support fullscreen" This reverts commit e66b02b. * Review comments * Add new slide for guides * Guide migration plumbing * Directives on index page * Icons * Index skeleton looks * Fix darkmode and scroll into view * Keep carousel at bottom * Wider sidebar * Add network error * Prevent title overflow * Start formatting movies guide * Update snapshots * Self review * Style indexpage * Improve title regex, list decoration and click effect on guides * Breakout styled comps * Add next and previous buttons * Update monaco to get rid of scrollbar * Code block look in darkmode * Move title to make sandbox example more natural * Migrate play movies * Remove squashing effect during sidebar animation * Update movie graph text * Add class for removing play icon * Rename force dark mode * update types * Migrate index * migrate concepts * AddSidebarSlide * Make sidebar slide its own component * Restore north-wind guide * Fix comments * Migrate northwind * Migrate cypher tutorial * Fix cypher guide issues * incorrect link * Keep track of current slide * Fix review comments * Update snapshots * Update not found page * Work on test * Rename file to solve capitalization issue * Update snapshots * Make inputs readable * Don't use theme in sidebar * Remove overflow on body * Drop manual link postfix * Update snapshot * Remove overflow on body * Move exception to cssfile * Remove bug that added many on click handlers
neo4j · Apr 20, 2021 · 7d1f5ef · 7d1f5ef
1 parent 812ffcc
commit 7d1f5ef
Show file tree

Hide file tree

Showing 78 changed files with 3,389 additions and 368 deletions.
diff --git a/src/browser/components/Directives.tsx b/src/browser/components/Directives.tsx
@@ -28,6 +28,20 @@ import * as editor from 'shared/modules/editor/editorDuck'
 import { addClass, prependIcon } from 'shared/services/dom-helpers'
 
 const directives = [
+  {
+    selector: '[data-exec]',
+    valueExtractor: (elem: any) => {
+      return `${elem.getAttribute('data-exec')}`
+    },
+    autoExec: true
+  },
+  {
+    selector: '[data-populate]',
+    valueExtractor: (elem: any) => {
+      return `${elem.getAttribute('data-populate')}`
+    },
+    autoExec: false
+  },
   {
     selector: '[exec-topic]',
     valueExtractor: (elem: any) => {
@@ -99,15 +113,20 @@ const bindDynamicInputToDom = (element: any) => {
 }
 
 export const Directives = (props: any) => {
-  const callback = (elem: any) => {
+  const callback = (elem: HTMLDivElement | null) => {
     if (elem) {
       directives.forEach(directive => {
         const elems = elem.querySelectorAll(directive.selector)
-        Array.from(elems).forEach((e: any) => {
-          if (e.firstChild.nodeName !== 'I') {
+        Array.from(elems).forEach(e => {
+          if (
+            e.firstChild?.nodeName !== 'I' &&
+            !e.classList.contains('remove-play-icon')
+          ) {
             prependPlayIcon(e)
           }
 
+          // If we use add event listener we need to remove it afterwards
+          // @ts-expect-error
           e.onclick = () => {
             addClass(e, 'clicked')
             return props.onItemClick(

diff --git a/src/browser/components/ManualLink.test.tsx b/src/browser/components/ManualLink.test.tsx
@@ -20,8 +20,7 @@
 
 import React from 'react'
 import { render } from '@testing-library/react'
-
-import { ManualLink } from './ManualLink'
+import { ManualLink } from 'browser-components/ManualLink'
 
 const tests: [Record<string, string | null>, string][] = [
   [

diff --git a/src/browser/components/ManualLink.tsx b/src/browser/components/ManualLink.tsx
@@ -24,6 +24,7 @@ import semver from 'semver'
 
 import { getVersion } from 'shared/modules/dbMeta/dbMetaDuck'
 import { formatDocVersion } from 'browser/modules/Sidebar/Documents'
+import { DrawerExternalLink } from './drawer/drawer-styled'
 
 const movedPages: { [key: string]: { oldPage: string; oldContent: string } } = {
   '/administration/indexes-for-search-performance/': {
@@ -52,7 +53,7 @@ export function ManualLink({
   children,
   neo4jVersion,
   minVersion
-}: any) {
+}: any): JSX.Element {
   let cleanPage = page.replace(/^\//, '')
   let content = children
   if (isPageMoved(chapter, page, neo4jVersion)) {
@@ -70,15 +71,11 @@ export function ManualLink({
 
   const url = `https://neo4j.com/docs/${chapter}/${version}/${cleanPage}`
 
-  return (
-    <a href={url} target="_blank" rel="noreferrer">
-      {content}
-    </a>
-  )
+  return <DrawerExternalLink href={url}>{content}</DrawerExternalLink>
 }
 
 const mapStateToProps = (state: any) => ({
   neo4jVersion: getVersion(state)
 })
 
-export default connect<any, any, any, any>(mapStateToProps, null)(ManualLink)
+export default connect(mapStateToProps)(ManualLink)
diff --git a/src/browser/components/SavedScripts/SavedScriptsFolder.tsx b/src/browser/components/SavedScripts/SavedScriptsFolder.tsx
@@ -51,7 +51,7 @@ interface SavedScriptsFolderProps {
   forceEdit: boolean
   onDoneEditing: () => void
   selectedScriptIds: string[]
-  children: JSX.Element[]
+  children: React.ReactNode
 }
 
 function SavedScriptsFolder({

diff --git a/src/browser/components/TabNavigation/Navigation.tsx b/src/browser/components/TabNavigation/Navigation.tsx
@@ -32,11 +32,14 @@ import {
   StyledTopNav,
   StyledBottomNav
 } from './styled'
+import { GUIDE_DRAWER_ID } from 'shared/modules/sidebar/sidebarDuck'
 
 const Closing = 'CLOSING'
 const Closed = 'CLOSED'
 const Open = 'OPEN'
 const Opening = 'OPENING'
+export const LARGE_DRAWER_WIDTH = 500
+export const STANDARD_DRAWER_WIDTH = 300
 
 export interface NavItem {
   name: string
@@ -169,17 +172,22 @@ class Navigation extends Component<NavigationProps, NavigationState> {
       this.state.drawerContent
     )
 
+    const drawerWidth =
+      this.props.openDrawer === GUIDE_DRAWER_ID
+        ? LARGE_DRAWER_WIDTH
+        : STANDARD_DRAWER_WIDTH
+    const useFullWidth =
+      this.state.transitionState === Open ||
+      this.state.transitionState === Opening
+    const width = useFullWidth ? drawerWidth : 0
     return (
       <StyledSidebar>
         <StyledTabsWrapper>
           <StyledTopNav>{topNavItemsList}</StyledTopNav>
           <StyledBottomNav>{bottomNavItemsList}</StyledBottomNav>
         </StyledTabsWrapper>
         <StyledDrawer
-          open={
-            this.state.transitionState === Open ||
-            this.state.transitionState === Opening
-          }
+          width={width}
           ref={(ref: any) => {
             if (ref) {
               // Remove old listeners so we don't get multiple callbacks.

diff --git a/src/browser/components/TabNavigation/styled.tsx b/src/browser/components/TabNavigation/styled.tsx
@@ -28,12 +28,12 @@ export const StyledSidebar = styled.div`
   color: #fff;
 `
 
-export const StyledDrawer: any = styled.div`
+export const StyledDrawer = styled.div<{ width: number }>`
   flex: 0 0 auto;
   background-color: #31333b;
   overflow-x: hidden;
   overflow-y: auto;
-  width: ${(props: any) => (props.open ? '300px' : '0px')};
+  width: ${props => props.width}px;
   transition: 0.2s ease-out;
   z-index: 1;
 `

diff --git a/src/browser/components/drawer/Drawer.tsx → ...owser/components/drawer/drawer-styled.tsx b/src/browser/components/drawer/Drawer.tsx → ...owser/components/drawer/drawer-styled.tsx
@@ -19,6 +19,7 @@
  */
 
 import styled from 'styled-components'
+import linkIcon from 'icons/external-link.svg'
 
 export const Drawer = styled.div`
   width: 290px;
@@ -43,6 +44,9 @@ export const DrawerHeader = styled.h4`
 export const DrawerToppedHeader = styled(DrawerHeader)`
   padding-top: 8px;
 `
+export const DrawerSeparator = styled.div`
+  border-bottom: 1px solid #424650;
+`
 
 export const DrawerSubHeader = styled.h5`
   color: ${props => props.theme.primaryHeaderText};
@@ -76,3 +80,41 @@ export const DrawerFooter = styled.div`
   margin-bottom: 20px;
   text-align: center;
 `
+
+export const DrawerExternalLink = styled.a.attrs({
+  target: '_blank',
+  rel: 'noreferrer'
+})`
+  cursor: pointer;
+  text-decoration: none;
+  color: #68bdf4;
+
+  &:active {
+    text-decoration: none;
+  }
+
+  &:before {
+    display: inline-block;
+    content: ' ';
+    background-image: url("data:image/svg+xml;utf8,${linkIcon}");
+    height: 12px;
+    width: 12px;
+    margin-right: 7px;
+  }
+`
+
+export const DrawerBrowserCommand = styled.span.attrs({
+  className: 'remove-play-icon'
+})`
+  background-color: #2a2c33;
+  border-radius: 2px;
+  padding: 3px;
+
+  color: #e36962;
+  font-family: Fira Code;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+`
diff --git a/src/browser/components/icons/Icons.tsx b/src/browser/components/icons/Icons.tsx
@@ -26,6 +26,7 @@ import addCircle from 'icons/add-circle.svg'
 import appWindowCode from 'icons/app-window-code.svg'
 import arrowLeft from 'icons/arrow-left.svg'
 import arrowRight from 'icons/arrow-right.svg'
+import backArrow from 'icons/back-arrow.svg'
 import buttonRefreshArrow from 'icons/button-refresh-arrow.svg'
 import cannyFeedback from 'icons/canny-feedback.svg'
 import cannyNotifications from 'icons/canny-notifications.svg'
@@ -39,6 +40,7 @@ import expand from 'icons/expand.svg'
 import file from 'icons/file.svg'
 import folderEmpty from 'icons/folder-empty.svg'
 import help from 'icons/help.svg'
+import monitorPlay from 'icons/monitor-play.svg'
 import navigationMenuVertical from 'icons/navigation-menu-vertical.svg'
 import neo4j from 'icons/neo-world.svg'
 import newFolder from 'icons/folder-add.svg'
@@ -135,6 +137,17 @@ export const DatabaseIcon = (props: {
   )
 }
 
+export const GuidesDrawerIcon = (props: { isOpen: boolean }): JSX.Element => (
+  <IconContainer
+    activeStyle={white}
+    inactiveStyle={inactive}
+    width={28}
+    isOpen={props.isOpen}
+    icon={monitorPlay}
+    title="Guides"
+  />
+)
+
 interface SidebarIconProps {
   isOpen: boolean
   title: string
@@ -339,6 +352,7 @@ export const MinusIcon = (): JSX.Element => (
     className="sl-minus-circle"
   />
 )
+
 export const RightArrowIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={blue}
@@ -455,3 +469,7 @@ export const CannyFeedbackIcon = (): JSX.Element => (
 export const CannyNotificationsIcon = (): JSX.Element => (
   <IconContainer icon={cannyNotifications} />
 )
+
+export const BackIcon = ({ width }: { width: number }): JSX.Element => (
+  <IconContainer width={width} icon={backArrow} />
+)