fix: Add tooltip to dropdown trigger in horizontal filter bar (#22373)

apache · Dec 8, 2022 · de4f509 · de4f509
1 parent 1edfd7e
commit de4f509
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 26 deletions.
diff --git 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(
+      <DropdownContainer
+        items={generateItems(5)}
+        dropdownTriggerTooltip="Test tooltip"
+      />,
+    );
+    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
@@ -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<Ref>,
@@ -360,30 +367,32 @@ const DropdownContainer = forwardRef(
               placement="bottom"
               destroyTooltipOnHide
             >
-              <Button
-                buttonStyle="secondary"
-                data-test="dropdown-container-btn"
-              >
-                {dropdownTriggerIcon}
-                {dropdownTriggerText}
-                <Badge
-                  count={dropdownTriggerCount ?? overflowingCount}
-                  css={css`
-                    margin-left: ${dropdownTriggerCount ?? overflowingCount
-                      ? `${theme.gridUnit * 2}px`
-                      : '0'};
-                  `}
-                />
-                <Icons.DownOutlined
-                  iconSize="m"
-                  iconColor={theme.colors.grayscale.light1}
-                  css={css`
-                    .anticon {
-                      display: flex;
-                    }
-                  `}
-                />
-              </Button>
+              <Tooltip title={dropdownTriggerTooltip}>
+                <Button
+                  buttonStyle="secondary"
+                  data-test="dropdown-container-btn"
+                >
+                  {dropdownTriggerIcon}
+                  {dropdownTriggerText}
+                  <Badge
+                    count={dropdownTriggerCount ?? overflowingCount}
+                    css={css`
+                      margin-left: ${dropdownTriggerCount ?? overflowingCount
+                        ? `${theme.gridUnit * 2}px`
+                        : '0'};
+                    `}
+                  />
+                  <Icons.DownOutlined
+                    iconSize="m"
+                    iconColor={theme.colors.grayscale.light1}
+                    css={css`
+                      .anticon {
+                        display: flex;
+                      }
+                    `}
+                  />
+                </Button>
+              </Tooltip>
             </Popover>
           </>
         )}

diff --git a/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -153,7 +153,7 @@ const FilterControls: FC<FilterControlsProps> = ({
     () =>
       overflowedFiltersInScope.filter(filter =>
         isNativeFilterWithDataMask(filter),
-      ).length,
+      ),
     [overflowedFiltersInScope],
   );
 
@@ -180,7 +180,17 @@ const FilterControls: FC<FilterControlsProps> = ({
           />
         }
         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)