CNV-29392: VM actions menu jumps when vms on list change state

[avivtur]

📝 Description

When appending the dropdown to the outer page, every re-render on that page will cause the dropdown to re-render and change location.
When using the Dropdown component from PF we can use the menuAppentTo prop to append the dropdown to the parent, however this presents a scrolling issue on the firefox browser, as the dropdown keeps getting focus and the scorlling would seem stuck. this is a PF issue that needs to be resolved as the focus is coming from the dropdown component.

🎥 Demo

Before:

vm-actions-menu-is-moving.mp4

After:

vm-actions-menu-is-moving-after.mp4

[openshift-ci-robot]

@avivtur: This pull request references CNV-29392 which is a valid jira issue.

In response to this:

📝 Description

VM actions menu was appended to the page instead of the VM row parent which caused the menu to change location on screen.

NOTE: the dropdown menu can still change its direction (from up to down and vice versa) depending if the page height is changed, as a default behavior from PF.

🎥 Demo

Before:

vm-actions-menu-is-moving.mp4

After:

vm-actions-menu-is-moving-after.mp4

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[hstastna]

The code changes look good to me, make sense. I've tested them both in Chromium and Firefox browsers (up to date). In Chromium it works fine, however in Firefox I wasn't able to reach some actions in the drop down at all, for smaller browser window:

simplescreenrecorder-2023-06-29_14.33.49.mp4

IMHO we need to find a way to prevent scrolling back up automatically when trying to reach some actions at the end of the menu.

[upalatucci]

getContentScrollableElement was there to prevent the issue that Hilda is pointing out.

[openshift-ci-robot]

@avivtur: This pull request references CNV-29392 which is a valid jira issue.

In response to this:

📝 Description

The VM actions dropdown was coupled with the VM objects and the additional resources needed for the vm actions.
This caused an issue where no matter which VM is changing the status any actions dropdown that we will open will move. as a temporary solution, we can de-couple the dropdown from the objects, and memoize the dropdown to re-render on actions change - which will cause this bug to happen when we change a VM's status and we try immediately to change its status again.

🎥 Demo

Before:

vm-actions-menu-is-moving.mp4

After:

vm-actions-menu-is-moving-after.mp4

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[openshift-ci-robot]

@avivtur: This pull request references CNV-29392 which is a valid jira issue.

In response to this:

📝 Description

The VM actions dropdown was coupled with the VM objects and the additional resources needed for the vm actions.
This caused an issue where no matter which VM is changing the status any actions dropdown that we will open will move. as a temporary solution, we can de-couple the dropdown from the objects, and memoize the dropdown to re-render on actions change - which will cause this bug to happen when we change a VM's status and we try immediately to change its status again.

🎥 Demo

Before:

vm-actions-menu-is-moving.mp4

After:

vm-actions-menu-is-moving-after.mp4

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[avivtur]

@upalatucci @hstastna thanks for reminding me that issue :)
changed the PR and description accordingly please review again.
I still have the issue of the menu jumping around but now it happens only if the VM of the same row we just opened the actions for is changing it's state, since the component is re-rendering every time actions change, any ideas?

[openshift-ci-robot]

@avivtur: This pull request references CNV-29392 which is a valid jira issue.

In response to this:

📝 Description

dropdown menu jumps once on every change of the vms table (status change) since the actions dropdown is appended to the body, a solution to that is appending the menu to the parent component which introduces the scrolling issue mentioned in the comments below.

🎥 Demo

Before:

vm-actions-menu-is-moving.mp4

After:

vm-actions-menu-is-moving-after.mp4

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[openshift-ci-robot]

@avivtur: This pull request references CNV-29392 which is a valid jira issue.

In response to this:

📝 Description

When appending the dropdown to the outer page, every re-render on that page will cause the dropdown to re-render and change location.
When using the Dropdown component from PF we can use the menuAppentTo prop to append the dropdown to the parent, however this presents a scrolling issue on the firefox browser, as the dropdown keeps getting focus and the scorlling would seem stuck. this is a PF issue that needs to be resolved as the focus is coming from the dropdown component.

🎥 Demo

Before:

vm-actions-menu-is-moving.mp4

After:

vm-actions-menu-is-moving-after.mp4

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[avivtur]

@upalatucci @hstastna @metalice
Since the behavior of the dropdown is happening only in firefox, and is caused by the dropdown that keeps focusing on the menu only in firefox, I've opened an issue for that in PF patternfly/patternfly-react#9326

[hstastna]

@upalatucci @hstastna @metalice Since the behavior of the dropdown is happening only in firefox, and is caused by the dropdown that keeps focusing on the menu only in firefox, I've opened an issue for that in PF patternfly/patternfly-react#9326

Sounds reasonable to me. But as fixing bug in PF usually takes very long time, what would be cost of simply not using PF component (but some other one, maybe implemented by us) in this specific scenario? WDYT, Aviv?

[avivtur]

Sounds reasonable to me. But as fixing bug in PF usually takes very long time, what would be cost of simply not using PF component (but some other one, maybe implemented by us) in this specific scenario? WDYT, Aviv?

@hstastna I'd say it can take at least a day to make a new dropdown component (assuming I can make one based on menu component from PF, if not that can take more to copy all the css)
I also noticed this issue is depending on the window's zoom level (90% and below this bug is not happening for me) so maybe it could be just a known issue that is written in the release notes

[upalatucci]

Okay for me @hstastna

[hstastna]

@hstastna I'd say it can take at least a day to make a new dropdown component (assuming I can make one based on menu component from PF, if not that can take more to copy all the css) I also noticed this issue is depending on the window's zoom level (90% and below this bug is not happening for me)...

Of course it depends on the zoom level. And unfortunately, on the size of the browser window, too. This PR improves the jumping issue a little bit, but still not fixed completely. I'd suggest to merge this PR as is, to contact PF folks to fix this issue in the component asap, with the link to the issue you've opened.

...so maybe it could be just a known issue that is written in the release notes

Yes, this one, too, please. However I am not sure how to achieve this. Hopefully you know :D

[metalice]

@hstastna I'd say it can take at least a day to make a new dropdown component (assuming I can make one based on menu component from PF, if not that can take more to copy all the css) I also noticed this issue is depending on the window's zoom level (90% and below this bug is not happening for me)...

Of course it depends on the zoom level. And unfortunately, on the size of the browser window, too. This PR improves the jumping issue a little bit, but still not fixed completely. I'd suggest to merge this PR as is, to contact PF folks to fix this issue in the component asap, with the link to the issue you've opened.

...so maybe it could be just a known issue that is written in the release notes

Yes, this one, too, please. However I am not sure how to achieve this. Hopefully you know :D

Yes i also agree, lets merge, its working fine on chrome and in special cases in firefox some lines are flaky, a bug was open to PF so i think its enough for now.
Aviv please reference the bug url of PF here.

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: avivtur, metalice

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [avivtur,metalice]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[avivtur]

PF issue link: patternfly/patternfly-react#9326

[avivtur]

/retest