From e1b18a67b56f8ddbadab7655a16caca20cae5358 Mon Sep 17 00:00:00 2001
From: gearnode <bryan@frimin.fr>
Date: Tue, 25 Mar 2025 12:10:04 +0100
Subject: [PATCH] Keep clicked category expend when go back

Signed-off-by: gearnode <bryan@frimin.fr>
---
 .../frameworks/FrameworkView.tsx              | 71 ++++++++++++++++---
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/apps/console/src/pages/organizations/frameworks/FrameworkView.tsx b/apps/console/src/pages/organizations/frameworks/FrameworkView.tsx
index 58bd4005d..308dfdb2e 100644
--- a/apps/console/src/pages/organizations/frameworks/FrameworkView.tsx
+++ b/apps/console/src/pages/organizations/frameworks/FrameworkView.tsx
@@ -77,7 +77,38 @@ function FrameworkViewContent({
   const navigate = useNavigate();
   const { organizationId } = useParams();
 
-  const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
+  // Monitor URL hash for changes and update state accordingly
+  const [hashValue, setHashValue] = useState(window.location.hash);
+
+  // Get the active category from the hash (used when returning from a control)
+  const hashCategory = hashValue.substring(1)
+    ? decodeURIComponent(hashValue.substring(1))
+    : "";
+
+  // Keep track of manually expanded categories
+  const [expandedCategories, setExpandedCategories] = useState<string[]>(() => {
+    return hashCategory ? [hashCategory] : [];
+  });
+
+  // When hash changes, update expanded categories to include the hash category
+  useEffect(() => {
+    if (hashCategory && !expandedCategories.includes(hashCategory)) {
+      setExpandedCategories((prev) => [...prev, hashCategory]);
+    }
+  }, [hashCategory, expandedCategories]);
+
+  // Listen for hash changes (like when using back button)
+  useEffect(() => {
+    const handleHashChange = () => {
+      setHashValue(window.location.hash);
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, []);
 
   // Map control state to status for the new design
   const mapStateToStatus = (state?: string): string => {
@@ -132,12 +163,15 @@ function FrameworkViewContent({
     return acc;
   }, {} as Record<string, Control[]>);
 
+  // Function to toggle a category's expanded state - now supports multiple expanded categories
   const toggleCategory = (categoryId: string) => {
-    setExpandedCategories((prev) =>
-      prev.includes(categoryId)
-        ? prev.filter((id) => id !== categoryId)
-        : [...prev, categoryId]
-    );
+    setExpandedCategories((prev) => {
+      if (prev.includes(categoryId)) {
+        return prev.filter((id) => id !== categoryId);
+      } else {
+        return [...prev, categoryId];
+      }
+    });
   };
 
   const categories: Category[] = Object.entries(controlsByCategory)
@@ -372,9 +406,30 @@ function FrameworkViewContent({
                                 className="hover:bg-muted/50 cursor-pointer"
                                 onClick={() => {
                                   if (control?.id) {
-                                    navigate(
-                                      `/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`
+                                    // Always store just this category in the hash
+                                    // This is what will be expanded when returning
+                                    const encoded = encodeURIComponent(
+                                      category.id
                                     );
+                                    window.location.hash = encoded;
+                                    setHashValue("#" + encoded);
+
+                                    // Make sure this category is expanded in the local state as well
+                                    if (
+                                      !expandedCategories.includes(category.id)
+                                    ) {
+                                      setExpandedCategories((prev) => [
+                                        ...prev,
+                                        category.id,
+                                      ]);
+                                    }
+
+                                    // Use a small timeout to ensure the hash change is processed by the browser
+                                    setTimeout(() => {
+                                      navigate(
+                                        `/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`
+                                      );
+                                    }, 100);
                                   }
                                 }}
                               >