[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel #210225
+99
−26
Conversation
This file contains 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
PhilippeOberti
added
release_note:skip
|
Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations) |
christineweng
approved these changes
Feb 7, 2025
| </> | ||
| )} | ||
| </EuiResizableContainer> | ||
| <> |
There was a problem hiding this comment.
i dont think you need the empty tag here?
There was a problem hiding this comment.
that is correct, this is left over from some test I was doing with a resize button. Removed!
…ning/closing left panel
PhilippeOberti
force-pushed
the
flyout-flickering
branch
2 times, most recently
from
e815270 to
4376a3b
Compare
PhilippeOberti
force-pushed
the
flyout-flickering
branch
from
4376a3b to
2825534
Compare
💛 Build succeeded, but was flaky
Failed CI StepsTest FailuresMetrics [docs]Async chunks
History
|
|
Starting backport for target branches: 8.16, 8.17, 8.18, 9.0 |
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
PhilippeOberti
added a commit
to PhilippeOberti/kibana
that referenced
this pull request
Feb 7, 2025
…ning/closing left panel (elastic#210225) ## Summary We recently improved the expandable flyout by adding support for a [fully resizable flyout](elastic#192906). This work introduce a minor inconvenience, where the right panel gets re-rendered every time the user expands or collapses the flyout. This PR fixes this issue by better using the EUI resizable container (see how to externally control a resizable container [here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)). The flyout is now always showing a resizable container (even in collapsed mode) but EUI manages internally hiding the left section and the resize button. #### Old behavior https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44 #### New behavior https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6 The rest of the flyout's behavior remains untouched: - identical default widths - user selected widths are still applied - no changes to the preview behavior ### Checklist - [ ] [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 (cherry picked from commit 7a9bf13) # Conflicts: # x-pack/solutions/security/packages/expandable-flyout/src/components/resizable_container.tsx
PhilippeOberti
added a commit
to PhilippeOberti/kibana
that referenced
this pull request
Feb 7, 2025
…ning/closing left panel (elastic#210225) ## Summary We recently improved the expandable flyout by adding support for a [fully resizable flyout](elastic#192906). This work introduce a minor inconvenience, where the right panel gets re-rendered every time the user expands or collapses the flyout. This PR fixes this issue by better using the EUI resizable container (see how to externally control a resizable container [here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)). The flyout is now always showing a resizable container (even in collapsed mode) but EUI manages internally hiding the left section and the resize button. #### Old behavior https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44 #### New behavior https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6 The rest of the flyout's behavior remains untouched: - identical default widths - user selected widths are still applied - no changes to the preview behavior ### Checklist - [ ] [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 (cherry picked from commit 7a9bf13) # Conflicts: # packages/kbn-expandable-flyout/src/components/resizable_container.tsx
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
PhilippeOberti
added a commit
to PhilippeOberti/kibana
that referenced
this pull request
Feb 7, 2025
…ning/closing left panel (elastic#210225) ## Summary We recently improved the expandable flyout by adding support for a [fully resizable flyout](elastic#192906). This work introduce a minor inconvenience, where the right panel gets re-rendered every time the user expands or collapses the flyout. This PR fixes this issue by better using the EUI resizable container (see how to externally control a resizable container [here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)). The flyout is now always showing a resizable container (even in collapsed mode) but EUI manages internally hiding the left section and the resize button. #### Old behavior https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44 #### New behavior https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6 The rest of the flyout's behavior remains untouched: - identical default widths - user selected widths are still applied - no changes to the preview behavior ### Checklist - [ ] [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 (cherry picked from commit 7a9bf13)
PhilippeOberti
added a commit
to PhilippeOberti/kibana
that referenced
this pull request
Feb 7, 2025
…ning/closing left panel (elastic#210225) ## Summary We recently improved the expandable flyout by adding support for a [fully resizable flyout](elastic#192906). This work introduce a minor inconvenience, where the right panel gets re-rendered every time the user expands or collapses the flyout. This PR fixes this issue by better using the EUI resizable container (see how to externally control a resizable container [here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)). The flyout is now always showing a resizable container (even in collapsed mode) but EUI manages internally hiding the left section and the resize button. #### Old behavior https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44 #### New behavior https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6 The rest of the flyout's behavior remains untouched: - identical default widths - user selected widths are still applied - no changes to the preview behavior ### Checklist - [ ] [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 (cherry picked from commit 7a9bf13) # Conflicts: # packages/kbn-expandable-flyout/src/components/resizable_container.tsx
PhilippeOberti
added a commit
that referenced
this pull request
Feb 8, 2025
…hen opening/closing left panel (#210225) (#210291) # Backport This will backport the following commits from `main` to `8.16`: - [[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)](#210225) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210225","number":210225,"mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
PhilippeOberti
added a commit
that referenced
this pull request
Feb 8, 2025
…hen opening/closing left panel (#210225) (#210289) # Backport This will backport the following commits from `main` to `8.17`: - [[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)](#210225) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210225","number":210225,"mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
PhilippeOberti
added a commit
that referenced
this pull request
Feb 8, 2025
…hen opening/closing left panel (#210225) (#210288) # Backport This will backport the following commits from `main` to `8.18`: - [[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)](#210225) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210225","number":210225,"mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
PhilippeOberti
added a commit
that referenced
this pull request
Feb 8, 2025
…en opening/closing left panel (#210225) (#210287) # Backport This will backport the following commits from `main` to `9.0`: - [[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)](#210225) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210225","number":210225,"mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
PhilippeOberti
added a commit
that referenced
this pull request
Feb 8, 2025
…en opening/closing left panel (#210225) (#210292) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)](#210225) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-07T22:34:27Z","message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.17.3","v8.16.5"],"title":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel","number":210225,"url":"https://github.com/elastic/kibana/pull/210225","mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210287","number":210287,"state":"OPEN"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210288","number":210288,"state":"OPEN"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210225","number":210225,"mergeCommit":{"message":"[Security Solution][Expandable flyout] fix flyout flickering when opening/closing left panel (#210225)\n\n## Summary\r\n\r\nWe recently improved the expandable flyout by adding support for a\r\n[fully resizable flyout](https://github.com/elastic/kibana/pull/192906).\r\nThis work introduce a minor inconvenience, where the right panel gets\r\nre-rendered every time the user expands or collapses the flyout.\r\n\r\nThis PR fixes this issue by better using the EUI resizable container\r\n(see how to externally control a resizable container\r\n[here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)).\r\nThe flyout is now always showing a resizable container (even in\r\ncollapsed mode) but EUI manages internally hiding the left section and\r\nthe resize button.\r\n\r\n#### Old behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44\r\n\r\n#### New behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6\r\n\r\nThe rest of the flyout's behavior remains untouched:\r\n- identical default widths\r\n- user selected widths are still applied\r\n- no changes to the preview behavior\r\n\r\n### Checklist\r\n\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","sha":"7a9bf1399c39e9306bbfb23e73a4d72fe8aae967"}},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210289","number":210289,"state":"OPEN"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210291","number":210291,"state":"OPEN"}]}] BACKPORT-->
Samiul-TheSoccerFan
pushed a commit
to Samiul-TheSoccerFan/kibana
that referenced
this pull request
Feb 10, 2025
…ning/closing left panel (elastic#210225) ## Summary We recently improved the expandable flyout by adding support for a [fully resizable flyout](elastic#192906). This work introduce a minor inconvenience, where the right panel gets re-rendered every time the user expands or collapses the flyout. This PR fixes this issue by better using the EUI resizable container (see how to externally control a resizable container [here](https://eui.elastic.co/#/layout/resizable-container#collapsible-panels-with-external-control)). The flyout is now always showing a resizable container (even in collapsed mode) but EUI manages internally hiding the left section and the resize button. #### Old behavior https://github.com/user-attachments/assets/4d7589ec-0edf-4690-9ce4-7b969ae0bb44 #### New behavior https://github.com/user-attachments/assets/7cf720b8-5b31-4cc9-b213-21472ea880d6 The rest of the flyout's behavior remains untouched: - identical default widths - user selected widths are still applied - no changes to the preview behavior ### Checklist - [ ] [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
|
This PR didn't make it into the latest BC for v8.16.4 and v8.17.2. Updating the labels. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
We recently improved the expandable flyout by adding support for a fully resizable flyout. This work introduce a minor inconvenience, where the right panel gets re-rendered every time the user expands or collapses the flyout.
This PR fixes this issue by better using the EUI resizable container (see how to externally control a resizable container here). The flyout is now always showing a resizable container (even in collapsed mode) but EUI manages internally hiding the left section and the resize button.
Old behavior
Screen.Recording.2025-02-07.at.10.55.49.AM.mov
New behavior
Screen.Recording.2025-02-07.at.10.54.42.AM.mov
The rest of the flyout's behavior remains untouched:
Checklist