Render mouseover tooltip for the new tables (#1454)

* Render mouseover tooltip for the new tables

* Refactor WfoDataCell

* Added tooltips to WFO list components

* Renamed prop to tooltipContent

* Added changeset

* Replace description with resource type name

* Show tooltip for all columns that are strings, refactoring, removed title from icons that showed default tooltip

Author: Georgi2704

.changeset/tender-cats-camp.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+1381 Render mouseover tooltip for the new tables

packages/orchestrator-ui-components/src/components/WfoBadges/WfoBadge/WfoBadge.tsx

@@ -18,7 +18,7 @@ export const WfoBadge: FC<WfoBadgeProps> = ({
     ...restProps
 }) => (
     <EuiBadge {...restProps}>
-        <EuiText color={textColor} size={size ?? 'xs'}>
+        <EuiText title="" color={textColor} size={size ?? 'xs'}>
             <b>{children}</b>
         </EuiText>
     </EuiBadge>

packages/orchestrator-ui-components/src/components/WfoDateTime/WfoDateTime.tsx

@@ -1,10 +1,6 @@
 import React, { FC } from 'react';
 
-import {
-    getDate,
-    parseDateOrTimeRelativeToToday,
-    parseDateToLocaleDateTimeString,
-} from '@/utils';
+import { getDate, parseDateOrTimeRelativeToToday } from '@/utils';
 
 export type WfoDateTimeProps = {
     dateOrIsoString: Date | string | null;
@@ -13,9 +9,5 @@ export type WfoDateTimeProps = {
 export const WfoDateTime: FC<WfoDateTimeProps> = ({ dateOrIsoString }) => {
     const date = getDate(dateOrIsoString);
 
-    return (
-        <span title={parseDateToLocaleDateTimeString(date)}>
-            {parseDateOrTimeRelativeToToday(date)}
-        </span>
-    );
+    return <span>{parseDateOrTimeRelativeToToday(date)}</span>;
 };

packages/orchestrator-ui-components/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -113,6 +113,7 @@ export const WfoProcessesList = ({
             columnType: ColumnType.DATA,
             label: t('step'),
             width: '15%',
+            renderTooltip: (value) => value,
         },
         lastStatus: {
             columnType: ColumnType.DATA,
@@ -184,6 +185,7 @@ export const WfoProcessesList = ({
             width: '90',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
+            renderTooltip: (value) => value,
         },
         startedAt: {
             columnType: ColumnType.DATA,
@@ -192,6 +194,7 @@ export const WfoProcessesList = ({
             renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
+            renderTooltip: (value) => value.toString(),
         },
         lastModifiedAt: {
             columnType: ColumnType.DATA,
@@ -200,6 +203,7 @@ export const WfoProcessesList = ({
             renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
+            renderTooltip: (value) => value.toString(),
         },
     };
 

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -101,6 +101,7 @@ export const WfoRelatedSubscriptions = ({
             columnType: ColumnType.DATA,
             label: t('id'),
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderTooltip: (value) => value,
         },
         description: {
             columnType: ColumnType.DATA,
@@ -129,6 +130,7 @@ export const WfoRelatedSubscriptions = ({
         customerFullname: {
             columnType: ColumnType.DATA,
             label: t('customer'),
+            renderTooltip: (value) => value,
         },
         tag: {
             columnType: ColumnType.DATA,
@@ -139,6 +141,7 @@ export const WfoRelatedSubscriptions = ({
             columnType: ColumnType.DATA,
             label: t('startDate'),
             renderData: parseDateToLocaleDateString,
+            renderTooltip: parseDateToLocaleDateString,
         },
     };
 

packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -82,6 +82,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 label: t('id'),
                 renderData: (value) => <WfoFirstPartUUID UUID={value} />,
                 renderDetails: (value) => value,
+                renderTooltip: (value) => value,
             },
             description: {
                 columnType: ColumnType.DATA,
@@ -130,13 +131,15 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
+                renderTooltip: (cellValue) => cellValue?.toString(),
             },
             endDate: {
                 columnType: ColumnType.DATA,
                 label: t('endDate'),
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
+                renderTooltip: (cellValue) => cellValue?.toString(),
             },
             note: {
                 columnType: ColumnType.DATA,

packages/orchestrator-ui-components/src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx

@@ -12,9 +12,5 @@ export type WfoFirstUUIDPartProps = {
 export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID }) => {
     const { uuidFieldStyle } = useWithOrchestratorTheme(getStyles);
 
-    return (
-        <span css={uuidFieldStyle} title={UUID}>
-            {getFirstUuidPart(UUID)}
-        </span>
-    );
+    return <span css={uuidFieldStyle}>{getFirstUuidPart(UUID)}</span>;
 };

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDataCell.tsx

@@ -0,0 +1,31 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiToolTip } from '@elastic/eui';
+
+interface WfoDataCellProps {
+    customTooltip: ReactNode;
+    children: ReactNode;
+}
+
+export const WfoDataCell: FC<WfoDataCellProps> = ({
+    customTooltip,
+    children,
+}) => {
+    const tooltipContent =
+        customTooltip || (typeof children === 'string' ? children : <></>);
+
+    if (tooltipContent) {
+        return (
+            <EuiToolTip
+                position="bottom"
+                delay="long"
+                content={tooltipContent}
+                css={{ maxWidth: 'fit-content' }}
+                repositionOnScroll
+            >
+                <>{children}</>
+            </EuiToolTip>
+        );
+    }
+    return <>{children}</>;
+};

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -46,6 +46,7 @@ export type WfoTableDataColumnConfigItem<
     isSortable?: boolean;
     isFilterable?: boolean;
     renderData?: (cellValue: T[Property], row: T) => ReactNode;
+    renderTooltip?: (cellValue: T[Property], row: T) => ReactNode;
 };
 
 export type WfoTableControlColumnConfigItem<T extends object> =

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 
+import { WfoDataCell } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { toOptionalArrayEntry } from '@/utils';
 
@@ -91,10 +92,17 @@ export const WfoTableDataRows = <T extends object>({
                                     ]}
                                 >
                                     <div>
-                                        {columnConfig.renderData?.(
-                                            result,
-                                            row,
-                                        ) ?? result?.toString()}
+                                        <WfoDataCell
+                                            customTooltip={columnConfig.renderTooltip?.(
+                                                result,
+                                                row,
+                                            )}
+                                        >
+                                            {columnConfig.renderData?.(
+                                                result,
+                                                row,
+                                            ) ?? result?.toString()}
+                                        </WfoDataCell>
                                     </div>
                                 </td>
                             );