EDSC-4162: Create a Guided Tour For Users of Earthdata Search

package.json

@@ -180,6 +180,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
     "react-input-range": "^1.3.0",
+    "react-joyride": "^2.8.2",
     "react-leaflet": "^4.2.0",
     "react-leaflet-custom-control": "^1.3.5",
     "react-leaflet-draw": "^0.20.4",

static/src/js/App.jsx

@@ -40,6 +40,7 @@
 import MetricsEventsContainer from './containers/MetricsEventsContainer/MetricsEventsContainer'
 import NotFound from './components/Errors/NotFound'
 import PortalContainer from './containers/PortalContainer/PortalContainer'
+import SearchTour from './components/Tour/SearchTour'
 import ShapefileDropzoneContainer from './containers/ShapefileDropzoneContainer/ShapefileDropzoneContainer'
 import ShapefileUploadModalContainer from './containers/ShapefileUploadModalContainer/ShapefileUploadModalContainer'
 import Spinner from './components/Spinner/Spinner'
@@ -72,12 +73,32 @@
 class App extends Component {
   constructor(props) {
     super(props)
-    this.state = {}
+    this.state = {
+      runTour: false
+    }
+
     this.store = configureStore()
     const { edscHost } = getEnvironmentConfig()
     const { env } = getApplicationConfig()
     this.edscHost = edscHost
     this.env = env
+    this.startTour = this.startTour.bind(this)
+    this.setRunTour = this.setRunTour.bind(this)
+  }
+
+  componentDidMount() {
+    const dontShowTour = localStorage.getItem('dontShowTour') !== 'true'
+    this.setState({
+      runTour: dontShowTour
+    })
+  }
+
+  setRunTour(value) {
+    this.setState({ runTour: value })
+  }
+
+  startTour() {
+    this.setState({ runTour: true })
   }
 
   // Portal paths have been removed, but this needs to stay in order to redirect users using
@@ -119,7 +140,7 @@
               <ErrorBannerContainer />
               <AuthTokenContainer>
                 <UrlQueryContainer>
-                  <AppHeader />
+                  <AppHeader onStartTour={this.startTour} />
                   <Switch>
                     <Route
                       path="/admin"
@@ -210,6 +231,7 @@
                       render={
                         () => (
                           <>
+                            <SearchTour runTour={this.state.runTour} setRunTour={this.setRunTour} />
                             <Search />
                             <Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--white spinner--small" />}>
                               <EdscMapContainer />

static/src/js/components/AppHeader/AppHeader.jsx

@@ -1,16 +1,21 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import SecondaryToolbarContainer
   from '../../containers/SecondaryToolbarContainer/SecondaryToolbarContainer'
 import AppLogoContainer from '../../containers/AppLogoContainer/AppLogoContainer'
 
 import './AppHeader.scss'
 
-const AppHeader = () => (
+const AppHeader = ({ onStartTour }) => (
   <header className="app-header">
     <AppLogoContainer />
-    <SecondaryToolbarContainer />
+    <SecondaryToolbarContainer onStartTour={onStartTour} />
   </header>
 )
 
+AppHeader.propTypes = {
+  onStartTour: PropTypes.func.isRequired
+}
+
 export default AppHeader

static/src/js/components/Panels/Panels.jsx

@@ -652,6 +652,7 @@ export class Panels extends PureComponent {
         <div className="panels__focused-meta">
           {focusedMeta}
         </div>
+        <div className="right-overlay" />
       </section>
     )
   }

static/src/js/components/Panels/Panels.scss

@@ -78,3 +78,15 @@
     pointer-events: none;
   }
 }
+
+.right-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0);
+  width: 4000px;
+  left: calc(100%);
+  pointer-events: none;
+}

static/src/js/components/SecondaryToolbar/SecondaryToolbar.jsx

@@ -118,7 +118,8 @@ class SecondaryToolbar extends Component {
       location,
       retrieval = {},
       secondaryToolbarEnabled,
-      ursProfile
+      ursProfile,
+      onStartTour
     } = this.props
 
     const { first_name: firstName = '' } = ursProfile
@@ -321,6 +322,18 @@ class SecondaryToolbar extends Component {
         onToggle={this.onToggleProjectDropdown}
         alignRight
       >
+        {
+          location.pathname === '/search' && (
+            <Dropdown.Toggle
+              className="secondary-toolbar__begin-tour-button"
+              as={Button}
+              onClick={onStartTour}
+              label="Want to learn more? Click here to take a tour of our site."
+            >
+              Start Tour
+            </Dropdown.Toggle>
+          )
+        }
         <Dropdown.Toggle
           className="secondary-toolbar__project-name-dropdown-toggle"
           as={Button}
@@ -389,6 +402,7 @@ SecondaryToolbar.propTypes = {
   earthdataEnvironment: PropTypes.string.isRequired,
   location: locationPropType.isRequired,
   onLogout: PropTypes.func.isRequired,
+  onStartTour: PropTypes.bool.isRequired,
   onUpdateProjectName: PropTypes.func.isRequired,
   projectCollectionIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   retrieval: PropTypes.shape({}).isRequired,

static/src/js/components/SecondaryToolbar/SecondaryToolbar.scss

@@ -26,6 +26,7 @@
     }
   }
 
+  &__begin-tour-button,
   &__project-name-dropdown-toggle {
     &:after {
       display: none;
@@ -43,6 +44,7 @@
   &__project,
   &__login,
   &__project-name-dropdown-toggle,
+  &__begin-tour-button,
   &__user-dropdown-toggle {
     position: relative;
     padding: 0 1rem;
@@ -71,6 +73,7 @@
     margin-right: 0.5rem;
   }
 
+  &__begin-tour-button,
   &__project-name-dropdown-toggle {
     &:after {
       display: none;