villebro commented on a change in pull request #13726:
URL: https://github.com/apache/superset/pull/13726#discussion_r611145614
##########
File path:
superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
##########
@@ -51,39 +53,62 @@ export default function PluginFilterSelect(props:
PluginFilterSelectProps) {
currentValue,
inverseSelection,
inputRef,
+ defaultToFirstItem,
} = formData;
- const [values, setValues] = useState<(string | number | boolean)[]>(
- defaultValue ?? [],
- );
+ const forceFirstValue =
+ appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem;
+
const groupby = ensureIsArray<string>(formData.groupby);
+ // Correct initial value for Ant Select
+ const initSelectValue: SelectValue =
+ // `defaultValue` can be `FIRST_VALUE` if `defaultToFirstItem` is checked,
so need convert it to correct value for Select
+ defaultValue === FIRST_VALUE ? [] : defaultValue ?? [];
+
+ const firstItem: SelectValue = data[0]
+ ? (groupby.map(col => data[0][col]) as string[]) ?? initSelectValue
+ : initSelectValue;
+
+ // If we are in config modal we always need show empty select for
`defaultToFirstItem`
+ const [values, setValues] = useState<SelectValue>(
+ defaultToFirstItem && appSection !== AppSection.FILTER_CONFIG_MODAL
+ ? firstItem
+ : initSelectValue,
+ );
const [col] = groupby;
const datatype: GenericDataType = coltypeMap[col];
const labelFormatter = getDataRecordFormatter({
timeFormatter: smartDateDetailedFormatter,
});
- const handleChange = (
- value?: (number | string)[] | number | string | null,
- ) => {
- const resultValue: (number | string)[] = ensureIsArray<number | string>(
- value,
- );
- setValues(resultValue);
+ const handleChange = (value?: SelectValue | number | string) => {
+ let selectValue: (number | string)[];
+ if (value === FIRST_VALUE) {
+ selectValue = forceFirstValue ? [] : firstItem;
+ } else {
+ selectValue = ensureIsArray<number | string>(value);
+ }
+ setValues(selectValue);
const emptyFilter =
- enableEmptyFilter && !inverseSelection && resultValue?.length === 0;
+ enableEmptyFilter && !inverseSelection && selectValue?.length === 0;
+
+ // Set currentState value for a case of non-`defaultToFirstItem`
+ const stateValue = selectValue.length ? selectValue : null;
const dataMask = {
extraFormData: getSelectExtraFormData(
col,
- resultValue,
+ selectValue,
emptyFilter,
inverseSelection,
),
currentState: {
- value: resultValue.length ? resultValue : null,
+ // We need to save in state `FIRST_VALUE` as some const and not as
REAL value,
+ // because when FiltersBar check if all filters initialized it
compares `defaultValue` with this value
+ // and because REAL value can be unpredictable for users that have
different data for same dashboard we use `FIRST_VALUE`
+ value: value === FIRST_VALUE ? FIRST_VALUE : stateValue,
Review comment:
With the new logic this section is becoming slightly difficult to follow
and could potentially be simplified. There's a few `value === FIRST_VALUE`
checks, and the names `value`, `selectValue`, `stateValue` make it not obvious
to the casual reader what these mean. I propose making these more explicit,
e.g. renaming `value` to `selectedValue` (=what's the current selection) and
constructing `stateValue` (=what goes in `currentState`) earlier on so we don't
need to do a
```javascript
currentState: { value: value === FIRST_VALUE ? FIRST_VALUE : stateValue }
```
later on. It would be nice if `stateValue` would already be fully ready by
the time we arrive at that point, making the final `currentState` look more
like this:
```javascript
currentState: { value: stateValue }
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
