From 3d00c0af7ef857f55ae592b007745f3cd3bdde7a Mon Sep 17 00:00:00 2001
From: Mason Hu <mason.hu@canonical.com>
Date: Tue, 30 Jan 2024 16:16:09 +0200
Subject: [PATCH] fix: add dynamic routes for editting storage pool and project
 configs

Signed-off-by: Mason Hu <mason.hu@canonical.com>
---
 src/App.tsx                                   | 24 ++++++++++++-----
 src/pages/instances/EditInstance.tsx          | 27 +++++++++----------
 src/pages/networks/EditNetwork.tsx            |  2 +-
 src/pages/profiles/EditProfile.tsx            | 27 +++++++++----------
 src/pages/projects/CreateProject.tsx          |  5 ++--
 src/pages/projects/EditProject.tsx            | 16 ++++++++---
 src/pages/projects/forms/ProjectForm.tsx      | 19 ++++++++-----
 src/pages/storage/CreateStoragePool.tsx       |  9 ++++++-
 src/pages/storage/EditStoragePool.tsx         | 23 +++++++++++++---
 src/pages/storage/StorageUsedBy.tsx           |  2 +-
 src/pages/storage/StorageVolumeDetail.tsx     |  2 +-
 src/pages/storage/StorageVolumeHeader.tsx     |  2 +-
 src/pages/storage/StorageVolumeNameLink.tsx   |  2 +-
 src/pages/storage/forms/StoragePoolForm.tsx   | 12 +++++----
 src/pages/storage/forms/StorageVolumeEdit.tsx |  4 +--
 tests/projects.spec.ts                        |  1 -
 16 files changed, 114 insertions(+), 63 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 95cecfcc5d..ff50c97924 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -124,7 +124,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/instances/detail/:name/:activeTab/:activeSection"
+          path="/ui/project/:project/instances/detail/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<InstanceDetail />} />}
@@ -164,7 +164,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/profiles/detail/:name/:activeTab/:activeSection"
+          path="/ui/project/:project/profiles/detail/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<ProfileDetail />} />}
@@ -204,7 +204,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:name/:activeTab/:activeSection"
+          path="/ui/project/:project/networks/detail/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<NetworkDetail />} />}
@@ -243,6 +243,14 @@ const App: FC = () => {
             />
           }
         />
+        <Route
+          path="/ui/project/:project/configuration/:section"
+          element={
+            <ProtectedRoute
+              outlet={<ProjectLoader outlet={<ProjectConfig />} />}
+            />
+          }
+        />
         <Route
           path="/ui/projects/create"
           element={<ProtectedRoute outlet={<CreateProject />} />}
