From c178bbddcbbc4f9282e1da8fe46a352223949a71 Mon Sep 17 00:00:00 2001 From: Geido <60598000+geido@users.noreply.github.com> Date: Thu, 12 Aug 2021 19:48:16 +0200 Subject: [PATCH] fix(Explore): Show the tooltip only when label does not fit the container in METRICS/FILTERS/GROUP BY/SORT BY of the DATA panel (#16060) * Implement dynamic tooltip * Normalize and consolidate * Clean up * Refactor and clean up * Remove unnecessary var * Fix type import * Update superset-frontend/src/explore/components/controls/OptionControls/index.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Remove unnecessary styled span * Show full tooltip title * Force show tooltip * Force show tooltip D&D off Co-authored-by: Ville Brofeldt Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> (cherry picked from commit a1e18ed11079d9d06a141d537f01ad1c31eb6a48) --- .../DndColumnSelect.tsx | 4 +- .../DndFilterSelect.tsx | 8 ++-- .../OptionWrapper.test.tsx | 15 +++---- .../controls/DndColumnSelectControl/types.ts | 5 ++- .../controls/OptionControls/index.tsx | 42 ++++++++++++++++--- .../explore/components/optionRenderers.tsx | 1 + 6 files changed, 53 insertions(+), 22 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx index 69cc6442e26a4..c85ea7878d7fc 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx @@ -16,8 +16,8 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useCallback, useMemo, useState } from 'react'; -import { FeatureFlag, isFeatureEnabled, tn } from '@superset-ui/core'; +import React, { useCallback, useMemo } from 'react'; +import { tn } from '@superset-ui/core'; import { ColumnMeta } from '@superset-ui/chart-controls'; import { isEmpty } from 'lodash'; import { LabelProps } from 'src/explore/components/controls/DndColumnSelectControl/types'; diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx index f106f11a05b24..a9e327bfd6bfd 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx @@ -26,7 +26,6 @@ import { t, } from '@superset-ui/core'; import { ColumnMeta } from '@superset-ui/chart-controls'; -import { Tooltip } from 'src/components/Tooltip'; import { OPERATOR_ENUM_TO_OPERATOR_TYPE, Operators, @@ -299,6 +298,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => { () => values.map((adhocFilter: AdhocFilter, index: number) => { const label = adhocFilter.getDefaultLabel(); + const tooltipTitle = adhocFilter.getTooltipTitle(); return ( { - {label} - + /> ); }), diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx index c46f49be0107e..e237cea989a5c 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx @@ -28,9 +28,8 @@ test('renders with default props', () => { clickClose={jest.fn()} type={'Column' as DndItemType} onShiftOptions={jest.fn()} - > - Option - , + label="Option" + />, { useDnd: true }, ); expect(container).toBeInTheDocument(); @@ -46,17 +45,15 @@ test('triggers onShiftOptions on drop', () => { clickClose={jest.fn()} type={'Column' as DndItemType} onShiftOptions={onShiftOptions} - > - Option 1 - + label="Option 1" + /> - Option 2 - + label="Option 2" + /> , { useDnd: true }, ); diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts index acb566830861a..37055fe46ca4c 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts @@ -23,8 +23,11 @@ import { DatasourcePanelDndItem } from '../../DatasourcePanel/types'; import { DndItemType } from '../../DndItemType'; export interface OptionProps { - children: ReactNode; + children?: ReactNode; index: number; + label?: string; + tooltipTitle?: string; + column?: ColumnMeta; clickClose: (index: number) => void; withCaret?: boolean; isExtra?: boolean; diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx index e2584b53e3de9..716e10a908b78 100644 --- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx +++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx @@ -45,11 +45,10 @@ export const OptionControlContainer = styled.div<{ border-radius: 3px; cursor: ${({ withCaret }) => (withCaret ? 'pointer' : 'default')}; `; - export const Label = styled.div` ${({ theme }) => ` display: flex; - max-width: 100%; + width: 100%; overflow: hidden; text-overflow: ellipsis; align-items: center; @@ -71,6 +70,11 @@ export const Label = styled.div` `} `; +const LabelText = styled.span` + overflow: hidden; + text-overflow: ellipsis; +`; + export const CaretContainer = styled.div` height: 100%; border-left: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; @@ -197,6 +201,8 @@ export const OptionControlLabel = ({ }) => { const theme = useTheme(); const ref = useRef(null); + const labelRef = useRef(null); + const hasMetricName = savedMetric?.metric_name; const [, drop] = useDrop({ accept: type, drop() { @@ -250,7 +256,7 @@ export const OptionControlLabel = ({ item.index = hoverIndex; }, }); - const [, drag] = useDrag({ + const [{ isDragging }, drag] = useDrag({ item: { type, index, @@ -262,10 +268,34 @@ export const OptionControlLabel = ({ }); const getLabelContent = () => { - if (savedMetric?.metric_name) { - return ; + const shouldShowTooltip = + (!isDragging && + typeof label === 'string' && + tooltipTitle && + label && + tooltipTitle !== label) || + (!isDragging && + labelRef && + labelRef.current && + labelRef.current.scrollWidth > labelRef.current.clientWidth); + + if (savedMetric && hasMetricName) { + return ( + + ); + } + if (!shouldShowTooltip) { + return {label}; } - return {label}; + return ( + + {label} + + ); }; const getOptionControlContent = () => ( diff --git a/superset-frontend/src/explore/components/optionRenderers.tsx b/superset-frontend/src/explore/components/optionRenderers.tsx index 74d2891df9104..fbd641db3742c 100644 --- a/superset-frontend/src/explore/components/optionRenderers.tsx +++ b/superset-frontend/src/explore/components/optionRenderers.tsx @@ -27,6 +27,7 @@ import { } from '@superset-ui/chart-controls'; const OptionContainer = styled.div` + width: 100%; > span { display: flex; align-items: center;