chore: Add temporary fix for AutoFlow issues (#3886)

add temporary fix for autoflow issues
cds-snc · Jun 24, 2024 · ed4c282 · ed4c282
1 parent e2eefcd
commit ed4c282
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/...e]/(form administration)/form-builder/components/shared/right-panel/treeview/TreeView.tsx b/...e]/(form administration)/form-builder/components/shared/right-panel/treeview/TreeView.tsx
@@ -35,6 +35,7 @@ import { KeyboardNavTip } from "./KeyboardNavTip";
 import { Button } from "@clientComponents/globals";
 import { Language } from "@lib/types/form-builder-types";
 import { isTitleElementType } from "./util/itemType";
+import { useAutoFlowIfNoCustomRules } from "@lib/hooks/useAutoFlowAll";
 
 export interface TreeDataProviderProps {
   children?: ReactElement;
@@ -90,6 +91,8 @@ const ControlledTree: ForwardRefRenderFunction<unknown, TreeDataProviderProps> =
   const [selectedItems, setSelectedItems] = useState<TreeItemIndex[]>([]);
 
   const { getTitle } = useElementTitle();
+  const { autoFlowAll } = useAutoFlowIfNoCustomRules();
+
   const newSectionText = t("groups.newSection");
 
   const addSection = () => {
@@ -241,7 +244,7 @@ const ControlledTree: ForwardRefRenderFunction<unknown, TreeDataProviderProps> =
 
           setSelectedItems([item.index]);
         }}
-        onDrop={async (items: TreeItem[], target: DraggingPosition) =>
+        onDrop={async (items: TreeItem[], target: DraggingPosition) => {
           handleOnDrop(
             items,
             target,
@@ -252,9 +255,10 @@ const ControlledTree: ForwardRefRenderFunction<unknown, TreeDataProviderProps> =
             expandedItems,
             getTreeData,
             getConfirmMovePromise,
-            setOpenConfirmMoveDialog
-          )
-        }
+            setOpenConfirmMoveDialog,
+            autoFlowAll
+          );
+        }}
         onFocusItem={(item) => {
           setFocusedItem(item.index);
           const parent = findParentGroup(getTreeData(), String(item.index));

diff --git a/...inistration)/form-builder/components/shared/right-panel/treeview/handlers/handleOnDrop.ts b/...inistration)/form-builder/components/shared/right-panel/treeview/handlers/handleOnDrop.ts
@@ -114,7 +114,8 @@ export const handleOnDrop = async (
   expandedItems: TreeItemIndex[],
   getTreeData: () => TreeItems,
   getPromise: () => Promise<boolean>,
-  setOpenDialog: (value: boolean) => void
+  setOpenDialog: (value: boolean) => void,
+  autoFlowAll: () => void
 ) => {
   // Current state of the tree in Groups format
   let currentGroups = getGroups() as GroupsType;
@@ -178,6 +179,9 @@ export const handleOnDrop = async (
     replaceGroups(newGroups);
     setSelectedItems(selectedItems);
 
+    // Temporary solution: If no custom rules are present, autoFlow all items
+    autoFlowAll();
+
     return;
   }
 

diff --git a/...administration)/form-builder/components/shared/right-panel/treeview/util/setNextAction.ts b/...administration)/form-builder/components/shared/right-panel/treeview/util/setNextAction.ts
@@ -27,6 +27,15 @@ export const autoFlowAllNextActions = (formGroups: GroupsType, force: boolean =
   return formGroups;
 };
 
+/**
+ * Check if any of the groups have custom rules set.
+ * @param items
+ * @returns boolean
+ */
+export const groupsHaveCustomRules = (items: Group[]) => {
+  return items.some((item) => Object.hasOwn(item, "autoFlow") && !item.autoFlow);
+};
+
 /**
  * Autoflow: set the nextAction for both the provided groupId and the previous group
  * in the object to maintain a linear flow.

diff --git a/lib/hooks/useAutoFlowAll.tsx b/lib/hooks/useAutoFlowAll.tsx
@@ -0,0 +1,25 @@
+import { autoFlowAllNextActions } from "@formBuilder/components/shared/right-panel/treeview/util/setNextAction";
+import { useGroupStore } from "@formBuilder/components/shared/right-panel/treeview/store/useGroupStore";
+import { GroupsType } from "@lib/formContext";
+import { groupsHaveCustomRules } from "@formBuilder/components/shared/right-panel/treeview/util/setNextAction";
+
+export const useAutoFlowIfNoCustomRules = () => {
+  const { getGroups, replaceGroups } = useGroupStore((s) => {
+    return {
+      getGroups: s.getGroups,
+      replaceGroups: s.replaceGroups,
+    };
+  });
+
+  const autoFlowAll = () => {
+    const groups = getGroups() as GroupsType;
+    const hasCustomRules = groupsHaveCustomRules(Object.values(groups));
+
+    if (!hasCustomRules) {
+      const newGroups = autoFlowAllNextActions({ ...groups }, true);
+      replaceGroups(newGroups);
+    }
+  };
+
+  return { autoFlowAll };
+};