-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Controls Visualization - Dates shown in milliseconds AFTER dates selection #25654
Conversation
💔 Build Failed |
💚 Build Succeeded |
💔 Build Failed |
jenkins, test this |
💚 Build Succeeded |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code LGTM. Tested on chrome/osx and this fix correctly the bug.
I've just added a minor comment on code readability.
.sort((a, b) => { | ||
return a.label.toLowerCase().localeCompare(b.label.toLowerCase()); | ||
}) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: Why you have moved this map in the JSX? Don't you think it loose a bit of readability if written here?
label: this.props.formatOptionLabel(selectedOption).toString(), | ||
value: selectedOption, | ||
}; | ||
})} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The same as the comment above. You an also write an helper function like:
function formatOptions(optionList, formatter, dataTestSubjPrefix, sorted) {
const formattedOptionList = optionList.map(value => {
const formattedOption = {
label: formatter(value).toString(),
value,
};
if (dataTestSubjPrefix ) {
formattedOption['data-test-subj'] = `${dataTestSubjPrefix}_${value.toString().replace(' ', '_')}`;
}
return formattedOption;
});
if (sorted) {
return formattedOptionList.sort((a, b) => {
return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
})
}
return formattedOptionList;
}
const options = formatOptions(this.props.options, this.props.formatOptionLabel, 'option', true)
const selectedOptions = formatOptions(this.props.selectedOptions, this.props.formatOptionLabel)
💚 Build Succeeded |
…ction (elastic#25654) * use field format to create label * make sure labels are strings so sort does not throw exceptions * move map out of jsx block
fixes #25111
The problem was occurring because when the selected options where retrieved from the Kibana filter pill, the label was not formatted by the field formatter.
ListControl
react component expectedoptions
andselectedOptions
to contain already formatted labels. This made this bug easy to introduce since formatting needed to be applied in multiple locations.This PR resolves the issue by generating the labels (with the field formatter) in a single place. Instead of passing around
{ value: 'foo', label: 'formatted foo' }
, the list control now just passes around['foo']
and the label is created when needed by the UI.