Unfold ancestor items

front/components/vaults/VaultSideBarMenu.tsx

@@ -87,16 +87,18 @@ const VaultMenuItem = ({
 }) => {
   const router = useRouter();
 
-  const [isExpanded, setIsExpanded] = useState(false);
+  const vaultPath = `/w/${owner.sId}/data-sources/vaults/${vault.sId}`;
+  const isAncestorToCurrentPage = router.asPath.includes(vaultPath);
+
+  // Unfold the vault if it's an ancestor of the current page.
+  const [isExpanded, setIsExpanded] = useState(isAncestorToCurrentPage);
 
   const { vaultInfo, isVaultInfoLoading } = useVaultInfo({
     workspaceId: owner.sId,
     vaultId: vault.sId,
     disabled: !isExpanded,
   });
 
-  const vaultPath = `/w/${owner.sId}/data-sources/vaults/${vault.sId}`;
-
   return (
     <Tree.Item
       label={vault.kind === "global" ? "Company Data" : vault.name}
@@ -205,7 +207,12 @@ const VaultCategoryItem = ({
   category: string;
 }) => {
   const router = useRouter();
-  const [isExpanded, setIsExpanded] = useState(false);
+
+  const vaultCategoryPath = `/w/${owner.sId}/data-sources/vaults/${vault.sId}/categories/${category}`;
+  const isAncestorToCurrentPage = router.asPath.includes(vaultCategoryPath);
+
+  // Unfold the vault's category if it's an ancestor of the current page.
+  const [isExpanded, setIsExpanded] = useState(isAncestorToCurrentPage);
 
   const categoryDetails = DATA_SOURCE_OR_VIEW_SUB_ITEMS[category];
   const { isVaultDataSourceOrViewsLoading, vaultDataSourceOrViews } =
@@ -217,8 +224,6 @@ const VaultCategoryItem = ({
       disabled: !isExpanded,
     });
 
-  const vaultCategoryPath = `/w/${owner.sId}/data-sources/vaults/${vault.sId}/categories/${category}`;
-
   return (
     <Tree.Item
       label={categoryDetails.label}