Skip to content
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

Merged
merged 5 commits into from
Nov 23, 2018

Conversation

nreese
Copy link
Contributor

@nreese nreese commented Nov 14, 2018

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 expected options and selectedOptions 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.

@nreese nreese added bug Fixes for quality problems that affect the customer experience v7.0.0 Feature:Input Control Input controls visualization v6.6.0 labels Nov 14, 2018
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@nreese nreese requested a review from markov00 November 14, 2018 18:58
@elasticmachine
Copy link
Contributor

💔 Build Failed

@nreese
Copy link
Contributor Author

nreese commented Nov 14, 2018

jenkins, test this

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Member

@markov00 markov00 left a 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());
})
}
Copy link
Member

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,
};
})}
Copy link
Member

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)

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@nreese nreese merged commit f90f534 into elastic:master Nov 23, 2018
nreese added a commit to nreese/kibana that referenced this pull request Nov 23, 2018
…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
nreese added a commit that referenced this pull request Nov 23, 2018
…ction (#25654) (#26133)

* use field format to create label

* make sure labels are strings so sort does not throw exceptions

* move map out of jsx block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Feature:Input Control Input controls visualization v6.6.0 v7.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Controls Visualization - Dates shown in milliseconds AFTER dates selection
3 participants