#2137 Enable common properties right flyout resize using drag #2138

srikant-ch5 · 2024-09-03T07:26:07Z

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

Signed-off-by: srikant <[email protected]>

srikant-ch5 · 2024-09-03T12:09:44Z

Hi @matthoward366 I have removed test cases related to resize buttons as they are replaced with drag, is this okay ?

Screen.Recording.2024-09-03.at.5.38.15.PM.mov

Signed-off-by: srikant <[email protected]>

matthoward366 · 2024-09-03T12:23:39Z

The design expected to keep the buttons as well as having the dragging option. That way customer can quickly increase the size.

This also needs to be behind a feature flag since not all customers would want this.

tomlyn · 2024-09-03T17:37:46Z

@matthoward366

The design expected to keep the buttons as well as having the dragging option.

I think Ana suggests this behavior would replace the buttons. Which is why, I assume @srikant-ch5 has done it this way. I've queried that with Ana

@srikant-ch5 I think we ought to implement this is a different way. Right now the user can dynamically size the top panel and bottom panel by drag/drop and that code is in Common Canvas. I think it makes sense therefore that we should have similar code for the right-flyout (and also probably the left flyout too) inside Common Canvas - not in Common Properties. That way applications can get the sizing behavior even if they are not using Common-Properties. As Matt points out, not all applications will want to the drag/drop sizing behavior for the right-flyout so we should have a feature flag for that (an one for the left flyout too if we implement drag/drop sizing for that too).

srikant-ch5 · 2024-09-04T05:05:00Z

Hi @tomlyn Yes correct, I checked with her regarding few other queries.

Sure I will revert the changes in Common Properties and will try to implement this in Common Canvas.

Signed-off-by: srikant <[email protected]>

srikant-ch5 · 2024-09-04T05:31:44Z

@tomlyn I Included the sizing behaviour in Common Properties because I tried implementing it CommonCanvas Right flyout and when I expand the panel content dosen't grow/shrink with it, will try to look for a solution for this.

Screen.Recording.2024-09-04.at.10.58.51.AM.mov

Signed-off-by: srikant <[email protected]>

matthoward366 · 2024-09-11T15:14:19Z

@srikant-ch5 can you look at the conflict and build failure?

Signed-off-by: srikant <[email protected]>

srikant-ch5 · 2024-09-12T17:25:31Z

Hi @matthoward366 is it okay if we set the width of properties right flyout like below in properties-main.jsx since we are implementing this in common canvas and the properties width should also be applied on cc right lfyout.

canvas/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx

Line 429 in 0baa3c0

