mirror of https://github.com/apache/superset.git
feat(cross-filters): add option to clear set cross filters (#15500)
* feat(cross-filters): add option to clear set cross filters * lint * fix indicator size, remove bolded text and rephrase text
This commit is contained in:
parent
99fe9c5657
commit
ee2ee48661
|
@ -21,6 +21,7 @@ import { SearchOutlined } from '@ant-design/icons';
|
|||
import React, { FC } from 'react';
|
||||
import { getFilterValueForDisplay } from 'src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils';
|
||||
import {
|
||||
FilterIndicatorText,
|
||||
FilterValue,
|
||||
Item,
|
||||
ItemIcon,
|
||||
|
@ -31,24 +32,29 @@ import { Indicator } from 'src/dashboard/components/FiltersBadge/selectors';
|
|||
export interface IndicatorProps {
|
||||
indicator: Indicator;
|
||||
onClick?: (path: string[]) => void;
|
||||
text?: string;
|
||||
}
|
||||
|
||||
const FilterIndicator: FC<IndicatorProps> = ({
|
||||
indicator: { column, name, value, path = [] },
|
||||
onClick = () => {},
|
||||
text,
|
||||
}) => {
|
||||
const resultValue = getFilterValueForDisplay(value);
|
||||
return (
|
||||
<Item onClick={() => onClick([...path, `LABEL-${column}`])}>
|
||||
<Title bold>
|
||||
<ItemIcon>
|
||||
<SearchOutlined />
|
||||
</ItemIcon>
|
||||
{name}
|
||||
{resultValue ? ': ' : ''}
|
||||
</Title>
|
||||
<FilterValue>{resultValue}</FilterValue>
|
||||
</Item>
|
||||
<>
|
||||
<Item onClick={() => onClick([...path, `LABEL-${column}`])}>
|
||||
<Title bold>
|
||||
<ItemIcon>
|
||||
<SearchOutlined />
|
||||
</ItemIcon>
|
||||
{name}
|
||||
{resultValue ? ': ' : ''}
|
||||
</Title>
|
||||
<FilterValue>{resultValue}</FilterValue>
|
||||
</Item>
|
||||
{text && <FilterIndicatorText>{text}</FilterIndicatorText>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -153,3 +153,13 @@ export const FilterValue = styled.div`
|
|||
overflow: auto;
|
||||
color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
`;
|
||||
|
||||
export const FilterIndicatorText = styled.div`
|
||||
${({ theme }) => `
|
||||
padding-top: ${theme.gridUnit * 3}px;
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
color: ${theme.colors.grayscale.light5};
|
||||
`}
|
||||
`;
|
||||
|
|
|
@ -19,13 +19,14 @@
|
|||
import React, { FC } from 'react';
|
||||
import { styled, t } from '@superset-ui/core';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import EditableTitle from 'src/components/EditableTitle';
|
||||
import SliceHeaderControls from 'src/dashboard/components/SliceHeaderControls';
|
||||
import FiltersBadge from 'src/dashboard/components/FiltersBadge';
|
||||
import Icon from 'src/components/Icon';
|
||||
import { RootState } from 'src/dashboard/types';
|
||||
import FilterIndicator from 'src/dashboard/components/FiltersBadge/FilterIndicator';
|
||||
import { clearDataMask } from 'src/dataMask/actions';
|
||||
|
||||
type SliceHeaderProps = {
|
||||
innerRef?: string;
|
||||
|
@ -70,9 +71,12 @@ const annotationsError = t('One ore more annotation layers failed loading.');
|
|||
|
||||
const CrossFilterIcon = styled(Icon)`
|
||||
fill: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
cursor: pointer;
|
||||
& circle {
|
||||
fill: ${({ theme }) => theme.colors.primary.base};
|
||||
}
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
`;
|
||||
|
||||
const SliceHeader: FC<SliceHeaderProps> = ({
|
||||
|
@ -105,6 +109,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
|
|||
chartStatus,
|
||||
formData,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
// TODO: change to indicator field after it will be implemented
|
||||
const crossFilterValue = useSelector<RootState, any>(
|
||||
state => state.dataMask[slice?.slice_id]?.filterState?.value,
|
||||
|
@ -164,10 +169,14 @@ const SliceHeader: FC<SliceHeaderProps> = ({
|
|||
value: crossFilterValue,
|
||||
name: t('Emitted values'),
|
||||
}}
|
||||
text={t('Click to clear emitted filters')}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<CrossFilterIcon name="cross-filter-badge" />
|
||||
<CrossFilterIcon
|
||||
name="cross-filter-badge"
|
||||
onClick={() => dispatch(clearDataMask(slice?.slice_id))}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
<FiltersBadge chartId={slice.slice_id} />
|
||||
|
|
|
@ -21,9 +21,8 @@ import { styled, t, useTheme } from '@superset-ui/core';
|
|||
import React, { FC } from 'react';
|
||||
import Icons from 'src/components/Icons';
|
||||
import Button from 'src/components/Button';
|
||||
import { updateDataMask } from 'src/dataMask/actions';
|
||||
import { clearDataMask } from 'src/dataMask/actions';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getInitialDataMask } from 'src/dataMask/reducer';
|
||||
import { DataMaskState, DataMaskStateWithId } from 'src/dataMask/types';
|
||||
import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
|
||||
import { useFilters } from 'src/dashboard/components/nativeFilters/FilterBar/state';
|
||||
|
@ -93,16 +92,7 @@ const Header: FC<HeaderProps> = ({
|
|||
const filterIds = Object.keys(dataMaskSelected);
|
||||
filterIds.forEach(filterId => {
|
||||
if (dataMaskSelected[filterId]) {
|
||||
dispatch(
|
||||
updateDataMask(
|
||||
filterId,
|
||||
getInitialDataMask(filterId, {
|
||||
filterState: {
|
||||
value: null,
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
dispatch(clearDataMask(filterId));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
@ -20,11 +20,12 @@ import { DataMask } from '@superset-ui/core';
|
|||
import { FilterConfiguration } from '../dashboard/components/nativeFilters/types';
|
||||
import { FeatureFlag, isFeatureEnabled } from '../featureFlags';
|
||||
import { Filters } from '../dashboard/reducers/types';
|
||||
import { getInitialDataMask } from './reducer';
|
||||
|
||||
export const UPDATE_DATA_MASK = 'UPDATE_DATA_MASK';
|
||||
export interface UpdateDataMask {
|
||||
type: typeof UPDATE_DATA_MASK;
|
||||
filterId: string;
|
||||
filterId: string | number;
|
||||
dataMask: DataMask;
|
||||
}
|
||||
|
||||
|
@ -55,7 +56,7 @@ export function setDataMaskForFilterConfigComplete(
|
|||
};
|
||||
}
|
||||
export function updateDataMask(
|
||||
filterId: string,
|
||||
filterId: string | number,
|
||||
dataMask: DataMask,
|
||||
): UpdateDataMask {
|
||||
// Only apply data mask if one of the relevant features is enabled
|
||||
|
@ -69,6 +70,17 @@ export function updateDataMask(
|
|||
};
|
||||
}
|
||||
|
||||
export function clearDataMask(filterId: string | number) {
|
||||
return updateDataMask(
|
||||
filterId,
|
||||
getInitialDataMask(filterId, {
|
||||
filterState: {
|
||||
value: null,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
export type AnyDataMaskAction =
|
||||
| UpdateDataMask
|
||||
| SetDataMaskForFilterConfigFail
|
||||
|
|
|
@ -37,9 +37,12 @@ import {
|
|||
import { areObjectsEqual } from '../reduxUtils';
|
||||
import { Filters } from '../dashboard/reducers/types';
|
||||
|
||||
export function getInitialDataMask(id?: string, moreProps?: DataMask): DataMask;
|
||||
export function getInitialDataMask(
|
||||
id: string,
|
||||
id?: string | number,
|
||||
moreProps?: DataMask,
|
||||
): DataMask;
|
||||
export function getInitialDataMask(
|
||||
id: string | number,
|
||||
moreProps: DataMask = {},
|
||||
): DataMaskWithId {
|
||||
let otherProps = {};
|
||||
|
|
Loading…
Reference in New Issue