Indicate extra filters count on triple dot menu hover (#5219)

Author: apata

assets/js/dashboard/nav-menu/filters-bar.test.tsx

@@ -78,7 +78,7 @@ test('user can see expected filters and clear them one by one or all together',
   await userEvent.click(
     screen.getByRole('button', {
       hidden: false,
-      name: 'See more'
+      name: 'See 3 more filters and actions'
     })
   )
 

assets/js/dashboard/nav-menu/filters-bar.tsx

@@ -2,7 +2,7 @@
 
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'
 import classNames from 'classnames'
-import React, { useRef, useState, useLayoutEffect } from 'react'
+import React, { useRef, useState, useLayoutEffect, ReactNode } from 'react'
 import { AppliedFilterPillsList, PILL_X_GAP_PX } from './filter-pills-list'
 import { useQueryContext } from '../query-context'
 import { AppNavigationLink } from '../navigation/use-app-navigate'
@@ -109,21 +109,21 @@ interface FiltersBarProps {
   }
 }
 
-const canShowClearAllAction = ({ filters }: Pick<DashboardQuery, 'filters'>) =>
-  filters.length >= 2
+const canShowClearAllAction = ({
+  filters
+}: Pick<DashboardQuery, 'filters'>): boolean => filters.length >= 2
 
 const canShowSaveAsSegmentAction = ({
   filters,
   isEditingSegment
-}: Pick<DashboardQuery, 'filters'> & { isEditingSegment: boolean }) =>
+}: Pick<DashboardQuery, 'filters'> & { isEditingSegment: boolean }): boolean =>
   filters.length >= 1 && !filters.some(isSegmentFilter) && !isEditingSegment
 
 export const FiltersBar = ({ accessors }: FiltersBarProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const pillsRef = useRef<HTMLDivElement>(null)
   const [visibility, setVisibility] = useState<null | VisibilityState>(null)
   const { query, expandedSegment } = useQueryContext()
-  const seeMoreRef = useRef<HTMLButtonElement>(null)
 
   const showingClearAll = canShowClearAllAction({ filters: query.filters })
   const showingSaveAsSegment = canShowSaveAsSegmentAction({
@@ -203,58 +203,90 @@ export const FiltersBar = ({ accessors }: FiltersBarProps) => {
       {visibility !== null &&
         (query.filters.length !== visibility.visibleCount ||
           mustShowSeeMoreMenu) && (
-          <Popover className="md:relative">
-            <BlurMenuButtonOnEscape targetRef={seeMoreRef} />
-            <Popover.Button
-              title="See more"
-              ref={seeMoreRef}
-              className={classNames(
-                popover.toggleButton.classNames.rounded,
-                popover.toggleButton.classNames.shadow,
-                'justify-center'
-              )}
-              style={{
-                height: SEE_MORE_WIDTH_PX,
-                width: SEE_MORE_WIDTH_PX,
-                marginLeft: SEE_MORE_LEFT_MARGIN_PX,
-                marginRight: SEE_MORE_RIGHT_MARGIN_PX
-              }}
-            >
-              <EllipsisHorizontalIcon className="block h-5 w-5" />
-            </Popover.Button>
-            <Transition
-              {...popover.transition.props}
-              className={classNames(
-                'mt-2',
-                popover.transition.classNames.fullwidth,
-                'md:right-auto'
-              )}
-            >
-              <Popover.Panel
-                className={classNames(
-                  popover.panel.classNames.roundedSheet,
-                  'flex flex-col p-4 gap-y-2'
-                )}
-              >
-                {query.filters.length !== visibility.visibleCount && (
-                  <AppliedFilterPillsList
-                    direction="vertical"
-                    slice={{
-                      type: 'no-render-outside',
-                      start: visibility.visibleCount
-                    }}
-                  />
-                )}
-                {showingClearAll && <ClearAction />}
-                {showingSaveAsSegment && <SaveAsSegmentAction />}
-              </Popover.Panel>
-            </Transition>
-          </Popover>
+          <SeeMoreMenu
+            className="md:relative"
+            filtersCount={query.filters.length}
+            visibleFiltersCount={visibility.visibleCount}
+          >
+            {showingClearAll && <ClearAction />}
+            {showingSaveAsSegment && <SaveAsSegmentAction />}
+          </SeeMoreMenu>
         )}
     </div>
   )
 }
 
+const SeeMoreMenu = ({
+  className,
+  filtersCount,
+  visibleFiltersCount,
+  children
+}: {
+  className?: string
+  filtersCount: number
+  visibleFiltersCount: number
+  children: ReactNode
+}) => {
+  const seeMoreRef = useRef<HTMLButtonElement>(null)
+  const filtersInMenuCount = filtersCount - visibleFiltersCount
+
+  const title =
+    filtersInMenuCount === 1
+      ? 'See 1 more filter and actions'
+      : filtersInMenuCount > 1
+        ? `See ${filtersInMenuCount} more filters and actions`
+        : 'See actions'
+
+  return (
+    <Popover className={className}>
+      <BlurMenuButtonOnEscape targetRef={seeMoreRef} />
+      <Popover.Button
+        title={title}
+        ref={seeMoreRef}
+        className={classNames(
+          popover.toggleButton.classNames.rounded,
+          popover.toggleButton.classNames.shadow,
+          'justify-center'
+        )}
+        style={{
+          height: SEE_MORE_WIDTH_PX,
+          width: SEE_MORE_WIDTH_PX,
+          marginLeft: SEE_MORE_LEFT_MARGIN_PX,
+          marginRight: SEE_MORE_RIGHT_MARGIN_PX
+        }}
+      >
+        <EllipsisHorizontalIcon className="block h-5 w-5" />
+      </Popover.Button>
+      <Transition
+        {...popover.transition.props}
+        className={classNames(
+          'mt-2',
+          popover.transition.classNames.fullwidth,
+          'md:right-auto'
+        )}
+      >
+        <Popover.Panel
+          className={classNames(
+            popover.panel.classNames.roundedSheet,
+            'flex flex-col p-4 gap-y-2'
+          )}
+        >
+          {filtersCount !== visibleFiltersCount && (
+            <AppliedFilterPillsList
+              direction="vertical"
+              slice={{
+                type: 'no-render-outside',
+                start: visibleFiltersCount
+              }}
+            />
+          )}
+          {children}
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}
+
 const ClearAction = () => (
   <AppNavigationLink
     className={classNames(