Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve styling of new sidebar guides #1406

Merged
merged 17 commits into from
Jun 11, 2021
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions e2e_tests/integration/guide-command.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/*
* Copyright (c) 2002-2021 "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/>.
*/

/* global Cypress, cy, before */

describe('Play command', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Misleading name of this test suite! ;-)

before(function() {
cy.visit(Cypress.config('url'))
.title()
.should('include', 'Neo4j Browser')
cy.wait(3000)
})

it('handles not found guides', () => {
cy.executeCommand(':clear')
cy.executeCommand(':guide not-found-guide-anywhere')

cy.get('[data-testid="guideDrawer"]').should('contain', 'Not found')

// reset state
cy.executeCommand(':guide')
cy.get('[data-testid="guideDrawer"]').should('contain', ':guide movie')
cy.get('[data-testid=drawerGuides]').click()
})

it('can walk through a guides', () => {
cy.executeCommand(':clear')
// Open a guide from the sidebar
cy.get('[data-testid=drawerGuides]').click()
cy.get('[data-testid="guideDrawer"]')
.contains(':guide cypher')
.click()

// can progress slide
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid="guideDrawer"]').contains('CREATE')

// remembers slide location
cy.get('[data-testid=drawerGuides]').click()
cy.get('[data-testid=drawerGuides]').click()

// can go back
cy.get('[data-testid="guideDrawer"]').contains('CREATE')
cy.get('[data-testid=guidePreviousSlide]').click()
cy.get('[data-testid="guideDrawer"]').contains('SQL-like clauses')

// go to end
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid=guideNextSlide]').click()
cy.get('[data-testid="guideDrawer"]').contains('Next steps')

// switch guide via command
cy.executeCommand(':guide northwind')
cy.get('[data-testid="guideDrawer"]').contains('From RDBMS to Graph')

// Jump to end, then new guide
cy.get('[data-testid="pagination-7"]').click()
cy.get('[data-testid="guideDrawer"]')
.contains('Movie Graph')
.click()

cy.get('[data-testid="guideDrawer"]').contains('mini graph application')

// Can use back button
cy.get('[data-testid="guidesBackButton"]').click()
cy.get('[data-testid="guideDrawer"]').contains(':guide cypher')

cy.get('[data-testid=drawerGuides]').click()
})
})
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
"e2e-local": "CYPRESS_E2E_TEST_ENV=\"local\" cypress run",
"e2e-local-open": "CYPRESS_E2E_TEST_ENV=\"local\" cypress open",
"format": "prettier-eslint --write 'src/**/!(*.min).{js,jsx,ts,tsx,css,json}' 'e2e_tests/**/*.{js,jsx,ts,tsx,css,json}' 'scripts/**/*.{js,jsx,ts,tsx,css,json}' 'build_scripts/**/*.{js,jsx,ts,tsx,css,json}'",
"jest": "jest --coverage",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this in package.json we can run yarn jest to run jest without flags.

