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

* 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

View File

@ -211,41 +211,12 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
onComparatorChange,
} = useSimpleTabFilterProps(props);
const [suggestions, setSuggestions] = useState<Record<string, any>>([]);
const [comparator, setComparator] = useState(props.adhocFilter.comparator);
const [
loadingComparatorSuggestions,
setLoadingComparatorSuggestions,
] = 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 = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
@ -257,7 +228,6 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
);
const getOptionsRemaining = () => {
const { comparator } = props.adhocFilter;
// if select is multi/value is array, we show the options not selected
const valuesFromSuggestionsLength = Array.isArray(comparator)
? comparator.filter(v => suggestions.includes(v)).length
@ -270,13 +240,18 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
return optionsRemaining ? placeholder : '';
};
const handleSubjectChange = (subject: string) => {
setComparator(undefined);
onSubjectChange(subject);
};
let columns = props.options;
const { subject, operator, comparator, operatorId } = props.adhocFilter;
const { subject, operator, operatorId } = props.adhocFilter;
const subjectSelectProps = {
ariaLabel: t('Select subject'),
value: subject ?? undefined,
onChange: onSubjectChange,
onChange: handleSubjectChange,
notFoundContent: t(
'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 (
<>
<Select