Merge branch 'fix/force-redraw' of github.com:cds-snc/platform-forms-…

…client into fix/force-redraw
cds-snc · Jun 13, 2024 · b3f174f · b3f174f
2 parents 823ff37 + 383a44a
commit b3f174f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
diff --git a/...]/(form administration)/form-builder/[id]/edit/logic/components/flow/FlowWithProvider.tsx b/...]/(form administration)/form-builder/[id]/edit/logic/components/flow/FlowWithProvider.tsx
@@ -7,6 +7,7 @@ import React, {
   ForwardRefRenderFunction,
   useEffect,
   useState,
+  useRef,
 } from "react";
 
 import ReactFlow, {
@@ -17,6 +18,7 @@ import ReactFlow, {
   useEdgesState,
   useReactFlow,
   Background,
+  ReactFlowInstance,
 } from "reactflow";
 
 import "reactflow/dist/style.css";
@@ -41,7 +43,6 @@ const Loading = () => (
 
 export interface FlowProps {
   children?: ReactElement;
-  updateEdges?: () => void;
   redraw?: () => void;
 }
 
@@ -50,7 +51,9 @@ const Flow: ForwardRefRenderFunction<unknown, FlowProps> = ({ children }, ref) =
   const [nodes, , onNodesChange] = useNodesState(flowNodes);
   const [, setEdges, onEdgesChange] = useEdgesState(flowEdges);
   const { fitView } = useReactFlow();
-  const [redraw, setRedraw] = useState(false);
+  const reset = useRef(false);
+  const [redrawing, setRedrawing] = useState(false);
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>();
 
   // temp fix see: https://github.com/xyflow/xyflow/issues/3243
   const store = useStoreApi();
@@ -63,6 +66,19 @@ const Flow: ForwardRefRenderFunction<unknown, FlowProps> = ({ children }, ref) =
   }
 
   useEffect(() => {
+    let flowZoom = 0.5;
+    if (rfInstance && reset.current === false) {
+      const obj = rfInstance.toObject();
+      if (obj.viewport.zoom) {
+        flowZoom = obj.viewport.zoom;
+      }
+    }
+
+    if (flowZoom > 0.5) {
+      return;
+    }
+
+    // Only fit view if the user has not zoomed in
     fitView();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fitView, nodes]);
@@ -75,16 +91,27 @@ const Flow: ForwardRefRenderFunction<unknown, FlowProps> = ({ children }, ref) =
       setEdges(edges);
     },
     redraw: () => {
-      setRedraw(true);
-      runLayout();
+      reset.current = true;
+      const { edges } = getData();
+      setEdges(edges);
+      setRedrawing(true);
+      const reLayout = async () => {
+        await runLayout();
+        setRedrawing(false);
+      };
+
       // Add a small delay to visually indicate the redraw
       setTimeout(() => {
-        setRedraw(false);
-      }, 300);
+        reLayout();
+      }, 200);
+
+      setTimeout(() => {
+        reset.current = false;
+      }, 2000);
     },
   }));
 
-  if (redraw) {
+  if (redrawing) {
     return <Loading />;
   }
 
@@ -102,6 +129,10 @@ const Flow: ForwardRefRenderFunction<unknown, FlowProps> = ({ children }, ref) =
         edges={flowEdges}
         onEdgesChange={onEdgesChange}
         defaultEdgeOptions={edgeOptions}
+        onInit={(instance) => {
+          // Keep a reference to the instance so we can check zoom level for fitView.
+          setRfInstance(instance);
+        }}
       >
         <Controls showInteractive={false} showZoom={true} showFitView={false} />
         <Background />

diff --git a/...administration)/form-builder/[id]/edit/logic/components/flow/provider/FlowRefProvider.tsx b/...administration)/form-builder/[id]/edit/logic/components/flow/provider/FlowRefProvider.tsx
@@ -1,7 +1,6 @@
 import React, { createContext, useContext, useRef, MutableRefObject } from "react";
 
 export type FlowRefHandle = {
-  updateEdges: () => void;
   redraw: () => void;
 };
 

diff --git a/...rms)/[locale]/(form administration)/form-builder/[id]/responses/[statusFilter]/actions.ts b/...rms)/[locale]/(form administration)/form-builder/[id]/responses/[statusFilter]/actions.ts
@@ -17,7 +17,7 @@ import {
 } from "@lib/responseDownloadFormats/types";
 import { getFullTemplateByID } from "@lib/templates";
 import { FormElementTypes, VaultStatus } from "@lib/types";
-import { isResponseId, isUUID } from "@lib/validation/validation";
+import { isResponseId } from "@lib/validation/validation";
 import { listAllSubmissions, retrieveSubmissions, updateLastDownloadedBy } from "@lib/vault";
 import { transform as csvTransform } from "@lib/responseDownloadFormats/csv";
 import { transform as htmlAggregatedTransform } from "@lib/responseDownloadFormats/html-aggregated";
@@ -65,7 +65,7 @@ export const fetchSubmissions = async ({
     throw new Error("User is not authenticated");
   }
 
-  if (formId === "0000" || !isUUID(formId)) {
+  if (formId === "0000") {
     return {
       submissions: [],
       lastEvaluatedKey: null,

diff --git a/... administration)/form-builder/components/shared/right-panel/logic/MultiActionSelector.tsx b/... administration)/form-builder/components/shared/right-panel/logic/MultiActionSelector.tsx
@@ -242,7 +242,6 @@ export const MultiActionSelector = ({
               const parent = group?.index;
               parent && setGroupNextAction(parent as string, nextActions);
               setChangeKey(String(new Date().getTime()));
-              flow.current?.updateEdges();
               flow.current?.redraw();
               toast.success(t("logic.actionsSaved"));
             }}

diff --git a/...m administration)/form-builder/components/shared/right-panel/logic/SingleActionSelect.tsx b/...m administration)/form-builder/components/shared/right-panel/logic/SingleActionSelect.tsx
@@ -58,7 +58,6 @@ export const SingleActionSelect = ({
               currentGroup && setGroupNextAction(currentGroup, nextActionId);
             }
 
-            flow.current?.updateEdges();
             flow.current?.redraw();
 
             toast.success(t("logic.actionsSaved"));