fix:- added elipsis and tooltip to the button content in table widget component

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,66 @@ 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 mouseEnterHandler = () => {
-      const element = ref.current?.querySelector("div") as HTMLDivElement;
-
-      /*
-       * Using setTimeout to simulate hoverOpenDelay of the tooltip
-       * during initial render
-       */
-      timeout = setTimeout(() => {
-        if (element && element.offsetWidth < element.scrollWidth) {
-          setRequiresTooltip(true);
-        } else {
-          setRequiresTooltip(false);
-        }
-
-        ref.current?.removeEventListener("mouseenter", mouseEnterHandler);
-        ref.current?.removeEventListener("mouseleave", mouseLeaveHandler);
-      }, TOOLTIP_OPEN_DELAY);
-    };
-
-    const mouseLeaveHandler = () => {
-      clearTimeout(timeout);
-    };
-
-    ref.current?.addEventListener("mouseenter", mouseEnterHandler);
-    ref.current?.addEventListener("mouseleave", mouseLeaveHandler);
-
-    return () => {
-      ref.current?.removeEventListener("mouseenter", mouseEnterHandler);
-      ref.current?.removeEventListener("mouseleave", mouseLeaveHandler);
-      clearTimeout(timeout);
-    };
-  }, [children]);
+  useEffect(
+    function setupMouseHandlers() {
+      let timeout: ReturnType<typeof setTimeout>;
+      const currentRef = ref.current;
+
+      if (!currentRef) return;
+
+      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);
+          }
+
+          currentRef?.removeEventListener("mouseenter", mouseEnterHandler);
+          currentRef?.removeEventListener("mouseleave", mouseLeaveHandler);
+        }, TOOLTIP_OPEN_DELAY);
+      };
+
+      const mouseLeaveHandler = () => {
+        setRequiresTooltip(false);
+        clearTimeout(timeout);
+      };
+
+      currentRef?.addEventListener("mouseenter", mouseEnterHandler);
+      currentRef?.addEventListener("mouseleave", mouseLeaveHandler);
+
+      return () => {
+        currentRef?.removeEventListener("mouseenter", mouseEnterHandler);
+        currentRef?.removeEventListener("mouseleave", mouseLeaveHandler);
+        clearTimeout(timeout);
+      };
+    },
+    [children, isButton, ref],
+  );
 
   return requiresTooltip && children ? (
     <Tooltip
@@ -160,11 +181,16 @@ function LinkWrapper(props: Props) {
 
 function AutoToolTipComponent(props: Props) {
   const content = useToolTip(props.children, props.title);
+  const buttonContent = useToolTip(props.children, props.title, true);
 
   if (props.columnType === ColumnTypes.URL && props.title) {
     return <LinkWrapper {...props} />;
   }
 
+  if (props.columnType === ColumnTypes.BUTTON && props.title) {
+    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;
@@ -37,27 +41,31 @@ export function Button(props: ButtonProps) {
     props.onCommandClick(props.action.dynamicTrigger, onComplete);
   };
 
+  const stopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
   return (
-    <ActionWrapper
-      disabled={!!props.isDisabled}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      {props.isCellVisible && props.action.isVisible ? (
-        <StyledButton
-          borderRadius={props.action.borderRadius}
-          boxShadow={props.action.boxShadow}
-          buttonColor={props.action.backgroundColor}
-          buttonVariant={props.action.variant}
-          compactMode={props.compactMode}
-          disabled={props.isDisabled}
-          iconAlign={props.action.iconAlign}
-          iconName={props.action.iconName}
-          loading={loading}
-          onClick={handleClick}
-          text={props.action.label}
-        />
+    <ActionWrapper disabled={!!props.isDisabled} onClick={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}
+            buttonColor={props.action.backgroundColor}
+            buttonVariant={props.action.variant}
+            compactMode={props.compactMode}
+            disabled={props.isDisabled}
+            iconAlign={props.action.iconAlign}
+            iconName={props.action.iconName}
+            loading={loading}
+            onClick={handleClick}
+            text={props.action.label}
+          />
+        </AutoToolTipComponent>
       ) : null}
     </ActionWrapper>
   );