From fda0a82280d6a991f60289697b9066bb4d1d1e28 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 8 Nov 2023 11:33:36 -0500
Subject: [PATCH 1/5] fix(Table): make tooltip prop consistent

---
 .../src/components/Table/SelectColumn.tsx     | 35 ++++++++++++++-----
 .../src/components/Table/SortColumn.tsx       | 16 ++++++++-
 .../src/components/Table/TableText.tsx        | 19 ++++++----
 .../src/components/Table/TableTypes.tsx       |  3 ++
 .../react-table/src/components/Table/Th.tsx   | 20 ++++++++---
 .../Table/utils/decorators/selectable.tsx     |  3 +-
 .../Table/utils/decorators/sortable.tsx       | 10 ++++--
 7 files changed, 82 insertions(+), 24 deletions(-)

diff --git a/packages/react-table/src/components/Table/SelectColumn.tsx b/packages/react-table/src/components/Table/SelectColumn.tsx
index 57f4239ab3b..deefaf0657b 100644
--- a/packages/react-table/src/components/Table/SelectColumn.tsx
+++ b/packages/react-table/src/components/Table/SelectColumn.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export enum RowSelectVariant {
   radio = 'radio',
@@ -11,6 +12,10 @@ export interface SelectColumnProps {
   className?: string;
   onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
   selectVariant?: RowSelectVariant;
+  /** text to display on the tooltip */
+  tooltip?: string;
+  /** other props to pass to the tooltip */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
 }
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
@@ -19,13 +24,27 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   className,
   onSelect = null as (event: React.FormEvent<HTMLInputElement>) => void,
   selectVariant,
+  tooltip,
+  tooltipProps,
   ...props
-}: SelectColumnProps) => (
-  <React.Fragment>
-    <label>
-      <input {...props} type={selectVariant} onChange={onSelect} />
-    </label>
-    {children}
-  </React.Fragment>
-);
+}: SelectColumnProps) => {
+  const inputRef = React.createRef<HTMLInputElement>();
+
+  const content = (
+    <React.Fragment>
+      <label>
+        <input {...props} ref={inputRef} type={selectVariant} onChange={onSelect} />
+      </label>
+      {children}
+    </React.Fragment>
+  );
+
+  return tooltip ? (
+    <Tooltip triggerRef={inputRef} content={tooltip} {...tooltipProps}>
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+};
 SelectColumn.displayName = 'SelectColumn';
diff --git a/packages/react-table/src/components/Table/SortColumn.tsx b/packages/react-table/src/components/Table/SortColumn.tsx
index 1526a533aee..5c51914abab 100644
--- a/packages/react-table/src/components/Table/SortColumn.tsx
+++ b/packages/react-table/src/components/Table/SortColumn.tsx
@@ -5,6 +5,7 @@ import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { TableText } from './TableText';
+import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export enum SortByDirection {
   asc = 'asc',
@@ -17,6 +18,9 @@ export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   isSortedBy?: boolean;
   onSort?: Function;
   sortDirection?: string;
+  tooltip?: string;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
@@ -26,6 +30,9 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   onSort = null,
   sortDirection = '',
   type = 'button',
+  tooltip,
+  tooltipProps,
+  tooltipHasDefaultBehavior,
   ...props
 }: SortColumnProps) => {
   let SortedByIcon;
@@ -45,7 +52,14 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
       onBlur={() => setFocused(false)}
     >
       <div className={css(className, styles.tableButtonContent)}>
-        <TableText focused={focused}>{children}</TableText>
+        <TableText
+          tooltip={tooltip}
+          tooltipProps={tooltipProps}
+          tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
+          focused={focused}
+        >
+          {children}
+        </TableText>
         <span className={css(styles.tableSortIndicator)}>
           <SortedByIcon />
         </span>
diff --git a/packages/react-table/src/components/Table/TableText.tsx b/packages/react-table/src/components/Table/TableText.tsx
index 0a967eb72aa..15cba859c31 100644
--- a/packages/react-table/src/components/Table/TableText.tsx
+++ b/packages/react-table/src/components/Table/TableText.tsx
@@ -33,6 +33,8 @@ export interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
   onMouseEnter?: (event: any) => void;
   /** Determines if the TableText is focused by parent component */
   focused?: boolean;
+  /** Determines if tooltip should have normal visbility behavior. If false, the tooltip will only be shown when children is not entirely visible */
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export const TableText: React.FunctionComponent<TableTextProps> = ({
@@ -44,12 +46,13 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   tooltipProps = {},
   onMouseEnter: onMouseEnterProp = () => {},
   focused = false,
+  tooltipHasDefaultBehavior = false,
   ...props
 }: TableTextProps) => {
   const Component: TableTextVariant | 'span' | 'div' = variant;
   const textRef = React.createRef<HTMLElement>();
 
-  const [tooltip, setTooltip] = React.useState('');
+  const [tooltip, setTooltip] = React.useState(tooltipProp);
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(tooltipProp || event.target.innerText);
@@ -70,7 +73,7 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   const text = (
     <Component
       ref={textRef as React.Ref<HTMLDivElement>}
-      onMouseEnter={onMouseEnter}
+      onMouseEnter={!tooltipHasDefaultBehavior ? onMouseEnter : undefined}
       className={css(className, wrapModifier && styles.modifiers[wrapModifier], styles.tableText)}
       {...props}
     >
@@ -79,15 +82,17 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   );
 
   React.useEffect(() => {
-    if (focused) {
-      onFocus(textRef.current);
-    } else {
-      setTooltip('');
+    if (!tooltipHasDefaultBehavior) {
+      if (focused) {
+        onFocus(textRef.current);
+      } else {
+        setTooltip('');
+      }
     }
   }, [focused]);
 
   return tooltip !== '' ? (
-    <Tooltip triggerRef={textRef} content={tooltip} isVisible {...tooltipProps}>
+    <Tooltip triggerRef={textRef} content={tooltip} {...tooltipProps}>
       {text}
     </Tooltip>
   ) : (
diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx
index 0a03be2b382..0111d990811 100644
--- a/packages/react-table/src/components/Table/TableTypes.tsx
+++ b/packages/react-table/src/components/Table/TableTypes.tsx
@@ -132,6 +132,9 @@ export interface IExtra extends IExtraData {
   rowData?: IRowData;
   className?: string;
   ariaLabel?: string;
+  tooltip?: string;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export type IFormatterValueType = formatterValueType & {
diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx
index 31a19bb2db2..d2ef2034be9 100644
--- a/packages/react-table/src/components/Table/Th.tsx
+++ b/packages/react-table/src/components/Table/Th.tsx
@@ -6,7 +6,7 @@ import { info, sortable, sortableFavorites, selectable, collapsible, cellWidth,
 import { ThInfoType, ThSelectType, ThExpandType, ThSortType, formatterValueType } from './base/types';
 import { mergeProps } from './base/merge-props';
 import { IVisibility } from './utils/decorators/classNames';
-import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { BaseCellProps } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
@@ -34,6 +34,8 @@ export interface ThProps
    * To disable it completely you can set it to null.
    */
   tooltip?: React.ReactNode;
+  /** other props to pass to the tooltip */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
   /** Callback on mouse enter */
   onMouseEnter?: (event: any) => void;
   /** Adds tooltip/popover info button */
@@ -68,6 +70,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   select = null,
   expand: collapse = null,
   tooltip = '',
+  tooltipProps,
   onMouseEnter: onMouseEnterProp = () => {},
   width,
   visibility,
@@ -99,7 +102,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       sortParams = sortableFavorites({
         onSort: sort?.onSort,
         columnIndex: sort.columnIndex,
-        sortBy: sort.sortBy
+        sortBy: sort.sortBy,
+        tooltip: tooltip as string,
+        tooltipProps
       })();
     } else {
       sortParams = sortable(children as IFormatterValueType, {
@@ -109,7 +114,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             sortBy: sort.sortBy,
             onSort: sort?.onSort
           }
-        } as IColumn
+        } as IColumn,
+        tooltip: tooltip as string,
+        tooltipProps
       });
     }
   }
@@ -127,7 +134,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             allRowsSelected: select.isSelected,
             isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
           }
-        }
+        },
+        tooltip: tooltip as string,
+        tooltipProps
       })
     : null;
   const collapseParams = collapse
