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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 5 commits into from
Feb 6, 2024
Merged

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

merged 5 commits into from
Feb 6, 2024

Conversation

cee-chen
Copy link
Member

@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

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@cee-chen cee-chen merged commit 86a47eb into elastic:main Feb 6, 2024
7 checks passed
@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