fix: ensure modal for conditional rules starts with option selected (#…

…4178) * add initial rule * handle edit * Updates default text --------- Co-authored-by: Peter Thiessen <peter.thiessen@cds-snc.ca> Co-authored-by: Pete <107579368+thiessenp-cds@users.noreply.github.com>
cds-snc · Aug 21, 2024 · afcee50 · afcee50
1 parent 6849198
commit afcee50
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 14 deletions.
diff --git a/...(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/components/ModalRules.tsx b/...(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/components/ModalRules.tsx
@@ -22,10 +22,14 @@ export const ModalRules = ({
   item,
   modalRef,
   formId,
+  focusedOption,
+  mode,
 }: {
   item: FormElementWithIndex;
   modalRef?: React.RefObject<HTMLDivElement> | undefined;
   formId: string;
+  focusedOption: string | null;
+  mode: "add" | "edit";
 }) => {
   const {
     elements,
@@ -55,6 +59,11 @@ export const ModalRules = ({
     itemId: item.id,
   });
 
+  // Add a new rule for the focused option
+  if (mode === "add" && focusedOption) {
+    initialChoiceRules.push({ elementId: String(item.id), choiceId: focusedOption });
+  }
+
   const hasRules = (initialChoiceRules && initialChoiceRules?.length > 0) ?? false;
 
   useEffect(() => {

diff --git a/...ms)/[locale]/(form administration)/form-builder/[id]/edit/components/elements/Options.tsx b/...ms)/[locale]/(form administration)/form-builder/[id]/edit/components/elements/Options.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { ReactElement, useRef } from "react";
+import React, { ReactElement, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "@i18n/client";
 
@@ -73,10 +73,11 @@ export const Options = ({
   const parentIndex = elements.findIndex((element) => element.id === item.id);
   const element = elements.find((element) => element.id === item.id);
 
-  const [focusedOption, setFocusedOption] = React.useState<string | null>(null);
   const modalContainer = useRef<HTMLDivElement>(null);
-
-  const timeout = React.useRef<number | null>(null); // add interval to add timeout to be cleared
+  const [focusedOption, setFocusedOption] = useState<string | null>(null);
+  // Track the mode of the modal for adding or editing rules
+  const [modalMode, setModalMode] = useState<"add" | "edit">("add");
+  const timeout = useRef<number | null>(null); // add interval to add timeout to be cleared
 
   if (!element?.properties) {
     return null;
@@ -116,7 +117,8 @@ export const Options = ({
           }
         />
         <ConditionalIndicatorOption
-          handleOpen={() => {
+          handleOpen={(mode) => {
+            setModalMode(mode);
             // @ts-expect-error -- div is using imperative handle
             modalContainer.current?.showModal();
           }}
@@ -137,7 +139,13 @@ export const Options = ({
         </div>
       </div>
       <div>
-        <ModalRules modalRef={modalContainer} item={item} formId={formId} />
+        <ModalRules
+          mode={modalMode}
+          focusedOption={focusedOption}
+          modalRef={modalContainer}
+          item={item}
+          formId={formId}
+        />
       </div>
     </div>
   );

diff --git a/...dministration)/form-builder/components/shared/conditionals/ConditionalIndicatorOption.tsx b/...dministration)/form-builder/components/shared/conditionals/ConditionalIndicatorOption.tsx
@@ -18,7 +18,7 @@ export const ConditionalIndicatorOption = ({
   id: string;
   elements: FormElement[];
   isFocused: boolean;
-  handleOpen: () => void;
+  handleOpen: (mode: "add" | "edit") => void;
 }) => {
   const { t } = useTranslation("form-builder");
   const questions = getElementsUsingChoiceId({
@@ -49,7 +49,7 @@ export const ConditionalIndicatorOption = ({
               className="cursor-pointer underline"
               id={rulesTitleId}
               onClick={() => {
-                handleOpen && handleOpen();
+                handleOpen && handleOpen("add");
               }}
             >
               {t("addConditionalRules.addCustomRules")}
@@ -91,7 +91,7 @@ export const ConditionalIndicatorOption = ({
               <Button
                 theme="link"
                 onClick={() => {
-                  handleOpen();
+                  handleOpen("edit");
                 }}
               >
                 {t("addConditionalRules.editCustomRules")}

diff --git a/...(form administration)/form-builder/components/shared/conditionals/ConditionalSelector.tsx b/...(form administration)/form-builder/components/shared/conditionals/ConditionalSelector.tsx
@@ -153,10 +153,10 @@ export const ConditionalSelector = ({
         return result;
       });
 
-    // Prepend empty option
-    items.unshift({ label: "", value: "" });
+    // Prepend empty option with default text
+    items.unshift({ label: t("addConditionalRules.selectQuestion"), value: "" });
     return items;
-  }, [elements, itemId, language, localizeField]);
+  }, [elements, itemId, language, localizeField, t]);
 
   const choiceParentQuestion = choiceId?.split(".")[0] || null;
 

diff --git a/i18n/translations/en/form-builder.json b/i18n/translations/en/form-builder.json
@@ -869,7 +869,8 @@
     "removeRule": "Remove",
     "addOther": "Add \"Other\" option",
     "other": "Other ",
-    "show": "Show:"
+    "show": "Show:",
+    "selectQuestion": "Select a question"
   },
   "saved": "Saved",
   "opensInNewTab": "opens in a new tab",

diff --git a/i18n/translations/fr/form-builder.json b/i18n/translations/fr/form-builder.json
@@ -869,7 +869,8 @@
     "removeRule": "Supprimer",
     "addOther": "Ajouter l'option « Autre »",
     "other": "Autre ",
-    "show": "Afficher :"
+    "show": "Afficher :",
+    "selectQuestion": "Sélectionner une question"
   },
   "saved": "Enregistré",
   "opensInNewTab": "ouvre un nouvel onglet",