From 316335a0eaa2ac258425db929e8f128c7effa7a4 Mon Sep 17 00:00:00 2001 From: Oliver Date: Wed, 10 Jun 2026 15:06:45 +1000 Subject: [PATCH] [UI] Update parametric data table hover (#12145) - Display last update date - Display updating user - Improved formatting --- src/frontend/src/tables/TableHoverCard.tsx | 6 ++- .../tables/general/ParametricDataTable.tsx | 38 +++++++++++++++++-- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/tables/TableHoverCard.tsx b/src/frontend/src/tables/TableHoverCard.tsx index 5e611697a2..363af61133 100644 --- a/src/frontend/src/tables/TableHoverCard.tsx +++ b/src/frontend/src/tables/TableHoverCard.tsx @@ -24,7 +24,8 @@ export function TableHoverCard({ icon, // The icon to display iconColor, // The icon color position, // The position of the hovercard - zIndex // Optional z-index for the hovercard + zIndex, // Optional z-index for the hovercard + minWidth // Optional minimum width for the dropdown }: Readonly<{ value: any; extra?: ReactNode; @@ -33,6 +34,7 @@ export function TableHoverCard({ iconColor?: string; position?: FloatingPosition; zIndex?: string | number; + minWidth?: number; }>) { const extraItems: ReactNode = useMemo(() => { if (Array.isArray(extra)) { @@ -74,7 +76,7 @@ export function TableHoverCard({ /> - + + + {numeric} + + [{template.units}] + + ); + } + + if (parameter?.updated) { + extra.push( + + {t`Last Updated`} + {formatDate(parameter.updated)} + + ); + } + + if (parameter?.updated_by_detail?.username) { + extra.push( + + {t`Updated By`} + {parameter.updated_by_detail.username} + + ); } if (hovered && canEdit) { - extra.push(t`Click to edit`); + if (extra.length > 0) { + extra.push(); + } + + extra.push({t`Click to edit`}); } return ( @@ -88,6 +119,7 @@ function ParameterCell({ extra={extra} icon={hovered && canEdit ? 'edit' : 'info'} title={template.name} + minWidth={250} />