Skip to content

[EuiSuperDatePicker][EuiAutoRefresh][EuiRefreshInterval] Allow controlling the rendered unit#7501

Merged
cee-chen merged 5 commits intoelastic:mainfrom
cee-chen:super-date-picker/refresh-units
Feb 6, 2024
Merged

[EuiSuperDatePicker][EuiAutoRefresh][EuiRefreshInterval] Allow controlling the rendered unit#7501
cee-chen merged 5 commits intoelastic:mainfrom
cee-chen:super-date-picker/refresh-units

Conversation

@cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Feb 2, 2024 •
edited by tkajtoch
Loading

Summary

closes #5571 and #5752

refresh_interval

This PR adds a refreshIntervalUnits prop to EuiSuperDatePicker and an intervalUnits prop to EuiAutoRefresh and EuiRefreshInterval. It also updates the onRefreshChange callback of all 3 components to pass back a new intervalUnits key.

This allows consumers to receive and set their own interval unit state based on user selection (or even ignoring user selection, if they prefer to always coerce a certain unit) instead of the default behavior, which rounds the rendered unit up to the nearest largest unit (e.g. 90s = 2m). If users still want this default unit rounding, they can simply omit passing an intervalUnits prop.

QA

  • Go to https://eui.elastic.co/pr_7501/#/templates/super-date-picker#auto-refresh
  • Click the Quick select menu button in the form prepend
  • Check the Refresh every toggle
  • Type a large number in (e.g. 1000) and confirm that the appended auto refresh interval outside the popover rounds up to minutes
  • Uncheck the toggle for rounding units
  • Confirm the appended interval matches the unit selected in the dropdown
  • Change the unit selection and confirm the appended interval unit updates accordingly, but not the number
  • Go to https://eui.elastic.co/pr_7501/#/forms/auto-refresh
  • For each of the 3 playgrounds on the page:
    • Open the playground and toggle the isPaused prop to false
    • Set refreshInterval to 100000 and intervalUnits to m and confirm the corresponding number and unit are rendered as expected

General checklist

  • Browser QA
    • Checked in Chrome, Safari, Edge, and Firefox
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
  • Designer checklist - N/A

@cee-chen
[EuiAutoRefresh] set up new controlled intervalUnits prop
c11e185 
- allows consumers to override the unit rendered

- passing user `intervalUnits` via `onRefreshChange` will allow consumers to update the rendered unit
@cee-chen
Add logic to internal unit utils preventing auto-detection if a unit …
794a53a 
…is passed
@cee-chen
[docs] Add toggle to auto refresh example
b4257ef 
+ improve playground toggles
@cee-chen
changelog
8c231b8
@cee-chen cee-chen marked this pull request as ready for review February 2, 2024 03:24
@cee-chen cee-chen requested a review from a team as a code owner February 2, 2024 03:24
tkajtoch
tkajtoch approved these changes Feb 6, 2024
View reviewed changes
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks and works great!

@cee-chen cee-chen enabled auto-merge (squash) February 6, 2024 17:01
@kibanamachine
Copy link

kibanamachine commented Feb 6, 2024

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

elasticmachine commented Feb 6, 2024

💚 Build Succeeded

History

