added Mesa table tooltips for td contents when in 'inline' mode (basi…

…cally fixed-height mode)

packages/libs/coreui/src/components/Mesa/Templates.jsx

@@ -6,10 +6,14 @@ import TruncatedText from './Components/TruncatedText';
 import { stringValue } from './Utils/Utils';
 
 const Templates = {
+  textText({ value }) {
+    return stringValue(value);
+  },
+
   textCell({ key, value, row, rowIndex, column }) {
     const { truncated } = column;
     const className = 'Cell Cell-' + key;
-    const text = stringValue(value);
+    const text = Templates.textText({ value });
 
     return truncated ? (
       <TruncatedText
@@ -22,36 +26,44 @@ const Templates = {
     );
   },
 
+  numberText({ value }) {
+    return typeof value === 'number'
+      ? value.toLocaleString()
+      : stringValue(value);
+  },
+
   numberCell({ key, value, row, rowIndex, column }) {
     const className = 'Cell NumberCell Cell-' + key;
-    const display =
-      typeof value === 'number' ? value.toLocaleString() : stringValue(value);
-
+    const display = Templates.numberText({ value });
     return <div className={className}>{display}</div>;
   },
 
+  wdkLinkText({ value, href }) {
+    const { displayText, url } = value;
+    return displayText.length ? value.displayText : href;
+  },
+
   wdkLinkCell({ key, value, row, rowIndex, column }) {
     const className = 'Cell wdkLinkCell Cell-' + key;
-    let { displayText, url } = value;
-    let href = url ? url : '#';
-    let text = displayText.length ? value.displayText : href;
-    text = <div dangerouslySetInnerHTML={{ __html: text }} />;
-    let target = '_blank';
-
+    const { url } = value;
+    const href = url ? url : '#';
+    const text = Templates.wdkLinkText({ value, href });
+    const div = <div dangerouslySetInnerHTML={{ __html: text }} />;
+    const target = '_blank';
     const props = { href, target, className };
 
-    return <a {...props}>{text}</a>;
+    return <a {...props}>{div}</a>;
+  },
+
+  linkText({ value }) {
+    const { text } = getLinkDetails(value);
+    return text;
   },
 
   linkCell({ key, value, row, rowIndex, column }) {
     const className = 'Cell LinkCell Cell-' + key;
-    const defaults = { href: null, target: '_blank', text: '' };
-    let { href, target, text } = typeof value === 'object' ? value : defaults;
-    href = href ? href : typeof value === 'string' ? value : '#';
-    text = text.length ? text : href;
-
+    const { href, text, target } = getLinkDetails(value);
     const props = { href, target, className, name: text };
-
     return <a {...props}>{text}</a>;
   },
 
@@ -78,4 +90,17 @@ const Templates = {
   },
 };
 
+function getLinkDetails(value) {
+  const defaults = { href: '#', text: '', target: '_blank' };
+  if (typeof value === 'string') {
+    // If the value is a string, it's used for both href and text, with default target
+    return { ...defaults, href: value, text: value };
+  } else if (typeof value === 'object' && value != null) {
+    // If the value is an object, extract href, text, and target, applying defaults as necessary
+    const { href = '#', text = '', target = '_blank' } = value;
+    return { href, text: text.length > 0 ? text : href, target };
+  }
+  return defaults;
+}
+
 export default Templates;

packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx

@@ -23,8 +23,7 @@ class DataCell extends React.PureComponent {
       return column.renderCell(cellProps);
     }
 
-    if (!column.type) return Templates.textCell(cellProps);
-    if (!cellProps.value) return Templates.textCell(cellProps);
+    if (!column.type || !cellProps.value) return Templates.textCell(cellProps);
 
     switch (column.type.toLowerCase()) {
       case 'wdklink':
@@ -43,6 +42,33 @@ class DataCell extends React.PureComponent {
     }
   }
 
+  getTooltipText() {
+    const { row, column, rowIndex, columnIndex, inline } = this.props;
+    const { key, getValue } = column;
+    const value =
+      typeof getValue === 'function' ? getValue({ row, key }) : row[key];
+    const cellProps = { key, value, row, column, rowIndex, columnIndex };
+
+    // ignores optional renderCell wrapper function
+
+    if (!column.type || !cellProps.value) return Templates.textText(cellProps);
+
+    switch (column.type.toLowerCase()) {
+      case 'wdklink':
+        return Templates.wdkLinkText(cellProps);
+      case 'link':
+        return Templates.linkText(cellProps);
+      case 'number':
+        return Templates.numberText(cellProps);
+      case 'html': {
+        return undefined; // no title attribute/tooltip for HTML cells
+      }
+      case 'text':
+      default:
+        return Templates.textText(cellProps);
+    }
+  }
+
   render() {
     let { column, inline, options } = this.props;
     let { style, width, className, key } = column;
@@ -60,13 +86,18 @@ class DataCell extends React.PureComponent {
     width = width ? { width, maxWidth: width, minWidth: width } : {};
     style = Object.assign({}, style, width, whiteSpace);
     className = dataCellClass() + (className ? ' ' + className : '');
+
+    // provide basic mouse-over support for inline tables where
+    // text is likely to be truncated
+    const title = inline ? this.getTooltipText() : undefined;
+
     const children = this.renderContent();
     const props = {
       style,
       children,
       key,
       className,
-      title: 'possibly an option to use the title attribute',
+      title,
     };
 
     return column.hidden ? null : <td {...props} />;