Bug 1829549: fix resizing issues with cloud shell terminal drawer #5224
Conversation
openshift-ci-robot
added
component/shared
christianvogt
changed the title
openshift-ci-robot
added
bugzilla/severity-medium
|
@christianvogt: This pull request references Bugzilla bug 1829549, which is invalid:
Comment In response to this:
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. |
|
/bugzilla refresh |
|
@christianvogt: This pull request references Bugzilla bug 1829549, which is invalid:
Comment In response to this:
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. |
|
/bugzilla refresh |
openshift-ci-robot
added
bugzilla/valid-bug
|
@christianvogt: This pull request references Bugzilla bug 1829549, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker. 3 validation(s) were run on this bug
In response to this:
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. |
| (e: DraggableEvent, data: DraggableData): false | void => { | ||
| document.body.classList.add('ocs-draggable-core-iframe-fix'); | ||
| if (onStart) { | ||
| return onStart(e, data); |
There was a problem hiding this comment.
Why do we need to return here? we can just call the onStart function without returning it
There was a problem hiding this comment.
The API from react-draggable is to return false | void this ensures that we allow the onStart provided to have a return value.
| const draggable = resizable && ( | ||
| <DraggableCore onDrag={handleDrag} onStart={handleResizeStart} onStop={handleResizeStop}> | ||
| <DraggableCoreIFrameFix | ||
| enableUserSelectHack |
There was a problem hiding this comment.
enableUserSelectHack is true by default
There was a problem hiding this comment.
Ah ok :) I'll remove this
| lastObservedHeightRef.current = currentHeight; | ||
| // always start with actual drawer height | ||
| const drawerHeight = drawerRef.current?.offsetHeight || currentHeight; | ||
| startRef.current = drawerHeight + getPageY(e); |
There was a problem hiding this comment.
Why not use DraggableData instead of getPageY?
There was a problem hiding this comment.
DraggableData doesn't work for us once we hit max height. if you look at the height that's computed in master when you start to drag up beyond the masthead, you'll see that the height quickly increases by hundreds and then thousands. Which is incorrect. By using pageY we are always computing a height value relative to the starting height rather than relative to the last event.
christianvogt
force-pushed
the
iframe-fix
branch
from
0fc8c51
to
7025924
Compare
|
/retest |
|
Addressed comments. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: christianvogt, sahil143 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:
Approvers can indicate their approval by writing |
|
@christianvogt: All pull requests linked via external trackers have merged: openshift/console#5224. Bugzilla bug 1829549 has been moved to the MODIFIED state. In response to this:
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. |
Fixes:
https://issues.redhat.com/browse/ODC-3702
Analysis / Root cause:
There are two issues with the current drawer:
Solution Description:
pageYto compute height of drawer relative to mouse because react-draggable data isn't compatible with our use case when dragging the drawer beyond its boundspointer-events: noneto all iframes on the page.Unit test coverage report:
Test setup:
Install https://github.com/che-incubator/che-workspace-operator to enable the cloud shell terminal.
Browser conformance: