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

… out of scope
apache · Mar 7, 2023 · 449cfe2 · 449cfe2
1 parent d16512b
commit 449cfe2
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
@@ -124,6 +124,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;
 
@@ -149,6 +154,7 @@ const FilterControls: FC<FilterControlsProps> = ({
       {showCollapsePanel && (
         <FiltersOutOfScopeCollapsible
           filtersOutOfScope={filtersOutOfScope}
+          forceRender={hasRequiredFirst}
           hasTopMargin={filtersInScope.length > 0}
           renderer={renderer}
         />
@@ -264,6 +270,7 @@ const FilterControls: FC<FilterControlsProps> = ({
                   renderer={renderer}
                   rendererCrossFilter={rendererCrossFilter}
                   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
@@ -34,6 +34,7 @@ export interface FiltersDropdownContentProps {
     last: CrossFilterIndicator,
   ) => ReactNode;
   showCollapsePanel?: boolean;
+  forceRenderOutOfScope?: boolean;
 }
 
 export const FiltersDropdownContent = ({
@@ -43,6 +44,7 @@ export const FiltersDropdownContent = ({
   renderer,
   rendererCrossFilter,
   showCollapsePanel,
+  forceRenderOutOfScope,
 }: FiltersDropdownContentProps) => (
   <div
     css={(theme: SupersetTheme) =>
@@ -64,6 +66,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={
         <span
           css={(theme: SupersetTheme) => css`