[New #323] Added overlay with tooltip to disabled navigation steps

kbss-cvut · Apr 17, 2024 · 220e9c0 · 220e9c0
1 parent bc00dfb
commit 220e9c0
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 39 deletions.
diff --git a/src/components/HelpIcon.jsx b/src/components/HelpIcon.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { Tooltip } from "react-bootstrap";
 import { QuestionCircle } from "../styles/icons";
 import IconOverlay from "./IconOverlay.jsx";
 

diff --git a/src/components/IconOverlay.jsx b/src/components/IconOverlay.jsx
@@ -13,10 +13,12 @@ const IconOverlay = (props) => {
     } else setOverlayPlacement("right");
   };
 
-  const tooltip = (
+  const tooltip = props.show ? (
     <Tooltip className="tooltip-content" id={props.id}>
       {props.tooltipContent}
     </Tooltip>
+  ) : (
+    <span />
   );
 
   return (
@@ -39,12 +41,14 @@ IconOverlay.propTypes = {
   id: PropTypes.string.isRequired,
   overlayPlacement: PropTypes.string,
   absolutePosition: PropTypes.bool,
+  show: PropTypes.bool,
 };
 
 IconOverlay.defaultProps = {
   iconClassContainer: "",
   iconClass: "",
   absolutePosition: true,
+  show: true,
 };
 
 export default IconOverlay;
diff --git a/src/components/wizard/HorizontalWizardNav.jsx b/src/components/wizard/HorizontalWizardNav.jsx
@@ -6,6 +6,7 @@ import FormUtils from "../../util/FormUtils";
 import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import Question from "../Question";
 import classNames from "classnames";
+import IconOverlay from "../IconOverlay.jsx";
 
 const HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
@@ -18,24 +19,31 @@ const HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {
         onSelect={(key) => onNavigate(parseInt(key))}
       >
         {steps.map((step, index) => (
-          <NavItem key={"nav" + index} id={"wizard-nav-" + index}>
-            <NavLink
-              eventKey={index}
-              active={index === currentStep ? "active" : ""}
-              hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
-              className={classNames([
-                options.debugMode && !FormUtils.isRelevant(step)
-                  ? "show-irrelevant"
-                  : Question.getEmphasizedClass(step),
-                "wizard-nav",
-              ])}
-            >
-              {JsonLdUtils.getLocalized(
-                step[JsonLdUtils.RDFS_LABEL],
-                options.intl
-              )}
-            </NavLink>
-          </NavItem>
+          <IconOverlay
+            id="step-disabled"
+            tooltipContent="Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
+            show={!options.enableWizardStepSkip}
+          >
+            <NavItem key={"nav" + index} id={"wizard-nav-" + index}>
+              <NavLink
+                eventKey={index}
+                active={index === currentStep ? "active" : ""}
+                hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
+                disabled={!options.enableWizardStepSkip}
+                className={classNames([
+                  options.debugMode && !FormUtils.isRelevant(step)
+                    ? "show-irrelevant"
+                    : Question.getEmphasizedClass(step),
+                  "wizard-nav",
+                ])}
+              >
+                {JsonLdUtils.getLocalized(
+                  step[JsonLdUtils.RDFS_LABEL],
+                  options.intl
+                )}
+              </NavLink>
+            </NavItem>
+          </IconOverlay>
         ))}
       </Nav>
     </Card.Header>

diff --git a/src/components/wizard/VerticalWizardNav.jsx b/src/components/wizard/VerticalWizardNav.jsx
@@ -6,6 +6,7 @@ import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import FormUtils from "../../util/FormUtils";
 import Question from "../Question";
 import classNames from "classnames";
+import IconOverlay from "../IconOverlay.jsx";
 
 const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
@@ -14,26 +15,33 @@ const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
     <div className="wizard-nav col-2 p-0">
       <ListGroup>
         {steps.map((step, index) => (
-          <ListGroupItem
-            hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
-            key={"nav" + index}
-            onClick={() => onNavigate(index)}
-            id={"wizard-nav-" + index}
-            action={true}
-            active={index === currentStep ? "active" : ""}
-            variant={"default"}
-            className={classNames([
-              options.debugMode && !FormUtils.isRelevant(step)
-                ? "show-irrelevant"
-                : Question.getEmphasizedClass(step),
-              "wizard-nav",
-            ])}
+          <IconOverlay
+            id="step-disabled"
+            tooltipContent="Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
+            show={!options.enableWizardStepSkip}
           >
-            {JsonLdUtils.getLocalized(
-              step[JsonLdUtils.RDFS_LABEL],
-              options.intl
-            )}
-          </ListGroupItem>
+            <ListGroupItem
+              hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
+              key={"nav" + index}
+              onClick={() => onNavigate(index)}
+              id={"wizard-nav-" + index}
+              action={true}
+              active={index === currentStep ? "active" : ""}
+              disabled={!options.enableWizardStepSkip}
+              variant={"default"}
+              className={classNames([
+                options.debugMode && !FormUtils.isRelevant(step)
+                  ? "show-irrelevant"
+                  : Question.getEmphasizedClass(step),
+                "wizard-nav",
+              ])}
+            >
+              {JsonLdUtils.getLocalized(
+                step[JsonLdUtils.RDFS_LABEL],
+                options.intl
+              )}
+            </ListGroupItem>
+          </IconOverlay>
         ))}
       </ListGroup>
     </div>