fix(dashboard): Infinite load when filter with default first value is…

… out of scope (#23299)
apache · Mar 13, 2023 · 81a1318 · 81a1318
1 parent 224f962
commit 81a1318
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -94,6 +94,11 @@ const FilterControls: FC<FilterControlsProps> = ({
   const [filtersInScope, filtersOutOfScope] =
     useSelectFiltersInScope(filtersWithValues);
 
+  const hasRequiredFirst = useMemo(
+    () => filtersWithValues.some(filter => filter.requiredFirst),
+    [filtersWithValues],
+  );
+
   const dashboardHasTabs = useDashboardHasTabs();
   const showCollapsePanel = dashboardHasTabs && filtersWithValues.length > 0;
 
@@ -119,6 +124,7 @@ const FilterControls: FC<FilterControlsProps> = ({
       {showCollapsePanel && (
         <FiltersOutOfScopeCollapsible
           filtersOutOfScope={filtersOutOfScope}
+          forceRender={hasRequiredFirst}
           hasTopMargin={filtersInScope.length > 0}
           renderer={renderer}
         />
@@ -200,6 +206,7 @@ const FilterControls: FC<FilterControlsProps> = ({
                   filtersOutOfScope={filtersOutOfScope}
                   renderer={renderer}
                   showCollapsePanel={showCollapsePanel}
+                  forceRenderOutOfScope={hasRequiredFirst}
                 />
               )
             : undefined

diff --git a/...rontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx b/...rontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
@@ -26,13 +26,15 @@ export interface FiltersDropdownContentProps {
   filtersOutOfScope: (Filter | Divider)[];
   renderer: (filter: Filter | Divider, index: number) => ReactNode;
   showCollapsePanel?: boolean;
+  forceRenderOutOfScope?: boolean;
 }
 
 export const FiltersDropdownContent = ({
   filtersInScope,
   filtersOutOfScope,
   renderer,
   showCollapsePanel,
+  forceRenderOutOfScope,
 }: FiltersDropdownContentProps) => (
   <div
     css={(theme: SupersetTheme) =>
@@ -47,6 +49,7 @@ export const FiltersDropdownContent = ({
       <FiltersOutOfScopeCollapsible
         filtersOutOfScope={filtersOutOfScope}
         renderer={renderer}
+        forceRender={forceRenderOutOfScope}
         horizontalOverflow
       />
     )}

diff --git a/...d/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx b/...d/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
@@ -26,13 +26,15 @@ export interface FiltersOutOfScopeCollapsibleProps {
   renderer: (filter: Filter | Divider, index: number) => ReactNode;
   hasTopMargin?: boolean;
   horizontalOverflow?: boolean;
+  forceRender?: boolean;
 }
 
 export const FiltersOutOfScopeCollapsible = ({
   filtersOutOfScope,
   renderer,
   hasTopMargin,
   horizontalOverflow,
+  forceRender = false,
 }: FiltersOutOfScopeCollapsibleProps) => (
   <AntdCollapse
     ghost
@@ -80,6 +82,7 @@ export const FiltersOutOfScopeCollapsible = ({
     }
   >
     <AntdCollapse.Panel
+      forceRender={forceRender}
       header={t('Filters out of scope (%d)', filtersOutOfScope.length)}
       key="1"
     >