feat(container): bullet added on pnr lvl 2

ref: MANAGER-14442 Signed-off-by: Omar ALKABOUSS MOUSSANA <omar.alkabouss-moussana.ext@corp.ovh.com>
ovh · Jun 24, 2024 · 44a83ef · 44a83ef
1 parent bf01f02
commit 44a83ef
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
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
@@ -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<ComponentProps<StaticLinkProps>> = ({
       )}
       {!isShortText && <SidebarLinkTag node={node} />}
       {!isShortText && (count as number) > 0 && (
-        <span
-          className={`oui-badge oui-badge_s oui-badge_new ml-1 ${style.sidebar_chip}`}
-        >
-          {count}
-        </span>
+          <OsdsIcon
+            name={ODS_ICON_NAME.SHAPE_DOT}
+            size={ODS_ICON_SIZE.xs}
+            className={`ml-1 ${style.sidebarLinkTag}`}
+          />
       )}
     </a>
   );

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
@@ -59,6 +59,7 @@ const SubTreeSection: React.FC<ComponentProps<SubTreeSectionProps>> = ({
                     projectId: selectedPciProject,
                   }}
                   node={childNode}
+                  count={childNode.count}
                   handleNavigation={() => menuClickHandler(childNode)}
                   id={childNode.idAttr}
                 />
@@ -73,6 +74,7 @@ const SubTreeSection: React.FC<ComponentProps<SubTreeSectionProps>> = ({
             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
@@ -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<string, number>,
+    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
@@ -303,5 +303,6 @@
 .sidebarLinkTag {
   width: 0.8rem;
   margin-right: .25rem;
+  float: right;
   background-color: var(--ods-color-primary-300);
 }