diff --git a/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx b/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx index de0c27bc70c02..4a0fd9906226e 100644 --- a/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx +++ b/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx @@ -141,3 +141,16 @@ test('renders a dropdown with custom content', async () => { expect(screen.getByText('Custom content')).toBeInTheDocument(); }); }); + +test('Shows tooltip on dropdown trigger hover', async () => { + await mockOverflowingIndex(3, async () => { + render( + , + ); + userEvent.hover(screen.getByText('More')); + expect(await screen.findByText('Test tooltip')).toBeInTheDocument(); + }); +}); diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx index 096e1b5922418..38efa285e6993 100644 --- a/superset-frontend/src/components/DropdownContainer/index.tsx +++ b/superset-frontend/src/components/DropdownContainer/index.tsx @@ -27,6 +27,7 @@ import React, { useMemo, useState, useRef, + ReactNode, } from 'react'; import { Global } from '@emotion/react'; import { css, t, useTheme } from '@superset-ui/core'; @@ -36,6 +37,7 @@ import Badge from '../Badge'; import Icons from '../Icons'; import Button from '../Button'; import Popover from '../Popover'; +import { Tooltip } from '../Tooltip'; const MAX_HEIGHT = 500; @@ -95,6 +97,10 @@ export interface DropdownContainerProps { * Text of the dropdown trigger. */ dropdownTriggerText?: string; + /** + * Text of the dropdown trigger tooltip + */ + dropdownTriggerTooltip?: ReactNode | null; /** * Main container additional style properties. */ @@ -114,6 +120,7 @@ const DropdownContainer = forwardRef( dropdownTriggerCount, dropdownTriggerIcon, dropdownTriggerText = t('More'), + dropdownTriggerTooltip = null, style, }: DropdownContainerProps, outerRef: RefObject, @@ -360,30 +367,32 @@ const DropdownContainer = forwardRef( placement="bottom" destroyTooltipOnHide > - + + + )} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx index ce420df3d16d2..a621052d51438 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx @@ -153,7 +153,7 @@ const FilterControls: FC = ({ () => overflowedFiltersInScope.filter(filter => isNativeFilterWithDataMask(filter), - ).length, + ), [overflowedFiltersInScope], ); @@ -180,7 +180,17 @@ const FilterControls: FC = ({ /> } dropdownTriggerText={t('More filters')} - dropdownTriggerCount={activeOverflowedFiltersInScope} + dropdownTriggerCount={activeOverflowedFiltersInScope.length} + dropdownTriggerTooltip={ + activeOverflowedFiltersInScope.length === 0 + ? t('No applied filters') + : t( + 'Applied filters: %s', + activeOverflowedFiltersInScope + .map(filter => filter.name) + .join(', '), + ) + } dropdownContent={ overflowedFiltersInScope.length || (filtersOutOfScope.length && showCollapsePanel)