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

Author: OskarDamkjaer

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(

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][] = [
   [

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)

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({

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.

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;
 `

src/browser/components/drawer/Drawer.tsx renamed to src/browser/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;
+`

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} />
+)