fix(dashboard): Infinite load when filter with default first value is out of scope (#23299)

This commit is contained in:
Kamil Gabryjelski 2023-03-08 15:37:23 +01:00 committed by GitHub
parent ed11123709
commit a3d49ca335
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 0 deletions

View File

@ -124,6 +124,11 @@ const FilterControls: FC<FilterControlsProps> = ({
const [filtersInScope, filtersOutOfScope] = const [filtersInScope, filtersOutOfScope] =
useSelectFiltersInScope(filtersWithValues); useSelectFiltersInScope(filtersWithValues);
const hasRequiredFirst = useMemo(
() => filtersWithValues.some(filter => filter.requiredFirst),
[filtersWithValues],
);
const dashboardHasTabs = useDashboardHasTabs(); const dashboardHasTabs = useDashboardHasTabs();
const showCollapsePanel = dashboardHasTabs && filtersWithValues.length > 0; const showCollapsePanel = dashboardHasTabs && filtersWithValues.length > 0;
@ -149,6 +154,7 @@ const FilterControls: FC<FilterControlsProps> = ({
{showCollapsePanel && ( {showCollapsePanel && (
<FiltersOutOfScopeCollapsible <FiltersOutOfScopeCollapsible
filtersOutOfScope={filtersOutOfScope} filtersOutOfScope={filtersOutOfScope}
forceRender={hasRequiredFirst}
hasTopMargin={filtersInScope.length > 0} hasTopMargin={filtersInScope.length > 0}
renderer={renderer} renderer={renderer}
/> />
@ -264,6 +270,7 @@ const FilterControls: FC<FilterControlsProps> = ({
renderer={renderer} renderer={renderer}
rendererCrossFilter={rendererCrossFilter} rendererCrossFilter={rendererCrossFilter}
showCollapsePanel={showCollapsePanel} showCollapsePanel={showCollapsePanel}
forceRenderOutOfScope={hasRequiredFirst}
/> />
) )
: undefined : undefined

View File

@ -34,6 +34,7 @@ export interface FiltersDropdownContentProps {
last: CrossFilterIndicator, last: CrossFilterIndicator,
) => ReactNode; ) => ReactNode;
showCollapsePanel?: boolean; showCollapsePanel?: boolean;
forceRenderOutOfScope?: boolean;
} }
export const FiltersDropdownContent = ({ export const FiltersDropdownContent = ({
@ -43,6 +44,7 @@ export const FiltersDropdownContent = ({
renderer, renderer,
rendererCrossFilter, rendererCrossFilter,
showCollapsePanel, showCollapsePanel,
forceRenderOutOfScope,
}: FiltersDropdownContentProps) => ( }: FiltersDropdownContentProps) => (
<div <div
css={(theme: SupersetTheme) => css={(theme: SupersetTheme) =>
@ -64,6 +66,7 @@ export const FiltersDropdownContent = ({
<FiltersOutOfScopeCollapsible <FiltersOutOfScopeCollapsible
filtersOutOfScope={filtersOutOfScope} filtersOutOfScope={filtersOutOfScope}
renderer={renderer} renderer={renderer}
forceRender={forceRenderOutOfScope}
horizontalOverflow horizontalOverflow
/> />
)} )}

View File

@ -26,6 +26,7 @@ export interface FiltersOutOfScopeCollapsibleProps {
renderer: (filter: Filter | Divider, index: number) => ReactNode; renderer: (filter: Filter | Divider, index: number) => ReactNode;
hasTopMargin?: boolean; hasTopMargin?: boolean;
horizontalOverflow?: boolean; horizontalOverflow?: boolean;
forceRender?: boolean;
} }
export const FiltersOutOfScopeCollapsible = ({ export const FiltersOutOfScopeCollapsible = ({
@ -33,6 +34,7 @@ export const FiltersOutOfScopeCollapsible = ({
renderer, renderer,
hasTopMargin, hasTopMargin,
horizontalOverflow, horizontalOverflow,
forceRender = false,
}: FiltersOutOfScopeCollapsibleProps) => ( }: FiltersOutOfScopeCollapsibleProps) => (
<AntdCollapse <AntdCollapse
ghost ghost
@ -80,6 +82,7 @@ export const FiltersOutOfScopeCollapsible = ({
} }
> >
<AntdCollapse.Panel <AntdCollapse.Panel
forceRender={forceRender}
header={ header={
<span <span
css={(theme: SupersetTheme) => css` css={(theme: SupersetTheme) => css`