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] =
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

View File

@ -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
/>
)}

View File

@ -26,6 +26,7 @@ export interface FiltersOutOfScopeCollapsibleProps {
renderer: (filter: Filter | Divider, index: number) => ReactNode;
hasTopMargin?: boolean;
horizontalOverflow?: boolean;
forceRender?: boolean;
}
export const FiltersOutOfScopeCollapsible = ({
@ -33,6 +34,7 @@ export const FiltersOutOfScopeCollapsible = ({
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`