Merge pull request #332 from kbss-cvut/enable-wizard-forward

Changed default behavior to allow skip of wizard step
kbss-cvut · Apr 19, 2024 · b76add4 · b76add4
2 parents 6216dd6 + f4fd276
commit b76add4
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 45 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -130,7 +130,6 @@ const options = {
   modalView: false,
   horizontalWizardNav: false,
   wizardStepButtons: true,
-  enableForwardSkip: true,
   startingStep: 1,
   debugMode: false,
   users: [

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,9 +6,12 @@ import FormUtils from "../../util/FormUtils";
 import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import Question from "../Question";
 import classNames from "classnames";
+import IconOverlay from "../IconOverlay.jsx";
+import { useIntl } from "react-intl";
 
 const HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
+  const intl = useIntl();
 
   return (
     <Card.Header>
@@ -18,24 +21,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={intl.formatMessage({ id: "wizard.nav.tooltip" })}
+            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,34 +6,44 @@ import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import FormUtils from "../../util/FormUtils";
 import Question from "../Question";
 import classNames from "classnames";
+import IconOverlay from "../IconOverlay.jsx";
+import { useIntl } from "react-intl";
 
 const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
+  const intl = useIntl();
 
   return (
     <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={intl.formatMessage({ id: "wizard.nav.tooltip" })}
+            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>

diff --git a/src/components/wizard/Wizard.jsx b/src/components/wizard/Wizard.jsx
@@ -93,7 +93,7 @@ const Wizard = () => {
     if (
       stepIndex > currentStep &&
       !stepData[stepIndex].visited &&
-      !options.enableForwardSkip
+      !options.enableWizardStepSkip
     ) {
       return;
     }

diff --git a/src/contexts/ConfigurationContext.js b/src/contexts/ConfigurationContext.js
@@ -28,7 +28,7 @@ const defaultProps = {
     modalProps: {},
     horizontalWizardNav: true,
     wizardStepButtons: true,
-    enableForwardSkip: false,
+    enableWizardStepSkip: true,
     startingStep: 0,
   },
 };

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
@@ -1,3 +1,4 @@
 {
-  "comment.form.placeholder": "Sem napište své komentáře (Ctrl+Enter pro potvrzení)"
+  "comment.form.placeholder": "Sem napište své komentáře (Ctrl+Enter pro potvrzení)",
+  "wizard.nav.tooltip": "Navigace na této kartě je zakázána, aby nedošlo k přehlédnutí důležitých otázek. K navigaci na tuto kartu použijte tlačítka související s formulářem."
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1,3 +1,4 @@
 {
-  "comment.form.placeholder": "Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)"
+  "comment.form.placeholder": "Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)",
+  "wizard.nav.tooltip": "Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
 }
diff --git a/src/stories/SForms.stories.tsx b/src/stories/SForms.stories.tsx
@@ -65,7 +65,6 @@ const Template: ComponentStory<typeof SForms> = (
     modalProps,
     horizontalWizardNav: horizontalNavBar,
     wizardStepButtons: true,
-    enableForwardSkip: true,
     ...getP("startingQuestionId", "layout-options-65"),
     startingStep: 1,
     debugMode: debugMode,