From 45542b968a870da8f9b78f08abd840780869414a Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Mon, 21 Nov 2022 16:57:48 -0700
Subject: [PATCH 1/6] Make overflow button show on custom content.

---
 .../components/DropdownContainer/index.tsx    | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index 9af3a96534a7..374bd34a6dc4 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -104,7 +104,7 @@ const DropdownContainer = forwardRef(
     {
       items,
       onOverflowingStateChange,
-      dropdownContent: popoverContent,
+      dropdownContent: getPopoverContent,
       dropdownRef: popoverRef,
       dropdownStyle: popoverStyle = {},
       dropdownTriggerCount: popoverTriggerCount,
@@ -209,26 +209,31 @@ const DropdownContainer = forwardRef(
       }
     }, [notOverflowedIds, onOverflowingStateChange, overflowedIds]);
 
-    const content = useMemo(
-      () => (
-        <div
-          css={css`
-            display: flex;
-            flex-direction: column;
-            gap: ${theme.gridUnit * 4}px;
-          `}
-          data-test="dropdown-content"
-          style={popoverStyle}
-          ref={popoverRef}
-        >
-          {popoverContent
-            ? popoverContent(overflowedItems)
-            : overflowedItems.map(item => item.element)}
-        </div>
-      ),
+    const overflowingCount =
+      overflowingIndex !== -1 ? items.length - overflowingIndex : 0;
+
+    const popoverContent = useMemo(
+      () =>
+        getPopoverContent || overflowingCount ? (
+          <div
+            css={css`
+              display: flex;
+              flex-direction: column;
+              gap: ${theme.gridUnit * 4}px;
+            `}
+            data-test="dropdown-content"
+            style={popoverStyle}
+            ref={popoverRef}
+          >
+            {getPopoverContent
+              ? getPopoverContent(overflowedItems)
+              : overflowedItems.map(item => item.element)}
+          </div>
+        ) : null,
       [
+        getPopoverContent,
         overflowedItems,
-        popoverContent,
+        overflowingCount,
         popoverRef,
         popoverStyle,
         theme.gridUnit,
@@ -244,9 +249,6 @@ const DropdownContainer = forwardRef(
       [ref],
     );
 
-    const overflowingCount =
-      overflowingIndex !== -1 ? items.length - overflowingIndex : 0;
-
     return (
       <div
         ref={ref}
@@ -268,9 +270,9 @@ const DropdownContainer = forwardRef(
         >
           {notOverflowedItems.map(item => item.element)}
         </div>
-        {overflowingCount > 0 && (
+        {popoverContent && (
           <Popover
-            content={content}
+            content={popoverContent}
             trigger="click"
             visible={popoverVisible}
             onVisibleChange={visible => setPopoverVisible(visible)}

From d3eaac1bc0432ec54e0ed878bcb5b9f0fe34ccdc Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Tue, 22 Nov 2022 16:50:52 -0700
Subject: [PATCH 2/6] Update dropdown button icon and text.

---
 .../src/components/DropdownContainer/index.tsx     | 14 ++++++++++++--
 .../FilterBar/FilterControls/FilterControls.tsx    | 13 +++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index 374bd34a6dc4..00889c3e25b3 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -280,10 +280,20 @@ const DropdownContainer = forwardRef(
             <Button buttonStyle="secondary">
               {popoverTriggerIcon}
               {popoverTriggerText}
-              <Badge count={popoverTriggerCount || overflowingCount} />
+              <Badge
+                count={popoverTriggerCount || overflowingCount}
+                css={css`
+                  margin-left: 8px;
+                `}
+              />
               <Icons.DownOutlined
                 iconSize="m"
-                iconColor={theme.colors.grayscale.base}
+                iconColor={theme.colors.grayscale.light1}
+                css={css`
+                  .anticon {
+                    display: flex;
+                  }
+                `}
               />
             </Button>
           </Popover>
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 9b0347ebf022..d94de137727b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -24,6 +24,7 @@ import {
   Divider,
   css,
   SupersetTheme,
+  t,
 } from '@superset-ui/core';
 import {
   createHtmlPortalNode,
@@ -37,6 +38,7 @@ import {
 } from 'src/dashboard/components/nativeFilters/state';
 import { FilterBarOrientation, RootState } from 'src/dashboard/types';
 import DropdownContainer from 'src/components/DropdownContainer';
+import Icons from 'src/components/Icons';
 import { FiltersOutOfScopeCollapsible } from '../FiltersOutOfScopeCollapsible';
 import { useFilterControlFactory } from '../useFilterControlFactory';
 import { FiltersDropdownContent } from '../FiltersDropdownContent';
@@ -124,6 +126,17 @@ const FilterControls: FC<FilterControlsProps> = ({
       >
         <DropdownContainer
           items={items}
+          dropdownTriggerIcon={
+            <Icons.FilterSmall
+              css={css`
+                && {
+                  margin-right: -4px;
+                  display: flex;
+                }
+              `}
+            />
+          }
+          dropdownTriggerText={t('More filters')}
           dropdownContent={overflowedItems => {
             const overflowedItemIds = new Set(
               overflowedItems.map(({ id }) => id),

From 6d0d33f013783ee5dd07777da6d9a9dc00f11c87 Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Tue, 22 Nov 2022 17:59:20 -0700
Subject: [PATCH 3/6] Show number of active filters in badge.

---
 .../src/query/types/Dashboard.ts              |   2 +
 .../components/DropdownContainer/index.tsx    |   7 +-
 .../FilterControls/FilterControls.tsx         | 148 +++++++++++-------
 .../FilterBar/useFilterControlFactory.tsx     |  10 +-
 .../components/nativeFilters/state.ts         |   9 +-
 5 files changed, 111 insertions(+), 65 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts
index c86c1cfbe41a..90c1e5856ec3 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts
@@ -91,6 +91,8 @@ export type Filter = {
   description: string;
 };
 
+export type FilterWithDataMask = Filter & { dataMask: DataMaskWithId };
+
 export type Divider = Partial<Omit<Filter, 'id' | 'type'>> & {
   id: string;
   title: string;
diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index 00889c3e25b3..d364d3542ee7 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -276,14 +276,17 @@ const DropdownContainer = forwardRef(
             trigger="click"
             visible={popoverVisible}
             onVisibleChange={visible => setPopoverVisible(visible)}
+            placement="bottom"
           >
             <Button buttonStyle="secondary">
               {popoverTriggerIcon}
               {popoverTriggerText}
               <Badge
-                count={popoverTriggerCount || overflowingCount}
+                count={popoverTriggerCount ?? overflowingCount}
                 css={css`
-                  margin-left: 8px;
+                  margin-left: ${popoverTriggerCount ?? overflowingCount
+                    ? '8px'
+                    : '0'};
                 `}
               />
               <Icons.DownOutlined
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 d94de137727b..77a29248f7f2 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -25,6 +25,7 @@ import {
   css,
   SupersetTheme,
   t,
+  isNativeFilter,
 } from '@superset-ui/core';
 import {
   createHtmlPortalNode,
@@ -58,7 +59,7 @@ const FilterControls: FC<FilterControlsProps> = ({
     state => state.dashboardInfo.filterBarOrientation,
   );
 
-  const [overflowIndex, setOverflowIndex] = useState(0);
+  const [overflowedIds, setOverflowedIds] = useState<string[]>([]);
 
   const { filterControlFactory, filtersWithValues } = useFilterControlFactory(
     dataMaskSelected,
@@ -102,63 +103,94 @@ const FilterControls: FC<FilterControlsProps> = ({
     </>
   );
 
-  const renderHorizontalContent = () => {
-    const items = filtersInScope.map(filter => ({
-      id: filter.id,
-      element: (
-        <div
-          css={css`
-            flex-shrink: 0;
-          `}
-        >
-          {renderer(filter)}
-        </div>
-      ),
-    }));
-    return (
-      <div
-        css={(theme: SupersetTheme) =>
-          css`
-            padding-left: ${theme.gridUnit * 4}px;
-            min-width: 0;
-          `
+  const items = useMemo(
+    () =>
+      filtersInScope.map(filter => ({
+        id: filter.id,
+        element: (
+          <div
+            css={css`
+              flex-shrink: 0;
+            `}
+          >
+            {renderer(filter)}
+          </div>
+        ),
+      })),
+    [filtersInScope, renderer],
+  );
+
+  const overflowedFiltersInScope = useMemo(
+    () => filtersInScope.filter(({ id }) => overflowedIds?.includes(id)),
+    [filtersInScope, overflowedIds],
+  );
+
+  const activeOverflowedFiltersInScope = useMemo(
+    () =>
+      overflowedFiltersInScope.filter(
+        filter => isNativeFilter(filter) && filter.dataMask.filterState?.value,
+      ).length,
+    [overflowedFiltersInScope],
+  );
+
+  const renderHorizontalContent = () => (
+    <div
+      css={(theme: SupersetTheme) =>
+        css`
+          padding-left: ${theme.gridUnit * 4}px;
+          min-width: 0;
+        `
+      }
+    >
+      <DropdownContainer
+        items={items}
+        dropdownTriggerIcon={
+          <Icons.FilterSmall
+            css={css`
+              && {
+                margin-right: -4px;
+                display: flex;
+              }
+            `}
+          />
         }
-      >
-        <DropdownContainer
-          items={items}
-          dropdownTriggerIcon={
-            <Icons.FilterSmall
-              css={css`
-                && {
-                  margin-right: -4px;
-                  display: flex;
-                }
-              `}
-            />
+        dropdownTriggerText={t('More filters')}
+        dropdownTriggerCount={activeOverflowedFiltersInScope}
+        dropdownContent={() => (
+          <FiltersDropdownContent
+            filtersInScope={overflowedFiltersInScope}
+            filtersOutOfScope={filtersOutOfScope}
+            renderer={renderer}
+            showCollapsePanel={showCollapsePanel}
+          />
+        )}
+        onOverflowingStateChange={({ overflowed: nextOverflowedIds }) => {
+          if (
+            nextOverflowedIds.length !== overflowedIds.length ||
+            overflowedIds.reduce(
+              (a, b, i) => a || b !== nextOverflowedIds[i],
+              false,
+            )
+          ) {
+            setOverflowedIds(nextOverflowedIds);
           }
-          dropdownTriggerText={t('More filters')}
-          dropdownContent={overflowedItems => {
-            const overflowedItemIds = new Set(
-              overflowedItems.map(({ id }) => id),
-            );
-            return (
-              <FiltersDropdownContent
-                filtersInScope={filtersInScope.filter(({ id }) =>
-                  overflowedItemIds.has(id),
-                )}
-                filtersOutOfScope={filtersOutOfScope}
-                renderer={renderer}
-                showCollapsePanel={showCollapsePanel}
-              />
-            );
-          }}
-          onOverflowingStateChange={overflowingState =>
-            setOverflowIndex(overflowingState.notOverflowed.length)
-          }
-        />
-      </div>
+        }}
+      />
+    </div>
+  );
+
+  const overflowedByIndex = useMemo(() => {
+    const filtersOutOfScopeIds = new Set(filtersOutOfScope.map(({ id }) => id));
+    const overflowedFiltersInScopeIds = new Set(
+      overflowedFiltersInScope.map(({ id }) => id),
+    );
+
+    return filtersWithValues.map(
+      filter =>
+        filtersOutOfScopeIds.has(filter.id) ||
+        overflowedFiltersInScopeIds.has(filter.id),
     );
-  };
+  }, [filtersOutOfScope, filtersWithValues, overflowedFiltersInScope]);
 
   return (
     <>
@@ -166,7 +198,11 @@ const FilterControls: FC<FilterControlsProps> = ({
         .filter((node, index) => filterIds.has(filtersWithValues[index].id))
         .map((node, index) => (
           <InPortal node={node}>
-            {filterControlFactory(index, filterBarOrientation, overflowIndex)}
+            {filterControlFactory(
+              index,
+              filterBarOrientation,
+              overflowedByIndex[index],
+            )}
           </InPortal>
         ))}
       {filterBarOrientation === FilterBarOrientation.VERTICAL &&
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx
index fe855ec3e3fc..4e17248f1d60 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx
@@ -21,8 +21,10 @@ import React, { useCallback, useMemo } from 'react';
 import {
   DataMask,
   DataMaskStateWithId,
+  DataMaskWithId,
   Divider,
   Filter,
+  FilterWithDataMask,
   isFilterDivider,
 } from '@superset-ui/core';
 import { FilterBarOrientation } from 'src/dashboard/types';
@@ -37,7 +39,7 @@ export const useFilterControlFactory = (
 ) => {
   const filters = useFilters();
   const filterValues = useMemo(() => Object.values(filters), [filters]);
-  const filtersWithValues: (Filter | Divider)[] = useMemo(
+  const filtersWithValues: (FilterWithDataMask | Divider)[] = useMemo(
     () =>
       filterValues.map(filter => ({
         ...filter,
@@ -50,7 +52,7 @@ export const useFilterControlFactory = (
     (
       index: number,
       filterBarOrientation: FilterBarOrientation,
-      overflowIndex: number,
+      overflow: boolean,
     ) => {
       const filter = filtersWithValues[index];
       if (isFilterDivider(filter)) {
@@ -59,7 +61,7 @@ export const useFilterControlFactory = (
             title={filter.title}
             description={filter.description}
             orientation={filterBarOrientation}
-            overflow={index >= overflowIndex}
+            overflow={overflow}
           />
         );
       }
@@ -71,7 +73,7 @@ export const useFilterControlFactory = (
           onFilterSelectionChange={onFilterSelectionChange}
           inView={false}
           orientation={filterBarOrientation}
-          overflow={index >= overflowIndex}
+          overflow={overflow}
         />
       );
     },
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/state.ts
index 030b65859b3e..51d987a57790 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/state.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/state.ts
@@ -23,6 +23,7 @@ import {
   FilterConfiguration,
   Divider,
   isFilterDivider,
+  FilterWithDataMask,
 } from '@superset-ui/core';
 import { ActiveTabs, DashboardLayout, RootState } from '../../types';
 import { TAB_TYPE } from '../../util/componentTypes';
@@ -109,13 +110,15 @@ function useIsFilterInScope() {
       }));
 }
 
-export function useSelectFiltersInScope(filters: (Filter | Divider)[]) {
+export function useSelectFiltersInScope(
+  filters: (FilterWithDataMask | Divider)[],
+) {
   const dashboardHasTabs = useDashboardHasTabs();
   const isFilterInScope = useIsFilterInScope();
 
   return useMemo(() => {
-    let filtersInScope: (Filter | Divider)[] = [];
-    const filtersOutOfScope: (Filter | Divider)[] = [];
+    let filtersInScope: (FilterWithDataMask | Divider)[] = [];
+    const filtersOutOfScope: (FilterWithDataMask | Divider)[] = [];
 
     // we check native filters scopes only on dashboards with tabs
     if (!dashboardHasTabs) {

From f5858f07e0e227e9131077b68534798eb4494772 Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Wed, 23 Nov 2022 15:31:33 -0700
Subject: [PATCH 4/6] Fix lint.

---
 .../nativeFilters/FilterBar/useFilterControlFactory.tsx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx
index 4e17248f1d60..6893e629cb49 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx
@@ -21,7 +21,6 @@ import React, { useCallback, useMemo } from 'react';
 import {
   DataMask,
   DataMaskStateWithId,
-  DataMaskWithId,
   Divider,
   Filter,
   FilterWithDataMask,

From ae66da83f012a4d3690f560bb2a3a648d748e30b Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Mon, 28 Nov 2022 13:02:32 +0100
Subject: [PATCH 5/6] Remove "Add/Edit filter" button overrides for horizontal
 style

---
 .../components/nativeFilters/FilterBar/Horizontal.tsx          | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
index ac03b0e0ff59..d085e0890005 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
@@ -74,9 +74,6 @@ const FiltersLinkContainer = styled.div<{ hasFilters: boolean }>`
     button {
       display: flex;
       align-items: center;
-      text-transform: capitalize;
-      font-weight: ${theme.typography.weights.normal};
-      color: ${theme.colors.primary.base};
       > .anticon {
         height: 24px;
         padding-right: ${theme.gridUnit}px;

From b0046fb2428925e8838e47909184beb2b7caa972 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Mon, 28 Nov 2022 13:02:58 +0100
Subject: [PATCH 6/6] Fix dropdown button displaying when there's no content
 inside

---
 .../FilterControls/FilterControls.tsx         | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

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 77a29248f7f2..5c0ce9f90299 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -156,14 +156,19 @@ const FilterControls: FC<FilterControlsProps> = ({
         }
         dropdownTriggerText={t('More filters')}
         dropdownTriggerCount={activeOverflowedFiltersInScope}
-        dropdownContent={() => (
-          <FiltersDropdownContent
-            filtersInScope={overflowedFiltersInScope}
-            filtersOutOfScope={filtersOutOfScope}
-            renderer={renderer}
-            showCollapsePanel={showCollapsePanel}
-          />
-        )}
+        dropdownContent={
+          overflowedFiltersInScope.length ||
+          (filtersOutOfScope.length && showCollapsePanel)
+            ? () => (
+                <FiltersDropdownContent
+                  filtersInScope={overflowedFiltersInScope}
+                  filtersOutOfScope={filtersOutOfScope}
+                  renderer={renderer}
+                  showCollapsePanel={showCollapsePanel}
+                />
+              )
+            : undefined
+        }
         onOverflowingStateChange={({ overflowed: nextOverflowedIds }) => {
           if (
             nextOverflowedIds.length !== overflowedIds.length ||