fix: toggle into, policy and cofirmation open from TreeView (#5511)

* handle toggle open

Author: timarney

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/components/EditWithGroups.tsx

@@ -143,6 +143,7 @@ export const EditWithGroups = ({ id, locale }: { id: string; locale: string }) =
       {/* Form Intro + Title Panel */}
       {groupId === "start" && (
         <RichTextLocked
+          id="intro"
           maxLength={20000}
           hydrated={hasHydrated}
           className="rounded-t-lg"
@@ -182,6 +183,7 @@ export const EditWithGroups = ({ id, locale }: { id: string; locale: string }) =
       {/* Privacy Panel */}
       {groupId === "start" && (
         <RichTextLocked
+          id="policy"
           maxLength={50000}
           beforeContent={<PrivacyDescriptionBefore />}
           summaryText={t("groups.privacy.summary")}
@@ -211,6 +213,7 @@ export const EditWithGroups = ({ id, locale }: { id: string; locale: string }) =
       {/* Confirmation*/}
       {groupId === "end" && (
         <RichTextLocked
+          id={"end"}
           maxLength={20000}
           summaryText={t("groups.confirmation.summary")}
           beforeContent={

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/components/elements/RichTextLocked.tsx

@@ -11,6 +11,7 @@ import { cn } from "@lib/utils";
 import Skeleton from "react-loading-skeleton";
 
 export const RichTextLocked = ({
+  id,
   beforeContent = null,
   summaryText,
   detailsText,
@@ -22,6 +23,7 @@ export const RichTextLocked = ({
   hydrated,
   maxLength,
 }: {
+  id: string;
   beforeContent?: React.ReactElement | null;
   summaryText: string;
   detailsText?: React.ReactElement;
@@ -58,7 +60,7 @@ export const RichTextLocked = ({
         <EssentialBadge />
         {beforeContent && beforeContent}
         <div className="flex">{children}</div>
-        <details>
+        <details id={id}>
           <summary className="cursor-pointer text-sm font-bold underline">{summaryText}</summary>
           {detailsText && detailsText}
 

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/Item.tsx

@@ -138,6 +138,30 @@ export const Item = ({
                 isSectionElement && sectionElementClasses,
                 isFormElement && formElementClasses
               )}
+              {...(isLocked && {
+                onClick: () => {
+                  if (
+                    item.index === "intro" ||
+                    item.index === "policy" ||
+                    item.index === "end" ||
+                    item.index === "confirmation"
+                  ) {
+                    let index = item.index;
+                    if (index === "confirmation") {
+                      index = "end";
+                    }
+
+                    // add small delay to allow the click to be registered
+                    setTimeout(() => {
+                      const el = document.getElementById(index);
+                      if (el) {
+                        (el as HTMLDetailsElement).open = true;
+                        el.scrollIntoView({ behavior: "smooth", block: "center" });
+                      }
+                    }, 200);
+                  }
+                },
+              })}
               {...(allowRename && {
                 onDoubleClick: () => {
                   context.startRenamingItem();