[Unified Field List] Fix issue where Unified Field List field popover gets cut off#195147
Merged
davismcphee merged 4 commits intoelastic:mainfrom Oct 8, 2024
Merged
Conversation
…ts contents are taller than the view height
davismcphee
added
release_note:fix
Team:DataDiscovery
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Public APIs missing comments
Async chunks
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
To update your PR or re-run it, just comment with: cc @davismcphee |
Contributor
|
Pinging @elastic/kibana-data-discovery (Team:DataDiscovery) |
Contributor
Flaky Test Runner Stats🟠 Some tests failed. - kibana-flaky-test-suite-runner#7098[❌] x-pack/test_serverless/functional/test_suites/observability/common_configs/config.group6.ts: 25/50 tests passed. |
Contributor
Author
|
The failure from the flaky test run seems to be caused by the issue resolved in #195154, not the one that caused these failures: |
10 tasks
jughosta
reviewed
Oct 7, 2024
| {content ? <EuiPopoverTitle>{header}</EuiPopoverTitle> : header} | ||
| </EuiFlexItem> | ||
| )} | ||
| {content ? <EuiFlexItem css={{ overflowY: 'auto' }}>{content}</EuiFlexItem> : content} |
Contributor
There was a problem hiding this comment.
There seems to be a small issue with the scroll indicator being visible during stats loading:
Does it need a min height?
Contributor
Author
There was a problem hiding this comment.
Good catch! I fixed it with padding and negative margins, and also added EUI scroll styles: f63fe9c.
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsTest FailuresMetrics [docs]Public APIs missing comments
Async chunks
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
History
cc @davismcphee |
Contributor
|
Starting backport for target branches: 8.15, 8.x https://github.com/elastic/kibana/actions/runs/11244223796 |
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 8, 2024
… gets cut off (elastic#195147) ## Summary This PR fixes an issue where the Unified Field List field popover can get cut off if its contents exceed the view height. Now, instead of cutting off the popover, we limit the content height to `90vh` and make the main section scrollable. Before (from elastic#194313 test failure):  After:  Flaky test runs: - https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/7098 Fixes elastic#194313. Fixes elastic#193934. Fixes elastic#193781. ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 26d5634)
Contributor
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Oct 8, 2024
…opover gets cut off (#195147) (#195512) # Backport This will backport the following commits from `main` to `8.x`: - [[Unified Field List] Fix issue where Unified Field List field popover gets cut off (#195147)](#195147) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Davis McPhee","email":"davis.mcphee@elastic.co"},"sourceCommit":{"committedDate":"2024-10-08T21:43:52Z","message":"[Unified Field List] Fix issue where Unified Field List field popover gets cut off (#195147)\n\n## Summary\r\n\r\nThis PR fixes an issue where the Unified Field List field popover can\r\nget cut off if its contents exceed the view height. Now, instead of\r\ncutting off the popover, we limit the content height to `90vh` and make\r\nthe main section scrollable.\r\n\r\nBefore (from #194313 test failure):\r\n\r\n\r\n\r\nAfter:\r\n\r\n\r\n\r\nFlaky test runs:\r\n-\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/7098\r\n\r\nFixes #194313.\r\nFixes #193934.\r\nFixes #193781.\r\n\r\n### Checklist\r\n\r\n- [ ] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [ ]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] [Flaky Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [ ] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"26d5634b23fc76d7a87aaba53892dabb31866d54","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:DataDiscovery","backport:prev-minor","backport:prev-major"],"title":"[Unified Field List] Fix issue where Unified Field List field popover gets cut off","number":195147,"url":"https://github.com/elastic/kibana/pull/195147","mergeCommit":{"message":"[Unified Field List] Fix issue where Unified Field List field popover gets cut off (#195147)\n\n## Summary\r\n\r\nThis PR fixes an issue where the Unified Field List field popover can\r\nget cut off if its contents exceed the view height. Now, instead of\r\ncutting off the popover, we limit the content height to `90vh` and make\r\nthe main section scrollable.\r\n\r\nBefore (from #194313 test failure):\r\n\r\n\r\n\r\nAfter:\r\n\r\n\r\n\r\nFlaky test runs:\r\n-\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/7098\r\n\r\nFixes #194313.\r\nFixes #193934.\r\nFixes #193781.\r\n\r\n### Checklist\r\n\r\n- [ ] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [ ]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] [Flaky Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [ ] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"26d5634b23fc76d7a87aaba53892dabb31866d54"}},"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/195147","number":195147,"mergeCommit":{"message":"[Unified Field List] Fix issue where Unified Field List field popover gets cut off (#195147)\n\n## Summary\r\n\r\nThis PR fixes an issue where the Unified Field List field popover can\r\nget cut off if its contents exceed the view height. Now, instead of\r\ncutting off the popover, we limit the content height to `90vh` and make\r\nthe main section scrollable.\r\n\r\nBefore (from #194313 test failure):\r\n\r\n\r\n\r\nAfter:\r\n\r\n\r\n\r\nFlaky test runs:\r\n-\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/7098\r\n\r\nFixes #194313.\r\nFixes #193934.\r\nFixes #193781.\r\n\r\n### Checklist\r\n\r\n- [ ] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [ ]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] [Flaky Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [ ] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"26d5634b23fc76d7a87aaba53892dabb31866d54"}}]}] BACKPORT--> Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes an issue where the Unified Field List field popover can get cut off if its contents exceed the view height. Now, instead of cutting off the popover, we limit the content height to
90vhand make the main section scrollable.Before (from #194313 test failure):
After:
Flaky test runs:
Fixes #194313.
Fixes #193934.
Fixes #193781.
Checklist
For maintainers