"lint": "eslint --fix --ext .ts --ext .tsx ./",
"precommit": "lint-staged",
"prepare-jar": "node ./scripts/prepare-mvn-package.js",
Expand Down
6 changes: 4 additions & 2 deletions src/browser/components/Directives.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ const directives = [
{
selector: '[data-exec]',
valueExtractor: (elem: any) => {
return `${elem.getAttribute('data-exec')}`
// we prepend the : to only autoexec browser commands and not cypher
return `:${elem.getAttribute('data-exec')}`
},
autoExec: true
},
Expand Down Expand Up @@ -147,7 +148,8 @@ const mapDispatchToProps = (_dispatch: any, ownProps: any) => {
return {
onItemClick: (cmd: string, autoExec: boolean, id: string) => {
if (!cmd.endsWith(' null') && !cmd.endsWith(':null')) {
if (autoExec) {
// prevent autorunning cypher by prefixing w :auto hack
if (autoExec && !cmd.startsWith(':auto')) {
const action = executeCommand(cmd, {
id,
source: commandSources.button
Expand Down
6 changes: 3 additions & 3 deletions src/browser/documentation/sidebar-guides/concepts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -144,10 +144,10 @@ const slides = [
<h3>Keep getting started</h3>
<ul className="undecorated">
<li>
<a data-exec=":guide intro">Intro</a> - a guided tour
<a data-exec="guide intro">Intro</a> - a guided tour
</li>
<li>
<a data-exec=":guide cypher">Cypher</a> - query language
<a data-exec="guide cypher">Cypher</a> - query language
</li>
<li>
<ManualLink chapter="cypher-manual" page="/">
Expand All @@ -159,7 +159,7 @@ const slides = [
<h3>Jump into code</h3>
<ul className="undecorated">
<li>
<a data-exec=":guide movie-graph">The Movie Graph</a>
<a data-exec="guide movie-graph">The Movie Graph</a>
</li>
</ul>
</SidebarSlide>
Expand Down
10 changes: 5 additions & 5 deletions src/browser/documentation/sidebar-guides/guideIndex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,26 @@ const slides = [
</MarginTop>
<NoBulletsUl>
<li>
<DrawerBrowserCommand data-exec=":guide intro">
<DrawerBrowserCommand data-exec="guide intro">
:guide intro
</DrawerBrowserCommand>
<MarginTop> Navigating Neo4j Browser </MarginTop>
</li>
<MarginTopLi>
<DrawerBrowserCommand data-exec=":guide concepts">
<DrawerBrowserCommand data-exec="guide concepts">
:guide concepts
</DrawerBrowserCommand>
<MarginTop> Property graph model concepts </MarginTop>
</MarginTopLi>
<MarginTopLi>
<DrawerBrowserCommand data-exec=":guide cypher">
<DrawerBrowserCommand data-exec="guide cypher">
:guide cypher
</DrawerBrowserCommand>
<MarginTop>Cypher basics - create, match, delete</MarginTop>
</MarginTopLi>

<MarginTopLi>
<DrawerBrowserCommand data-exec=":guide movie-graph">
<DrawerBrowserCommand data-exec="guide movie-graph">
:guide movie-graph
</DrawerBrowserCommand>
<MarginTop>
Expand All @@ -50,7 +50,7 @@ const slides = [
</MarginTopLi>

<MarginTopLi>
<DrawerBrowserCommand data-exec=":guide northwind-graph">
<DrawerBrowserCommand data-exec="guide northwind-graph">
:guide northwind-graph
</DrawerBrowserCommand>
<MarginTop>Translate and import relation data into graph</MarginTop>
Expand Down
2 changes: 1 addition & 1 deletion src/browser/documentation/sidebar-guides/intro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ const slides = [
<h3>Jump into code</h3>
<ul className="undecorated">
<li>
<a data-exec=":guide cypher">Cypher Guide</a> - Learn Cypher basics
<a data-exec="guide cypher">Cypher Guide</a> - Learn Cypher basics
</li>
</ul>
</SidebarSlide>
Expand Down
5 changes: 2 additions & 3 deletions src/browser/documentation/sidebar-guides/movie-graph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
import React from 'react'
import ManualLink from 'browser-components/ManualLink'
import { SidebarSlide } from '../../modules/Carousel/Slide'
import { BulletsInsideLi } from './styled'
import { DrawerExternalLink } from 'browser-components/drawer/drawer-styled'

const title = 'Movie Graph'
Expand Down Expand Up @@ -743,11 +742,11 @@ RETURN tom, m, coActors, m2, cruise`}
<h3>Next steps</h3>
<ul className="undecorated">
<li>
<a data-exec=":guide northwind-graph">Northwind Graph</a>- from RDBMS to
<a data-exec="guide northwind-graph">Northwind Graph</a>- from RDBMS to
graph
</li>
<li>
<a data-exec=":guide cypher">Cypher</a>- Learn Cypher syntax
<a data-exec="guide cypher">Cypher</a>- Learn Cypher syntax
</li>
<li>
<DrawerExternalLink href="https://portal.graphgist.org/">
Expand Down
4 changes: 2 additions & 2 deletions src/browser/documentation/sidebar-guides/northwind-graph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -260,10 +260,10 @@ RETURN DISTINCT cust.contactName as CustomerName, SUM(o.quantity) AS TotalProduc
<h3>Next steps</h3>
<ul className="undecorated">
<li>
<a data-exec=":guide movie-graph">Movie Graph</a> - actors & movies
<a data-exec="guide movie-graph">Movie Graph</a> - actors & movies
</li>
<li>
<a data-exec=":guide cypher">Cypher</a> - query language fundamentals
<a data-exec="guide cypher">Cypher</a> - query language fundamentals
</li>
</ul>
<br />
Expand Down
4 changes: 1 addition & 3 deletions src/browser/documentation/sidebar-guides/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import styled from 'styled-components'
export const NoBulletsUl = styled.div`
list-style-type: none;
`
export const BulletsInsideLi = styled.li`
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unused

list-style-position: inside;
`

export const MarginTopLi = styled.li`
margin-top: 15px;
`
Expand Down
4 changes: 2 additions & 2 deletions src/browser/documentation/sidebar-guides/unfound.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ const slides = [
<h5>Try:</h5>
<ul className="undecorated">
<li>
<a data-exec=":help">:help</a> - for general help about using Neo4j
<a data-exec="help">:help</a> - for general help about using Neo4j
Browser
</li>
<li>
<a data-exec=":guide intro">:guide intro</a> - to see a few available
<a data-exec="guide intro">:guide intro</a> - to see a few available
guides
</li>
<li>
Expand Down
3 changes: 3 additions & 0 deletions src/browser/modules/Carousel/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,9 @@ export const StyledSidebarSlide = styled.div.attrs({
list-style-position: inside;
padding-left: 0;
margin-top: 0.5em;
p {
display: inline-block;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before we added list-style-position: inside;

in a

  • was shown inline, added this to keep them inline.

  • }
    }

    &.slide input {
    Expand Down
    38 changes: 18 additions & 20 deletions src/browser/modules/GuideCarousel/GuideCarousel.tsx
    Original file line number Diff line number Diff line change
    Expand Up @@ -25,10 +25,9 @@ import {
    GuideNavButton,
    GuideUl,
    StyledCarousel,
    GuideProgressContainer,
    StyledProgressCount,
    CarouselIndicator
    GuideProgressContainer
    } from '../Sidebar/styled'
    import Pagination from './Pagination'

    type GuideCarouselProps = {
    slides: JSX.Element[]
    Expand Down Expand Up @@ -66,32 +65,31 @@ function GuidesCarousel({
    const moreThanOneSlide = slides.length > 1

    return (
    <StyledCarousel>
    <StyledCarousel className="disable-font-ligatures">
    <Directives content={currentSlide} />
    {moreThanOneSlide && (
    <GuideNavContainer>
    <GuideNavButton onClick={prevSlide} disabled={onFirstSlide}>
    <GuideNavButton
    onClick={prevSlide}
    disabled={onFirstSlide}
    data-testid="guidePreviousSlide"
    >
    Previous
    </GuideNavButton>
    <GuideUl>
    <GuideProgressContainer>
    <StyledProgressCount>
    {`${currentSlideIndex + 1} / ${slides.length}`}
    </StyledProgressCount>
    {slides.slice(0, 25).map((_, i) => (
    <CarouselIndicator
    key={i}
    aria-label={`${i + 1}`}
    onClick={() => gotoSlide(i)}
    active={i === currentSlideIndex}
    >
    <span />
    </CarouselIndicator>
    ))}
    {slides.length >= 25 && '...'}
    <Pagination
    gotoIndex={gotoSlide}
    itemCount={slides.length}
    selectedIndex={currentSlideIndex}
    />
    </GuideProgressContainer>
    </GuideUl>
    <GuideNavButton onClick={nextSlide} disabled={onLastSlide}>
    <GuideNavButton
    onClick={nextSlide}
    disabled={onLastSlide}
    data-testid="guideNextSlide"
    >
    Next
    </GuideNavButton>
    </GuideNavContainer>
    Expand Down
    60 changes: 60 additions & 0 deletions src/browser/modules/GuideCarousel/Pagination.test.ts
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    /*
    * 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 { paginationHelper } from './Pagination'

    const D = '...'
    describe('Pagination', () => {
    test('paginationHelper', () => {
    // doesn't crash on out of bounds
    expect(paginationHelper(0, 1)).toEqual([])

    // Handles simple cases
    expect(paginationHelper(0, 0)).toEqual([])
    expect(paginationHelper(3, 0)).toEqual([0, 1, 2])
    expect(paginationHelper(6, 4)).toEqual([0, 1, 2, 3, 4, 5])

    // Same for list of 7 regardless of selection
    Array.from({ length: 7 }).forEach((_a, i) => {
    expect(paginationHelper(7, i)).toEqual([0, 1, 2, 3, 4, 5, 6])
    })

    // Handles all cases length 8
    expect(paginationHelper(8, 0)).toEqual([0, 1, 2, 3, 4, D, 7])
    expect(paginationHelper(8, 1)).toEqual([0, 1, 2, 3, 4, D, 7])
    expect(paginationHelper(8, 2)).toEqual([0, 1, 2, 3, 4, D, 7])
    expect(paginationHelper(8, 3)).toEqual([0, 1, 2, 3, 4, D, 7])
    expect(paginationHelper(8, 4)).toEqual([0, D, 3, 4, 5, 6, 7])
    expect(paginationHelper(8, 5)).toEqual([0, D, 3, 4, 5, 6, 7])
    expect(paginationHelper(8, 6)).toEqual([0, D, 3, 4, 5, 6, 7])
    expect(paginationHelper(8, 7)).toEqual([0, D, 3, 4, 5, 6, 7])

    // Handles all cases length 9
    expect(paginationHelper(9, 0)).toEqual([0, 1, 2, 3, 4, D, 8])
    expect(paginationHelper(9, 1)).toEqual([0, 1, 2, 3, 4, D, 8])
    expect(paginationHelper(9, 2)).toEqual([0, 1, 2, 3, 4, D, 8])
    expect(paginationHelper(9, 3)).toEqual([0, 1, 2, 3, 4, D, 8])
    expect(paginationHelper(9, 4)).toEqual([0, D, 3, 4, 5, D, 8])
    expect(paginationHelper(9, 5)).toEqual([0, D, 4, 5, 6, 7, 8])
    expect(paginationHelper(9, 6)).toEqual([0, D, 4, 5, 6, 7, 8])
    expect(paginationHelper(9, 7)).toEqual([0, D, 4, 5, 6, 7, 8])
    expect(paginationHelper(9, 8)).toEqual([0, D, 4, 5, 6, 7, 8])
    })
    })
    Loading