fix: add toggle right panel from logic view nodes (#3984)

fix toggle right panel
cds-snc · Jul 10, 2024 · 0c748bf · 0c748bf
1 parent e36e533
commit 0c748bf
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/...[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/GroupNode.tsx b/...[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/GroupNode.tsx
@@ -10,6 +10,8 @@ import { useElementTitle, ElementProperties } from "@lib/hooks/useElementTitle";
 import { useTranslation } from "@i18n/client";
 import { FormElementTypes } from "@lib/types";
 
+import { useTreeRef } from "@formBuilder/components/shared/right-panel/treeview/provider/TreeRefProvider";
+
 const OptionRuleSvg = ({ title }: { title?: string }) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={34} height={34} fill="none">
@@ -47,12 +49,14 @@ export const GroupNode = (node: NodeProps) => {
   const { t } = useTranslation("form-builder");
 
   const { getTitle } = useElementTitle();
+  const { togglePanel } = useTreeRef();
 
   const handleClick = {
     onClick: () => {
       setId(node.id);
       // Reset selected element id
       setSelectedElementId(0);
+      togglePanel && togglePanel(true);
     },
   };
 
@@ -155,6 +159,7 @@ export const GroupNode = (node: NodeProps) => {
                 evt.stopPropagation();
                 setId(node.id);
                 setSelectedElementId(Number(child.index));
+                togglePanel && togglePanel(true);
               }}
               className={cn(
                 nodeClassName,

diff --git a/.../[locale]/(form administration)/form-builder/components/shared/right-panel/RightPanel.tsx b/.../[locale]/(form administration)/form-builder/components/shared/right-panel/RightPanel.tsx
@@ -60,7 +60,6 @@ const TabButton = ({
 };
 
 export const RightPanel = ({ id, lang }: { id: string; lang: Language }) => {
-  const [open, setOpen] = useState(false);
   const router = useRouter();
   const { t, i18n } = useTranslation("form-builder");
 
@@ -73,7 +72,7 @@ export const RightPanel = ({ id, lang }: { id: string; lang: Language }) => {
   }
 
   const { activePathname } = useActivePathname();
-  const { treeView } = useTreeRef();
+  const { treeView, togglePanel, open } = useTreeRef();
   const getElement = useGroupStore((s) => s.getElement);
   const hasHydrated = useRehydrate();
 
@@ -82,10 +81,13 @@ export const RightPanel = ({ id, lang }: { id: string; lang: Language }) => {
   const item = (selectedElementId && getElement(selectedElementId)) || null;
 
   useEffect(() => {
+    // Note we only want to toggle the panel open if the tree has hydrated
+    // And only once
     if (hasHydrated) {
-      setOpen(true);
+      togglePanel && togglePanel(true);
     }
-  }, [hasHydrated, setOpen]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasHydrated]);
 
   // Update once logic tab / screen  is implemented
   let selectedIndex = 0;
@@ -136,7 +138,7 @@ export const RightPanel = ({ id, lang }: { id: string; lang: Language }) => {
           theme="link"
           className="mr-8 mt-5 whitespace-nowrap [&_svg]:focus:fill-white"
           onClick={() => {
-            setOpen(true);
+            togglePanel && togglePanel(true);
           }}
         >
           <>
@@ -170,7 +172,7 @@ export const RightPanel = ({ id, lang }: { id: string; lang: Language }) => {
                         <button
                           type="button"
                           className="relative rounded-md bg-white text-slate-500 hover:text-slate-600 focus:ring-2 focus:ring-indigo-500"
-                          onClick={() => setOpen(false)}
+                          onClick={() => togglePanel && togglePanel(false)}
                         >
                           <span className="sr-only">{t("rightPanel.closePanel")}</span>
                           <RoundCloseIcon />

diff --git a/...tration)/form-builder/components/shared/right-panel/treeview/provider/TreeRefProvider.tsx b/...tration)/form-builder/components/shared/right-panel/treeview/provider/TreeRefProvider.tsx
@@ -1,11 +1,13 @@
-import React, { createContext, useContext, useRef, RefObject } from "react";
+import React, { createContext, useContext, useRef, RefObject, useState } from "react";
 import { TreeEnvironmentRef, TreeRef } from "react-complex-tree";
 import { TreeDataProviderProps } from "../types";
 
 export type treeContextType = {
   treeView: RefObject<TreeDataProviderProps> | null;
   environment: RefObject<TreeEnvironmentRef> | null;
   tree: RefObject<TreeRef> | null;
+  open: boolean;
+  togglePanel?: (state: boolean) => void;
 };
 
 // Create a context for the tree
@@ -16,12 +18,20 @@ export const TreeRefProvider: React.FC<{ children: React.ReactNode }> = ({ child
   const treeView = useRef<TreeDataProviderProps>(null);
   const environment = useRef<TreeEnvironmentRef>(null);
   const tree = useRef<TreeRef>(null);
+  const [open, setOpen] = useState(false);
+
+  const togglePanel = (state: boolean) => {
+    setOpen(state);
+  };
+
   return (
     <TreeRefContext.Provider
       value={{
         treeView: treeView,
         environment: environment,
         tree: tree,
+        open: open,
+        togglePanel: togglePanel,
       }}
     >
       {children}