From b0fcc360e3b459c8f0fd211b554a38abe9c86d1c Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Mon, 13 Nov 2023 11:41:12 -0500 Subject: [PATCH 01/14] Move page saving logic after deleteCookies - #1029 --- src/context/AppContext.jsx | 9 +++++---- src/search-ui | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/context/AppContext.jsx b/src/context/AppContext.jsx index 28f2a0936..c3e888281 100644 --- a/src/context/AppContext.jsx +++ b/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 = "" @@ -57,6 +53,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") { diff --git a/src/search-ui b/src/search-ui index c5af67841..13f5de101 160000 --- a/src/search-ui +++ b/src/search-ui @@ -1 +1 @@ -Subproject commit c5af67841ebfa8a8fc692d76e6f9eb810d311b30 +Subproject commit 13f5de101c68005be8a28ed742b68396b47afaee From 4cab00fe3bc663574e6209e1da0d3da06c176261 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Tue, 14 Nov 2023 16:05:25 -0500 Subject: [PATCH 02/14] Add tutorial basics (not done) - #1033 --- src/components/custom/layout/AppFooter.js | 6 +-- src/components/custom/layout/AppNavbar.jsx | 60 +++++++++++++++++++++- src/package.json | 1 + src/sass/general/misc.scss | 15 ++++++ src/search-ui | 2 +- 5 files changed, 77 insertions(+), 7 deletions(-) diff --git a/src/components/custom/layout/AppFooter.js b/src/components/custom/layout/AppFooter.js index 4a4199d75..4152e14f1 100644 --- a/src/components/custom/layout/AppFooter.js +++ b/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) diff --git a/src/components/custom/layout/AppNavbar.jsx b/src/components/custom/layout/AppNavbar.jsx index eaab361fb..728214bc6 100644 --- a/src/components/custom/layout/AppNavbar.jsx +++ b/src/components/custom/layout/AppNavbar.jsx @@ -1,15 +1,54 @@ 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} from 'react' import AppContext from '../../../context/AppContext' import {equals} from "../js/functions"; import {getCookie} from "cookies-next"; +import Joyride from "react-joyride"; const AppNavbar = ({hidden, signoutHidden}) => { const {_t, isLoggedIn, logout, cache, supportedMetadata} = useContext(AppContext) const userEmail = (isLoggedIn() ? JSON.parse(atob(getCookie('info')))['email'] : "") - + const stepsCount = isLoggedIn() ? 6 : 4 + let _steps = [ + { + target: '#search', + title: Search Entities by Free Text (1/{stepsCount}), + 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: Filter Your Browsing (2/{stepsCount}), + 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: '.sc-eDWCr', + title: Sort Search Results (3/{stepsCount}), + 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: Download Search Results (4/{stepsCount}), + content: Clicking on the checkboxes on the left side of the search results table allows selecting distinct entities for export. Clicking on the ellipsis at the top of the search results table allows for exporting either only the selected entities or all entities in the table to a JSON or TSV format. + } + ] + if (isLoggedIn()){ + _steps.push({ + target: '#submenu-md-Single', + title: Registering entities (5/{stepsCount}), + content: You may register individual and bulk entities by clicking on this menu. Then selecting under Single for single registration or under Bulk for bulk registration. + }) + + _steps.push({ + target: '#nav-dropdown--bulkMetadata', + title: Bulk uploading metadata (6/{stepsCount}), + content: Select this menu to bulk upload metadata.
Note: You may also upload metadata for a single entity during registration. See previous step for details. + }) + } + const [steps, setSteps] = useState(_steps) const handleSession = (e) => { e.preventDefault() @@ -179,6 +218,23 @@ const AppNavbar = ({hidden, signoutHidden}) => { + ) diff --git a/src/package.json b/src/package.json index 155732098..b968d3cc6 100644 --- a/src/package.json +++ b/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", diff --git a/src/sass/general/misc.scss b/src/sass/general/misc.scss index e6ef06af6..23d27ddda 100644 --- a/src/sass/general/misc.scss +++ b/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; diff --git a/src/search-ui b/src/search-ui index 4ce7f6ad7..13f5de101 160000 --- a/src/search-ui +++ b/src/search-ui @@ -1 +1 @@ -Subproject commit 4ce7f6ad7166c5c2cf6a8afbcbd3432eb51f0390 +Subproject commit 13f5de101c68005be8a28ed742b68396b47afaee From 0d5a148ab7ba42f630a47cb8b0516db84ea202e2 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Tue, 14 Nov 2023 16:15:43 -0500 Subject: [PATCH 03/14] Add continuous prop - #1033 --- src/components/custom/layout/AppNavbar.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/custom/layout/AppNavbar.jsx b/src/components/custom/layout/AppNavbar.jsx index 728214bc6..7966dfa95 100644 --- a/src/components/custom/layout/AppNavbar.jsx +++ b/src/components/custom/layout/AppNavbar.jsx @@ -223,6 +223,7 @@ const AppNavbar = ({hidden, signoutHidden}) => { hideCloseButton={true} showProgress={true} showSkipButton={true} + continuous styles={{ options: { arrowColor: '#ffffff', From 4eadb06b242dff2e6b304d4f8681826de99916bf Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Tue, 14 Nov 2023 16:16:42 -0500 Subject: [PATCH 04/14] Update target selector --- src/components/custom/layout/AppNavbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/custom/layout/AppNavbar.jsx b/src/components/custom/layout/AppNavbar.jsx index 7966dfa95..9854e4dbe 100644 --- a/src/components/custom/layout/AppNavbar.jsx +++ b/src/components/custom/layout/AppNavbar.jsx @@ -37,7 +37,7 @@ const AppNavbar = ({hidden, signoutHidden}) => { ] if (isLoggedIn()){ _steps.push({ - target: '#submenu-md-Single', + target: '#nav-dropdown', title: Registering entities (5/{stepsCount}), content: You may register individual and bulk entities by clicking on this menu. Then selecting under Single for single registration or under Bulk for bulk registration. }) From d82949736811f01b64cfe5d78011f723b5a7e313 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Wed, 15 Nov 2023 10:12:53 -0500 Subject: [PATCH 05/14] Put tutorial steps in own file - #1033 --- src/components/custom/layout/AppNavbar.jsx | 41 +---------------- src/components/custom/layout/TutorialSteps.js | 44 +++++++++++++++++++ 2 files changed, 46 insertions(+), 39 deletions(-) create mode 100644 src/components/custom/layout/TutorialSteps.js diff --git a/src/components/custom/layout/AppNavbar.jsx b/src/components/custom/layout/AppNavbar.jsx index 9854e4dbe..b61d6d49e 100644 --- a/src/components/custom/layout/AppNavbar.jsx +++ b/src/components/custom/layout/AppNavbar.jsx @@ -6,49 +6,12 @@ import AppContext from '../../../context/AppContext' import {equals} from "../js/functions"; import {getCookie} from "cookies-next"; import Joyride from "react-joyride"; +import TutorialSteps from "./TutorialSteps"; const AppNavbar = ({hidden, signoutHidden}) => { const {_t, isLoggedIn, logout, cache, supportedMetadata} = useContext(AppContext) const userEmail = (isLoggedIn() ? JSON.parse(atob(getCookie('info')))['email'] : "") - const stepsCount = isLoggedIn() ? 6 : 4 - let _steps = [ - { - target: '#search', - title: Search Entities by Free Text (1/{stepsCount}), - 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: Filter Your Browsing (2/{stepsCount}), - 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: '.sc-eDWCr', - title: Sort Search Results (3/{stepsCount}), - 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: Download Search Results (4/{stepsCount}), - content: Clicking on the checkboxes on the left side of the search results table allows selecting distinct entities for export. Clicking on the ellipsis at the top of the search results table allows for exporting either only the selected entities or all entities in the table to a JSON or TSV format. - } - ] - if (isLoggedIn()){ - _steps.push({ - target: '#nav-dropdown', - title: Registering entities (5/{stepsCount}), - content: You may register individual and bulk entities by clicking on this menu. Then selecting under Single for single registration or under Bulk for bulk registration. - }) - - _steps.push({ - target: '#nav-dropdown--bulkMetadata', - title: Bulk uploading metadata (6/{stepsCount}), - content: Select this menu to bulk upload metadata.
Note: You may also upload metadata for a single entity during registration. See previous step for details. - }) - } - const [steps, setSteps] = useState(_steps) + const [steps, setSteps] = useState(TutorialSteps(isLoggedIn())) const handleSession = (e) => { e.preventDefault() diff --git a/src/components/custom/layout/TutorialSteps.js b/src/components/custom/layout/TutorialSteps.js new file mode 100644 index 000000000..58699b076 --- /dev/null +++ b/src/components/custom/layout/TutorialSteps.js @@ -0,0 +1,44 @@ +import React from "react"; + +function TutorialSteps(loggedIn) { + const stepsCount = loggedIn ? 6 : 4 + let _steps = [ + { + target: '#search', + title: Search Entities by Free Text (1/{stepsCount}), + 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: Filter Your Browsing (2/{stepsCount}), + 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: '.sc-eDWCr', + title: Sort Search Results (3/{stepsCount}), + 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: Download Search Results (4/{stepsCount}), + content: Clicking on the checkboxes on the left side of the search results table allows selecting distinct entities for export. Clicking on the ellipsis at the top of the search results table allows for exporting either only the selected entities or all entities in the table to a JSON or TSV format. + } + ] + if (loggedIn){ + _steps.push({ + target: '#nav-dropdown', + title: Registering entities (5/{stepsCount}), + content: You may register individual and bulk entities by clicking on this menu. Then selecting under Single for single registration or under Bulk for bulk registration. + }) + + _steps.push({ + target: '#nav-dropdown--bulkMetadata', + title: Bulk uploading metadata (6/{stepsCount}), + content: Select this menu to bulk upload metadata.
Note: You may also upload metadata for a single entity during registration. See previous step for details. + }) + } + return _steps +} +export default TutorialSteps \ No newline at end of file From 318a1f13688f749d168fc6f7cb2fef01d7f722d5 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Wed, 15 Nov 2023 10:33:02 -0500 Subject: [PATCH 06/14] Separate unrelated components into own file Add flag for tutorial complete - #1033 --- src/components/custom/layout/AppNavbar.jsx | 25 ++-------- src/components/custom/layout/AppTutorial.jsx | 50 ++++++++++++++++++++ 2 files changed, 53 insertions(+), 22 deletions(-) create mode 100644 src/components/custom/layout/AppTutorial.jsx diff --git a/src/components/custom/layout/AppNavbar.jsx b/src/components/custom/layout/AppNavbar.jsx index b61d6d49e..75e0c13b3 100644 --- a/src/components/custom/layout/AppNavbar.jsx +++ b/src/components/custom/layout/AppNavbar.jsx @@ -1,17 +1,15 @@ import {Container, Nav, Navbar, NavDropdown} from 'react-bootstrap' import {getDataIngestBoardEndpoint, NAVBAR_TITLE} from '../../../config/config' import {APP_ROUTES} from '../../../config/constants' -import React, {useContext, useState} from 'react' +import React, {useContext, useState, useEffect} from 'react' import AppContext from '../../../context/AppContext' import {equals} from "../js/functions"; import {getCookie} from "cookies-next"; -import Joyride from "react-joyride"; -import TutorialSteps from "./TutorialSteps"; +import AppTutorial from "./AppTutorial"; const AppNavbar = ({hidden, signoutHidden}) => { const {_t, isLoggedIn, logout, cache, supportedMetadata} = useContext(AppContext) const userEmail = (isLoggedIn() ? JSON.parse(atob(getCookie('info')))['email'] : "") - const [steps, setSteps] = useState(TutorialSteps(isLoggedIn())) const handleSession = (e) => { e.preventDefault() @@ -181,24 +179,7 @@ const AppNavbar = ({hidden, signoutHidden}) => { - + ) diff --git a/src/components/custom/layout/AppTutorial.jsx b/src/components/custom/layout/AppTutorial.jsx new file mode 100644 index 000000000..1539a91f6 --- /dev/null +++ b/src/components/custom/layout/AppTutorial.jsx @@ -0,0 +1,50 @@ +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"; + +function AppTutorial() { + const {isLoggedIn} = useContext(AppContext) + const [steps, setSteps] = useState([]) + + useEffect(() => { + const tutorialCompleted = getCookie('tutorialCompleted') + if (!tutorialCompleted) { + setSteps(TutorialSteps(isLoggedIn())) + } + }, []) + + return ( + <> + {steps.length > 0 && { + if (equals(res.action, 'reset')) { + setCookie('tutorialCompleted', true) + } + } + } + hideCloseButton={true} + showProgress={true} + showSkipButton={true} + continuous + styles={{ + options: { + arrowColor: '#ffffff', + backgroundColor: '#ffffff', + overlayColor: 'rgba(255,253,253,0.4)', + primaryColor: '#0d6efd', + textColor: 'rgba(0, 0, 0, 0.87)', + width: 900, + zIndex: 1000, + } + }} + />} + + ) +} + + +export default AppTutorial \ No newline at end of file From b1e6a2a674169b44e084f24040cd30d4415715f0 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Wed, 15 Nov 2023 10:36:17 -0500 Subject: [PATCH 07/14] Add cookie option --- src/components/custom/layout/AppTutorial.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/custom/layout/AppTutorial.jsx b/src/components/custom/layout/AppTutorial.jsx index 1539a91f6..02cfaf09f 100644 --- a/src/components/custom/layout/AppTutorial.jsx +++ b/src/components/custom/layout/AppTutorial.jsx @@ -22,7 +22,7 @@ function AppTutorial() { steps={steps} callback={(res) => { if (equals(res.action, 'reset')) { - setCookie('tutorialCompleted', true) + setCookie('tutorialCompleted', true, {sameSite: 'Lax'}) } } } From dfb56bd535ce699035cf8702732ef8bbcb81d99b Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Thu, 16 Nov 2023 11:12:23 -0500 Subject: [PATCH 08/14] Add a key differenciation --- src/components/custom/layout/AppTutorial.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/custom/layout/AppTutorial.jsx b/src/components/custom/layout/AppTutorial.jsx index 02cfaf09f..ce90f6aa5 100644 --- a/src/components/custom/layout/AppTutorial.jsx +++ b/src/components/custom/layout/AppTutorial.jsx @@ -8,9 +8,10 @@ import {equals} from "../js/functions"; function AppTutorial() { const {isLoggedIn} = useContext(AppContext) const [steps, setSteps] = useState([]) + const cookieKey = `tutorialCompleted_${isLoggedIn()}` useEffect(() => { - const tutorialCompleted = getCookie('tutorialCompleted') + const tutorialCompleted = getCookie(cookieKey) if (!tutorialCompleted) { setSteps(TutorialSteps(isLoggedIn())) } @@ -22,7 +23,7 @@ function AppTutorial() { steps={steps} callback={(res) => { if (equals(res.action, 'reset')) { - setCookie('tutorialCompleted', true, {sameSite: 'Lax'}) + setCookie(cookieKey, true, {sameSite: 'Lax'}) } } } From b5625bc514d1ae904ec905af4fd6206da2fc7f9c Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Fri, 17 Nov 2023 09:25:55 -0500 Subject: [PATCH 09/14] Update tutorial style --- src/components/custom/layout/AppTutorial.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/custom/layout/AppTutorial.jsx b/src/components/custom/layout/AppTutorial.jsx index ce90f6aa5..e5356d7fa 100644 --- a/src/components/custom/layout/AppTutorial.jsx +++ b/src/components/custom/layout/AppTutorial.jsx @@ -27,15 +27,14 @@ function AppTutorial() { } } } - hideCloseButton={true} showProgress={true} showSkipButton={true} + locale={{last: 'Finish Tutorial'}} continuous styles={{ options: { arrowColor: '#ffffff', backgroundColor: '#ffffff', - overlayColor: 'rgba(255,253,253,0.4)', primaryColor: '#0d6efd', textColor: 'rgba(0, 0, 0, 0.87)', width: 900, From 3c322705bf6c14d857956d91ff212cb8044ae428 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Fri, 17 Nov 2023 10:58:55 -0500 Subject: [PATCH 10/14] Update styles and functionality of tutorial - #1033 --- src/components/custom/layout/AppNavbar.jsx | 2 -- src/components/custom/layout/AppTutorial.jsx | 21 +++++++++++++++++++ src/components/custom/layout/TutorialSteps.js | 1 + src/pages/search/entities.js | 2 ++ src/sass/components/alert.scss | 6 ++++++ src/sass/general/misc.scss | 5 +++++ 6 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/components/custom/layout/AppNavbar.jsx b/src/components/custom/layout/AppNavbar.jsx index 75e0c13b3..fe9e4be6b 100644 --- a/src/components/custom/layout/AppNavbar.jsx +++ b/src/components/custom/layout/AppNavbar.jsx @@ -5,7 +5,6 @@ import React, {useContext, useState, useEffect} from 'react' import AppContext from '../../../context/AppContext' import {equals} from "../js/functions"; import {getCookie} from "cookies-next"; -import AppTutorial from "./AppTutorial"; const AppNavbar = ({hidden, signoutHidden}) => { const {_t, isLoggedIn, logout, cache, supportedMetadata} = useContext(AppContext) @@ -179,7 +178,6 @@ const AppNavbar = ({hidden, signoutHidden}) => { - ) diff --git a/src/components/custom/layout/AppTutorial.jsx b/src/components/custom/layout/AppTutorial.jsx index e5356d7fa..aa5de50b8 100644 --- a/src/components/custom/layout/AppTutorial.jsx +++ b/src/components/custom/layout/AppTutorial.jsx @@ -4,29 +4,50 @@ 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 ( <> + setShowAlert(false)} dismissible className='text-center alert-hlf mb-4'> + Getting Started +

Welcome to the SenNet Data Portal. Get a quick tour of different sections of the application.

+ handleTutorial()}>Begin Tutorial Tour + {steps.length > 0 && { + console.log(res) if (equals(res.action, 'reset')) { setCookie(cookieKey, true, {sameSite: 'Lax'}) } } } + run={runTutorial} showProgress={true} showSkipButton={true} locale={{last: 'Finish Tutorial'}} diff --git a/src/components/custom/layout/TutorialSteps.js b/src/components/custom/layout/TutorialSteps.js index 58699b076..b8543857a 100644 --- a/src/components/custom/layout/TutorialSteps.js +++ b/src/components/custom/layout/TutorialSteps.js @@ -5,6 +5,7 @@ function TutorialSteps(loggedIn) { let _steps = [ { target: '#search', + disableBeacon: true, title: Search Entities by Free Text (1/{stepsCount}), 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.' }, diff --git a/src/pages/search/entities.js b/src/pages/search/entities.js index 76b5b1ce0..d3bad856d 100644 --- a/src/pages/search/entities.js +++ b/src/pages/search/entities.js @@ -21,6 +21,7 @@ import FacetsContent from "../../components/custom/search/FacetsContent"; import BodyContent from "../../components/custom/search/BodyContent"; import {TableResultsEntities} from "../../components/custom/TableResultsEntities"; import InvalidToken from "../../components/custom/layout/InvalidToken"; +import AppTutorial from "../../components/custom/layout/AppTutorial"; function SearchEntities() { const { @@ -78,6 +79,7 @@ function SearchEntities() { header={ <>
+ (
handleSearchFormSubmit(e, onSubmit)}> diff --git a/src/sass/components/alert.scss b/src/sass/components/alert.scss index 7faecf841..456e82f5f 100644 --- a/src/sass/components/alert.scss +++ b/src/sass/components/alert.scss @@ -1,4 +1,10 @@ .alert { + &-hlf { + @include lg { + width: 60%; + margin: auto; + } + } .alert-body { border-bottom: 1px solid aliceblue; } diff --git a/src/sass/general/misc.scss b/src/sass/general/misc.scss index 23d27ddda..d2c2f5c4a 100644 --- a/src/sass/general/misc.scss +++ b/src/sass/general/misc.scss @@ -98,6 +98,11 @@ p { } } +// Set this so tutorial overlay can be above navbar sticky +.sticky-top.navbar { + z-index: 1000 !important; +} + #__next, #__next > div:not(.sui-layout, .footer-wrapper, .spinner-wrapper) { display:grid; grid-template-rows:auto 1fr auto; From 6e338affb44db16eea610e014d1d3769d7cc5173 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Fri, 17 Nov 2023 13:48:22 -0500 Subject: [PATCH 11/14] Add static positioning while tut is running to avoid sticky follow/overlap --- src/components/custom/layout/AppTutorial.jsx | 3 +++ src/sass/components/navbar.scss | 10 +++++++++- src/sass/general/misc.scss | 5 ----- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/custom/layout/AppTutorial.jsx b/src/components/custom/layout/AppTutorial.jsx index aa5de50b8..37568ab1f 100644 --- a/src/components/custom/layout/AppTutorial.jsx +++ b/src/components/custom/layout/AppTutorial.jsx @@ -6,6 +6,7 @@ import Joyride from "react-joyride"; import {equals} from "../js/functions"; import {Alert} from 'react-bootstrap' import {Binoculars} from "react-bootstrap-icons"; +import $ from 'jquery' function AppTutorial() { const {isLoggedIn} = useContext(AppContext) @@ -25,6 +26,7 @@ function AppTutorial() { const handleTutorial = () => { setShowAlert(false) + $('.sticky-top.navbar').addClass('is-static') // Set a quick timeout to allow the alert to close // first before Joyride calculates the highlight region setTimeout(()=> { @@ -43,6 +45,7 @@ function AppTutorial() { callback={(res) => { console.log(res) if (equals(res.action, 'reset')) { + $('.sticky-top.navbar').removeClass('is-static') setCookie(cookieKey, true, {sameSite: 'Lax'}) } } diff --git a/src/sass/components/navbar.scss b/src/sass/components/navbar.scss index f5f97155f..376fe8269 100644 --- a/src/sass/components/navbar.scss +++ b/src/sass/components/navbar.scss @@ -31,5 +31,13 @@ } } } - } + + +// Set this so tutorial overlay can be above navbar sticky +.sticky-top.navbar { + z-index: 1000 !important; + &.is-static { + position: static !important; + } +} \ No newline at end of file diff --git a/src/sass/general/misc.scss b/src/sass/general/misc.scss index d2c2f5c4a..23d27ddda 100644 --- a/src/sass/general/misc.scss +++ b/src/sass/general/misc.scss @@ -98,11 +98,6 @@ p { } } -// Set this so tutorial overlay can be above navbar sticky -.sticky-top.navbar { - z-index: 1000 !important; -} - #__next, #__next > div:not(.sui-layout, .footer-wrapper, .spinner-wrapper) { display:grid; grid-template-rows:auto 1fr auto; From 715e69a02d9c12ca29968f4d324937334e5aa8b6 Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Fri, 17 Nov 2023 13:53:23 -0500 Subject: [PATCH 12/14] Use offset prop instead --- src/components/custom/layout/AppTutorial.jsx | 4 +--- src/sass/components/navbar.scss | 3 --- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/custom/layout/AppTutorial.jsx b/src/components/custom/layout/AppTutorial.jsx index 37568ab1f..32b5aee17 100644 --- a/src/components/custom/layout/AppTutorial.jsx +++ b/src/components/custom/layout/AppTutorial.jsx @@ -6,7 +6,6 @@ import Joyride from "react-joyride"; import {equals} from "../js/functions"; import {Alert} from 'react-bootstrap' import {Binoculars} from "react-bootstrap-icons"; -import $ from 'jquery' function AppTutorial() { const {isLoggedIn} = useContext(AppContext) @@ -26,7 +25,6 @@ function AppTutorial() { const handleTutorial = () => { setShowAlert(false) - $('.sticky-top.navbar').addClass('is-static') // Set a quick timeout to allow the alert to close // first before Joyride calculates the highlight region setTimeout(()=> { @@ -42,10 +40,10 @@ function AppTutorial() { {steps.length > 0 && { console.log(res) if (equals(res.action, 'reset')) { - $('.sticky-top.navbar').removeClass('is-static') setCookie(cookieKey, true, {sameSite: 'Lax'}) } } diff --git a/src/sass/components/navbar.scss b/src/sass/components/navbar.scss index 376fe8269..b4199306f 100644 --- a/src/sass/components/navbar.scss +++ b/src/sass/components/navbar.scss @@ -37,7 +37,4 @@ // Set this so tutorial overlay can be above navbar sticky .sticky-top.navbar { z-index: 1000 !important; - &.is-static { - position: static !important; - } } \ No newline at end of file From 864630cd49208cf782883602a636806750726c5e Mon Sep 17 00:00:00 2001 From: Lisa-Ann B Date: Fri, 17 Nov 2023 14:53:10 -0500 Subject: [PATCH 13/14] Update selector for sortable column --- src/components/custom/layout/TutorialSteps.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/custom/layout/TutorialSteps.js b/src/components/custom/layout/TutorialSteps.js index b8543857a..7417699d6 100644 --- a/src/components/custom/layout/TutorialSteps.js +++ b/src/components/custom/layout/TutorialSteps.js @@ -15,7 +15,7 @@ function TutorialSteps(loggedIn) { 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: '.sc-eDWCr', + target: '[data-column-id="2"].rdt_TableCol', title: Sort Search Results (3/{stepsCount}), 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.' }, From 618110a6c605e0c371279332263bf1d4ad0e5638 Mon Sep 17 00:00:00 2001 From: maxsibilla Date: Mon, 20 Nov 2023 13:08:14 -0500 Subject: [PATCH 14/14] Updating search-ui --- src/search-ui | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/search-ui b/src/search-ui index 13f5de101..3338d8273 160000 --- a/src/search-ui +++ b/src/search-ui @@ -1 +1 @@ -Subproject commit 13f5de101c68005be8a28ed742b68396b47afaee +Subproject commit 3338d82738ddcf7b0802f613b9fcfba3baa2199a