Merge pull request #1049 from neuroscout/fix/tour

Fix tour
neuroscout · Apr 29, 2022 · 5203cab · 5203cab
2 parents 0e728cd + f55c85b
commit 5203cab
Show file tree

Hide file tree

Showing 9 changed files with 3,782 additions and 3,530 deletions.
diff --git a/neuroscout/frontend/cypress/integration/tour.spec.js b/neuroscout/frontend/cypress/integration/tour.spec.js
@@ -0,0 +1,8 @@
+describe('Tour', () => {
+  it('opens tour', () => {
+    cy.visit('/')
+    cy.login('user@example.com', 'string')
+    cy.wait(200)
+    cy.get('#rainbow-btn').click()
+  })
+})
diff --git a/neuroscout/frontend/src/App.tsx b/neuroscout/frontend/src/App.tsx
@@ -245,7 +245,10 @@ class App extends React.Component<Record<string, never>, AppState> {
             <ResetPasswordModal {...this.state.user} />
           )}
           {this.state.user.openSignup && <SignupModal {...this.state.user} />}
-          {Tour(this.state.user.openTour, this.state.user.closeTour)}
+          <Tour
+            isOpen={this.state.user.openTour}
+            closeTour={this.state.user.closeTour}
+          />
           <Layout>
             <Content style={{ background: '#fff' }}>
               <Navbar {...this.state.user} />

diff --git a/neuroscout/frontend/src/Home.tsx b/neuroscout/frontend/src/Home.tsx
@@ -3,6 +3,7 @@
 */
 import * as React from 'react'
 import { Divider, Row, Col, Button, Card } from 'antd'
+import { CoffeeOutlined } from '@ant-design/icons'
 import { MainCol } from './HelperComponents'
 import { UserStore } from './user'
 import { BookOutlined } from '@ant-design/icons'
@@ -68,6 +69,18 @@ class Home extends React.Component<UserStore, Record<string, never>> {
                     Sign up to get started!
                   </Button>
                 )}
+                {!this.props.loggedIn === false && (
+                  <Button
+                    size="large"
+                    className="splashButton"
+                    id="rainbow-btn"
+                    type="primary"
+                    onClick={e => this.props.update({ openTour: true })}
+                  >
+                    <CoffeeOutlined />
+                    Take a Tour!
+                  </Button>
+                )}
               </div>
             </div>
             <Divider />

diff --git a/neuroscout/frontend/src/Tour.tsx b/neuroscout/frontend/src/Tour.tsx
@@ -1,9 +1,17 @@
 import * as React from 'react'
 import Reactour from 'reactour'
 import { withRouter } from 'react-router-dom'
+import { RouteComponentProps } from 'react-router'
 
-const Tour = (isOpen, closeTour) => {
-  return withRouter(({ location: { pathname }, history }) => {
+type TourProps = RouteComponentProps & {
+  isOpen: boolean
+  closeTour: () => void
+}
+
+class Tour extends React.Component<TourProps, Record<string, never>> {
+  render() {
+    const { location, history, closeTour, isOpen } = this.props
+    const pathname = location.pathname
     const steps = [
       {
         content:
@@ -22,6 +30,7 @@ const Tour = (isOpen, closeTour) => {
         ? [
             {
               action: () => history.push('/builder'),
+              content: '',
             },
           ]
         : pathname === '/builder'
@@ -44,6 +53,9 @@ const Tour = (isOpen, closeTour) => {
         : []),
     ]
 
+    if (!isOpen) {
+      return null
+    }
     return (
       <Reactour
         steps={steps}
@@ -52,7 +64,7 @@ const Tour = (isOpen, closeTour) => {
         update={pathname}
       />
     )
-  })
+  }
 }
 
-export default Tour
+export default withRouter(Tour)
diff --git a/neuroscout/frontend/src/analysis_builder/Status.tsx b/neuroscout/frontend/src/analysis_builder/Status.tsx
@@ -82,6 +82,7 @@ type submitProps = {
   private: boolean
   updateAnalysis?: (value: Partial<Analysis>) => void
   userOwns?: boolean
+  children?: React.ReactNode
 }
 
 export class Submit extends React.Component<

diff --git a/neuroscout/frontend/src/css/App.css b/neuroscout/frontend/src/css/App.css
@@ -258,3 +258,20 @@ pre {
 .colorIndexPredictorList {
     margin-bottom: 20px;
 }
+
+@keyframes kfcolors {
+    0% {background:#69c0ff;}
+    40% {background:#1890ff;}
+    60% {background:#096dd9;}
+    100% {background:#0050b3;}
+}
+
+#rainbow-btn {
+    background:red;
+    animation: kfcolors ease;
+    animation-direction: alternate;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+}
+
+
diff --git a/neuroscout/frontend/src/predictor_collection/FilesAndRunsForm.tsx b/neuroscout/frontend/src/predictor_collection/FilesAndRunsForm.tsx
@@ -42,6 +42,7 @@ type FilesAndRunsFormProps = {
     runFilters: RunFilters
     display: boolean
   }[]
+  children?: React.ReactNode
 }
 
 function _empty(filters) {

diff --git a/neuroscout/frontend/src/user.ts b/neuroscout/frontend/src/user.ts
@@ -259,8 +259,8 @@ export class UserStore {
           jwt: jwt,
           password: '',
           loggedIn: true,
-          openLogin: false,
           nextURL: null,
+          openLogin: false,
           loginError: '',
         })
       })