Skip to content

refactor RowHeightSettings component to EUI layout#203606

Merged
akowalska622 merged 44 commits intoelastic:mainfrom
akowalska622:203378-change-rowheightsettings-design-to-align-with-eui
Jan 30, 2025
Merged

refactor RowHeightSettings component to EUI layout#203606
akowalska622 merged 44 commits intoelastic:mainfrom
akowalska622:203378-change-rowheightsettings-design-to-align-with-eui

Conversation

@akowalska622
Copy link
Contributor

@akowalska622 akowalska622 commented Dec 10, 2024 •
edited by kibanamachine
Loading

Summary

Closes: [OneDiscover][UnifiedDataTable] Change RowHeightSettings design to align with EUI #203378

PR focuses on adjusting current RowHeightSettings view to EUI layout.
Current view:
image

EUI view:
image

Changes:

  1. Remove "Single" option
  2. Switch range slider to number input to control row height
    2.1) Switching between "Auto" and "Custom" options should persevere input value (but shouldn't influence row count if in "Auto" mode)
    2.2) While in "Auto" mode, number input should be disabled (but it shouldn't be hidden, like slider in current version)
    2.3) Switching back from "Auto" to "Custom" view, the number input value should be applied as row count
  3. "Auto-fit" copy should be changed to "Auto"
  4. Labels should be adjusted to new version

Keeping input state separate from row height settings, but in sync while custom mode is on, required some wider changes, both in Discover and Visualization. I also unified map of values for single and auto.
Previously Discover used -1 for auto and 0 for single, Visualization used undefined for auto and 1 for single.
Currently it's unified to -1 for auto and 1 for single. Please see table below.

Mode Discover (Previous) Visualization (Previous) Unified (Current)
auto -1 undefined -1
single 0 1 1

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

  • Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  • Documentation was added for features that require explanation or tutorials
  • Unit or functional tests were updated or added to match the most common scenarios
  • If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
  • This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
  • Flaky Test Runner was used on any tests changed
  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