@@ -288,15 +296,19 @@ const App: FC = () => {
           element={<ProtectedRoute outlet={<StoragePoolDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/:type/:volume"
+          path="/ui/project/:project/storage/detail/:name/:activeTab/:section"
+          element={<ProtectedRoute outlet={<StoragePoolDetail />} />}
+        />
+        <Route
+          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/:type/:volume/:activeTab"
+          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume/:activeTab"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/:type/:volume/:activeTab/:activeSection"
+          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume/:activeTab/:section"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
diff --git a/src/pages/instances/EditInstance.tsx b/src/pages/instances/EditInstance.tsx
index e6f3e91b46..65920c0637 100644
--- a/src/pages/instances/EditInstance.tsx
+++ b/src/pages/instances/EditInstance.tsx
@@ -80,9 +80,9 @@ interface Props {
 const EditInstance: FC<Props> = ({ instance }) => {
   const eventQueue = useEventQueue();
   const notify = useNotify();
-  const { project, activeSection } = useParams<{
+  const { project, section } = useParams<{
     project: string;
-    activeSection?: string;
+    section?: string;
   }>();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -95,7 +95,7 @@ const EditInstance: FC<Props> = ({ instance }) => {
   const updateFormHeight = () => {
     updateMaxHeight("form-contents", "p-bottom-controls");
   };
-  useEffect(updateFormHeight, [notify.notification?.message, activeSection]);
+  useEffect(updateFormHeight, [notify.notification?.message, section]);
   useEventListener("resize", updateFormHeight);
 
   const formik = useFormik<EditInstanceFormValues>({
@@ -166,7 +166,7 @@ const EditInstance: FC<Props> = ({ instance }) => {
     <div className="edit-instance">
       <Form onSubmit={formik.handleSubmit} className="form">
         <InstanceFormMenu
-          active={activeSection ?? slugify(MAIN_CONFIGURATION)}
+          active={section ?? slugify(MAIN_CONFIGURATION)}
           setActive={updateSection}
           isConfigDisabled={false}
           isConfigOpen={isConfigOpen}
@@ -174,38 +174,37 @@ const EditInstance: FC<Props> = ({ instance }) => {
           hasDiskError={hasDiskError(formik)}
           hasNetworkError={hasNetworkError(formik)}
         />
-        <Row className="form-contents" key={activeSection}>
+        <Row className="form-contents" key={section}>
           <Col size={12}>
-            {(activeSection === slugify(MAIN_CONFIGURATION) ||
-              !activeSection) && (
+            {(section === slugify(MAIN_CONFIGURATION) || !section) && (
               <EditInstanceDetails formik={formik} project={project} />
             )}
 
-            {activeSection === slugify(DISK_DEVICES) && (
+            {section === slugify(DISK_DEVICES) && (
               <DiskDeviceForm formik={formik} project={project} />
             )}
 
-            {activeSection === slugify(NETWORK_DEVICES) && (
+            {section === slugify(NETWORK_DEVICES) && (
               <NetworkDevicesForm formik={formik} project={project} />
             )}
 
-            {activeSection === slugify(RESOURCE_LIMITS) && (
+            {section === slugify(RESOURCE_LIMITS) && (
               <ResourceLimitsForm formik={formik} />
             )}
 
-            {activeSection === slugify(SECURITY_POLICIES) && (
+            {section === slugify(SECURITY_POLICIES) && (
               <SecurityPoliciesForm formik={formik} />
             )}
 
-            {activeSection === slugify(SNAPSHOTS) && (
+            {section === slugify(SNAPSHOTS) && (
               <InstanceSnapshotsForm formik={formik} />
             )}
 
-            {activeSection === slugify(CLOUD_INIT) && (
+            {section === slugify(CLOUD_INIT) && (
               <CloudInitForm formik={formik} />
             )}
 
-            {activeSection === slugify(YAML_CONFIGURATION) && (
+            {section === slugify(YAML_CONFIGURATION) && (
               <YamlForm
                 yaml={getYaml()}
                 setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
diff --git a/src/pages/networks/EditNetwork.tsx b/src/pages/networks/EditNetwork.tsx
index 51f6e430ba..f4700fe593 100644
--- a/src/pages/networks/EditNetwork.tsx
+++ b/src/pages/networks/EditNetwork.tsx
@@ -29,7 +29,7 @@ interface Props {
 const EditNetwork: FC<Props> = ({ network, project }) => {
   const navigate = useNavigate();
   const notify = useNotify();
-  const { activeSection: section } = useParams<{ activeSection?: string }>();
+  const { section } = useParams<{ section?: string }>();
   const queryClient = useQueryClient();
   const controllerState = useState<AbortController | null>(null);
 
diff --git a/src/pages/profiles/EditProfile.tsx b/src/pages/profiles/EditProfile.tsx
index c5de47bfba..877677ae6e 100644
--- a/src/pages/profiles/EditProfile.tsx
+++ b/src/pages/profiles/EditProfile.tsx
@@ -75,9 +75,9 @@ interface Props {
 
 const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
   const notify = useNotify();
-  const { project, activeSection } = useParams<{
+  const { project, section } = useParams<{
     project: string;
-    activeSection?: string;
+    section?: string;
   }>();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -90,7 +90,7 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
   const updateFormHeight = () => {
     updateMaxHeight("form-contents", "p-bottom-controls");
   };
-  useEffect(updateFormHeight, [notify.notification?.message, activeSection]);
+  useEffect(updateFormHeight, [notify.notification?.message, section]);
   useEventListener("resize", updateFormHeight);
 
   const ProfileSchema = Yup.object().shape({
@@ -183,45 +183,44 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
       )}
       <Form onSubmit={formik.handleSubmit} className="form">
         <ProfileFormMenu
-          active={activeSection ?? slugify(MAIN_CONFIGURATION)}
+          active={section ?? slugify(MAIN_CONFIGURATION)}
           setActive={updateSection}
           isConfigOpen={isConfigOpen}
           toggleConfigOpen={toggleMenu}
           hasName={true}
           formik={formik}
         />
-        <Row className="form-contents" key={activeSection}>
+        <Row className="form-contents" key={section}>
           <Col size={12}>
-            {(activeSection === slugify(MAIN_CONFIGURATION) ||
-              !activeSection) && (
+            {(section === slugify(MAIN_CONFIGURATION) || !section) && (
               <ProfileDetailsForm formik={formik} isEdit={true} />
             )}
 
-            {activeSection === slugify(DISK_DEVICES) && (
+            {section === slugify(DISK_DEVICES) && (
               <DiskDeviceForm formik={formik} project={project} />
             )}
 
-            {activeSection === slugify(NETWORK_DEVICES) && (
+            {section === slugify(NETWORK_DEVICES) && (
               <NetworkDevicesForm formik={formik} project={project} />
             )}
 
-            {activeSection === slugify(RESOURCE_LIMITS) && (
+            {section === slugify(RESOURCE_LIMITS) && (
               <ResourceLimitsForm formik={formik} />
             )}
 
-            {activeSection === slugify(SECURITY_POLICIES) && (
+            {section === slugify(SECURITY_POLICIES) && (
               <SecurityPoliciesForm formik={formik} />
             )}
 
-            {activeSection === slugify(SNAPSHOTS) && (
+            {section === slugify(SNAPSHOTS) && (
               <InstanceSnapshotsForm formik={formik} />
             )}
 
-            {activeSection === slugify(CLOUD_INIT) && (
+            {section === slugify(CLOUD_INIT) && (
               <CloudInitForm formik={formik} />
             )}
 
-            {activeSection === slugify(YAML_CONFIGURATION) && (
+            {section === slugify(YAML_CONFIGURATION) && (
               <YamlForm
                 yaml={getYaml()}
                 setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
diff --git a/src/pages/projects/CreateProject.tsx b/src/pages/projects/CreateProject.tsx
index 38ccc46305..4e33ac1c8e 100644
--- a/src/pages/projects/CreateProject.tsx
+++ b/src/pages/projects/CreateProject.tsx
@@ -39,6 +39,7 @@ import {
 import ProjectForm from "pages/projects/forms/ProjectForm";
 import BaseLayout from "components/BaseLayout";
 import FormFooterLayout from "components/forms/FormFooterLayout";
+import { slugify } from "util/slugify";
 
 export type ProjectFormValues = ProjectDetailsFormValues &
   ProjectResourceLimitsFormValues &
@@ -52,7 +53,7 @@ const CreateProject: FC = () => {
   const notify = useNotify();
   const queryClient = useQueryClient();
   const controllerState = useState<AbortController | null>(null);
-  const [section, setSection] = useState(PROJECT_DETAILS);
+  const [section, setSection] = useState(slugify(PROJECT_DETAILS));
 
   const ProjectSchema = Yup.object().shape({
     name: Yup.string()
@@ -119,7 +120,7 @@ const CreateProject: FC = () => {
       <ProjectForm
         formik={formik}
         section={section}
-        updateSection={setSection}
+        updateSection={(newSection: string) => setSection(slugify(newSection))}
         isEdit={false}
       />
       <FormFooterLayout>
diff --git a/src/pages/projects/EditProject.tsx b/src/pages/projects/EditProject.tsx
index 4dd86b890f..89680754de 100644
--- a/src/pages/projects/EditProject.tsx
+++ b/src/pages/projects/EditProject.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect } from "react";
 import { Button, useNotify } from "@canonical/react-components";
 import { updateProject } from "api/projects";
 import { useQueryClient } from "@tanstack/react-query";
@@ -29,16 +29,19 @@ import ProjectConfigurationHeader from "pages/projects/ProjectConfigurationHeade
 import { useAuth } from "context/auth";
 import CustomLayout from "components/CustomLayout";
 import FormFooterLayout from "components/forms/FormFooterLayout";
+import { useNavigate, useParams } from "react-router-dom";
+import { slugify } from "util/slugify";
 
 interface Props {
   project: LxdProject;
 }
 
 const EditProject: FC<Props> = ({ project }) => {
+  const navigate = useNavigate();
   const { isRestricted } = useAuth();
   const notify = useNotify();
   const queryClient = useQueryClient();
-  const [section, setSection] = useState(PROJECT_DETAILS);
+  const { section } = useParams<{ section?: string }>();
 
   const updateFormHeight = () => {
     updateMaxHeight("form-contents", "p-bottom-controls");
@@ -100,6 +103,13 @@ const EditProject: FC<Props> = ({ project }) => {
     };
   };
 
+  const setSection = (newSection: string) => {
+    const baseUrl = `/ui/project/${project.name}/configuration`;
+    newSection === PROJECT_DETAILS
+      ? navigate(baseUrl)
+      : navigate(`${baseUrl}/${slugify(newSection)}`);
+  };
+
   return (
     <CustomLayout
       header={<ProjectConfigurationHeader project={project} />}
@@ -108,7 +118,7 @@ const EditProject: FC<Props> = ({ project }) => {
       <ProjectForm
         formik={formik}
         project={project}
-        section={section}
+        section={section ?? slugify(PROJECT_DETAILS)}
         updateSection={setSection}
         isEdit={true}
       />
diff --git a/src/pages/projects/forms/ProjectForm.tsx b/src/pages/projects/forms/ProjectForm.tsx
index 2839458aab..87628c3b4e 100644
--- a/src/pages/projects/forms/ProjectForm.tsx
+++ b/src/pages/projects/forms/ProjectForm.tsx
@@ -18,6 +18,7 @@ import NetworkRestrictionForm from "pages/projects/forms/NetworkRestrictionForm"
 import { FormikProps } from "formik/dist/types";
 import { LxdProject } from "types/project";
 import NotificationRow from "components/NotificationRow";
+import { slugify } from "util/slugify";
 
 interface Props {
   formik: FormikProps<ProjectFormValues>;
@@ -34,7 +35,7 @@ const ProjectForm: FC<Props> = ({
   project,
   isEdit,
 }) => {
-  const [isRestrictionsOpen, setRestrictionsOpen] = useState(false);
+  const [isRestrictionsOpen, setRestrictionsOpen] = useState(true);
 
   const toggleMenu = () => {
     setRestrictionsOpen((old) => !old);
@@ -53,24 +54,28 @@ const ProjectForm: FC<Props> = ({
         <NotificationRow />
         <Row className="form-contents" key={section}>
           <Col size={12}>
-            {section === PROJECT_DETAILS && (
+            {section === slugify(PROJECT_DETAILS) && (
               <ProjectDetailsForm
                 formik={formik}
                 project={project}
                 isEdit={isEdit}
               />
             )}
-            {section === RESOURCE_LIMITS && (
+            {section === slugify(RESOURCE_LIMITS) && (
               <ProjectResourceLimitsForm formik={formik} />
             )}
-            {section === CLUSTERS && <ClusterRestrictionForm formik={formik} />}
-            {section === INSTANCES && (
+            {section === slugify(CLUSTERS) && (
+              <ClusterRestrictionForm formik={formik} />
+            )}
+            {section === slugify(INSTANCES) && (
               <InstanceRestrictionForm formik={formik} />
             )}
-            {section === DEVICE_USAGE && (
+            {section === slugify(DEVICE_USAGE) && (
               <DeviceUsageRestrictionForm formik={formik} />
             )}
-            {section === NETWORKS && <NetworkRestrictionForm formik={formik} />}
+            {section === slugify(NETWORKS) && (
+              <NetworkRestrictionForm formik={formik} />
+            )}
           </Col>
         </Row>
       </div>
diff --git a/src/pages/storage/CreateStoragePool.tsx b/src/pages/storage/CreateStoragePool.tsx
index 53be12622c..d0efcd676c 100644
--- a/src/pages/storage/CreateStoragePool.tsx
+++ b/src/pages/storage/CreateStoragePool.tsx
@@ -17,12 +17,15 @@ import StoragePoolForm, {
 } from "./forms/StoragePoolForm";
 import { useClusterMembers } from "context/useClusterMembers";
 import FormFooterLayout from "components/forms/FormFooterLayout";
+import { slugify } from "util/slugify";
+import { MAIN_CONFIGURATION } from "./forms/StoragePoolFormMenu";
 
 const CreateStoragePool: FC = () => {
   const navigate = useNavigate();
   const notify = useNotify();
   const queryClient = useQueryClient();
   const { project } = useParams<{ project: string }>();
+  const [section, setSection] = useState(slugify(MAIN_CONFIGURATION));
   const controllerState = useState<AbortController | null>(null);
   const { data: clusterMembers = [] } = useClusterMembers();
 
@@ -80,7 +83,11 @@ const CreateStoragePool: FC = () => {
       contentClassName="create-storage-pool"
     >
       <NotificationRow />
-      <StoragePoolForm formik={formik} />
+      <StoragePoolForm
+        formik={formik}
+        section={section}
+        setSection={setSection}
+      />
       <FormFooterLayout>
         <Button
           appearance="base"
diff --git a/src/pages/storage/EditStoragePool.tsx b/src/pages/storage/EditStoragePool.tsx
index df53252ef0..608782c1a8 100644
--- a/src/pages/storage/EditStoragePool.tsx
+++ b/src/pages/storage/EditStoragePool.tsx
@@ -9,7 +9,7 @@ import {
 import SubmitButton from "components/SubmitButton";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { LxdStoragePool } from "types/storage";
 import { queryKeys } from "util/queryKeys";
 import StoragePoolForm, {
@@ -20,15 +20,21 @@ import { checkDuplicateName } from "util/helpers";
 import { useClusterMembers } from "context/useClusterMembers";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { getStoragePoolEditValues } from "util/storagePoolEdit";
+import { MAIN_CONFIGURATION } from "./forms/StoragePoolFormMenu";
+import { slugify } from "util/slugify";
 
 interface Props {
   pool: LxdStoragePool;
 }
 
 const EditStoragePool: FC<Props> = ({ pool }) => {
+  const navigate = useNavigate();
   const notify = useNotify();
   const queryClient = useQueryClient();
-  const { project } = useParams<{ project: string }>();
+  const { project, section } = useParams<{
+    project: string;
+    section?: string;
+  }>();
   const controllerState = useState<AbortController | null>(null);
   const { data: clusterMembers = [] } = useClusterMembers();
 
@@ -82,9 +88,20 @@ const EditStoragePool: FC<Props> = ({ pool }) => {
     },
   });
 
+  const setSection = (newSection: string) => {
+    const baseUrl = `/ui/project/${project}/storage/detail/${pool.name}/configuration`;
+    newSection === MAIN_CONFIGURATION
+      ? navigate(baseUrl)
+      : navigate(`${baseUrl}/${slugify(newSection)}`);
+  };
+
   return (
     <div className="edit-storage-pool">
-      <StoragePoolForm formik={formik} />
+      <StoragePoolForm
+        formik={formik}
+        section={section ?? slugify(MAIN_CONFIGURATION)}
+        setSection={setSection}
+      />
       <FormFooterLayout>
         {formik.values.readOnly ? (
           <Button
diff --git a/src/pages/storage/StorageUsedBy.tsx b/src/pages/storage/StorageUsedBy.tsx
index 37a7a3b222..420d327867 100644
--- a/src/pages/storage/StorageUsedBy.tsx
+++ b/src/pages/storage/StorageUsedBy.tsx
@@ -104,7 +104,7 @@ const StorageUsedBy: FC<Props> = ({ storage, project }) => {
               items={data[CUSTOM].map((item) => (
                 <div key={`${item.name}-${item.project}`}>
                   <Link
-                    to={`/ui/project/${item.project}/storage/detail/${storage.name}/custom/${item.name}`}
+                    to={`/ui/project/${item.project}/storage/detail/${storage.name}/volumes/custom/${item.name}`}
                   >
                     {item.name}
                   </Link>
diff --git a/src/pages/storage/StorageVolumeDetail.tsx b/src/pages/storage/StorageVolumeDetail.tsx
index e34d9ce4aa..9f222cf77e 100644
--- a/src/pages/storage/StorageVolumeDetail.tsx
+++ b/src/pages/storage/StorageVolumeDetail.tsx
@@ -72,7 +72,7 @@ const StorageVolumeDetail: FC = () => {
         <TabLinks
           tabs={tabs}
           activeTab={activeTab}
-          tabUrl={`/ui/project/${project}/storage/detail/${pool}/${type}/${volume.name}`}
+          tabUrl={`/ui/project/${project}/storage/detail/${pool}/volumes/${type}/${volume.name}`}
         />
         <NotificationRow />
         {!activeTab && (
diff --git a/src/pages/storage/StorageVolumeHeader.tsx b/src/pages/storage/StorageVolumeHeader.tsx
index 3ff487e853..a8fbdc265c 100644
--- a/src/pages/storage/StorageVolumeHeader.tsx
+++ b/src/pages/storage/StorageVolumeHeader.tsx
@@ -48,7 +48,7 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project }) => {
       renameStorageVolume(project, volume, values.name)
         .then(() => {
           navigate(
-            `/ui/project/${project}/storage/detail/${volume.pool}/${volume.type}/${values.name}`,
+            `/ui/project/${project}/storage/detail/${volume.pool}/volumes/${volume.type}/${values.name}`,
             notify.queue(success("Storage volume renamed.")),
           );
           void formik.setFieldValue("isRenaming", false);
diff --git a/src/pages/storage/StorageVolumeNameLink.tsx b/src/pages/storage/StorageVolumeNameLink.tsx
index 1558475600..08872ae415 100644
--- a/src/pages/storage/StorageVolumeNameLink.tsx
+++ b/src/pages/storage/StorageVolumeNameLink.tsx
@@ -17,7 +17,7 @@ export const generateLinkForVolumeDetail = (args: {
   project: string;
 }) => {
   const { volume, project } = args;
-  let path = `storage/detail/${volume.pool}/${volume.type}/${volume.name}`;
+  let path = `storage/detail/${volume.pool}/volumes/${volume.type}/${volume.name}`;
 
   // NOTE: name of a volume created from an instance is exactly the same as the instance name
   if (volume.type === "container" || volume.type === "virtual-machine") {
diff --git a/src/pages/storage/forms/StoragePoolForm.tsx b/src/pages/storage/forms/StoragePoolForm.tsx
index 89a9bae1f7..21014f4b95 100644
--- a/src/pages/storage/forms/StoragePoolForm.tsx
+++ b/src/pages/storage/forms/StoragePoolForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect } from "react";
 import { Form, Input, Row, Col, useNotify } from "@canonical/react-components";
 import { FormikProps } from "formik";
 import StoragePoolFormMain from "./StoragePoolFormMain";
@@ -12,6 +12,7 @@ import { LxdStoragePool } from "types/storage";
 import { btrfsDriver, cephDriver } from "util/storageOptions";
 import { getPoolKey } from "util/storagePool";
 import StoragePoolFormCeph from "./StoragePoolFormCeph";
+import { slugify } from "util/slugify";
 
 export interface StoragePoolFormValues {
   isCreating: boolean;
@@ -31,6 +32,8 @@ export interface StoragePoolFormValues {
 
 interface Props {
   formik: FormikProps<StoragePoolFormValues>;
+  section: string;
+  setSection: (section: string) => void;
 }
 
 export const storagePoolFormToPayload = (
@@ -65,8 +68,7 @@ export const storagePoolFormToPayload = (
   };
 };
 
-const StoragePoolForm: FC<Props> = ({ formik }) => {
-  const [section, setSection] = useState(MAIN_CONFIGURATION);
+const StoragePoolForm: FC<Props> = ({ formik, section, setSection }) => {
   const notify = useNotify();
 
   const updateFormHeight = () => {
@@ -86,10 +88,10 @@ const StoragePoolForm: FC<Props> = ({ formik }) => {
       />
       <Row className="form-contents" key={section}>
         <Col size={12}>
-          {section === MAIN_CONFIGURATION && (
+          {section === slugify(MAIN_CONFIGURATION) && (
             <StoragePoolFormMain formik={formik} />
           )}
-          {section === CEPH_CONFIGURATION && (
+          {section === slugify(CEPH_CONFIGURATION) && (
             <StoragePoolFormCeph formik={formik} />
           )}
         </Col>
diff --git a/src/pages/storage/forms/StorageVolumeEdit.tsx b/src/pages/storage/forms/StorageVolumeEdit.tsx
index b15f97f83a..01ad3eb51d 100644
--- a/src/pages/storage/forms/StorageVolumeEdit.tsx
+++ b/src/pages/storage/forms/StorageVolumeEdit.tsx
@@ -25,7 +25,7 @@ const StorageVolumeEdit: FC<Props> = ({ volume }) => {
   const navigate = useNavigate();
   const notify = useNotify();
   const queryClient = useQueryClient();
-  const { activeSection: section } = useParams<{ activeSection: string }>();
+  const { section } = useParams<{ section: string }>();
   const { project } = useParams<{ project: string }>();
 
   if (!project) {
@@ -69,7 +69,7 @@ const StorageVolumeEdit: FC<Props> = ({ volume }) => {
   });
 
   const setSection = (newSection: string) => {
-    const baseUrl = `/ui/project/${project}/storage/detail/${volume.pool}/${volume.type}/${volume.name}/configuration`;
+    const baseUrl = `/ui/project/${project}/storage/detail/${volume.pool}/volumes/${volume.type}/${volume.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
       : navigate(`${baseUrl}/${slugify(newSection)}`);
diff --git a/tests/projects.spec.ts b/tests/projects.spec.ts
index 1c8829096a..48bda9e0d7 100644
--- a/tests/projects.spec.ts
+++ b/tests/projects.spec.ts
@@ -52,7 +52,6 @@ test("project edit configuration", async ({ page }) => {
   await setInput(page, "Max sum of memory", "Enter number", "7");
   await setInput(page, "Max sum of processes", "Enter number", "8");
 
-  await page.getByText("Restrictions").click();
   await page.getByText("Clusters").click();
   await setInput(page, "Cluster groups targeting", "Enter value", "9");
   await setOption(page, "Direct cluster targeting", "allow");