Cluster Orch routing updates (#129)

Author: satya-in

apps/cluster-orch/src/components/organism/ClusterNodesTable/ClusterNodesTable.tsx

@@ -12,7 +12,9 @@ import {
   TableColumn,
 } from "@orch-ui/components";
 import {
+  getInfraPath,
   getTrustedComputeCompatibility,
+  hostDetailsRoute,
   hostProviderStatusToString,
   nodeStatusToIconStatus,
   nodeStatusToText,
@@ -131,11 +133,19 @@ const ClusterNodesTable = ({
       Header: "Actions",
       textAlign: "center",
       padding: "0",
-      accessor: (node) => (
-        <Link to={`/infrastructure/host/${node.resourceId}`}>
-          <Icon icon="clipboard-forward" /> View Host Details
-        </Link>
-      ),
+      accessor: (node: ClusterNode) => {
+        return (
+          node.resourceId && (
+            <Link
+              to={getInfraPath(hostDetailsRoute, {
+                id: node.resourceId,
+              })}
+            >
+              <Icon icon="clipboard-forward" /> View Host Details
+            </Link>
+          )
+        );
+      },
     },
   ];
 

apps/cluster-orch/src/components/organism/ClusterSummary/ClusterSummary.tsx

@@ -5,7 +5,12 @@
 
 import { cm } from "@orch-ui/apis";
 import { Flex, SquareSpinner, StatusIcon } from "@orch-ui/components";
-import { clusterStatusToIconStatus, SharedStorage } from "@orch-ui/utils";
+import {
+  clusterDetailRoute,
+  clusterStatusToIconStatus,
+  getInfraPath,
+  SharedStorage,
+} from "@orch-ui/utils";
 import { Icon, MessageBanner } from "@spark-design/react";
 import { MessageBannerAlertState } from "@spark-design/tokens";
 import { Link } from "react-router-dom";
@@ -56,9 +61,16 @@ const ClusterSummary = ({ nodeId, site }: ClusterSummaryProps) => {
         <div data-cy="site">{site}</div>
         <b>Action</b>
         <div>
-          <Link data-cy="link" to={`/infrastructure/cluster/${data.name}`}>
-            <Icon icon="clipboard-forward" /> View Cluster Details
-          </Link>
+          {data.name && (
+            <Link
+              data-cy="link"
+              to={getInfraPath(clusterDetailRoute, {
+                clusterName: data.name,
+              })}
+            >
+              <Icon icon="clipboard-forward" /> View Cluster Details
+            </Link>
+          )}
         </div>
       </Flex>
     </div>

apps/cluster-orch/src/components/organism/DeauthorizeNodeConfirmationDialog/DeauthorizeNodeConfirmationDialog.tsx

@@ -5,12 +5,16 @@
 
 import { cm } from "@orch-ui/apis";
 import { ConfirmationDialog } from "@orch-ui/components";
-import { InternalError, SharedStorage } from "@orch-ui/utils";
+import {
+  hostsRoute,
+  InternalError,
+  SharedStorage,
+  useInfraNavigate,
+} from "@orch-ui/utils";
 import { TextField } from "@spark-design/react";
 import { ButtonVariant, InputSize, ModalSize } from "@spark-design/tokens";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
 import "./DeauthorizeNodeConfirmationDialog.scss";
 
 const dataCy = "deauthorizeNodeConfirmationDialog";
@@ -51,7 +55,7 @@ const DeauthorizeNodeConfirmationDialog = ({
 }: DeauthorizeNodeConfirmationDialogProps) => {
   const cy = { "data-cy": dataCy };
   const projectName = SharedStorage.project?.name ?? "";
-  const navigate = useNavigate();
+  const navigate = useInfraNavigate();
 
   const [removeHostNodeFromCluster] =
     cm.usePutV2ProjectsByProjectNameClustersAndNameNodesMutation();
@@ -93,7 +97,7 @@ const DeauthorizeNodeConfirmationDialog = ({
         })
         .then(() => {
           setErrorInfo();
-          navigate("/infrastructure/hosts", { relative: "path" });
+          navigate(hostsRoute);
         });
     } catch (e) {
       setErrorInfo(e);

apps/cluster-orch/src/components/organism/cluster/ClusterList.tsx

@@ -23,16 +23,22 @@ import {
 } from "@orch-ui/components";
 import {
   API_INTERVAL,
+  clusterCreateRoute,
+  clusterDetailRoute,
+  clusterEditRoute,
+  clusterManagementRoute,
   clusterToStatuses,
   copyToClipboard,
   Direction,
   downloadFile,
   getFilter,
+  getInfraPath,
   getOrder,
   getTrustedComputeCluster,
   Operator,
   parseError,
   SharedStorage,
+  useInfraNavigate,
 } from "@orch-ui/utils";
 import { Icon, Toast, ToastProps } from "@spark-design/react";
 import {
@@ -43,15 +49,15 @@ import {
   ToastVisibility,
 } from "@spark-design/tokens";
 import { useState } from "react";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import "./ClusterList.scss";
 import ClusterNodesWrapper from "./ClusterNodesWrapper/ClusterNodesWrapper";
 
 interface ClusterListProps {
   hasPermission?: boolean;
 }
 export default function ClusterList({ hasPermission }: ClusterListProps) {
-  const navigate = useNavigate();
+  const navigate = useInfraNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const searchTerm = searchParams.get("searchTerm") ?? undefined;
   const [clusterToDelete, setClusterToDelete] = useState<string>();
@@ -150,14 +156,16 @@ export default function ClusterList({ hasPermission }: ClusterListProps) {
       {
         displayText: "View Details",
         onSelect: () => {
-          navigate(`../cluster/${cluster.name}`);
+          if (cluster.name)
+            navigate(clusterDetailRoute, { clusterName: cluster.name });
         },
       },
       {
         displayText: "Edit",
         disable: !hasPermission,
         onSelect: () => {
-          navigate(`../cluster/${cluster.name}/edit`);
+          if (cluster.name)
+            navigate(clusterEditRoute, { clusterName: cluster.name });
         },
       },
       {
@@ -195,7 +203,7 @@ export default function ClusterList({ hasPermission }: ClusterListProps) {
           state: ToastState.Success,
           visibility: ToastVisibility.Show,
         }));
-        navigate("/infrastructure/clusters");
+        navigate(clusterManagementRoute);
       })
       .catch((e) => {
         setToast((p) => ({
@@ -214,10 +222,17 @@ export default function ClusterList({ hasPermission }: ClusterListProps) {
       accessor: (item) => item.name,
       apiName: "name",
       Cell: (table: { row: { original: cm.ClusterInfoRead } }) => {
+        const clusterName = table.row.original.name;
         return (
-          <Link to={`../cluster/${table.row.original.name}`}>
-            {table.row.original.name}
-          </Link>
+          clusterName && (
+            <Link
+              to={getInfraPath(clusterDetailRoute, {
+                clusterName: clusterName,
+              })}
+            >
+              {table.row.original.name}
+            </Link>
+          )
         );
       },
     },
@@ -295,7 +310,7 @@ export default function ClusterList({ hasPermission }: ClusterListProps) {
           title="Create a cluster using one or more configured hosts."
           actions={[
             {
-              action: () => navigate("create"),
+              action: () => navigate(clusterCreateRoute),
               name: "Create Cluster",
               disable: !hasPermission,
             },
@@ -372,7 +387,7 @@ export default function ClusterList({ hasPermission }: ClusterListProps) {
             text="Create Cluster"
             disabled={!hasPermission}
             onPress={() => {
-              navigate("/infrastructure/clusters/create");
+              navigate(clusterCreateRoute);
             }}
             tooltip={
               hasPermission

apps/cluster-orch/src/components/organism/clusterDetail/DeploymentInstancesTable/DeploymentInstancesTable.tsx

@@ -21,9 +21,11 @@ import {
   admStatusToText,
   admStatusToUIStatus,
   API_INTERVAL,
+  deploymentClusterDetailRoute,
   Direction,
   getOrder,
   SharedStorage,
+  useAppOrchNavigate,
 } from "@orch-ui/utils";
 import { Hyperlink, Text } from "@spark-design/react";
 import {
@@ -32,7 +34,7 @@ import {
   TextSize,
 } from "@spark-design/tokens";
 import { useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import "./DeploymentInstancesTable.scss";
 
 const dataCy = "deploymentInstancesTable";
@@ -44,7 +46,7 @@ const DeploymentInstancesTable = ({
   clusterId,
 }: DeploymentInstancesTableProps) => {
   const cy = { "data-cy": dataCy };
-  const navigate = useNavigate();
+  const navigate = useAppOrchNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const [showErrorBanner, setShowErrorBanner] = useState<boolean>(false);
 
@@ -57,13 +59,16 @@ const DeploymentInstancesTable = ({
         row: { original: adm.DeploymentInstancesClusterRead };
       }) => {
         const row = table.row.original;
-        const route = `/applications/deployment/${row.deploymentUid}/cluster/${clusterId}`;
         return (
           <Hyperlink
             data-cy="link"
             variant={HyperlinkVariant.Primary}
             onPress={() => {
-              if (row.deploymentUid) navigate(route);
+              if (row.deploymentUid && clusterId)
+                navigate(deploymentClusterDetailRoute, {
+                  deplId: row.deploymentUid,
+                  name: clusterId,
+                });
               else setShowErrorBanner(true);
             }}
             visualType={HyperlinkType.Quiet}

apps/cluster-orch/src/components/pages/ClusterCreation/ClusterCreation.cy.tsx

@@ -188,7 +188,7 @@ describe("<ClusterCreation/>", () => {
             .should("contain.text", "Cluster is created");
 
           // check that the redux state has been cleared
-          pom.getPath().should("eq", "/clusters");
+          pom.getPath().should("contain", "/clusters");
           checkClearState(true);
         });
         it("should remove disable on button and show error when failed in creating cluster", () => {
@@ -220,7 +220,7 @@ describe("<ClusterCreation/>", () => {
 
           pom.el.nextBtn.should("have.class", "spark-button-disabled");
           // run common tests checks
-          pom.getPath().should("eq", "/clusters"); // should stay in same page
+          pom.getPath().should("contain", "/clusters"); // should stay in same page
           // check that the redux state is unaffected and page is not changed
           checkClearState(true);
         });

apps/cluster-orch/src/components/pages/ClusterCreation/ClusterCreation.tsx

@@ -5,7 +5,12 @@
 
 import { cm, mbApi } from "@orch-ui/apis";
 import { Empty, MetadataPair } from "@orch-ui/components";
-import { InternalError, SharedStorage } from "@orch-ui/utils";
+import {
+  clusterManagementRoute,
+  InternalError,
+  SharedStorage,
+  useInfraNavigate,
+} from "@orch-ui/utils";
 import {
   Button,
   ButtonGroup,
@@ -24,7 +29,6 @@ import {
   ToastVisibility,
 } from "@spark-design/tokens";
 import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks";
 import {
   clearCluster,
@@ -51,7 +55,7 @@ const ClusterCreation = () => {
   const topRef = useRef<HTMLDivElement | null>(null);
   const projectName = SharedStorage.project?.name ?? "";
 
-  const navigate = useNavigate();
+  const navigate = useInfraNavigate();
   const dispatch = useAppDispatch();
 
   // TODO: reduce below redux states to single redux state
@@ -80,7 +84,7 @@ const ClusterCreation = () => {
   const [step, setStep] = useState<number>(0);
   useEffect(() => {
     if (step === 0 && !window.location.search) {
-      navigate("?offset=0");
+      navigate(clusterManagementRoute, undefined, "?offset=0");
     }
   }, [step]);
 
@@ -227,7 +231,7 @@ const ClusterCreation = () => {
       clearData();
       topRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
       const timeoutId = setTimeout(() => {
-        navigate("../clusters");
+        navigate(clusterManagementRoute);
         clearInterval(timeoutId);
       }, 3000);
     };
@@ -260,7 +264,7 @@ const ClusterCreation = () => {
         clearData();
         // If metadata failed then move to cluster page as cluster is created
         const timeoutId = setTimeout(() => {
-          navigate("../clusters");
+          navigate(clusterManagementRoute);
           clearInterval(timeoutId);
         }, 3000);
       }
@@ -378,7 +382,7 @@ const ClusterCreation = () => {
           variant={ButtonVariant.Secondary}
           onPress={() => {
             clearData();
-            navigate("../clusters");
+            navigate(clusterManagementRoute);
           }}
         >
           Cancel