@cee-chen cee-chen merged commit 86a47eb into elastic:main Feb 6, 2024
@cee-chen cee-chen deleted the super-date-picker/refresh-units branch February 6, 2024 17:24
This was referenced Feb 6, 2024
Closed
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request Feb 20, 2024
@cee-chen
Upgrade EUI to v93.1.1 (#176762)
2680755 
`v93.0.0` ⏩ `v93.1.1`

---

## [`v93.1.1`](https://github.com/elastic/eui/releases/v93.2.0)

**This is a patch release primarily intended for use by Kibana.**

- Added top-level `EuiTreeView.Item` export
([#7526](elastic/eui#7526))

## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0)

- Added `index` glyph to `EuiIcon`
([#7498](elastic/eui#7498))
- Updated `EuiHighlight` to accept an array of `search` strings, which
allows highlighting multiple, separate words within its children. This
new type and behavior *only* works if `highlightAll` is also set to
true. ([#7496](elastic/eui#7496))
- Updated `EuiContextMenu` with a new `panels.items.renderItem`
property, which allows rendering completely custom items next to
standard `EuiContextMenuItem` objects
([#7510](elastic/eui#7510))
- `EuiSuperDatePicker` updates:
- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop.
Passing this prop allows controlling and overriding the default unit
rounding behavior. ([#7501](elastic/eui#7501))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`intervalUnits` prop. Passing this prop allows controlling and
overriding the default unit rounding behavior.
([#7501](elastic/eui#7501))
- Updated `onRefreshChange` to pass back a new `intervalUnits` key that
contains the current interval unit format (seconds, minutes, or hours).
([#7501](elastic/eui#7501))
- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop,
which defaults to true (current behavior). To preserve displaying the
unit that users select for relative time, set this to false.
([#7502](elastic/eui#7502))
- Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop,
which accepts a minimum number in milliseconds
([#7516](elastic/eui#7516))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`minInterval` prop, which accepts a minimum number in milliseconds
([#7516](elastic/eui#7516))

**Bug fixes**

- Fixed `EuiHighlight` to not parse `search` strings as regexes
([#7496](elastic/eui#7496))
- Fixed `EuiSuperDatePicker` submit bug when used within `<form>`
elements ([#7504](elastic/eui#7504))
- Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to
items without expandable children
([#7513](elastic/eui#7513))

**CSS-in-JS conversions**

- Converted `EuiTreeView` to Emotion. Updates as part of the conversion:
([#7513](elastic/eui#7513))
  - Removed `.euiTreeView__wrapper` div node
  - Enforced consistent `icon` size based on `display` size
fkanout pushed a commit to fkanout/kibana that referenced this pull request Mar 4, 2024
@cee-chen @fkanout
Upgrade EUI to v93.1.1 (elastic#176762)
2b74c27 
`v93.0.0` ⏩ `v93.1.1`

---

## [`v93.1.1`](https://github.com/elastic/eui/releases/v93.2.0)

**This is a patch release primarily intended for use by Kibana.**

- Added top-level `EuiTreeView.Item` export
([elastic#7526](elastic/eui#7526))

## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0)

- Added `index` glyph to `EuiIcon`
([elastic#7498](elastic/eui#7498))
- Updated `EuiHighlight` to accept an array of `search` strings, which
allows highlighting multiple, separate words within its children. This
new type and behavior *only* works if `highlightAll` is also set to
true. ([elastic#7496](elastic/eui#7496))
- Updated `EuiContextMenu` with a new `panels.items.renderItem`
property, which allows rendering completely custom items next to
standard `EuiContextMenuItem` objects
([elastic#7510](elastic/eui#7510))
- `EuiSuperDatePicker` updates:
- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop.
Passing this prop allows controlling and overriding the default unit
rounding behavior. ([elastic#7501](elastic/eui#7501))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`intervalUnits` prop. Passing this prop allows controlling and
overriding the default unit rounding behavior.
([elastic#7501](elastic/eui#7501))
- Updated `onRefreshChange` to pass back a new `intervalUnits` key that
contains the current interval unit format (seconds, minutes, or hours).
([elastic#7501](elastic/eui#7501))
- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop,
which defaults to true (current behavior). To preserve displaying the
unit that users select for relative time, set this to false.
([elastic#7502](elastic/eui#7502))
- Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop,
which accepts a minimum number in milliseconds
([elastic#7516](elastic/eui#7516))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`minInterval` prop, which accepts a minimum number in milliseconds
([elastic#7516](elastic/eui#7516))

**Bug fixes**

- Fixed `EuiHighlight` to not parse `search` strings as regexes
([elastic#7496](elastic/eui#7496))
- Fixed `EuiSuperDatePicker` submit bug when used within `<form>`
elements ([elastic#7504](elastic/eui#7504))
- Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to
items without expandable children
([elastic#7513](elastic/eui#7513))

**CSS-in-JS conversions**

- Converted `EuiTreeView` to Emotion. Updates as part of the conversion:
([elastic#7513](elastic/eui#7513))
  - Removed `.euiTreeView__wrapper` div node
  - Enforced consistent `icon` size based on `display` size
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tkajtoch tkajtoch tkajtoch approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Auto refresh] Should auto refresh transform unit?

4 participants

@cee-chen @kibanamachine @elasticmachine @tkajtoch