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 · b7ed1cc · b7ed1cc
1 parent bf01f02
commit b7ed1cc
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 13 deletions.
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,10 @@ const SubTreeSection: React.FC<ComponentProps<SubTreeSectionProps>> = ({
                     projectId: selectedPciProject,
                   }}
                   node={childNode}
+                  count={(()=> {
+                    console.log(childNode);
+                    return childNode.count;
+                  })()}
                   handleNavigation={() => menuClickHandler(childNode)}
                   id={childNode.idAttr}
                 />
@@ -73,6 +77,10 @@ const SubTreeSection: React.FC<ComponentProps<SubTreeSectionProps>> = ({
             projectId: selectedPciProject,
           }}
           node={node}
+          count={(()=> {
+            console.log(node);
+            return 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,24 +192,52 @@ 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);
+    // const count: ServicesCount = {
+    //   total: servicesCount?.total,
+    //   serviceTypes: {
+    //     ...servicesCount?.serviceTypes,
+    //   } as Record<string, number>,
+    // };
+    // setMenuItems(
+    //   currentNavigationNode.children?.map((node: Node) => ({
+    //     node,
+    //     count: node.count === false ? node.count : countServices(count, node),
+    //   })),
+    // );
   }, [currentNavigationNode, servicesCount]);
 
+  console.log(menuItems);
   return (
     <div className={`${style.sidebar} ${!open && style.sidebar_short}`}>
       <a