chore: external merge request from Contributor

app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx

@@ -473,6 +473,7 @@ export const MenuColumnWrapper = styled.div<{ selected: boolean }>`
 
 export const ActionWrapper = styled.div<{ disabled: boolean }>`
   margin: 0 5px 0 0;
+  max-width: 100%;
   ${(props) => (props.disabled ? "cursor: not-allowed;" : null)}
   &&&&&& {
     .bp3-button {

app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx

@@ -36,45 +36,63 @@ const MAX_WIDTH = 500;
 const TOOLTIP_OPEN_DELAY = 500;
 const MAX_CHARS_ALLOWED_IN_TOOLTIP = 200;
 
-function useToolTip(children: React.ReactNode, title?: string) {
+function isButtonTextTruncated(element: HTMLElement) {
+  const spanElement = element.querySelector("span");
+  const offsetWidth = spanElement?.offsetWidth ?? 0;
+  const scrollWidth = spanElement?.scrollWidth ?? 0;
+
+  return scrollWidth > offsetWidth;
+}
+
+function useToolTip(
+  children: React.ReactNode,
+  title?: string,
+  isButton?: boolean,
+) {
   const ref = createRef<HTMLDivElement>();
   const [requiresTooltip, setRequiresTooltip] = useState(false);
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
+    const currentRef = ref.current;
 
-    const mouseEnterHandler = () => {
-      const element = ref.current?.querySelector("div") as HTMLDivElement;
+    if (!currentRef) return;
 
-      /*
-       * Using setTimeout to simulate hoverOpenDelay of the tooltip
-       * during initial render
-       */
+    const mouseEnterHandler = () => {
       timeout = setTimeout(() => {
+        const element = currentRef?.querySelector("div") as HTMLDivElement;
+
+        /*
+         * Using setTimeout to simulate hoverOpenDelay of the tooltip
+         * during initial render
+         */
         if (element && element.offsetWidth < element.scrollWidth) {
           setRequiresTooltip(true);
+        } else if (isButton && element && isButtonTextTruncated(element)) {
+          setRequiresTooltip(true);
         } else {
           setRequiresTooltip(false);
         }
 
-        ref.current?.removeEventListener("mouseenter", mouseEnterHandler);
-        ref.current?.removeEventListener("mouseleave", mouseLeaveHandler);
+        currentRef?.removeEventListener("mouseenter", mouseEnterHandler);
+        currentRef?.removeEventListener("mouseleave", mouseLeaveHandler);
       }, TOOLTIP_OPEN_DELAY);
     };
 
     const mouseLeaveHandler = () => {
+      setRequiresTooltip(false);
       clearTimeout(timeout);
     };
 
-    ref.current?.addEventListener("mouseenter", mouseEnterHandler);
-    ref.current?.addEventListener("mouseleave", mouseLeaveHandler);
+    currentRef?.addEventListener("mouseenter", mouseEnterHandler);
+    currentRef?.addEventListener("mouseleave", mouseLeaveHandler);
 
     return () => {
-      ref.current?.removeEventListener("mouseenter", mouseEnterHandler);
-      ref.current?.removeEventListener("mouseleave", mouseLeaveHandler);
+      currentRef?.removeEventListener("mouseenter", mouseEnterHandler);
+      currentRef?.removeEventListener("mouseleave", mouseLeaveHandler);
       clearTimeout(timeout);
     };
-  }, [children]);
+  }, [children,isButton]);
 
   return requiresTooltip && children ? (
     <Tooltip
@@ -165,6 +183,11 @@ function AutoToolTipComponent(props: Props) {
     return <LinkWrapper {...props} />;
   }
 
+  if (props.columnType === ColumnTypes.BUTTON && props.title) {
+    const buttonContent = useToolTip(props.children, props.title, true);
+    return buttonContent;
+  }
+
   return (
     <ColumnWrapper className={props.className} textColor={props.textColor}>
       <CellWrapper

app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx

@@ -2,8 +2,12 @@ import React, { useState } from "react";
 
 import { ActionWrapper } from "../TableStyledWrappers";
 import { BaseButton } from "widgets/ButtonWidget/component";
-import type { ButtonColumnActions } from "widgets/TableWidgetV2/constants";
+import {
+  ColumnTypes,
+  type ButtonColumnActions,
+} from "widgets/TableWidgetV2/constants";
 import styled from "styled-components";
+import AutoToolTipComponent from "widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent";
 
 const StyledButton = styled(BaseButton)<{
   compactMode?: string;
@@ -39,12 +43,16 @@ export function Button(props: ButtonProps) {
 
   return (
     <ActionWrapper
-      disabled={!!props.isDisabled}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      {props.isCellVisible && props.action.isVisible ? (
+    disabled={!!props.isDisabled}
+    onClick={(e) => {
+      e.stopPropagation();
+    }}
+  >
+    {props.isCellVisible && props.action.isVisible && props.action.label ? (
+      <AutoToolTipComponent
+        columnType={ColumnTypes.BUTTON}
+        title={props.action.label}
+      >
         <StyledButton
           borderRadius={props.action.borderRadius}
           boxShadow={props.action.boxShadow}
@@ -58,7 +66,9 @@ export function Button(props: ButtonProps) {
           onClick={handleClick}
           text={props.action.label}
         />
-      ) : null}
-    </ActionWrapper>
+      </AutoToolTipComponent>
+    ) 
+    : null}
+  </ActionWrapper>
   );
 }