feat: add tooltip support in DetailsTable and add more information tooltip for tag line

Author: ErwanDecoster

src/modules/DetailsTable.tsx

@@ -1,4 +1,11 @@
+import { Info } from 'lucide-react';
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 type DealDetailsTableProps = {
   details: Record<string, React.ReactNode | React.ReactNode[]>;
@@ -12,18 +19,44 @@ export function DetailsTable({ details, zebra = true }: DealDetailsTableProps) {
   return (
     <Table>
       <TableBody zebra={zebra}>
-        {Object.entries(details).map(([key, value], i) => (
-          <TableRow key={i}>
-            <TableCell className="min-w-32 text-pretty! whitespace-normal">
-              <p>{key} :</p>
-            </TableCell>
-            <TableCell className="relative overflow-x-auto">
-              {Array.isArray(value)
-                ? value.map((v, j) => <div key={j}>{v}</div>)
-                : value}
-            </TableCell>
-          </TableRow>
-        ))}
+        {Object.entries(details).map(([key, value], i) => {
+          // Si value est un objet avec .tooltip et .value
+          const hasTooltip =
+            value &&
+            typeof value === 'object' &&
+            'tooltip' in value &&
+            'value' in value;
+          return (
+            <TableRow key={i}>
+              <TableCell className="min-w-32 text-pretty! whitespace-normal">
+                <span className="flex items-center gap-1">
+                  {hasTooltip && (
+                    <TooltipProvider delayDuration={0}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className="flex items-center gap-1">
+                            <Info size={14} />
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" className="max-w-sm">
+                          {(value as { tooltip: React.ReactNode }).tooltip}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  )}
+                  <span>{key}</span>
+                </span>
+              </TableCell>
+              <TableCell className="relative overflow-x-auto">
+                {hasTooltip
+                  ? (value.value as React.ReactNode)
+                  : Array.isArray(value)
+                    ? value.map((v, j) => <div key={j}>{v}</div>)
+                    : (value as React.ReactNode)}
+              </TableCell>
+            </TableRow>
+          );
+        })}
       </TableBody>
     </Table>
   );

src/modules/deals/deal/buildDealDetails.tsx

@@ -60,7 +60,40 @@ export function buildDealDetails({
         ),
       }),
     ...(deal.tag && {
-      Tag: <Bytes>{deal.tag}</Bytes>,
+      Tag: {
+        tooltip: (
+          <>
+            Indicates the execution environment type defined by iExec :
+            <ul className="list-inside list-disc">
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x0
+                </code>
+                : Standard
+              </li>
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x3
+                </code>
+                : SGX Scone
+              </li>
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x5
+                </code>
+                : SGX Gramine
+              </li>
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x9
+                </code>
+                : TDX
+              </li>
+            </ul>
+          </>
+        ),
+        value: <Bytes>{deal.tag}</Bytes>,
+      },
     }),
     ...(deal.trust && {
       Trust: <p>{deal.trust}</p>,

src/modules/tasks/task/buildTaskDetails.tsx

@@ -57,7 +57,40 @@ export function buildTaskDetails({ task }: { task: TaskQuery['task'] }) {
         ),
       }),
     ...(task.deal.tag && {
-      Tag: <Bytes>{task.deal.tag}</Bytes>,
+      Tag: {
+        tooltip: (
+          <>
+            Indicates the execution environment type defined by iExec :
+            <ul className="list-inside list-disc">
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x0
+                </code>
+                : Standard
+              </li>
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x3
+                </code>
+                : SGX Scone
+              </li>
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x5
+                </code>
+                : SGX Gramine
+              </li>
+              <li>
+                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
+                  0x9
+                </code>
+                : TDX
+              </li>
+            </ul>
+          </>
+        ),
+        value: <Bytes>{task.deal.tag}</Bytes>,
+      },
     }),
     ...(task.deal.app && {
       App: (