[Maps] use EuiSuperDatePicker in QueryBar instead of Angular timepicker in Top Nav #29235
Conversation
* replace kbnTimepicker directive with EuiSuperDatePicker * remove kbnTimepicker directive * remove bootstrap datepicker * embed timepicker in query bar * flesh out date picker in query bar for maps app * wire up refresh config
nreese
added
v7.0.0
[Deprecated-Use Team:Presentation]Team:Geo
|
Pinging @elastic/kibana-gis |
💔 Build Failed |
💚 Build Succeeded |
| @@ -533,6 +604,7 @@ export class QueryBarUI extends Component<Props, State> { | |||
| </div> | |||
| </EuiOutsideClickDetector> | |||
| </EuiFlexItem> | |||
| {this.renderDatePicker()} | |||
| <EuiFlexItem grow={false}> | |||
| <EuiButton | |||
There was a problem hiding this comment.
Why not use the EuiSuperDatePicker's update/refresh button and already includes all the states you need including icons and tooltip? Otherwise, I'd ask that we port over that button to here.
There was a problem hiding this comment.
Because then there would be 2 update buttons - one from EuiSuperDatePicker and one from QueryBar. Linking the DatePicker changes to the QueryBar update button allows users to set the query and time range and apply the changes in a single action.
There was a problem hiding this comment.
Right, but I thought the EuiSuperDatePicker's update button was created in a way that you could tap into it's state and onClick functions so that it could be used instead of the one that's already there.
There was a problem hiding this comment.
No. The EuiSuperDatePicker's update button just works on the start/end props, not outside state like query.
There was a problem hiding this comment.
So its the other way around, if you want update logic to include other stuff then you set showUpdateButton to false and add your own button/logic in the wrapping component
There was a problem hiding this comment.
Ok, then we'll want to convert the EuiSuperDatePicker's renderUpdateButton function to an actual EUI component so that it can replace the query bar's update button. That can be an 'eventually' but the states and tooltips that are there for the date picker should be there when the date picker is in conjunction with the query bar.
|
@cchaos I have updated the PR to use |
💔 Build Failed |
💔 Build Failed |
|
Great! Let me fix up some of the sizing and send you a PR. |
|
PR4U: nreese#29 |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
|
@lukasolson This is ready for another look. Those problems you were seeing with the date popovers closing are cleared up with EUI 6.7.4. Run |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💚 Build Succeeded |
💔 Build Failed |
💔 Build Failed |
|
jenkins, test this |
💚 Build Succeeded |
This PR breaks out the part of #29204 that can be backported to 6.7. This includes updating QueryBar with the prop
showDatePickerso applications can turn on EuiSuperDatePicker.