@@ -208,7 +217,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   );
 
   const canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
-  return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (
+  const childControlsTooltip = sortParams || selectParams;
+  return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? (
     <>
       {cell}
       <Tooltip
diff --git a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx
index ef13464c8e1..b49c947aeeb 100644
--- a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx
+++ b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx
@@ -7,7 +7,7 @@ import checkStyles from '@patternfly/react-styles/css/components/Check/check';
 
 export const selectable: ITransform = (
   label: IFormatterValueType,
-  { rowIndex, columnIndex, rowData, column, property }: IExtra
+  { rowIndex, columnIndex, rowData, column, property, tooltip }: IExtra
 ) => {
   const {
     extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled }
@@ -69,6 +69,7 @@ export const selectable: ITransform = (
         selectVariant={selectVariant as RowSelectVariant}
         onSelect={selectClick}
         name={selectName}
+        tooltip={tooltip}
       >
         {label as React.ReactNode}
       </SelectColumn>
diff --git a/packages/react-table/src/components/Table/utils/decorators/sortable.tsx b/packages/react-table/src/components/Table/utils/decorators/sortable.tsx
index 5e85e1679cb..74c7c5d6561 100644
--- a/packages/react-table/src/components/Table/utils/decorators/sortable.tsx
+++ b/packages/react-table/src/components/Table/utils/decorators/sortable.tsx
@@ -15,12 +15,15 @@ export const sortableFavorites = (sort: any) => () =>
         sortBy: sort.sortBy,
         onSort: sort?.onSort
       }
-    }
+    },
+    tooltip: sort.tooltip,
+    tooltipProps: sort.tooltipProps,
+    tooltipHasDefaultBehavior: true
   });
 
 export const sortable: ITransform = (
   label: IFormatterValueType,
-  { columnIndex, column, property, className, ariaLabel }: IExtra
+  { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }: IExtra
 ) => {
   const {
     extraParams: { sortBy, onSort }
@@ -56,6 +59,9 @@ export const sortable: ITransform = (
         sortDirection={isSortedBy ? sortBy.direction : ''}
         onSort={sortClicked}
         aria-label={ariaLabel}
+        tooltip={tooltip}
+        tooltipProps={tooltipProps}
+        tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
       >
         {label as React.ReactNode}
       </SortColumn>

From 078b4b4d5f0310a8775626d58a77d98eff8d87a0 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 8 Nov 2023 11:51:26 -0500
Subject: [PATCH 2/5] make tooltip ReactNode and add tooltipProps to Th

---
 packages/react-table/src/components/Table/SelectColumn.tsx | 2 +-
 packages/react-table/src/components/Table/SortColumn.tsx   | 2 +-
 packages/react-table/src/components/Table/TableText.tsx    | 2 +-
 packages/react-table/src/components/Table/TableTypes.tsx   | 2 +-
 packages/react-table/src/components/Table/Th.tsx           | 1 +
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-table/src/components/Table/SelectColumn.tsx b/packages/react-table/src/components/Table/SelectColumn.tsx
index deefaf0657b..c2e2de64205 100644
--- a/packages/react-table/src/components/Table/SelectColumn.tsx
+++ b/packages/react-table/src/components/Table/SelectColumn.tsx
@@ -13,7 +13,7 @@ export interface SelectColumnProps {
   onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
   selectVariant?: RowSelectVariant;
   /** text to display on the tooltip */
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   /** other props to pass to the tooltip */
   tooltipProps?: Omit<TooltipProps, 'content'>;
 }
diff --git a/packages/react-table/src/components/Table/SortColumn.tsx b/packages/react-table/src/components/Table/SortColumn.tsx
index 5c51914abab..9e5945195ca 100644
--- a/packages/react-table/src/components/Table/SortColumn.tsx
+++ b/packages/react-table/src/components/Table/SortColumn.tsx
@@ -18,7 +18,7 @@ export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   isSortedBy?: boolean;
   onSort?: Function;
   sortDirection?: string;
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   tooltipProps?: Omit<TooltipProps, 'content'>;
   tooltipHasDefaultBehavior?: boolean;
 }
diff --git a/packages/react-table/src/components/Table/TableText.tsx b/packages/react-table/src/components/Table/TableText.tsx
index 15cba859c31..8293160e456 100644
--- a/packages/react-table/src/components/Table/TableText.tsx
+++ b/packages/react-table/src/components/Table/TableText.tsx
@@ -26,7 +26,7 @@ export interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
   /** Determines which wrapping modifier to apply to the table text */
   wrapModifier?: WrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent';
   /** text to display on the tooltip */
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   /** other props to pass to the tooltip */
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** callback used to create the tooltip if text is truncated */
diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx
index 0111d990811..e0658d41f3e 100644
--- a/packages/react-table/src/components/Table/TableTypes.tsx
+++ b/packages/react-table/src/components/Table/TableTypes.tsx
@@ -132,7 +132,7 @@ export interface IExtra extends IExtraData {
   rowData?: IRowData;
   className?: string;
   ariaLabel?: string;
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   tooltipProps?: Omit<TooltipProps, 'content'>;
   tooltipHasDefaultBehavior?: boolean;
 }
diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx
index d2ef2034be9..aaa07a5bcfe 100644
--- a/packages/react-table/src/components/Table/Th.tsx
+++ b/packages/react-table/src/components/Table/Th.tsx
@@ -225,6 +225,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         triggerRef={cellRef as React.RefObject<any>}
         content={tooltip || (tooltip === '' && children)}
         isVisible
+        {...tooltipProps}
       />
     </>
   ) : (

From 57da504889aa81a76f569c641d8e6369c2f379fd Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 30 Nov 2023 16:47:30 -0500
Subject: [PATCH 3/5] add prop to useEffect

---
 packages/react-table/src/components/Table/TableText.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/components/Table/TableText.tsx b/packages/react-table/src/components/Table/TableText.tsx
index 8293160e456..a1341e11ac7 100644
--- a/packages/react-table/src/components/Table/TableText.tsx
+++ b/packages/react-table/src/components/Table/TableText.tsx
@@ -89,7 +89,7 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
         setTooltip('');
       }
     }
