diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/StaticLink.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/StaticLink.tsx index 871079620fff..154f957c1221 100644 --- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/StaticLink.tsx +++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/StaticLink.tsx @@ -5,6 +5,8 @@ import { useShell } from '@/context'; import style from './style.module.scss'; import SidebarLinkTag from './SidebarLinkTag'; import { Node } from './navigation-tree/node'; +import { OsdsIcon } from '@ovhcloud/ods-components/react'; +import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components'; interface StaticLinkProps { count?: number | boolean; @@ -65,11 +67,11 @@ const StaticLink: React.FC> = ({ )} {!isShortText && } {!isShortText && (count as number) > 0 && ( - - {count} - + )} ); diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTreeSection.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTreeSection.tsx index a779edfe87ab..903fff67b903 100644 --- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTreeSection.tsx +++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTreeSection.tsx @@ -59,6 +59,7 @@ const SubTreeSection: React.FC> = ({ projectId: selectedPciProject, }} node={childNode} + count={childNode.count} handleNavigation={() => menuClickHandler(childNode)} id={childNode.idAttr} /> @@ -73,6 +74,7 @@ const SubTreeSection: React.FC> = ({ projectId: selectedPciProject, }} node={node} + count={node.count} handleNavigation={() => menuClickHandler(node)} id={node.idAttr} /> diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx index 336743814117..c444d83199da 100644 --- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx +++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx @@ -20,6 +20,7 @@ import { initFeatureNames, shouldHideElement, debounce, + IServicesCount, } from './utils'; import { Node } from './navigation-tree/node'; import useProductNavReshuffle from '@/core/product-nav-reshuffle'; @@ -191,22 +192,37 @@ const Sidebar = (): JSX.Element => { } }, [isNavigationSidebarOpened]); + + const computeNodeCount = (count: IServicesCount, node: Node): number | boolean => { + if (node.count === false) return node.count; + return countServices(count, node); + }; + + const processNode = (count: IServicesCount, node: Node): Node => { + return { + ...node, + count: computeNodeCount(count, node), + children: node.children?.map(childNode => processNode(count, childNode)) + }; + }; + /** - * Initialize menu items based on currentNavigationNode - */ + * Initialize menu items based on currentNavigationNode + */ useEffect(() => { - const count: ServicesCount = { - total: servicesCount?.total, - serviceTypes: { - ...servicesCount?.serviceTypes, - } as Record, + if (!currentNavigationNode?.children || !servicesCount) return; + + const count = { + total: servicesCount.total, + serviceTypes: { ...servicesCount.serviceTypes }, }; - setMenuItems( - currentNavigationNode.children?.map((node: Node) => ({ - node, - count: node.count === false ? node.count : countServices(count, node), - })), - ); + + const updatedMenuItems = currentNavigationNode.children.map(node => ({ + node: processNode(count, node), + count: computeNodeCount(count, node), + })); + + setMenuItems(updatedMenuItems); }, [currentNavigationNode, servicesCount]); return ( diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss index ab7f9e9e4bf5..508ec1ada61b 100644 --- a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss +++ b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss @@ -303,5 +303,6 @@ .sidebarLinkTag { width: 0.8rem; margin-right: .25rem; + float: right; background-color: var(--ods-color-primary-300); }