This is an automated email from the ASF dual-hosted git repository.
amitmiran pushed a commit to branch 1.3
in repository https://gitbox.apache.org/repos/asf/superset.git
commit e27f85821eac9ab83b39a289d6466794844119e9
Author: Ville Brofeldt <33317356+ville...@users.noreply.github.com>
AuthorDate: Fri Jul 2 17:04:05 2021 +0300
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
(cherry picked from commit ee2ee486619d9f3fb5584d0c0a6cf583185a1809)
---
.../FiltersBadge/FilterIndicator/index.tsx | 26 +++++++++++++---------
.../dashboard/components/FiltersBadge/Styles.tsx | 10 +++++++++
.../src/dashboard/components/SliceHeader/index.tsx | 13 +++++++++--
.../nativeFilters/FilterBar/Header/index.tsx | 14 ++----------
superset-frontend/src/dataMask/actions.ts | 16 +++++++++++--
superset-frontend/src/dataMask/reducer.ts | 7 ++++--
6 files changed, 58 insertions(+), 28 deletions(-)
diff --git
a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx
b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx
index f962a72..e94bca3 100644
---
a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx
+++
b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx
@@ -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>}
+ </>
);
};
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index 74ffd19..928996d 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@@ -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};
+ `}
+`;
diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
index 2e0e234..87425ec 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -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} />
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
index cc10572..e1d273e 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
@@ -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));
}
});
};
diff --git a/superset-frontend/src/dataMask/actions.ts
b/superset-frontend/src/dataMask/actions.ts
index 76a286c..1b7428f 100644
--- a/superset-frontend/src/dataMask/actions.ts
+++ b/superset-frontend/src/dataMask/actions.ts
@@ -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
diff --git a/superset-frontend/src/dataMask/reducer.ts
b/superset-frontend/src/dataMask/reducer.ts
index 81c55a3..4a4e240 100644
--- a/superset-frontend/src/dataMask/reducer.ts
+++ b/superset-frontend/src/dataMask/reducer.ts
@@ -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 = {};
