Include Right Flyout Drag Feature Flag

Signed-off-by: srikant <[email protected]>
srikant-ch5 · Nov 8, 2024 · c381e6c · c381e6c
1 parent e757c09
commit c381e6c
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 1 deletion.
diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx
@@ -294,6 +294,7 @@ const mapStateToProps = (state, ownProps) => ({
 	enableNarrowPalette: state.canvasconfig.enableNarrowPalette,
 	enableLeftFlyoutUnderToolbar: state.canvasconfig.enableLeftFlyoutUnderToolbar,
 	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar,
+	enableRightFlyoutDragToResize: state.canvasconfig.enableRightFlyoutDragToResize,
 	toolbarIsOpen: (state.canvasconfig.enableToolbarLayout !== PALETTE_LAYOUT_NONE),
 	paletteIsOpen: state.palette.isOpen,
 	topPanelIsOpen: state.toppanel.isOpen,

diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx
@@ -77,6 +77,11 @@ class CommonCanvasRightFlyout extends React.Component {
 		this.logger.log("render");
 
 		let rightFlyout = <div />; // For no content, return empty <div> so grid siziing for parent <div> work correctly.
+		let rightFlyoutDragDiv = null;
+
+		if (this.props.enableRightFlyoutDragToResize) {
+			rightFlyoutDragDiv = (<div className="right-flyout-drag" onMouseDown={this.onMouseDown} />);
+		}
 
 		if (this.props.content && this.props.isOpen) {
 			const widthPx = this.limitWidth(this.props.panelWidth) + "px";
@@ -85,7 +90,7 @@ class CommonCanvasRightFlyout extends React.Component {
 				: "right-flyout-panel";
 			rightFlyout = (
 				<div className="right-flyout-container" style={{ width: widthPx }} >
-					<div className="right-flyout-drag" onMouseDown={this.onMouseDown} />
+					{rightFlyoutDragDiv}
 					<div className={rfClass}>
 						{this.props.content}
 					</div>
@@ -106,13 +111,15 @@ CommonCanvasRightFlyout.propTypes = {
 	isOpen: PropTypes.bool,
 	content: PropTypes.object,
 	enableRightFlyoutUnderToolbar: PropTypes.bool,
+	enableRightFlyoutDragToResize: PropTypes.bool,
 	panelWidth: PropTypes.number
 };
 
 const mapStateToProps = (state, ownProps) => ({
 	isOpen: state.rightflyout.isOpen,
 	content: state.rightflyout.content,
 	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar,
+	enableRightFlyoutDragToResize: state.canvasconfig.enableRightFlyoutDragToResize,
 	panelWidth: state.rightflyout.panelWidth
 });
 

diff --git a/canvas_modules/common-canvas/src/object-model/config-utils.js b/canvas_modules/common-canvas/src/object-model/config-utils.js
@@ -84,6 +84,7 @@ export default class ConfigUtils {
 			enableDropZoneOnExternalDrag: false,
 			enableLeftFlyoutUnderToolbar: false,
 			enableRightFlyoutUnderToolbar: false,
+			enableRightFlyoutDragToResize: false,
 			enablePanIntoViewOnOpen: false,
 			enableZoomIntoSubFlows: false,
 			enableBrowserEditMenu: true,

diff --git a/canvas_modules/harness/cypress/e2e/canvas/right-flyout.cy.js b/canvas_modules/harness/cypress/e2e/canvas/right-flyout.cy.js
@@ -31,11 +31,13 @@ describe("Test for verifying the Right Flyout panel functionality and layout in
 	});
 
 	it("Test ensuring Right Flyout panle drag is working correctly", function() {
+		cy.setCanvasConfig({ "selectedRightFlyoutResize": true });
 		cy.moveRightFlyoutDivider(600);
 		cy.verifyRightFlyoutPanelWidth(727);
 	});
 
 	it("Test ensuring Right Flyout panel drag only extends to a maximum width leaving width for canvas", function() {
+		cy.setCanvasConfig({ "selectedRightFlyoutResize": true });
 		cy.moveRightFlyoutDivider(100);
 		cy.verifyRightFlyoutPanelWidth(927);
 
@@ -45,4 +47,12 @@ describe("Test for verifying the Right Flyout panel functionality and layout in
 		cy.moveRightFlyoutDivider(500);
 		cy.verifyRightFlyoutPanelWidth(827);
 	});
+
+	it("Test ensuring Right Flyout panel drag is correctly enabled and disabled", function() {
+		cy.setCanvasConfig({ "selectedRightFlyoutResize": false });
+		cy.verifyIsRightFlyoutDragDisabled();
+
+		cy.setCanvasConfig({ "selectedRightFlyoutResize": true });
+		cy.verifyIsRightFlyoutDragEnabled();
+	});
 });
diff --git a/canvas_modules/harness/cypress/support/canvas/verification-cmds.js b/canvas_modules/harness/cypress/support/canvas/verification-cmds.js
@@ -914,6 +914,16 @@ Cypress.Commands.add("verifyRightFlyoutPanelWidth", (width) => {
 	});
 });
 
+Cypress.Commands.add("verifyIsRightFlyoutDragDisabled", () => {
+	cy.get(".right-flyout-drag")
+		.should("not.exist");
+});
+
+Cypress.Commands.add("verifyIsRightFlyoutDragEnabled", () => {
+	cy.get(".right-flyout-drag")
+		.should("exist");
+});
+
 Cypress.Commands.add("verifyRightFlyoutPanelHeight", (height) => {
 	cy.get(".right-flyout-panel").should((element) => {
 		compareCloseTo(element[0].offsetHeight, height);

diff --git a/canvas_modules/harness/src/client/App.js b/canvas_modules/harness/src/client/App.js
@@ -235,6 +235,7 @@ class App extends React.Component {
 			selectedLeftFlyoutUnderToolbar: false,
 			selectedShowRightFlyout: false,
 			selectedRightFlyoutUnderToolbar: false,
+			selectedRightFlyoutResize: false,
 			selectedPanIntoViewOnOpen: false,
 			selectedExtraCanvasDisplayed: false,
 			selectedSaveToPalette: false,
@@ -2124,6 +2125,7 @@ class App extends React.Component {
 			enableDropZoneOnExternalDrag: this.state.selectedDropZoneOnExternalDrag,
 			enableLeftFlyoutUnderToolbar: this.state.selectedLeftFlyoutUnderToolbar,
 			enableRightFlyoutUnderToolbar: this.state.selectedRightFlyoutUnderToolbar,
+			enableRightFlyoutDragToResize: this.state.selectedRightFlyoutResize,
 			enablePanIntoViewOnOpen: this.state.selectedPanIntoViewOnOpen,
 			dropZoneCanvasContent: this.state.selectedDisplayCustomizedDropZoneContent ? this.dropZoneCanvasDiv : null,
 			emptyCanvasContent: this.state.selectedDisplayCustomizedEmptyCanvasContent ? this.emptyCanvasDiv : null,
@@ -2147,6 +2149,7 @@ class App extends React.Component {
 			enableInternalObjectModel: this.state.selectedInternalObjectModel,
 			enableDragWithoutSelect: this.state.selectedDragWithoutSelect,
 			enablePaletteLayout: this.state.selectedPaletteLayout,
+			enableRightFlyoutDragToResize: this.state.selectedRightFlyoutResize,
 			selectedMoveNodesOnSupernodeResize: true,
 			tipConfig: this.state.selectedTipConfig,
 			schemaValidation: this.state.selectedSchemaValidation,

diff --git a/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx b/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx
@@ -772,6 +772,15 @@ export default class SidePanelForms extends React.Component {
 			/>
 		</div>);
 
+		var enableRightFlyoutDragToResize = (<div className="harness-sidepanel-children">
+			<Toggle
+				id="selectedRightFlyoutResize" // Set ID to corresponding field in App.js state
+				labelText="Enable Right Flyout Resize using Drag"
+				toggled={this.props.getStateValue("selectedRightFlyoutResize")}
+				onToggle={(val) => this.setStateValue(val, "selectedRightFlyoutResize")}
+			/>
+		</div>);
+
 		var enableDragWithoutSelect = (<div className="harness-sidepanel-children">
 			<Toggle
 				id="selectedDragWithoutSelect" // Set ID to corresponding field in App.js state
@@ -1742,6 +1751,8 @@ export default class SidePanelForms extends React.Component {
 					{divider}
 					{enableRightFlyoutUnderToolbar}
 					{divider}
+					{enableRightFlyoutDragToResize}
+					{divider}
 					{enablePositionNodeOnRightFlyoutOpen}
 					{divider}
 					<div className="harness-side-panel-header">Top Panel</div>