From 53f662642e908992248155d079aaab528e034bab Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Wed, 26 Jun 2024 12:37:27 +0530 Subject: [PATCH 1/5] chore: Update AutoToolTipComponent to use auto position --- .../component/cellComponents/AutoToolTipComponent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 0f9f6ccffb8c..06b154fc4d38 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -90,7 +90,6 @@ function useToolTip( } defaultIsOpen hoverOpenDelay={TOOLTIP_OPEN_DELAY} - position="bottom" usePortal > { From 07446b4e689ec5e20b6a49e996b31f823d9aab15 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Wed, 26 Jun 2024 12:45:36 +0530 Subject: [PATCH 2/5] chore: Update AutoToolTipComponent to use right position Since auto was creating problems when table was used in middle. --- .../component/cellComponents/AutoToolTipComponent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 06b154fc4d38..79a4091f3db6 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -90,6 +90,7 @@ function useToolTip( } defaultIsOpen hoverOpenDelay={TOOLTIP_OPEN_DELAY} + position="right" usePortal > { From 888362ad3be85989455f172cc905c946aa2a43cb Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Wed, 26 Jun 2024 14:29:39 +0530 Subject: [PATCH 3/5] feat: Add disableTooltip property to TableWidgetV2 This commit adds the disableTooltip property to the TableWidgetV2 component. The disableTooltip property allows users to hide tooltips on cell hover. This feature was added in response to user feedback and will improve the user experience when working with tables. --- .../TableWidgetV2/component/Constants.ts | 6 +++++ .../cellComponents/AutoToolTipComponent.tsx | 25 +++++++++++-------- .../component/cellComponents/BasicCell.tsx | 2 ++ .../cellComponents/PlainTextCell.tsx | 2 ++ .../widgets/TableWidgetV2/widget/index.tsx | 1 + .../propertyConfig/PanelConfig/General.ts | 21 ++++++++++++++++ .../widgets/TableWidgetV2/widget/utilities.ts | 5 ++++ 7 files changed, 51 insertions(+), 11 deletions(-) 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 79a4091f3db6..3926ee353aaf 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); @@ -82,15 +86,13 @@ function useToolTip( return requiresTooltip && children ? ( {title} } - defaultIsOpen hoverOpenDelay={TOOLTIP_OPEN_DELAY} - position="right" + position="bottom" usePortal > { @@ -116,6 +118,7 @@ interface Props { className?: string; compactMode?: string; allowCellWrapping?: boolean; + disableTooltip?: boolean; horizontalAlignment?: CellAlignment; verticalAlignment?: VerticalAlignment; textColor?: string; @@ -128,7 +131,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/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; From 17405b22ffe8dea52486bb4468e26869e36a2d96 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Wed, 26 Jun 2024 14:31:18 +0530 Subject: [PATCH 4/5] fixes test after adding `disableTooltip` property --- .../TableWidgetV2/component/header/actions/Utilities.test.ts | 1 + 1 file changed, 1 insertion(+) 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, }, }, ]; From 7f05ef08cafafbb3c8f000ec1d2322e72759686c Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Wed, 26 Jun 2024 16:13:05 +0530 Subject: [PATCH 5/5] reverts unnecessary code changes --- .../component/cellComponents/AutoToolTipComponent.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx index 3926ee353aaf..5ff5fbde8cae 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx @@ -86,11 +86,13 @@ function useToolTip( return requiresTooltip && children ? ( {title} } + defaultIsOpen hoverOpenDelay={TOOLTIP_OPEN_DELAY} position="bottom" usePortal