fix(native-filters): cascading filters not rendering in tab (#14964)

This commit is contained in:
Ville Brofeldt 2021-06-03 12:04:23 +03:00 committed by GitHub
parent e6bc7c99e7
commit f94c6d2763
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -72,6 +72,7 @@ const FilterControls: FC<FilterControlsProps> = ({
})); }));
return buildCascadeFiltersTree(filtersWithValue); return buildCascadeFiltersTree(filtersWithValue);
}, [filterValues, dataMaskSelected]); }, [filterValues, dataMaskSelected]);
const cascadeFilterIds = new Set(cascadeFilters.map(item => item.id));
let filtersInScope: CascadeFilter[] = []; let filtersInScope: CascadeFilter[] = [];
const filtersOutOfScope: CascadeFilter[] = []; const filtersOutOfScope: CascadeFilter[] = [];
@ -93,23 +94,25 @@ const FilterControls: FC<FilterControlsProps> = ({
return ( return (
<Wrapper> <Wrapper>
{portalNodes.map((node, index) => ( {portalNodes
<portals.InPortal node={node}> .filter((node, index) => cascadeFilterIds.has(filterValues[index].id))
<CascadePopover .map((node, index) => (
data-test="cascade-filters-control" <portals.InPortal node={node}>
key={cascadeFilters[index].id} <CascadePopover
visible={visiblePopoverId === cascadeFilters[index].id} data-test="cascade-filters-control"
onVisibleChange={visible => key={cascadeFilters[index].id}
setVisiblePopoverId(visible ? cascadeFilters[index].id : null) visible={visiblePopoverId === cascadeFilters[index].id}
} onVisibleChange={visible =>
filter={cascadeFilters[index]} setVisiblePopoverId(visible ? cascadeFilters[index].id : null)
onFilterSelectionChange={onFilterSelectionChange} }
directPathToChild={directPathToChild} filter={cascadeFilters[index]}
/> onFilterSelectionChange={onFilterSelectionChange}
</portals.InPortal> directPathToChild={directPathToChild}
))} />
</portals.InPortal>
))}
{filtersInScope.map(filter => { {filtersInScope.map(filter => {
const index = cascadeFilters.findIndex(f => f.id === filter.id); const index = filterValues.findIndex(f => f.id === filter.id);
return <portals.OutPortal node={portalNodes[index]} />; return <portals.OutPortal node={portalNodes[index]} />;
})} })}
{showCollapsePanel && ( {showCollapsePanel && (