fix: add dynamic routes for editting storage pool and project configs

Signed-off-by: Mason Hu <[email protected]>
canonical · Feb 1, 2024 · 3d00c0a · 3d00c0a
1 parent e38803b
commit 3d00c0a
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 63 deletions.
diff --git 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
@@ -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,46 +166,45 @@ 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}
           toggleConfigOpen={toggleMenu}
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"