render Truncate's child instead of creating own component to render

client/src/components/util/truncate.js

@@ -52,18 +52,17 @@ export default class Truncate extends Component {
   };
 
   render() {
-    const {
+    const { children, size, fontSize } = this.props;
-      children,
+    const originalString = children[0].text;
+    const truncatedString = this.maybeTruncateString(
+      originalString,
       size,
-      fontSize,
+      fontSize
-      "data-testid": testID,
+    );
-      "data-testclass": testClass,
+    children[0].text = truncatedString;
-      style,
-    } = this.props;
-    const truncatedString = this.maybeTruncateString(children, size, fontSize);
     return (
       <Tooltip
-        content={children}
+        content={originalString}
         disabled={truncatedString === null}
         hoverOpenDelay={tooltipHoverOpenDelayQuick}
         position={Position.LEFT}
@@ -73,9 +72,7 @@ export default class Truncate extends Component {
           hide: { enabled: false },
         }}
       >
-        <span data-testid={testID} data-testclass={testClass} style={style}>
+        {children}
-          {truncatedString || children}
-        </span>
       </Tooltip>
     );
   }