chore(urls) use shorter urls, without /detail/ in path WD-9320

Signed-off-by: David Edler <[email protected]>
canonical · Mar 1, 2024 · 95914a7 · 95914a7
1 parent d98199f
commit 95914a7
Show file tree

Hide file tree

Showing 43 changed files with 109 additions and 111 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -113,23 +113,23 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/instances/detail/:name"
+          path="/ui/project/:project/instance/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<InstanceDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/instances/detail/:name/:activeTab"
+          path="/ui/project/:project/instance/:name/:activeTab"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<InstanceDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/instances/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/instance/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<InstanceDetail />} />}
@@ -153,23 +153,23 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/profiles/detail/:name"
+          path="/ui/project/:project/profile/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<ProfileDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/profiles/detail/:name/:activeTab"
+          path="/ui/project/:project/profile/:name/:activeTab"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<ProfileDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/profiles/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/profile/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<ProfileDetail />} />}
@@ -193,39 +193,39 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:name"
+          path="/ui/project/:project/network/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<NetworkDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:name/:activeTab"
+          path="/ui/project/:project/network/:name/:activeTab"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<NetworkDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/network/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<NetworkDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:network/forwards/create"
+          path="/ui/project/:project/network/:network/forwards/create"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<CreateNetworkForward />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:network/forwards/:forwardAddress/edit"
+          path="/ui/project/:project/network/:network/forwards/:forwardAddress/edit"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<EditNetworkForward />} />}
@@ -289,31 +289,31 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/storage/detail/:name"
+          path="/ui/project/:project/storage/pool/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<StoragePoolDetail />} />}
             />
           }
         />
         <Route
