Preserve full sub-path when switching projects

src/pages/storage/Storage.tsx

@@ -12,6 +12,8 @@ import HelpLink from "components/HelpLink";
 
 const TABS: string[] = ["Pools", "Volumes", "Cached images", "Custom ISOs"];
 
+export const STORAGE_TAB_PATHS = TABS.map((tab) => slugify(tab));
+
 const Storage: FC = () => {
   const navigate = useNavigate();
   const notify = useNotify();
@@ -24,12 +26,12 @@ const Storage: FC = () => {
     return <>Missing project</>;
   }
 
-  const handleTabChange = (newTab: string) => {
+  const handleTabChange = (newTabPath: string) => {
     notify.clear();
-    if (newTab === slugify(TABS[0])) {
+    if (newTabPath === STORAGE_TAB_PATHS[0]) {
       navigate(`/ui/project/${project}/storage`);
     } else {
-      navigate(`/ui/project/${project}/storage/${newTab}`);
+      navigate(`/ui/project/${project}/storage/${newTabPath}`);
     }
   };
 
@@ -47,13 +49,16 @@ const Storage: FC = () => {
       <NotificationRow />
       <Row>
         <Tabs
-          links={TABS.map((tab) => ({
-            label: tab,
-            id: slugify(tab),
-            active:
-              slugify(tab) === activeTab || (tab === TABS[0] && !activeTab),
-            onClick: () => handleTabChange(slugify(tab)),
-          }))}
+          links={TABS.map((tab, index) => {
+            const tabPath = STORAGE_TAB_PATHS[index];
+
+            return {
+              label: tab,
+              id: tabPath,
+              active: tabPath === activeTab || (tab === TABS[0] && !activeTab),
+              onClick: () => handleTabChange(tabPath),
+            };
+          })}
         />
 
         {!activeTab && (

src/util/projects.tsx

@@ -1,3 +1,4 @@
+import { STORAGE_TAB_PATHS } from "pages/storage/Storage";
 import { LxdProject } from "types/project";
 
 export const projectSubpages = [
@@ -12,9 +13,18 @@ export const projectSubpages = [
 
 export const getSubpageFromUrl = (url: string) => {
   const parts = url.split("/");
-  if (projectSubpages.includes(parts[4])) {
-    return parts[4];
+
+  const mainSubpage = parts[4];
+  const tabSubpage = parts[5];
+
+  if (mainSubpage === "storage" && STORAGE_TAB_PATHS.includes(tabSubpage)) {
+    return `${mainSubpage}/${tabSubpage}`;
   }
+
+  if (projectSubpages.includes(mainSubpage)) {
+    return mainSubpage;
+  }
+
   return undefined;
 };