Merge branch 'main' into multi_port_images

elyra-ai · Dec 12, 2024 · b5f6920 · b5f6920
2 parents 3eaa533 + b4de2fc
commit b5f6920
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json
@@ -88,8 +88,9 @@
     "grunt-jsonlint": "2.1.3",
     "grunt-postcss": "0.9.0",
     "grunt-yamllint": "0.3.0",
-    "jest": "26.4.2",
+    "jest": "29.7.0",
     "jest-fetch-mock": "3.0.3",
+    "jest-fixed-jsdom": "0.0.9",
     "jest-localstorage-mock": "2.4.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -113,8 +114,8 @@
     "react-intl": "^5.0.0 || ^6.0.0"
   },
   "jest": {
+    "testEnvironment": "jest-fixed-jsdom",
     "transformIgnorePatterns": [
-      "node_modules/(?!(@codemirror/legacy-modes|d3-*))"
     ],
     "moduleFileExtensions": [
       "js",

diff --git a/...s-main/properties-main-widths.module.scss → ...operties-main/properties-main-widths.scss b/...s-main/properties-main-widths.module.scss → ...operties-main/properties-main-widths.scss
diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx
@@ -38,7 +38,7 @@ import TitleEditor from "./../components/title-editor";
 import classNames from "classnames";
 
 import { injectIntl } from "react-intl";
-import styles from "./properties-main-widths.module.scss";
+import styles from "./properties-main-widths.scss";
 
 const FLYOUT_WIDTH_SMALL = parseInt(styles.flyoutWidthSmall, 10);
 const FLYOUT_WIDTH_MEDIUM = parseInt(styles.flyoutWidthMedium, 10);
@@ -72,7 +72,6 @@ class PropertiesMain extends React.Component {
 		});
 		this.setForm(props.propertiesInfo, false);
 		this.previousErrorMessages = {};
-		this.flyoutWidths = [FLYOUT_WIDTH_SMALL, FLYOUT_WIDTH_MEDIUM, FLYOUT_WIDTH_LARGE, FLYOUT_WIDTH_MAX];
 		// this has to be after setForm because setForm clears all error messages.
 		// Validate all validationDefinitions but show warning messages for "colDoesExists" condition only
 		this.propertiesController.validatePropertiesValues(false);
@@ -89,7 +88,7 @@ class PropertiesMain extends React.Component {
 		this.state = {
 			showPropertiesButtons: true,
 			editorSize: editorSize,
-			containerWidth: FLYOUT_WIDTH_SMALL
+			showResizeBtn: true
 		};
 		this.applyPropertiesEditing = this.applyPropertiesEditing.bind(this);
 		this.showPropertiesButtons = this.showPropertiesButtons.bind(this);
@@ -99,6 +98,9 @@ class PropertiesMain extends React.Component {
 		this._getResizeButton = this._getResizeButton.bind(this);
 		this._isResizeButtonRequired = this._isResizeButtonRequired.bind(this);
 		this.onBlur = this.onBlur.bind(this);
+		this.detectResize = this.detectResize.bind(this);
+		// used to tracked when the resize button is clicked and ignore detectResize
+		this.resizeClicked = false;
 	}
 
 	componentDidMount() {
@@ -431,6 +433,7 @@ class PropertiesMain extends React.Component {
 	}
 
 	resize() {
+		this.resizeClicked = true;
 		if (this.propertiesController.getForm().editorSize === Size.SMALL) {
 			if (this.state.editorSize === Size.SMALL) {
 				this.updateEditorSize(Size.MEDIUM);
@@ -452,8 +455,12 @@ class PropertiesMain extends React.Component {
 		}
 	}
 
-	detectResize(width) {
-		this.setState({ containerWidth: width });
+	detectResize() {
+		// only hide resize button if resize wasn't from clicking resize button
+		if (!this.resizeClicked) {
+			this.setState({ showResizeBtn: false });
+		}
+		this.resizeClicked = false;
 	}
 
 	render() {
@@ -502,11 +509,8 @@ class PropertiesMain extends React.Component {
 				/>);
 				// Show Resize Button only under below conditions
 				// 1. Flyout is not dragged to resize its width.
-				// 2. If Flyout is dragged back to its smallest width.
-				// If pixel_width is set include that to test if button should be shown.
-				const widthArr = [...this.flyoutWidths, this._getOverrideSize()];
-				const allowedWidth = widthArr.includes(this.state.containerWidth);
-				if (this._isResizeButtonRequired() && allowedWidth) {
+				// 2. If pixel_width is set include that to test if button should be shown.
+				if (this._isResizeButtonRequired() && this.state.showResizeBtn) {
 					const resizeIcon = this._getResizeButton();
 					// Resize button label can be "Expand" or "Contract"
 					const resizeBtnLabel = (resizeIcon.props && resizeIcon.props.className === "properties-resize-caret-left")
@@ -608,8 +612,9 @@ class PropertiesMain extends React.Component {
 						handleWidth
 						refreshMode="debounce"
 						refreshRate={500}
-						onResize={(width) => this.detectResize(width)}
+						onResize={this.detectResize}
 						targetRef={this.commonProperties}
+						skipOnMount
 					>
 						<div className="properties-right-flyout-container">
 							<aside

diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "./properties-main-widths.module.scss";
+@import "./properties-main-widths.scss";
 $properties-modal-buttons-height: $spacing-10;
 $properties-resize-button-size: $spacing-06;
 
@@ -69,6 +69,7 @@ $properties-resize-button-size: $spacing-06;
 	padding: $spacing-01;
 	justify-content: center;
 	align-items: center;
+	z-index: 1; // Make sure resize btn appears over bottom panel
 	&:hover {
 		background-color: $layer-accent-01;
 		visibility: visible;