Resolving conflicts

src/components/custom/layout/AppFooter.js

@@ -1,11 +1,9 @@
 import React, {useContext} from 'react';
-import {Container, Row, Col} from 'react-bootstrap'
-import logo from "../../../public/static/sennet-txt-horizontal-logo.png";
-import Image from "next/image";
+import {Row, Col} from 'react-bootstrap'
 import AppContext from "../../../context/AppContext";
 import {ToastContainer} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
-import {BoxArrowUpRight, EnvelopeFill} from 'react-bootstrap-icons';
+import {BoxArrowUpRight} from 'react-bootstrap-icons';
 
 const AppFooter = () => {
     const {_t} = useContext(AppContext)

src/components/custom/layout/AppNavbar.jsx

@@ -1,7 +1,7 @@
 import {Container, Nav, Navbar, NavDropdown} from 'react-bootstrap'
 import {getDataIngestBoardEndpoint, NAVBAR_TITLE} from '../../../config/config'
 import {APP_ROUTES} from '../../../config/constants'
-import {useContext} from 'react'
+import React, {useContext, useState, useEffect} from 'react'
 import AppContext from '../../../context/AppContext'
 import {equals} from "../js/functions";
 import {getCookie} from "cookies-next";
@@ -10,7 +10,6 @@ const AppNavbar = ({hidden, signoutHidden}) => {
     const {_t, isLoggedIn, logout, cache, supportedMetadata} = useContext(AppContext)
     const userEmail = (isLoggedIn() ? JSON.parse(atob(getCookie('info')))['email'] : "")
 
-
     const handleSession = (e) => {
         e.preventDefault()
         let url = APP_ROUTES.login

src/components/custom/layout/AppTutorial.jsx

@@ -0,0 +1,72 @@
+import React, {useContext, useEffect, useState} from 'react'
+import {getCookie, setCookie} from "cookies-next";
+import TutorialSteps from "./TutorialSteps";
+import AppContext from "../../../context/AppContext";
+import Joyride from "react-joyride";
+import {equals} from "../js/functions";
+import {Alert} from 'react-bootstrap'
+import {Binoculars} from "react-bootstrap-icons";
+
+function AppTutorial() {
+    const {isLoggedIn} = useContext(AppContext)
+    const [steps, setSteps] = useState([])
+    const [runTutorial, setRunTutorial] = useState(false)
+    const [showAlert, setShowAlert] = useState(false)
+    const [stepIndex, setStepIndex] = useState(0)
+    const cookieKey = `tutorialCompleted_${isLoggedIn()}`
+
+    useEffect(() => {
+        const tutorialCompleted = getCookie(cookieKey)
+        if (!tutorialCompleted) {
+            setShowAlert(true)
+            setSteps(TutorialSteps(isLoggedIn()))
+        }
+    }, [])
+
+    const handleTutorial = () => {
+        setShowAlert(false)
+        // Set a quick timeout to allow the alert to close
+        // first before Joyride calculates the highlight region
+        setTimeout(()=> {
+            setRunTutorial(true)
+        }, 200)
+    }
+    return (
+        <>
+            <Alert variant="info" show={showAlert} onClose={() => setShowAlert(false)} dismissible className='text-center alert-hlf mb-4'>
+                <Alert.Heading><Binoculars /> Getting Started</Alert.Heading>
+                <p>Welcome to the SenNet Data Portal. Get a quick tour of different sections of the application.</p>
+                <a className='btn btn-primary' onClick={() => handleTutorial()}>Begin Tutorial Tour</a>
+            </Alert>
+            {steps.length > 0 && <Joyride
+                steps={steps}
+                scrollOffset={80}
+                callback={(res) => {
+                    console.log(res)
+                        if (equals(res.action, 'reset')) {
+                            setCookie(cookieKey, true, {sameSite: 'Lax'})
+                        }
+                    }
+                }
+                run={runTutorial}
+                showProgress={true}
+                showSkipButton={true}
+                locale={{last: 'Finish Tutorial'}}
+                continuous
+                styles={{
+                    options: {
+                        arrowColor: '#ffffff',
+                        backgroundColor: '#ffffff',
+                        primaryColor: '#0d6efd',
+                        textColor: 'rgba(0, 0, 0, 0.87)',
+                        width: 900,
+                        zIndex: 1000,
+                    }
+                }}
+            />}
+        </>
+    )
+}
+
+
+export default AppTutorial

src/components/custom/layout/TutorialSteps.js

@@ -0,0 +1,45 @@
+import React from "react";
+
+function TutorialSteps(loggedIn) {
+    const stepsCount = loggedIn ? 6 : 4
+    let _steps = [
+        {
+            target: '#search',
+            disableBeacon: true,
+            title: <span>Search Entities by Free Text (1/{stepsCount})</span>,
+            content: 'To further narrow the relevant entities, type search terms or phrases into the Search bar. Entities containing any of the search terms will be returned.'
+        },
+        {
+            target: '.sui-facet',
+            title: <span>Filter Your Browsing (2/{stepsCount})</span>,
+            content: 'The faceted search options on the left side allows filtering entities by any combination of categories. Search results update automatically as you edit the selection of filters.',
+        },
+        {
+            target: '[data-column-id="2"].rdt_TableCol',
+            title: <span>Sort Search Results (3/{stepsCount})</span>,
+            content: 'Clicking the header of any column will sort search results. A bolded arrow indicates the current sorting selection. Clicking again will reverse the order.'
+        },
+        {
+            target: '#sui-tbl-checkbox-actions',
+            title: <span>Download Search Results (4/{stepsCount})</span>,
+            content: <span>Clicking on the checkboxes <input type={'checkbox'} role='presentation' disabled /> on the left side of the search results table allows selecting distinct entities for export. Clicking on the ellipsis <button
+                role='presentation'
+                className="dropdown-toggle btn btn-secondary-outline border-0">...</button> at the top of the search results table allows for exporting either only the selected entities or all entities in the table to a <code>JSON</code> or <code>TSV</code> format.</span>
+        }
+    ]
+    if (loggedIn){
+        _steps.push({
+            target: '#nav-dropdown',
+            title: <span>Registering entities (5/{stepsCount})</span>,
+            content: <span>You may register individual and bulk entities by clicking on this menu. Then selecting under <i>Single</i> for single registration or under <i>Bulk</i> for bulk registration.</span>
+        })
+
+        _steps.push({
+            target: '#nav-dropdown--bulkMetadata',
+            title: <span>Bulk uploading metadata (6/{stepsCount})</span>,
+            content: <span>Select this menu to bulk upload metadata. <br /> <small className='text-muted'>Note: You may also upload metadata for a single entity during registration. See previous step for details.</small></span>
+        })
+    }
+    return _steps
+}
+export default TutorialSteps

src/context/AppContext.jsx

@@ -38,10 +38,6 @@ export const AppProvider = ({ cache, children }) => {
     useEffect(() => {
         // Should only include: '/', '/search', '/logout', '/login', '/404'
         const noRedirectTo = Object.values(APP_ROUTES)
-        if (noRedirectTo.indexOf(router.pathname) === -1) {
-            // Set expiry for 10 minutes
-            setLocalItemWithExpiry(pageKey, router.asPath, 600000)
-        }
 
         let info = getCookie('info')
         let groups_token = ""
@@ -58,6 +54,11 @@ export const AppProvider = ({ cache, children }) => {
             deleteCookies()
         }
 
+        if (noRedirectTo.indexOf(router.pathname) === -1) {
+            // Set expiry for 10 minutes
+            setLocalItemWithExpiry(pageKey, router.asPath, 600000)
+        }
+
         if(groups_token  != "") {
             check_valid_token().then((response) => {
                 if (typeof response == "boolean") {

src/package.json

@@ -28,6 +28,7 @@
     "react-bootstrap-icons": "^1.8.4",
     "react-data-table-component": "^7.5.3",
     "react-idle-timer": "^5.4.2",
+    "react-joyride": "^2.7.0",
     "react-toastify": "^9.1.1",
     "sass": "^1.57.1",
     "search-ui": "file:search-ui",

src/pages/search/entities.js

@@ -22,6 +22,7 @@ import BodyContent from "../../components/custom/search/BodyContent";
 import SearchDropdown from "../../components/custom/search/SearchDropdown";
 import {TableResultsEntities} from "../../components/custom/TableResultsEntities";
 import InvalidToken from "../../components/custom/layout/InvalidToken";
+import AppTutorial from "../../components/custom/layout/AppTutorial";
 
 function SearchEntities() {
     const {
@@ -79,6 +80,7 @@ function SearchEntities() {
                             header={
                                 <>
                                     <div className="search-box-header js-gtm--search">
+                                        <AppTutorial />
                                         <SearchBox
                                             view={({onChange, value, onSubmit}) => (
                                                 <Form onSubmit={e => handleSearchFormSubmit(e, onSubmit)}>

src/sass/components/alert.scss

@@ -1,4 +1,10 @@
 .alert {
+  &-hlf {
+    @include lg {
+      width: 60%;
+      margin: auto;
+    }
+  }
   .alert-body {
     border-bottom: 1px solid aliceblue;
   }

src/sass/components/navbar.scss

@@ -31,5 +31,10 @@
       }
     }
   }
-
 }
+
+
+// Set this so tutorial overlay can be above navbar sticky
+.sticky-top.navbar {
+  z-index: 1000 !important;
+}

src/sass/general/misc.scss

@@ -83,6 +83,21 @@ p {
   font-size: 12px;
 }
 
+[id^="react-joyride-step"] {
+  * {
+    text-align: left;
+  }
+  h4 {
+    padding-left: 10px;
+    padding-top: 20px;
+  }
+  .__floater {
+   @include lg {
+     width: 40% !important;
+   }
+  }
+}
+
 #__next, #__next > div:not(.sui-layout, .footer-wrapper, .spinner-wrapper) {
   display:grid;
   grid-template-rows:auto 1fr auto;