Skip to content
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.

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

feat(chart-controls): Show detailed data type tooltip when hovering type icon #23970

Merged
merged 10 commits into from
May 11, 2023
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ import { Tooltip } from './Tooltip';
import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
import { ColumnMeta } from '../types';
import { getColumnLabelText, getColumnTooltipNode } from './labelUtils';
import {
getColumnLabelText,
getColumnTooltipNode,
getColumnTypeTooltipNode,
} from './labelUtils';
import { SQLPopover } from './SQLPopover';

export type ColumnOptionProps = {
Expand All @@ -48,14 +52,27 @@ export function ColumnOption({
const hasExpression = expression && expression !== column_name;
const type = hasExpression ? 'expression' : type_generic;
const [tooltipText, setTooltipText] = useState<ReactNode>(column.column_name);
const [columnTypeTooltipText, setcolumnTypeTooltipText] = useState<ReactNode>(
column.type,
);

useLayoutEffect(() => {
setTooltipText(getColumnTooltipNode(column, labelRef));
setcolumnTypeTooltipText(getColumnTypeTooltipNode(column));
}, [labelRef, column]);

return (
<StyleOverrides>
{showType && type !== undefined && <ColumnTypeLabel type={type} />}
<Tooltip
ved-kashyap-samsung marked this conversation as resolved.
Show resolved Hide resolved
id="metric-type-tooltip"
title={columnTypeTooltipText}
placement="bottomRight"
align={{ offset: [8, -2] }}
>
<span>
{showType && type !== undefined && <ColumnTypeLabel type={type} />}
</span>
</Tooltip>
<Tooltip id="metric-name-tooltip" title={tooltipText}>
<span
className="option-label column-option-label"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,19 @@ export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean =>
export const getColumnLabelText = (column: ColumnMeta): string =>
column.verbose_name || column.column_name;

export const getColumnTypeTooltipNode = (column: ColumnMeta): ReactNode => {
if (!column.type) {
return null;
}

return (
<TooltipSection
label={t('Column datatype')}
text={column.type.toLowerCase()}
/>
);
};

export const getColumnTooltipNode = (
column: ColumnMeta,
labelRef?: React.RefObject<any>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
getColumnLabelText,
getColumnTooltipNode,
getMetricTooltipNode,
getColumnTypeTooltipNode,
} from '../../src/components/labelUtils';

const renderWithTheme = (ui: ReactElement) =>
Expand Down Expand Up @@ -64,6 +65,35 @@ test('should get null as tooltip', () => {
).toBe(null);
});

test('should get null for column datatype tooltip when type is blank', () => {
expect(
getColumnTypeTooltipNode({
id: 123,
column_name: 'column name',
verbose_name: '',
description: '',
type: '',
}),
).toBe(null);
});

test('should get column datatype rendered as tooltip when column has a type', () => {
renderWithTheme(
<>
{getColumnTypeTooltipNode({
id: 123,
column_name: 'column name',
verbose_name: 'verbose name',
description: 'A very important column',
type: 'text',
})}
</>,
);

expect(screen.getByText('Column datatype')).toBeVisible();
expect(screen.getByText('text')).toBeVisible();
});

test('should get column name, verbose name and description when it has a verbose name', () => {
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
renderWithTheme(
Expand Down