pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(Explore): Clear filter value when changing columns (#16871)

Browse Source 
* Clear filter value onChange

* Clear filter value on user change action
This commit is contained in:
Geido 2021-09-30 17:18:08 +03:00 committed by GitHub
parent 1a38ec6c43
commit c8db435730
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
View File

@ -211,41 +211,12 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
onComparatorChange, onComparatorChange,
} = useSimpleTabFilterProps(props); } = useSimpleTabFilterProps(props);
const [suggestions, setSuggestions] = useState<Record<string, any>>([]); const [suggestions, setSuggestions] = useState<Record<string, any>>([]);
const [comparator, setComparator] = useState(props.adhocFilter.comparator);
const [ const [
loadingComparatorSuggestions, loadingComparatorSuggestions,
setLoadingComparatorSuggestions, setLoadingComparatorSuggestions,
] = useState(false); ] = useState(false);
useEffect(() => {
const refreshComparatorSuggestions = () => {
const { datasource } = props;
const col = props.adhocFilter.subject;
const having = props.adhocFilter.clause === CLAUSES.HAVING;
if (col && datasource && datasource.filter_select && !having) {
const controller = new AbortController();
const { signal } = controller;
if (loadingComparatorSuggestions) {
controller.abort();
}
setLoadingComparatorSuggestions(true);
SupersetClient.get({
signal,
endpoint: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
})
.then(({ json }) => {
setSuggestions(json);
setLoadingComparatorSuggestions(false);
})
.catch(() => {
setSuggestions([]);
setLoadingComparatorSuggestions(false);
});
}
};
refreshComparatorSuggestions();
}, [props.adhocFilter.subject]);
const onInputComparatorChange = ( const onInputComparatorChange = (
event: React.ChangeEvent<HTMLInputElement>, event: React.ChangeEvent<HTMLInputElement>,
) => { ) => {
@ -257,7 +228,6 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
); );
const getOptionsRemaining = () => { const getOptionsRemaining = () => {
const { comparator } = props.adhocFilter;
// if select is multi/value is array, we show the options not selected // if select is multi/value is array, we show the options not selected
const valuesFromSuggestionsLength = Array.isArray(comparator) const valuesFromSuggestionsLength = Array.isArray(comparator)
? comparator.filter(v => suggestions.includes(v)).length ? comparator.filter(v => suggestions.includes(v)).length
@ -270,13 +240,18 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
return optionsRemaining ? placeholder : ''; return optionsRemaining ? placeholder : '';
}; };
const handleSubjectChange = (subject: string) => {
setComparator(undefined);
onSubjectChange(subject);
};
let columns = props.options; let columns = props.options;
const { subject, operator, comparator, operatorId } = props.adhocFilter; const { subject, operator, operatorId } = props.adhocFilter;
const subjectSelectProps = { const subjectSelectProps = {
ariaLabel: t('Select subject'), ariaLabel: t('Select subject'),
value: subject ?? undefined, value: subject ?? undefined,
onChange: onSubjectChange, onChange: handleSubjectChange,
notFoundContent: t( notFoundContent: t(
'No such column found. To filter on a metric, try the Custom SQL tab.', 'No such column found. To filter on a metric, try the Custom SQL tab.',
), ),
@ -345,6 +320,40 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
} }
`; `;
useEffect(() => {
const refreshComparatorSuggestions = () => {
const { datasource } = props;
const col = props.adhocFilter.subject;
const having = props.adhocFilter.clause === CLAUSES.HAVING;
if (col && datasource && datasource.filter_select && !having) {
const controller = new AbortController();
const { signal } = controller;
if (loadingComparatorSuggestions) {
controller.abort();
}
setLoadingComparatorSuggestions(true);
SupersetClient.get({
signal,
endpoint: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
})
.then(({ json }) => {
setSuggestions(json);
setLoadingComparatorSuggestions(false);
})
.catch(() => {
setSuggestions([]);
setLoadingComparatorSuggestions(false);
});
}
};
refreshComparatorSuggestions();
}, [props.adhocFilter.subject]);
useEffect(() => {
setComparator(props.adhocFilter.comparator);
}, [props.adhocFilter.comparator]);
return ( return (
<> <>
<Select <Select