-          path="/ui/project/:project/storage/detail/:name/:activeTab"
+          path="/ui/project/:project/storage/pool/:name/:activeTab"
           element={<ProtectedRoute outlet={<StoragePoolDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/storage/pool/:name/:activeTab/:section"
           element={<ProtectedRoute outlet={<StoragePoolDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume"
+          path="/ui/project/:project/storage/pool/:pool/volumes/:type/:volume"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume/:activeTab"
+          path="/ui/project/:project/storage/pool/:pool/volumes/:type/:volume/:activeTab"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume/:activeTab/:section"
+          path="/ui/project/:project/storage/pool/:pool/volumes/:type/:volume/:activeTab/:section"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
@@ -329,15 +329,15 @@ const App: FC = () => {
           element={<ProtectedRoute outlet={<CreateClusterGroup />} />}
         />
         <Route
-          path="/ui/cluster/groups/detail/:group"
+          path="/ui/cluster/group/:group"
           element={
             <ProtectedRoute
               outlet={<ClusterGroupLoader outlet={<ClusterList />} />}
             />
           }
         />
         <Route
-          path="/ui/cluster/groups/detail/:group/edit"
+          path="/ui/cluster/group/:group/edit"
           element={
             <ProtectedRoute
               outlet={<ClusterGroupLoader outlet={<EditClusterGroup />} />}

diff --git a/src/components/NavLink.tsx b/src/components/NavLink.tsx
@@ -0,0 +1,29 @@
+import { FC, ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+interface Props {
+  to: string;
+  title: string;
+  children: ReactNode;
+}
+
+const NavLink: FC<Props> = ({ to, title, children }) => {
+  const location = useLocation();
+
+  // ignore last char to consider /instances and /instance as active
+  const matchPart = to.substring(0, to.length - 1);
+  const isActive = location.pathname.startsWith(matchPart);
+
+  return (
+    <Link
+      title={title}
+      to={to}
+      aria-current={isActive ? "page" : undefined}
+      className="p-side-navigation__link"
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default NavLink;
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -1,5 +1,4 @@
 import { FC, MouseEvent, useEffect, useState } from "react";
-import { NavLink } from "react-router-dom";
 import { Button, Icon } from "@canonical/react-components";
 import { useAuth } from "context/auth";
 import classnames from "classnames";
@@ -9,6 +8,7 @@ import { isWidthBelow, logout } from "util/helpers";
 import { useProject } from "context/project";
 import { useMenuCollapsed } from "context/menuCollapsed";
 import { useDocs } from "context/useDocs";
+import NavLink from "components/NavLink";
 
 const isSmallScreen = () => isWidthBelow(620);
 
@@ -92,7 +92,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/instances`}
                           title={`Instances (${projectName})`}
                         >
@@ -105,7 +104,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/profiles`}
                           title={`Profiles (${projectName})`}
                         >
@@ -118,7 +116,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/networks`}
                           title={`Networks (${projectName})`}
                         >
@@ -131,7 +128,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/storage`}
                           title={`Storage (${projectName})`}
                         >
@@ -144,7 +140,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/images`}
                           title={`Images (${projectName})`}
                         >
@@ -157,7 +152,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/configuration`}
                           title={`Configuration (${projectName})`}
                         >
@@ -170,11 +164,7 @@ const Navigation: FC = () => {
                       </li>
                       <hr className="is-dark navigation-hr" />
                       <li className="p-side-navigation__item">
-                        <NavLink
-                          className="p-side-navigation__link"
-                          to="/ui/cluster"
-                          title="Cluster"
-                        >
+                        <NavLink to="/ui/cluster" title="Cluster">
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="machines"
@@ -184,7 +174,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/operations`}
                           title={`Operations (${projectName})`}
                         >
@@ -197,11 +186,7 @@ const Navigation: FC = () => {
                       </li>
                       {!isRestricted && (
                         <li className="p-side-navigation__item">
-                          <NavLink
-                            className="p-side-navigation__link"
-                            to="/ui/warnings"
-                            title="Warnings"
-                          >
+                          <NavLink to="/ui/warnings" title="Warnings">
                             <Icon
                               className="is-light p-side-navigation__icon"
                               name="warning-grey"
@@ -211,11 +196,7 @@ const Navigation: FC = () => {
                         </li>
                       )}
                       <li className="p-side-navigation__item">
-                        <NavLink
-                          className="p-side-navigation__link"
-                          to="/ui/settings"
-                          title="Settings"
-                        >
+                        <NavLink to="/ui/settings" title="Settings">
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="settings"
@@ -243,11 +224,7 @@ const Navigation: FC = () => {
                   {!isAuthenticated && (
                     <>
                       <li className="p-side-navigation__item">
-                        <NavLink
-                          className="p-side-navigation__link"
-                          to="/ui/login"
-                          title="Login"
-                        >
+                        <NavLink to="/ui/login" title="Login">
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="profile"

diff --git a/src/pages/cluster/ClusterGroupForm.tsx b/src/pages/cluster/ClusterGroupForm.tsx
@@ -84,7 +84,7 @@ const ClusterGroupForm: FC<Props> = ({ group }) => {
       })
         .then(() => {
           const verb = group ? "saved" : "created";
-          navigate(`/ui/cluster/groups/detail/${values.name}`);
+          navigate(`/ui/cluster/group/${values.name}`);
           toastNotify.success(`Cluster group ${values.name} ${verb}.`);
         })
         .catch((e: Error) => {

diff --git a/src/pages/cluster/ClusterGroupSelectorList.tsx b/src/pages/cluster/ClusterGroupSelectorList.tsx
@@ -28,7 +28,7 @@ const ClusterGroupSelectorList: FC<Props> = ({ clusterGroups }) => {
             to={
               group.name === allClusterGroups
                 ? "/ui/cluster"
-                : `/ui/cluster/groups/detail/${group.name}`
+                : `/ui/cluster/group/${group.name}`
             }
             className="p-contextual-menu__link link"
           >

diff --git a/src/pages/cluster/actions/EditClusterGroupBtn.tsx b/src/pages/cluster/actions/EditClusterGroupBtn.tsx
@@ -12,7 +12,7 @@ const EditClusterGroupBtn: FC<Props> = ({ group }) => {
   return (
     <Button
       className="u-no-margin--bottom"
-      onClick={() => navigate(`/ui/cluster/groups/detail/${group}/edit`)}
+      onClick={() => navigate(`/ui/cluster/group/${group}/edit`)}
     >
       Edit group
     </Button>

diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx
@@ -200,7 +200,7 @@ const CreateInstance: FC = () => {
     isIsoImage: boolean,
   ) => {
     const instanceLink = (
-      <Link to={`/ui/project/${project}/instances/detail/${instanceName}`}>
+      <Link to={`/ui/project/${project}/instance/${instanceName}`}>
         {instanceName}
       </Link>
     );
@@ -218,7 +218,7 @@ const CreateInstance: FC = () => {
         );
       });
     } else {
-      const consoleUrl = `/ui/project/${project}/instances/detail/${instanceName}/console`;
+      const consoleUrl = `/ui/project/${project}/instance/${instanceName}/console`;
       const message = isIsoImage && (
         <>
           <p>Continue the installation process from its console.</p>

diff --git a/src/pages/instances/EditInstance.tsx b/src/pages/instances/EditInstance.tsx
@@ -146,7 +146,7 @@ const EditInstance: FC<Props> = ({ instance }) => {
       void formik.setFieldValue("yaml", undefined);
     }
 
-    const baseUrl = `/ui/project/${project}/instances/detail/${instance.name}/configuration`;
+    const baseUrl = `/ui/project/${project}/instance/${instance.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
       : navigate(`${baseUrl}/${slugify(newSection)}`);

diff --git a/src/pages/instances/FileRow.tsx b/src/pages/instances/FileRow.tsx
@@ -14,7 +14,7 @@ interface FileRowProps {
 
 const FileRow: FC<FileRowProps> = ({ instance, path }) => {
   const fileName = path.split("/").at(-1) ?? "";
-  const fileUrl = `/ui/project/${instance.project}/instances/detail/${instance.name}/logs/?file=${fileName}`;
+  const fileUrl = `/ui/project/${instance.project}/instance/${instance.name}/logs/?file=${fileName}`;
   const [isOpen, setOpen] = useState(getUrlParam("file") === fileName);
 
   const {

diff --git a/src/pages/instances/InstanceDetail.tsx b/src/pages/instances/InstanceDetail.tsx
@@ -72,7 +72,7 @@ const InstanceDetail: FC = () => {
           <TabLinks
             tabs={tabs}
             activeTab={activeTab}
-            tabUrl={`/ui/project/${project}/instances/detail/${name}`}
+            tabUrl={`/ui/project/${project}/instance/${name}`}
           />
 
           {!activeTab && (

diff --git a/src/pages/instances/InstanceDetailHeader.tsx b/src/pages/instances/InstanceDetailHeader.tsx
@@ -66,7 +66,7 @@ const InstanceDetailHeader: FC<Props> = ({ name, instance, project }) => {
         eventQueue.set(
           operation.metadata.id,
           () => {
-            navigate(`/ui/project/${project}/instances/detail/${values.name}`);
+            navigate(`/ui/project/${project}/instance/${values.name}`);
             toastNotify.success(
               <>
                 Instance <strong>{getInstanceName(operation.metadata)}</strong>{" "}