feat: integrate tooltip functionality into TypeBadge component in datasets table

Author: ErwanDecoster

src/modules/datasets/dataset/schema/TypeBadge.tsx

@@ -1,10 +1,16 @@
 import { DatasetSchemaQuery } from '@/graphql/dataprotector/graphql';
 import { cn } from '@/lib/utils';
 import React from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { pluralize } from '@/utils/pluralize';
 import { borderTypeColor } from '../../borderTypeColor';
 
-interface TypeBadgeProps {
+export interface TypeBadgeProps {
   schemaPaths?: NonNullable<
     NonNullable<DatasetSchemaQuery['protectedData']>['schema']
   >;
@@ -13,15 +19,74 @@ interface TypeBadgeProps {
   direction?: 'vertical' | 'horizontal';
   className?: string;
   overflowHidden?: boolean;
+  enableTooltip?: boolean;
 }
 
+const getBorderColor = (type: string) => {
+  return borderTypeColor.find((color) =>
+    color.keywords.some((keyword) => type?.toLowerCase().includes(keyword))
+  )?.color;
+};
+
+const renderBadge = (
+  schema: { path: string; type: string },
+  overflowHidden: boolean
+) => (
+  <span
+    key={schema.path + schema.type}
+    className={cn(
+      'inline-flex w-fit rounded-full border px-4 py-2 text-xs',
+      getBorderColor(schema.type),
+      overflowHidden && 'max-w-36'
+    )}
+    title={overflowHidden ? `${schema.path}: ${schema.type}` : undefined}
+  >
+    <span
+      className={cn(
+        'inline-block',
+        overflowHidden && 'max-w-18 truncate overflow-hidden text-ellipsis'
+      )}
+    >
+      {schema.path}
+    </span>
+    <span
+      className={cn(
+        'inline-block min-w-0 flex-1',
+        overflowHidden && 'truncate overflow-hidden text-ellipsis'
+      )}
+    >
+      : {schema.type}
+    </span>
+  </span>
+);
+
+const renderTooltipContent = (
+  schemaPaths: { path: string; type: string }[]
+) => (
+  <div className="flex flex-col gap-1">
+    {schemaPaths.map((schema) => (
+      <div
+        key={schema.path + schema.type}
+        className={cn(
+          'rounded-full border px-3 py-1 text-xs whitespace-nowrap',
+          getBorderColor(schema.type)
+        )}
+      >
+        <span className="font-semibold">{schema.path}</span>
+        <span>: {schema.type}</span>
+      </div>
+    ))}
+  </div>
+);
+
 const TypeBadge: React.FC<TypeBadgeProps> = ({
   schemaPaths,
   isLoading,
   maxVisible = 2,
   direction = 'vertical',
   className,
   overflowHidden = true,
+  enableTooltip = false,
 }) => {
   if (isLoading && schemaPaths && schemaPaths.length === 0) {
     return (
@@ -36,7 +101,32 @@ const TypeBadge: React.FC<TypeBadgeProps> = ({
   const visibleItems = schemaPaths.slice(0, maxVisible);
   const hiddenCount = schemaPaths.length - visibleItems.length;
 
-  return (
+  const badges = [
+    ...visibleItems.map((schema) =>
+      renderBadge(
+        {
+          path: schema.path ?? '',
+          type: schema.type ?? '',
+        },
+        overflowHidden
+      )
+    ),
+    hiddenCount > 0 ? (
+      <span
+        key="more"
+        className="w-fit cursor-pointer text-xs text-gray-500 hover:bg-gray-100"
+      >
+        +{pluralize(hiddenCount, 'other')}
+      </span>
+    ) : null,
+  ];
+
+  const safeSchemaPaths = schemaPaths.map((schema) => ({
+    path: schema.path ?? '',
+    type: schema.type ?? '',
+  }));
+
+  const content = (
     <div
       className={cn(
         `flex`,
@@ -46,51 +136,22 @@ const TypeBadge: React.FC<TypeBadgeProps> = ({
         className
       )}
     >
-      {visibleItems.map((schema, index) => {
-        const borderColor = borderTypeColor.find((color) =>
-          color.keywords.some((keyword) =>
-            schema.type?.toLowerCase().includes(keyword)
-          )
-        )?.color;
-        return (
-          <span
-            key={index}
-            className={cn(
-              'inline-flex w-fit rounded-full border px-4 py-2 text-xs',
-              borderColor,
-              overflowHidden && 'max-w-36'
-            )}
-            title={
-              overflowHidden ? `${schema.path}: ${schema.type}` : undefined
-            }
-          >
-            <span
-              className={cn(
-                'inline-block',
-                overflowHidden &&
-                  'max-w-18 truncate overflow-hidden text-ellipsis'
-              )}
-            >
-              {schema.path}
-            </span>
-            <span
-              className={cn(
-                'inline-block min-w-0 flex-1',
-                overflowHidden && 'truncate overflow-hidden text-ellipsis'
-              )}
-            >
-              : {schema.type}
-            </span>
-          </span>
-        );
-      })}
-      {hiddenCount > 0 && (
-        <span className="w-fit text-xs text-gray-500 hover:bg-gray-100">
-          +{pluralize(hiddenCount, 'other')}
-        </span>
-      )}
+      {badges}
     </div>
   );
+
+  if (!enableTooltip) return content;
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>{content}</TooltipTrigger>
+        <TooltipContent className="max-w-xs p-4">
+          {renderTooltipContent(safeSchemaPaths)}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
 };
 
 export default TypeBadge;

src/modules/datasets/datasetsTable/columns.tsx

@@ -50,7 +50,11 @@ export const columns: ColumnDef<Dataset>[] = [
       const datasetSchema = row.original.schema;
       const isSchemasLoading = row.original.isSchemasLoading;
       return (
-        <TypeBadge isLoading={isSchemasLoading} schemaPaths={datasetSchema} />
+        <TypeBadge
+          isLoading={isSchemasLoading}
+          schemaPaths={datasetSchema}
+          enableTooltip={true}
+        />
       );
     },
   },