@akowalska622 akowalska622 added Feature:Discover Discover Application release_note:feature Makes this part of the condensed release notes Team:DataDiscovery Discover, search (data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. t// backport:prev-minor labels Dec 10, 2024
@akowalska622 akowalska622 self-assigned this Dec 10, 2024
@akowalska622 akowalska622 force-pushed the 203378-change-rowheightsettings-design-to-align-with-eui branch from 30c3dee to fbe834c Compare December 13, 2024 11:36
@akowalska622 akowalska622 changed the title refactor RowHEightSettings component to EUI layout refactor RowHeightSettings component to EUI layout Dec 13, 2024
@akowalska622
Copy link
Contributor Author

akowalska622 commented Dec 16, 2024

/ci

1 similar comment
@akowalska622
Copy link
Contributor Author

akowalska622 commented Dec 16, 2024

/ci

@akowalska622 akowalska622 force-pushed the 203378-change-rowheightsettings-design-to-align-with-eui branch from cc2ecfb to 4b2c7e8 Compare January 7, 2025 13:09
@akowalska622
Copy link
Contributor Author

akowalska622 commented Jan 8, 2025

/ci

@akowalska622 akowalska622 force-pushed the 203378-change-rowheightsettings-design-to-align-with-eui branch 2 times, most recently from c85d776 to 67c8bfc Compare January 8, 2025 11:47
@akowalska622
Copy link
Contributor Author

akowalska622 commented Jan 8, 2025

/ci

4 similar comments
@akowalska622
Copy link
Contributor Author

akowalska622 commented Jan 10, 2025

/ci

@akowalska622
Copy link
Contributor Author

akowalska622 commented Jan 10, 2025

/ci

@akowalska622
Copy link
Contributor Author

akowalska622 commented Jan 13, 2025

/ci

@akowalska622
Copy link
Contributor Author

akowalska622 commented Jan 13, 2025

/ci

@akowalska622 akowalska622 marked this pull request as ready for review January 13, 2025 17:27
@akowalska622 akowalska622 requested review from a team as code owners January 13, 2025 17:27
@elasticmachine
Copy link
Contributor

elasticmachine commented Jan 13, 2025

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

dmlemeshko
dmlemeshko reviewed Jan 14, 2025
View reviewed changes
Copy link
Contributor

@dmlemeshko dmlemeshko left a comment •
edited
Loading

Choose a reason for hiding this comment

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

test/functional/services/data_grid.ts changes LGTM

@dmlemeshko dmlemeshko self-requested a review January 14, 2025 08:19
@akowalska622 akowalska622 force-pushed the 203378-change-rowheightsettings-design-to-align-with-eui branch from 79358d2 to b3227ec Compare January 27, 2025 11:41
@akowalska622 akowalska622 requested a review from a team as a code owner January 27, 2025 12:19
@elasticmachine
Copy link
Contributor

elasticmachine commented Jan 29, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
logsExplorer 697 574 -123

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
@kbn/unified-data-table 108 107 -1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
cloudSecurityPosture 523.7KB 523.5KB -217.0B
discover 830.3KB 830.1KB -249.0B
esqlDataGrid 176.2KB 176.0KB -213.0B
lens 1.6MB 1.6MB +94.0B
logsExplorer 222.5KB 222.5KB +1.0B
securitySolution 21.4MB 21.4MB -1.2KB
slo 885.8KB 885.6KB -217.0B
visTypeTable 21.1KB 21.1KB -18.0B
total -2.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
logsExplorer 26.8KB 26.8KB +38.0B
Unknown metric groups

API count

id before after diff
@kbn/unified-data-table 185 184 -1

History

cc @akowalska622

yngrdyn
yngrdyn approved these changes Jan 29, 2025
View reviewed changes
Copy link
Contributor

@yngrdyn yngrdyn left a comment

Choose a reason for hiding this comment

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

LGTM,

davismcphee
davismcphee approved these changes Jan 30, 2025
View reviewed changes
Copy link
Contributor

@davismcphee davismcphee left a comment

Choose a reason for hiding this comment

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

Code changes LGTM and it works as expected, thanks! It was a lot trickier than it probably should have been, but the good news is these changes will help simplify it for the next person 👍

src/platform/packages/shared/kbn-unified-data-table/src/constants.ts Outdated
Copy link
Contributor

@davismcphee davismcphee Jan 30, 2025

Choose a reason for hiding this comment

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

Looks great, thanks!

@akowalska622 akowalska622 merged commit a376e9b into elastic:main Jan 30, 2025
@kibanamachine
Copy link
Contributor

kibanamachine commented Jan 30, 2025

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/13048127180

@kibanamachine
Copy link
Contributor

kibanamachine commented Jan 30, 2025

💔 All backports failed

Status Branch Result
❌ 8.x Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 203606

Questions ?

Please refer to the Backport tool documentation

@akowalska622 akowalska622 mentioned this pull request Jan 30, 2025
Merged
@akowalska622
Copy link
Contributor Author

akowalska622 commented Jan 30, 2025

💚 All backports created successfully

Status Branch Result
✅ 8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

akowalska622 added a commit that referenced this pull request Jan 30, 2025
@akowalska622
[8.x] refactor RowHeightSettings component to EUI layout (#203606) (#…
cd3114b 
…208890)

# Backport

This will backport the following commits from `main` to `8.x`:
- [refactor RowHeightSettings component to EUI layout
(#203606)](#203606)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Ania
Kowalska","email":"63072419+akowalska622@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-01-30T08:12:02Z","message":"refactor
RowHeightSettings component to EUI layout
(#203606)","sha":"a376e9b16944c006975053295001690baec841bb","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","v9.0.0","release_note:feature","Team:DataDiscovery","backport:prev-minor"],"title":"refactor
RowHeightSettings component to EUI
layout","number":203606,"url":"https://github.com/elastic/kibana/pull/203606","mergeCommit":{"message":"refactor
RowHeightSettings component to EUI layout
(#203606)","sha":"a376e9b16944c006975053295001690baec841bb"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203606","number":203606,"mergeCommit":{"message":"refactor
RowHeightSettings component to EUI layout
(#203606)","sha":"a376e9b16944c006975053295001690baec841bb"}}]}]
BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dej611 dej611 dej611 approved these changes

@yngrdyn yngrdyn yngrdyn approved these changes

@logeekal logeekal logeekal approved these changes

@dmlemeshko dmlemeshko dmlemeshko approved these changes

@davismcphee davismcphee davismcphee approved these changes

Assignees

@akowalska622 akowalska622

Labels

Feature:Discover Discover Application release_note:feature Makes this part of the condensed release notes Team:DataDiscovery Discover, search (data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. t// v8.18.0 v9.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[OneDiscover][UnifiedDataTable] Change RowHeightSettings design to align with EUI

8 participants

@akowalska622 @elasticmachine @davismcphee @kibanamachine @dej611 @yngrdyn @logeekal @dmlemeshko