mirror of https://github.com/apache/superset.git
fix(dashboard): Infinite load when filter with default first value is out of scope (#23299)
This commit is contained in:
parent
ed11123709
commit
a3d49ca335
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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`
|
||||||
|
|
Loading…
Reference in New Issue