diff --git a/app/client/src/widgets/TableWidgetV2/component/Constants.ts b/app/client/src/widgets/TableWidgetV2/component/Constants.ts index 606c60307f0c..a75d37816ea2 100644 --- a/app/client/src/widgets/TableWidgetV2/component/Constants.ts +++ b/app/client/src/widgets/TableWidgetV2/component/Constants.ts @@ -151,6 +151,9 @@ export interface InlineEditingCellProperties { export interface CellWrappingProperties { allowCellWrapping: boolean; } +export interface DisableTooltipProperties { + disableTooltip: boolean; +} export interface ButtonCellProperties { buttonVariant: ButtonVariant; @@ -222,6 +225,7 @@ export interface CellLayoutProperties extends EditActionCellProperties, InlineEditingCellProperties, CellWrappingProperties, + DisableTooltipProperties, ButtonCellProperties, URLCellProperties, MenuButtonCellProperties, @@ -285,6 +289,7 @@ export interface ColumnBaseProperties { isAscOrder?: boolean; alias: string; allowCellWrapping: boolean; + disableTooltip: boolean; } export interface ColumnStyleProperties { @@ -497,6 +502,7 @@ export interface BaseCellComponentProps { compactMode: string; isHidden: boolean; allowCellWrapping?: boolean; + disableTooltip?: boolean; horizontalAlignment?: CellAlignment; verticalAlignment?: VerticalAlignment; cellBackground?: string; diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 0f9f6ccffb8c..5ff5fbde8cae 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -1,10 +1,10 @@ -import React, { createRef, useEffect, useState } from "react"; import { Tooltip } from "@blueprintjs/core"; -import { CellWrapper, TooltipContentWrapper } from "../TableStyledWrappers"; -import type { CellAlignment, VerticalAlignment } from "../Constants"; +import { importSvg } from "design-system-old"; +import React, { createRef, useEffect, useState } from "react"; import styled from "styled-components"; import { ColumnTypes } from "widgets/TableWidgetV2/constants"; -import { importSvg } from "design-system-old"; +import type { CellAlignment, VerticalAlignment } from "../Constants"; +import { CellWrapper, TooltipContentWrapper } from "../TableStyledWrappers"; const OpenNewTabIcon = importSvg( async () => import("assets/icons/control/open-new-tab.svg"), @@ -37,8 +37,8 @@ const TOOLTIP_OPEN_DELAY = 500; function useToolTip( children: React.ReactNode, - tableWidth?: number, title?: string, + disableTooltip?: boolean, ) { const ref = createRef(); const [requiresTooltip, setRequiresTooltip] = useState(false); @@ -54,7 +54,11 @@ function useToolTip( * during initial render */ timeout = setTimeout(() => { - if (element && element.offsetWidth < element.scrollWidth) { + const requiresTooltip = + !disableTooltip && + element && + element.offsetWidth < element.scrollWidth; + if (requiresTooltip) { setRequiresTooltip(true); } else { setRequiresTooltip(false); @@ -116,6 +120,7 @@ interface Props { className?: string; compactMode?: string; allowCellWrapping?: boolean; + disableTooltip?: boolean; horizontalAlignment?: CellAlignment; verticalAlignment?: VerticalAlignment; textColor?: string; @@ -128,7 +133,7 @@ interface Props { } function LinkWrapper(props: Props) { - const content = useToolTip(props.children, props.tableWidth, props.title); + const content = useToolTip(props.children, props.title, props.disableTooltip); return ( ; diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/BasicCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/BasicCell.tsx index 2e30ed6185e6..12049bfa04a4 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/BasicCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/BasicCell.tsx @@ -99,6 +99,7 @@ export const BasicCell = React.forwardRef( compactMode, disabledEditIcon, disabledEditIconMessage, + disableTooltip, fontStyle, hasUnsavedChanges, horizontalAlignment, @@ -143,6 +144,7 @@ export const BasicCell = React.forwardRef( className={isCellEditable ? "editable-cell" : ""} columnType={columnType} compactMode={compactMode} + disableTooltip={disableTooltip} fontStyle={fontStyle} horizontalAlignment={horizontalAlignment} isCellDisabled={isCellDisabled} diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/PlainTextCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/PlainTextCell.tsx index fed285bd093c..3006ee3ed274 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/PlainTextCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/PlainTextCell.tsx @@ -118,6 +118,7 @@ function PlainTextCell( decimals, disabledEditIcon, disabledEditIconMessage, + disableTooltip, displayText, fontStyle, hasUnsavedChanges, @@ -299,6 +300,7 @@ function PlainTextCell( cellBackground={cellBackground} columnType={columnType} compactMode={compactMode} + disableTooltip={disableTooltip} disabledEditIcon={disabledEditIcon} disabledEditIconMessage={disabledEditIconMessage} fontStyle={fontStyle} diff --git a/app/client/src/widgets/TableWidgetV2/component/header/actions/Utilities.test.ts b/app/client/src/widgets/TableWidgetV2/component/header/actions/Utilities.test.ts index a9558cefcc8e..ea6e72177885 100644 --- a/app/client/src/widgets/TableWidgetV2/component/header/actions/Utilities.test.ts +++ b/app/client/src/widgets/TableWidgetV2/component/header/actions/Utilities.test.ts @@ -29,6 +29,7 @@ describe("TransformTableDataIntoArrayOfArray", () => { isCellEditable: false, isEditable: false, allowCellWrapping: false, + disableTooltip: false, }, }, ]; diff --git a/app/client/src/widgets/TableWidgetV2/widget/index.tsx b/app/client/src/widgets/TableWidgetV2/widget/index.tsx index 919d90b22a46..07e3729997ee 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/TableWidgetV2/widget/index.tsx @@ -2497,6 +2497,7 @@ class TableWidgetV2 extends BaseWidget { compactMode={compactMode} currencyCode={cellProperties.currencyCode} decimals={cellProperties.decimals} + disableTooltip={cellProperties.disableTooltip} disabledEditIcon={ shouldDisableEdit || this.props.isAddRowInProgress } diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts index 00fc6cb7151f..3e3ea821ef63 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts @@ -105,6 +105,27 @@ export default { ]); }, }, + { + propertyName: "disableTooltip", + dependencies: ["primaryColumns", "columnType"], + label: "Disable tooltip", + helpText: "Hides tooltip on cell hover", + defaultValue: false, + controlType: "SWITCH", + customJSControl: "TABLE_COMPUTE_VALUE", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE, + params: { + type: ValidationTypes.BOOLEAN, + }, + }, + hidden: (props: TableWidgetProps, propertyPath: string) => { + return hideByColumnType(props, propertyPath, [ColumnTypes.TEXT]); + }, + }, { propertyName: "isCellEditable", dependencies: [ diff --git a/app/client/src/widgets/TableWidgetV2/widget/utilities.ts b/app/client/src/widgets/TableWidgetV2/widget/utilities.ts index b682b786b7e8..50d6cfb8f0cc 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/utilities.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/utilities.ts @@ -225,6 +225,7 @@ export function getDefaultColumnProperties( decimals: 0, thousandSeparator: true, notation: "standard" as Intl.NumberFormatOptions["notation"], + disableTooltip: false, }; return columnProps; @@ -523,6 +524,10 @@ export const getCellProperties = ( rowIndex, ), notation: getPropertyValue(columnProperties.notation, rowIndex, true), + disableTooltip: getBooleanPropertyValue( + columnProperties.disableTooltip, + rowIndex, + ), } as CellLayoutProperties; } return {} as CellLayoutProperties;