Update Cluster-orch menu update logic (#121)

Author: satya-in

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

@@ -4,12 +4,7 @@
  */
 
 import { cm, mbApi } from "@orch-ui/apis";
-import {
-  Empty,
-  MetadataPair,
-  setActiveNavItem,
-  setBreadcrumb,
-} from "@orch-ui/components";
+import { Empty, MetadataPair, setBreadcrumb } from "@orch-ui/components";
 import { InternalError, SharedStorage } from "@orch-ui/utils";
 import {
   Button,
@@ -30,11 +25,7 @@ import {
 } from "@spark-design/tokens";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import {
-  clustersBreadcrumb,
-  clustersMenuItem,
-  homeBreadcrumb,
-} from "../../../routes/const";
+import { clustersBreadcrumb, homeBreadcrumb } from "../../../routes/const";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks";
 import {
   clearCluster,
@@ -160,7 +151,6 @@ const ClusterCreation = () => {
   // Set breadcrumb
   useEffect(() => {
     dispatch(setBreadcrumb(breadcrumb));
-    dispatch(setActiveNavItem(clustersMenuItem));
   }, [breadcrumb]);
   // Reset `template version` selection if `template name` selection changes
   useEffect(() => {

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

@@ -19,7 +19,6 @@ import {
   MetadataDisplay,
   Popup,
   PopupOption,
-  setActiveNavItem,
   setBreadcrumb as setClusterBreadcrumb,
   TrustedCompute,
   TypedMetadata,
@@ -46,7 +45,7 @@ import {
 } from "@spark-design/react";
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { clustersMenuItem, homeBreadcrumb } from "../../../routes/const";
+import { homeBreadcrumb } from "../../../routes/const";
 import { useAppDispatch } from "../../../store/hooks";
 import TableLoader from "../../atom/TableLoader";
 
@@ -200,7 +199,6 @@ function ClusterDetail({
       } else {
         dispatch(setClusterBreadcrumb(breadcrumb));
       }
-      dispatch(setActiveNavItem(clustersMenuItem));
     }
   }, [breadcrumb]);
 

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

@@ -7,7 +7,6 @@ import { cm, infra, mbApi } from "@orch-ui/apis";
 import {
   BreadcrumbPiece,
   MetadataPair,
-  setActiveNavItem,
   setBreadcrumb as setClusterBreadcrumb,
 } from "@orch-ui/components";
 import {
@@ -25,7 +24,7 @@ import {
 } from "@spark-design/tokens";
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { clustersMenuItem, homeBreadcrumb } from "../../../routes/const";
+import { homeBreadcrumb } from "../../../routes/const";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks";
 import {
   clearCluster,
@@ -260,7 +259,6 @@ const ClusterEdit = ({ setBreadcrumb, HostsTableRemote }: ClusterEditProps) => {
     } else {
       dispatch(setClusterBreadcrumb(breadcrumb));
     }
-    dispatch(setActiveNavItem(clustersMenuItem));
   }, [breadcrumb]);
 
   const onReqSuccess = () => {

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

@@ -3,17 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { setActiveNavItem, setBreadcrumb } from "@orch-ui/components";
+import { setBreadcrumb } from "@orch-ui/components";
 import { checkAuthAndRole, getAuthCfg, Role } from "@orch-ui/utils";
 import { Heading } from "@spark-design/react";
 import { useEffect, useMemo } from "react";
 import { AuthProvider } from "react-oidc-context";
 import { Provider } from "react-redux";
-import {
-  clustersBreadcrumb,
-  clustersMenuItem,
-  homeBreadcrumb,
-} from "../../routes/const";
+import { clustersBreadcrumb, homeBreadcrumb } from "../../routes/const";
 import { store } from "../../store";
 import { useAppDispatch } from "../../store/hooks";
 import ClusterList from "../organism/cluster/ClusterList";
@@ -23,7 +19,6 @@ function ClusterManagement() {
   const breadcrumb = useMemo(() => [homeBreadcrumb, clustersBreadcrumb], []);
   useEffect(() => {
     dispatch(setBreadcrumb(breadcrumb));
-    dispatch(setActiveNavItem(clustersMenuItem));
   }, []);
   return (
     <>

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

@@ -9,7 +9,6 @@ import {
   Flex,
   Popup,
   PopupOption,
-  setActiveNavItem,
   setBreadcrumb,
 } from "@orch-ui/components";
 import { downloadFile, getAuthCfg, SharedStorage } from "@orch-ui/utils";
@@ -20,7 +19,6 @@ import { Provider } from "react-redux";
 import { useParams } from "react-router-dom";
 import {
   clusterTemplatesBreadcrumb,
-  clusterTemplatesMenuItem,
   homeBreadcrumb,
 } from "../../../routes/const";
 import { store } from "../../../store";
@@ -73,7 +71,6 @@ export const ClusterTemplateDetails = () => {
 
   useEffect(() => {
     dispatch(setBreadcrumb(breadcrumb));
-    dispatch(setActiveNavItem(clusterTemplatesMenuItem));
   }, [template, isSuccess]);
 
   if (isLoading) {

apps/cluster-orch/src/components/templates/Layout.tsx

@@ -6,34 +6,65 @@
 import {
   CollapsableList,
   CollapsableListItem,
-  getActiveNavItem,
   SidebarMain,
 } from "@orch-ui/components";
 import "@orch-ui/styles/Global.scss";
 import "@orch-ui/styles/spark-global.scss";
 import "@orch-ui/styles/transitions.scss";
-import { innerTransitionTimeout } from "@orch-ui/utils";
+import { allClusterRoutes, innerTransitionTimeout } from "@orch-ui/utils";
 import { Toast } from "@spark-design/react";
 import { ToastVisibility } from "@spark-design/tokens";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { useMemo } from "react";
+import { matchPath, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { CSSTransition, SwitchTransition } from "react-transition-group";
-import { menuItems } from "../../routes/const";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { getToastProps, setProps } from "../../store/reducers/toast";
 import "./Layout.scss";
 
 export const datacyComponentSelector = "clusterOrchLayout";
+
+const clustersMenuItem: CollapsableListItem<string> = {
+  route: "clusters",
+  icon: "globe",
+  value: "Clusters",
+};
+
+const clusterTemplatesMenuItem: CollapsableListItem<string> = {
+  route: "cluster-templates",
+  icon: "globe",
+  value: "Cluster Templates",
+};
+
+const menuItems: CollapsableListItem<string>[] = [
+  clustersMenuItem,
+  clusterTemplatesMenuItem,
+];
+
+const selectActiveMenu = (activePath: string): CollapsableListItem<string> => {
+  const cleanPath = activePath.replace(/\/cluster-orch/g, "");
+
+  const routeMatches = [
+    { routes: allClusterRoutes, menuItem: clustersMenuItem },
+  ];
+
+  const matchedItem = routeMatches.find(({ routes }) =>
+    routes.some((route) => matchPath(route, cleanPath)),
+  );
+
+  return matchedItem?.menuItem ?? clusterTemplatesMenuItem;
+};
+
 const Layout = () => {
   // Router transitions https://tinyurl.com/2u8kwvk8
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useAppDispatch();
 
-  const activeItem = useAppSelector(getActiveNavItem);
+  const activePath = location.pathname;
+  const activeItem = useMemo(() => selectActiveMenu(activePath), [activePath]);
 
   const onSelectMenuItem = (item: CollapsableListItem<string>) =>
     item.route && navigate(item.route);
-  const activePath = location.pathname;
   const toastProps = useAppSelector(getToastProps);
 
   return (

apps/cluster-orch/src/routes/const.ts

@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { CollapsableListItem } from "@orch-ui/components";
-
 export const homeBreadcrumb = {
   text: "Home",
   link: "/dashboard",
@@ -19,20 +17,3 @@ export const clusterTemplatesBreadcrumb = {
   text: "Cluster Templates",
   link: "../cluster-templates",
 };
-
-export const clustersMenuItem: CollapsableListItem<string> = {
-  route: "clusters",
-  icon: "globe",
-  value: "Clusters",
-};
-
-export const clusterTemplatesMenuItem: CollapsableListItem<string> = {
-  route: "cluster-templates",
-  icon: "globe",
-  value: "Cluster Templates",
-};
-
-export const menuItems: CollapsableListItem<string>[] = [
-  clustersMenuItem,
-  clusterTemplatesMenuItem,
-];