Merge pull request ManageIQ#8825 from jeffibm/fix-datatable-truncation

Fix text truncation in data tables

Author: Fryguy

app/javascript/components/miq-data-table/miq-table-cell.jsx

@@ -12,8 +12,18 @@ import {
 const MiqTableCell = ({
   cell, onCellClick, row, truncate,
 }) => {
-  const truncateText = <span title={cell.value} className="bx--front-line">{cell.value}</span>;
-  const truncateClass = ((cell.value).length > 40) && truncate ? 'truncate_cell' : '';
+  const longText = truncate && ((cell.value).length > 40);
+  const veryLongText = truncate && ((cell.value).length > 300);
+
+  const truncateClass = longText ? 'truncate_cell' : '';
+  const wrapClass = longText ? 'white_space_normal' : '';
+  const longerTextClass = veryLongText ? 'truncate_longer_text' : '';
+
+  const truncateText = (
+    <span title={cell.value} className={classNames('bx--front-line', wrapClass, longerTextClass)}>
+      {cell.value}
+    </span>
+  );
   const cellClass = classNames('cell', truncateClass, cell.data.style_class);
   const cellText = () => (
     <div className={cellClass}>
@@ -60,16 +70,21 @@ const MiqTableCell = ({
   };
 
   /** Fuction to render icon(s) in cell. */
-  const renderIcon = (icon, style, showText) => (
-    <div className={cellClass}>
-      {
-        typeof (icon) === 'string'
-          ? <i className={classNames('fa-lg', 'icon', icon)} style={style} />
-          : icon.map((i, index) => <i className={classNames('fa-lg', 'icon', i)} key={index.toString()} />)
-      }
-      {showText && truncateText}
-    </div>
-  );
+  const renderIcon = (icon, style, showText) => {
+    const hasBackground = Object.keys(style).includes('background');
+    const styledIconClass = hasBackground ? 'styled_icon' : '';
+    const longerTextClass = hasBackground && veryLongText ? 'styled_icon_margin' : '';
+    return (
+      <div className={cellClass}>
+        {
+          typeof (icon) === 'string'
+            ? <i className={classNames('fa-lg', 'icon', icon, styledIconClass, longerTextClass)} style={style} />
+            : icon.map((i, index) => <i className={classNames('fa-lg', 'icon', i)} key={index.toString()} />)
+        }
+        {showText && truncateText}
+      </div>
+    );
+  };
 
   /** Fuction to render an icon in cell based on the 'type' in 'item'. */
   const cellIcon = (item, showText) => {
@@ -101,9 +116,9 @@ const MiqTableCell = ({
   const cellButton = (item) => (
     <div className={cellClass}>
       <Button
-        onClick={(e) => cellButtonEvent(item,e)}
+        onClick={(e) => cellButtonEvent(item, e)}
         disabled={item.disabled}
-        onKeyPress={(e) => cellButtonEvent(item,e)}
+        onKeyPress={(e) => cellButtonEvent(item, e)}
         tabIndex={0}
         title={item.title ? item.title : truncateText}
         kind={item.kind ? item.kind : 'primary'}
@@ -115,7 +130,6 @@ const MiqTableCell = ({
   );
 
   /** Function to render a Text Box inside cell. */
-  /* eslint-disable no-eval */
   const cellTextInput = (item, id) => (
     <div className={cellClass}>
       <TextInput
@@ -136,7 +150,6 @@ const MiqTableCell = ({
   );
 
   /** Function to render a Toggle inside cell. */
-  /* eslint-disable no-eval */
   const cellToggle = (item, id) => (
     <div className={cellClass}>
       <Toggle
@@ -153,12 +166,9 @@ const MiqTableCell = ({
   );
 
   /** Function to render a Link inside cell. */
-  /* eslint-disable no-eval */
-  const cellLink = (item, id) => (
+  const cellLink = (item, _id) => (
     <div className={cellClass}>
-      <Link
-        href={item.href}
-      >
+      <Link href={item.href}>
         {item.label}
       </Link>
     </div>

app/stylesheet/miq-data-table.scss

@@ -57,11 +57,12 @@
 
     .cell {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: flex-start;
 
       &.truncate_cell {
-        max-width: 250px;
+        max-width: 700px;
+        min-width: 150px;
       }
 
       .array_list {
@@ -75,18 +76,32 @@
       }
 
       .image {
-        width: 30px;
-        height: 30px;
-        margin-right: 5px;
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+        margin-top: 4px;
       }
 
       .icon {
         min-width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
-        justify-content: center;
-        margin-right: 5px;
+        justify-content: flex-start;
+        margin-top: 0;
+
+        &.styled_icon {
+          min-width: 20px;
+          height: 20px;
+          justify-content: center;
+          margin-right: 5px;
+          margin-top: 5px;
+          font-size: 14px;
+        }
+
+        &.styled_icon_margin {
+          margin-top: 9px;
+        }
       }
 
       .icon.fa-ruby {
@@ -113,16 +128,39 @@
       }
     }
 
+    td {
+      vertical-align: top;
+    }
+
     td.no_text {
       width: 50px;
     }
 
+    td .bx--checkbox--inline {
+      margin-top: 4px;
+    }
+
     td .bx--front-line {
       width: 100%;
       display: inline-block;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       overflow: hidden;
+      white-space: nowrap;
+      margin-top: 5px;
+
+      &.white_space_normal {
+        white-space: normal !important;
+        text-align: justify;
+      }
+
+      &.truncate_longer_text {
+        max-height: 300px;
+        display: -webkit-box;
+        max-width: 200px;
+        -webkit-line-clamp: 15;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-bottom: 8px;
+      }
     }
   }
 }
@@ -186,6 +224,8 @@
     }
 
     thead tr th {  
+      vertical-align: middle;
+
       .bx--table-header-label {
         min-width: fit-content;
       }