Fleet UI: Component fixes (styling bugs and code cleanup) (#26149)

frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from "react";
 import { kebabCase, noop } from "lodash";
-import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
 
 import { ButtonVariant } from "components/buttons/Button/Button";
 import Icon from "components/Icon/Icon";
@@ -17,7 +16,6 @@ export interface IActionButtonProps {
   hideButton?: boolean | ((targetIds: number[]) => boolean);
   iconSvg?: IconNames;
   iconPosition?: string;
-  indicatePremiumFeature?: boolean;
 }
 
 function useActionCallback(
@@ -41,7 +39,6 @@ const ActionButton = (buttonProps: IActionButtonProps): JSX.Element | null => {
     hideButton,
     iconSvg,
     iconPosition,
-    indicatePremiumFeature,
   } = buttonProps;
   const onButtonClick = useActionCallback(onActionButtonClick || noop);
 
@@ -62,14 +59,7 @@ const ActionButton = (buttonProps: IActionButtonProps): JSX.Element | null => {
 
   return (
     <div className={`${baseClass} ${baseClass}__${kebabCase(name)}`}>
-      {indicatePremiumFeature && (
-        <PremiumFeatureIconWithTooltip tooltipDelayHide={500} />
-      )}
-      <Button
-        disabled={indicatePremiumFeature}
-        onClick={() => onButtonClick(targetIds)}
-        variant={variant}
-      >
+      <Button onClick={() => onButtonClick(targetIds)} variant={variant}>
         <>
           {iconPosition === "left" && iconSvg && <Icon name={iconSvg} />}
           {buttonText}

frontend/components/TableContainer/DataTable/DataTable.tsx

@@ -402,7 +402,6 @@ const DataTable = ({
       hideButton,
       iconSvg,
       iconPosition,
-      indicatePremiumFeature,
     } = actionButtonProps;
     return (
       <div className={`${baseClass}__${kebabCase(name)}`}>
@@ -414,7 +413,6 @@ const DataTable = ({
           targetIds={targetIds}
           variant={variant}
           hideButton={hideButton}
-          indicatePremiumFeature={indicatePremiumFeature}
           iconSvg={iconSvg}
           iconPosition={iconPosition}
         />

frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx

@@ -17,6 +17,8 @@ interface ITooltipTruncatedTextCellProps {
   /** @deprecated use the prop `className` in order to add custom classes to this component */
   classes?: string;
   className?: string;
+  /** Content does not get truncated */
+  suffix?: React.ReactNode;
 }
 
 const baseClass = "tooltip-truncated-cell";
@@ -27,13 +29,14 @@ const TooltipTruncatedTextCell = ({
   tooltipBreakOnWord = false,
   classes = "w250",
   className,
+  suffix,
 }: ITooltipTruncatedTextCellProps): JSX.Element => {
   const classNames = classnames(baseClass, classes, className, {
     "tooltip-break-on-word": tooltipBreakOnWord,
   });
 
   // Tooltip visibility logic: Enable only when text is truncated
-  const ref = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLSpanElement>(null);
   const [tooltipDisabled, setTooltipDisabled] = useState(true);
 
   useLayoutEffect(() => {
@@ -51,14 +54,14 @@ const TooltipTruncatedTextCell = ({
   return (
     <div className={classNames}>
       <div
-        className="data-table__tooltip-truncated-text"
+        className="data-table__tooltip-truncated-text-container"
         data-tip
         data-for={tooltipId}
         data-tip-disable={isDefaultValue || tooltipDisabled}
       >
         <span
           ref={ref}
-          className={`data-table__tooltip-truncated-text--cell ${
+          className={`data-table__tooltip-truncated-text ${
             isDefaultValue ? "text-muted" : ""
           } ${tooltipDisabled ? "" : "truncated"}`}
         >
@@ -81,6 +84,7 @@ const TooltipTruncatedTextCell = ({
           {/* Fixes triple click selecting next element in Safari */}
         </>
       </ReactTooltip>
+      {suffix && <span className="data-table__suffix">{suffix}</span>}
     </div>
   );
 };

frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/_styles.scss

@@ -1,8 +1,22 @@
 .tooltip-truncated-cell {
+  display: flex;
+  align-items: center; // For badges, etc
+
   .text-muted {
     color: $ui-fleet-black-50;
   }
+
+  .data-table__tooltip-truncated-text-container {
+    display: flex; // Flex container for text and suffix
+    align-items: center; // Keep text and suffix aligned
+    min-width: 0; // Prevent flex child from growing beyond container
+  }
+
   .data-table__tooltip-truncated-text {
+    white-space: nowrap; /* Prevent wrapping */
+    overflow: hidden; /* Hide overflowing text */
+    text-overflow: ellipsis; /* Add ellipsis for truncated text */
+
     &--cell {
       display: inline-block;
       overflow: hidden;
@@ -35,4 +49,9 @@
       word-break: normal;
     }
   }
+
+  .data-table__suffix {
+    margin-left: 8px; /* Add spacing between text and suffix */
+    flex-shrink: 0; /* Prevent suffix from shrinking */
+  }
 }