-  }, [focused]);
+  }, [focused, tooltipHasDefaultBehavior]);
 
   return tooltip !== '' ? (
     <Tooltip triggerRef={textRef} content={tooltip} {...tooltipProps}>

From 80b27a620dee729b4dc2d4650ee7c2ab646798e2 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 30 Nov 2023 17:09:06 -0500
Subject: [PATCH 4/5] fix logic for keyboard focus

---
 packages/react-table/src/components/Table/TableText.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react-table/src/components/Table/TableText.tsx b/packages/react-table/src/components/Table/TableText.tsx
index a1341e11ac7..4ba3aa2a35b 100644
--- a/packages/react-table/src/components/Table/TableText.tsx
+++ b/packages/react-table/src/components/Table/TableText.tsx
@@ -89,10 +89,15 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
         setTooltip('');
       }
     }
-  }, [focused, tooltipHasDefaultBehavior]);
+  }, [focused, tooltipHasDefaultBehavior, onFocus, textRef]);
 
   return tooltip !== '' ? (
-    <Tooltip triggerRef={textRef} content={tooltip} {...tooltipProps}>
+    <Tooltip
+      triggerRef={textRef}
+      content={tooltip}
+      {...(!tooltipHasDefaultBehavior && { isVisible: true })}
+      {...tooltipProps}
+    >
       {text}
     </Tooltip>
   ) : (

From ea02847b45090d07153e7a2ed26dcfdb320f4934 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Fri, 1 Dec 2023 09:05:24 -0500
Subject: [PATCH 5/5] fix useeffect

---
 packages/react-table/src/components/Table/TableText.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/components/Table/TableText.tsx b/packages/react-table/src/components/Table/TableText.tsx
index 4ba3aa2a35b..659e787263d 100644
--- a/packages/react-table/src/components/Table/TableText.tsx
+++ b/packages/react-table/src/components/Table/TableText.tsx
@@ -89,7 +89,7 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
         setTooltip('');
       }
     }
-  }, [focused, tooltipHasDefaultBehavior, onFocus, textRef]);
+  }, [focused, tooltipHasDefaultBehavior]);
 
   return tooltip !== '' ? (
     <Tooltip