Skip to content

fix: Truncate title in tooltips in table cell if it exceeds 200 characters #34507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rahulbarwal merged 6 commits into from
Jun 27, 2024
Merged

fix: Truncate title in tooltips in table cell if it exceeds 200 characters #34507

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e2db9f7
chore: Add title truncation for tooltips
rahulbarwal Jun 26, 2024
f62f0c4
chore: Truncate title in tooltips if it exceeds 200 characters
rahulbarwal Jun 26, 2024
17682dc
Refactor tooltip content truncation logic in AutoToolTipComponent
rahulbarwal Jun 27, 2024
ef06bcc
Refactor: Remove unused tableWidth parameter from useToolTip function…
rahulbarwal Jun 27, 2024
514e8f4
Fix tooltip truncation logic in TableWidgetV2 to handle long titles c…
rahulbarwal Jun 27, 2024
a4007cb
Merge branch 'release' of https://github.com/appsmithorg/appsmith int…
rahulbarwal Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"),
Expand Down Expand Up @@ -34,12 +34,9 @@ export const Content = styled.span`
const WIDTH_OFFSET = 32;
const MAX_WIDTH = 500;
const TOOLTIP_OPEN_DELAY = 500;
const MAX_CHARS_ALLOWED_IN_TOOLTIP = 200;

function useToolTip(
children: React.ReactNode,
tableWidth?: number,
title?: string,
) {
function useToolTip(children: React.ReactNode, title?: string) {
const ref = createRef<HTMLDivElement>();
const [requiresTooltip, setRequiresTooltip] = useState(false);

Expand Down Expand Up @@ -85,7 +82,9 @@ function useToolTip(
boundary="viewport"
content={
<TooltipContentWrapper width={MAX_WIDTH - WIDTH_OFFSET}>
{title}
{title && title.length > MAX_CHARS_ALLOWED_IN_TOOLTIP
? `${title.substring(0, MAX_CHARS_ALLOWED_IN_TOOLTIP)} (...)`
: title}
</TooltipContentWrapper>
}
defaultIsOpen
Expand Down Expand Up @@ -128,7 +127,7 @@ interface Props {
}

function LinkWrapper(props: Props) {
const content = useToolTip(props.children, props.tableWidth, props.title);
const content = useToolTip(props.children, props.title);

return (
<CellWrapper
Expand Down Expand Up @@ -160,7 +159,7 @@ function LinkWrapper(props: Props) {
}

function AutoToolTipComponent(props: Props) {
const content = useToolTip(props.children, props.tableWidth, props.title);
const content = useToolTip(props.children, props.title);

if (props.columnType === ColumnTypes.URL && props.title) {
return <LinkWrapper {...props} />;
Expand Down