clean up + better naming

Author: bilalabbad

frontend/app/src/screens/layout/menu-navigation/components/menu-section-internal.tsx

@@ -21,35 +21,35 @@ export interface MenuSectionInternalProps {
   isCollapsed?: boolean;
 }
 
-const RecursiveDropdownMenuItem: React.FC<{ item: MenuItem }> = ({ item }) => {
+const RecursiveInternalMenuItem: React.FC<{ item: MenuItem }> = ({ item }) => {
   if (!item.children?.length) {
     return (
-      <DropdownMenuItem key={item.identifier} asChild>
+      <DropdownMenuItem asChild>
         <Link to={constructPath(item.path)}>{item.label}</Link>
       </DropdownMenuItem>
     );
   }
 
   return (
-    <DropdownMenuSub key={item.identifier}>
+    <DropdownMenuSub>
       <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
       <DropdownMenuSubContent>
         {item.children.map((childItem) => (
-          <RecursiveDropdownMenuItem key={childItem.identifier} item={childItem} />
+          <RecursiveInternalMenuItem key={childItem.identifier} item={childItem} />
         ))}
       </DropdownMenuSubContent>
     </DropdownMenuSub>
   );
 };
 
 const CollapsedMenuItemLink: React.FC<{ item: MenuItem }> = ({ item }) => (
-  <Link to={constructPath(item.path)} key={item.identifier}>
+  <Link to={constructPath(item.path)}>
     <CollapsedButton icon={item.icon} tooltipContent={item.label} />
   </Link>
 );
 
 const ExpandedMenuItemLink: React.FC<{ item: MenuItem }> = ({ item }) => (
-  <Link to={constructPath(item.path)} className={menuNavigationItemStyle} key={item.identifier}>
+  <Link to={constructPath(item.path)} className={classNames(menuNavigationItemStyle, "h-10")}>
     <Icon icon={item.icon} className="min-w-4" />
     <span className="text-sm truncate">{item.label}</span>
   </Link>
@@ -95,7 +95,7 @@ export function MenuSectionInternal({ items, isCollapsed }: MenuSectionInternalP
             <DropdownMenuTriggerButton item={item} isCollapsed={!!isCollapsed} />
             <DropdownMenuContent side="left" align="start" className="min-w-[200px]">
               {item.children.map((childItem) => (
-                <RecursiveDropdownMenuItem key={childItem.identifier} item={childItem} />
+                <RecursiveInternalMenuItem key={childItem.identifier} item={childItem} />
               ))}
             </DropdownMenuContent>
           </DropdownMenu>

frontend/app/src/screens/layout/menu-navigation/components/menu-section-object.tsx

@@ -29,20 +29,19 @@ const MenuItemIcon: React.FC<{ item: MenuItem }> = ({ item }) => {
   return <ObjectAvatar name={item.label} />;
 };
 
-const RenderMenuItem: React.FC<{
+const RecursiveObjectMenuItem: React.FC<{
   item: MenuItem;
   isCollapsed?: boolean;
   level?: number;
 }> = ({ item, isCollapsed, level = 0 }) => {
-  const commonProps = {
-    key: item.identifier,
+  const commonStyleProps = {
     className: menuNavigationItemStyle,
     style: { marginLeft: level * 20 },
   };
 
   if (!item.children?.length) {
     return (
-      <DropdownMenuItem {...commonProps}>
+      <DropdownMenuItem {...commonStyleProps} asChild>
         <Link to={constructPath(item.path)}>
           <Icon icon={item.icon} className="w-5 shrink-0 inline-flex justify-center items-center" />
           {item.label}
@@ -53,12 +52,12 @@ const RenderMenuItem: React.FC<{
 
   return (
     <DropdownMenuAccordion value={item.identifier}>
-      <DropdownMenuAccordionTrigger {...commonProps}>
+      <DropdownMenuAccordionTrigger {...commonStyleProps}>
         {item.path ? <Link to={constructPath(item.path)}>{item.label}</Link> : item.label}
       </DropdownMenuAccordionTrigger>
       <DropdownMenuAccordionContent>
         {item.children.map((child) => (
-          <RenderMenuItem
+          <RecursiveObjectMenuItem
             key={child.identifier}
             item={child}
             isCollapsed={isCollapsed}
@@ -76,15 +75,15 @@ const TopLevelMenuItem: React.FC<{
 }> = ({ item, isCollapsed }) => {
   if (!item.children?.length) {
     return (
-      <Link key={item.identifier} to={constructPath(item.path)} className={menuNavigationItemStyle}>
+      <Link to={constructPath(item.path)} className={menuNavigationItemStyle}>
         <MenuItemIcon item={item} />
         <span className={classNames("text-sm", isCollapsed && "hidden")}>{item.label}</span>
       </Link>
     );
   }
 
   return (
-    <DropdownMenu key={item.identifier}>
+    <DropdownMenu>
       <DropdownMenuTrigger className={classNames(menuNavigationItemStyle, isCollapsed && "p-2")}>
         <Tooltip enabled={isCollapsed} content={item.label} side="right">
           <span className="flex">
@@ -105,7 +104,7 @@ const TopLevelMenuItem: React.FC<{
       >
         <h3 className="text-xl font-medium text-neutral-800 mb-5">{item.label}</h3>
         {item.children.map((child) => (
-          <RenderMenuItem key={child.identifier} item={child} isCollapsed={isCollapsed} />
+          <RecursiveObjectMenuItem key={child.identifier} item={child} isCollapsed={isCollapsed} />
         ))}
       </DropdownMenuContent>
     </DropdownMenu>