updateRightFlyoutWidth(size) {

and in cc-right-flyout like below

canvas/canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx

Line 58 in ddc8c53

    
           righFlyoutChildNode.classList.remove("properties-small", "properties-medium", "properties-large", "properties-max");

I haven't changed anything related to panel sizes in properties-main.scss

Currently it behaves like below to enable extend upto 70% of available width and minimum width. Please let me know your thoughts on this or if you want to suggest any other approach to this. Above changes are in PR.

Screen.Recording.2024-09-12.at.10.51.13.PM.mov

matthoward366 · 2024-09-19T21:50:44Z

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx

@@ -87,6 +87,12 @@ class PropertiesMain extends React.Component {
 			showPropertiesButtons: true,
 			editorSize: editorSize
 		};
+		this.flyoutWidth = {


I'm not seeing this being used. Am I missing something?

matthoward366 · 2024-09-19T21:51:57Z

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx

@@ -419,11 +426,19 @@ class PropertiesMain extends React.Component {
 		this.setState({ showPropertiesButtons: state });
 	}

+	updateRightFlyoutWidth(size) {


This seems like the wrong place for setting this. Why is this needed here?

matthoward366 · 2024-09-19T21:52:12Z

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss

@@ -58,6 +59,7 @@ $properties-resize-button-size: $spacing-06;
 	padding: $spacing-01;
 	justify-content: center;
 	align-items: center;
+	z-index: 11;


Why is this needed? This might cause other issues.

matthoward366 · 2024-09-19T21:53:10Z

canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx

+
+			// In case of Common Properties remove hardcoded width to allow content to take full width.
+			const righFlyoutChildNode = this.commonCanvasRightFlyout.childNodes[1];
+			if (righFlyoutChildNode && righFlyoutChildNode.className.includes("properties-right-flyout")) {


This seems wrong since it's mixing common properties and common-canvas.

Thanks, removed this code from CC.

matthoward366 · 2024-09-19T21:54:55Z

canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx

@@ -35,7 +84,12 @@ class CommonCanvasRightFlyout extends React.Component {
 				? "right-flyout-panel under-toolbar"
 				: "right-flyout-panel";
 			rightFlyout = (
-				<div className={rfClass}>
+				<div className={rfClass} id="right-flyout-panel" ref={ (ref) => (this.commonCanvasRightFlyout = ref) }>


This shouldn't have an id of right-flyout-panel. We should try not to use ids in common-canvas or common-properties. If we do, then they need to be unique for that canvas since we can have multiple instances in the DOM.

Ok, I have removed this now.

Signed-off-by: srikant <[email protected]>

elyra-ai#2137 Increase View Size of Modeler Node Panel

555828c

Signed-off-by: srikant <[email protected]>

srikant-ch5 requested a review from matthoward366 September 3, 2024 07:26

srikant-ch5 self-assigned this Sep 3, 2024

Fix eslint build issue in properties-main.scss

1f5d309

Signed-off-by: srikant <[email protected]>

srikant-ch5 marked this pull request as draft September 3, 2024 11:14

srikant-ch5 added 3 commits September 3, 2024 17:09

Include resizeComp inplace of resizeBtn

b5fa39a

Signed-off-by: srikant <[email protected]>

Remove editorSize test case in common-properties-test

1149c5b

Signed-off-by: srikant <[email protected]>

Include border-interactive on side panel drag hover

71920eb

Signed-off-by: srikant <[email protected]>

Increase side border in accordion panels

ecf21ef

Signed-off-by: srikant <[email protected]>

srikant-ch5 changed the title ~~#2137 Increase View Size of Modeler Node Panel~~ #2137 Enable common properties right flyout resize using drag Sep 3, 2024

Merge main

d6b4035

Signed-off-by: srikant <[email protected]>

srikant-ch5 added 2 commits September 5, 2024 21:33

Implement Resizing in CC Right Flyout

34ffea7

Signed-off-by: srikant <[email protected]>

Revert common properties test case changes

af19cf5

Signed-off-by: srikant <[email protected]>

srikant-ch5 added 4 commits September 11, 2024 20:54

Resolve Conflicts

55d5765

Signed-off-by: srikant <[email protected]>

add limitWidth to CC Right Flyout

66b4818

Signed-off-by: srikant <[email protected]>

Merge main

0baa3c0

Signed-off-by: srikant <[email protected]>

Restore properties width

ddc8c53

Signed-off-by: srikant <[email protected]>

Merge branch 'main' into 15709_DraggableFlyout

a195f49

matthoward366 reviewed Sep 19, 2024

View reviewed changes

srikant-ch5 added 2 commits September 20, 2024 17:04

Revert changes in cc for properties widths

a1e70c1

Signed-off-by: srikant <[email protected]>

Set min-width in properties-right-flyout to expand as per drag

5d042a2

Signed-off-by: srikant <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#2137 Enable common properties right flyout resize using drag #2138

#2137 Enable common properties right flyout resize using drag #2138

srikant-ch5 commented Sep 3, 2024

srikant-ch5 commented Sep 3, 2024

matthoward366 commented Sep 3, 2024

tomlyn commented Sep 3, 2024

srikant-ch5 commented Sep 4, 2024

srikant-ch5 commented Sep 4, 2024

matthoward366 commented Sep 11, 2024

srikant-ch5 commented Sep 12, 2024 •

edited

Loading

matthoward366 Sep 19, 2024

matthoward366 Sep 19, 2024

matthoward366 Sep 19, 2024

matthoward366 Sep 19, 2024

srikant-ch5 Sep 20, 2024

matthoward366 Sep 19, 2024

srikant-ch5 Sep 20, 2024

#2137 Enable common properties right flyout resize using drag #2138

Are you sure you want to change the base?

#2137 Enable common properties right flyout resize using drag #2138

Conversation

srikant-ch5 commented Sep 3, 2024

srikant-ch5 commented Sep 3, 2024

matthoward366 commented Sep 3, 2024

tomlyn commented Sep 3, 2024

srikant-ch5 commented Sep 4, 2024

srikant-ch5 commented Sep 4, 2024

matthoward366 commented Sep 11, 2024

srikant-ch5 commented Sep 12, 2024 • edited Loading

matthoward366 Sep 19, 2024

Choose a reason for hiding this comment

matthoward366 Sep 19, 2024

Choose a reason for hiding this comment

matthoward366 Sep 19, 2024

Choose a reason for hiding this comment

matthoward366 Sep 19, 2024

Choose a reason for hiding this comment

srikant-ch5 Sep 20, 2024

Choose a reason for hiding this comment

matthoward366 Sep 19, 2024

Choose a reason for hiding this comment

srikant-ch5 Sep 20, 2024

Choose a reason for hiding this comment

srikant-ch5 commented Sep 12, 2024 •

edited

Loading