fix(containers): truncate published ports list with show more badge [DEV-100] (#2980)

Co-authored-by: siddamvinay2001 <siddamvinay1368@gmail.com>

app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx

@@ -4,10 +4,15 @@ import { CellContext } from '@tanstack/react-table';
 import { PublishedPortLink } from '@/react/docker/components/ImageStatus/PublishedPortLink';
 import type { ContainerListViewModel } from '@/react/docker/containers/types';
 
+import { Badge } from '@@/Badge';
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
+
 import { useRowContext } from '../RowContext';
 
 import { columnHelper } from './helper';
 
+const MAX_VISIBLE_PORTS = 3;
+
 export const ports = columnHelper.accessor(
   (row) =>
     _.uniqBy(row.Ports, 'public')
@@ -21,7 +26,7 @@ export const ports = columnHelper.accessor(
 );
 
 function Cell({ row }: CellContext<ContainerListViewModel, string>) {
-  const ports = row.original.Ports;
+  const ports = _.uniqBy(row.original.Ports, 'public');
 
   const { environment } = useRowContext();
 
@@ -29,9 +34,12 @@ function Cell({ row }: CellContext<ContainerListViewModel, string>) {
     return '-';
   }
 
+  const visiblePorts = ports.slice(0, MAX_VISIBLE_PORTS);
+  const hiddenPorts = ports.slice(MAX_VISIBLE_PORTS);
+
   return (
-    <div className="flex flex-wrap gap-1">
-      {_.uniqBy(ports, 'public').map((port) => (
+    <div className="flex flex-wrap items-center gap-1">
+      {visiblePorts.map((port) => (
         <PublishedPortLink
           key={`${port.host}:${port.public}`}
           hostPort={port.public}
@@ -39,6 +47,26 @@ function Cell({ row }: CellContext<ContainerListViewModel, string>) {
           hostURL={environment.PublicURL || port.host}
         />
       ))}
+      {hiddenPorts.length > 0 && (
+        <TooltipWithChildren
+          message={
+            <div className="flex flex-wrap gap-1">
+              {hiddenPorts.map((port) => (
+                <PublishedPortLink
+                  key={`${port.host}:${port.public}`}
+                  hostPort={port.public}
+                  containerPort={port.private}
+                  hostURL={environment.PublicURL || port.host}
+                />
+              ))}
+            </div>
+          }
+        >
+          <Badge type="muted" size="sm">
+            +{hiddenPorts.length} more
+          </Badge>
+        </TooltipWithChildren>
+      )}
     </div>
   );
 }