@elyra/canvas 12.40.0 → 12.41.0

package/src/common-canvas/svg-canvas-d3.scss

@@ -77,8 +77,8 @@ $node-port-input-arrow-connected-fill-color: transparent;
 // Comment colors
 $comment-outline-color: $active-light-ui;
 $comment-outline-hover-color: $inverse-hover-ui;
-$comment-fill-color: $white-0;
-$comment-text-color: $gray-100;
+$comment-fill-color: $ui-01;
+$comment-text-color: $text-01;
 
 // Comment properties
 $comment-text-font-size: 12px;
@@ -631,13 +631,16 @@ $link-highlight-color: $support-04;
 	user-select: none;
 }
 
-@mixin d3-comment-color-overrides($background-color) {
+@mixin d3-comment-color-overrides($background-color, $text-color) {
 	.d3-comment-rect {
 		fill: $background-color;
 	}
+	.d3-comment-text {
+		color: $text-color;
+	}
 	.d3-comment-entry {
 		background-color: $background-color;
-		color: $gray-100;
+		color: $text-color;
 	}
 }
 
@@ -647,40 +650,41 @@ $link-highlight-color: $support-04;
 // assumption is, the user would prefer the color they set in the UI to
 // override any color provided by the host app.
 g.bkg-col-white-0 {
-	@include d3-comment-color-overrides($white-0);
+	// In dark-mode, white-0 will be interpreted as black background with white text.
+	@include d3-comment-color-overrides($ui-01, $text-01);
 }
 g.bkg-col-yellow-20 {
-	@include d3-comment-color-overrides($yellow-20);
+	@include d3-comment-color-overrides($yellow-20, $gray-100);
 }
 g.bkg-col-gray-20 {
-	@include d3-comment-color-overrides($gray-20);
+	@include d3-comment-color-overrides($gray-20, $gray-100);
 }
 g.bkg-col-green-20 {
-	@include d3-comment-color-overrides($green-20);
+	@include d3-comment-color-overrides($green-20, $gray-100);
 }
 g.bkg-col-teal-20 {
-	@include d3-comment-color-overrides($teal-20);
+	@include d3-comment-color-overrides($teal-20, $gray-100);
 }
 g.bkg-col-cyan-20 {
-	@include d3-comment-color-overrides($cyan-20);
+	@include d3-comment-color-overrides($cyan-20, $gray-100);
 }
 g.bkg-col-red-50 {
-	@include d3-comment-color-overrides($red-50);
+	@include d3-comment-color-overrides($red-50, $gray-100);
 }
 g.bkg-col-orange-40 {
-	@include d3-comment-color-overrides($orange-40);
+	@include d3-comment-color-overrides($orange-40, $gray-100);
 }
 g.bkg-col-gray-50 {
-	@include d3-comment-color-overrides($gray-50);
+	@include d3-comment-color-overrides($gray-50, $gray-100);
 }
 g.bkg-col-green-50 {
-	@include d3-comment-color-overrides($green-50);
+	@include d3-comment-color-overrides($green-50, $gray-100);
 }
 g.bkg-col-teal-50 {
-	@include d3-comment-color-overrides($teal-50);
+	@include d3-comment-color-overrides($teal-50, $gray-100);
 }
 g.bkg-col-cyan-50 {
-	@include d3-comment-color-overrides($cyan-50);
+	@include d3-comment-color-overrides($cyan-50, $gray-100);
 }
 
 .d3-comment-selection-highlight {

package/src/common-properties/components/wide-flyout/wide-flyout.scss

@@ -24,12 +24,11 @@ $properties-modal-buttons-height: 64px;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: $text-01;
+	background-color: $overlay-01;
 	z-index: 1000;
 	cursor: default;
 	&.show {
 		display: block;
-		opacity: 0.5;
 	}
 }
 

package/src/common-properties/constants/form-constants.js

@@ -81,6 +81,7 @@ const ControlType = {
 	DATEFIELD: "datefield",
 	DATEPICKER: "datepicker",
 	DATEPICKERRANGE: "datepickerRange",
+	SLIDER: "slider",
 	TIMEFIELD: "timefield",
 	TIMESTAMP: "timestampfield",
 	CHECKBOX: "checkbox",

package/src/common-properties/controls/control-factory.js

@@ -48,6 +48,7 @@ import StructureEditorControl from "./structureeditor";
 import StructureTableControl from "./structuretable";
 import StructurelisteditorControl from "./structurelisteditor";
 import ReadonlyTableControl from "./readonlytable";
+import Slider from "./slider";
 
 import ControlItem from "./../components/control-item";
 import ActionFactory from "./../actions/action-factory.js";
@@ -82,7 +83,8 @@ const accessibleControls = [
 	ControlType.ONEOFSELECT,
 	ControlType.MULTISELECT,
 	ControlType.SELECTSCHEMA,
-	ControlType.SELECTCOLUMN
+	ControlType.SELECTCOLUMN,
+	ControlType.SLIDER
 ];
 
 const tableControls = [
@@ -337,6 +339,9 @@ export default class ControlFactory {
 				rightFlyout={this.rightFlyout}
 			/>);
 			break;
+		case (ControlType.SLIDER):
+			createdControl = (<Slider {...props} />);
+			break;
 		default:
 			createdControl = (<ReadonlyControl {...props} />);
 		}

package/src/common-properties/controls/controls.scss

@@ -32,6 +32,7 @@
 @import "./multiselect/multiselect";
 @import "./datepicker-range/datepicker-range";
 @import "./datepicker/datepicker";
+@import "./slider/slider";
 
 .properties-ctrl-wrapper {
 	padding-bottom: $spacing-05; // Adds padding to the control

package/src/common-properties/controls/slider/index.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2017-2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Slider from "./slider.jsx";
+export default Slider;

package/src/common-properties/controls/slider/slider.jsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2017-2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Slider } from "carbon-components-react";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import { v4 as uuid4 } from "uuid";
+
+import * as ControlUtils from "../../util/control-utils";
+import ValidationMessage from "../../components/validation-message";
+import { STATES } from "../../constants/constants";
+
+
+class SliderControl extends React.Component {
+	constructor(props) {
+		super(props);
+		this.handleChange = this.handleChange.bind(this);
+		this.uuid = uuid4();
+	}
+
+	handleChange(e) {
+		this.props.controller.updatePropertyValue(this.props.propertyId, e.value);
+	}
+
+	render() {
+		const minLabel = this.props.controller.getResource(`${this.props.control.name}.min.label`, null);
+		const maxLabel = this.props.controller.getResource(`${this.props.control.name}.max.label`, null);
+		const minValue = this.props.control.minValue ? this.props.control.minValue : 0;
+		const maxValue = this.props.control.maxValue ? this.props.control.maxValue : 10;
+		const step = this.props.control.increment ? this.props.control.increment : 1;
+
+		return (
+			<div className={classNames("properties-slider ", { "hide": this.props.state === STATES.HIDDEN },
+				this.props.messageInfo ? this.props.messageInfo.type : null)} data-id={ControlUtils.getDataId(this.props.propertyId)}
+			>
+				<Slider
+					value={this.props.value !== null && typeof this.props.value !== "undefined" ? this.props.value : minValue}
+					min={minValue}
+					max={maxValue}
+					minLabel={minLabel}
+					maxLabel={maxLabel}
+					step={step}
+					labelText={this.props.controlItem}
+					onChange={this.handleChange}
+					disabled={this.props.state === STATES.DISABLED}
+					light={this.props.controller.getLight() && this.props.control.light}
+					formatLabel={
+						(val, label) => label || val
+					}
+				/>
+				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />
+			</div>
+		);
+	}
+}
+
+SliderControl.propTypes = {
+	control: PropTypes.object.isRequired,
+	propertyId: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	controlItem: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.element
+	]), // list control passes string
+	tableControl: PropTypes.bool,
+	state: PropTypes.string, // pass in by redux
+	value: PropTypes.number, // pass in by redux
+	messageInfo: PropTypes.object // pass in by redux
+};
+
+
+const mapStateToProps = (state, ownProps) => ({
+	value: ownProps.controller.getPropertyValue(ownProps.propertyId),
+	state: ownProps.controller.getControlState(ownProps.propertyId),
+	valueStates: ownProps.controller.getControlValueStates(ownProps.propertyId),
+	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId),
+	controlOpts: ownProps.controller.getFilteredEnumItems(ownProps.propertyId, ownProps.control)
+});
+
+export default connect(mapStateToProps, null)(SliderControl);
+

package/src/common-properties/controls/slider/slider.scss

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2017-2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+.properties-slider {
+	.bx--slider-container { 
+		min-width: 100%;
+		
+		.bx--slider { 
+			min-width: unset; // Default Carbon Component Slider has a fixed min-width of 12.5rem so unset it to make it responsive
+		}
+	}
+	&.error {
+		.bx--text-input--invalid, .bx--text-input {
+			outline: unset;
+			outline-offset: unset;
+		}
+		input[type="number"]:not([disabled]) {
+			border: 2px solid $support-01;
+		}
+	}
+	&.warning {
+		.bx--text-input--invalid, .bx--text-input {
+			outline: unset;
+			outline-offset: unset;
+		}
+		input[type="number"]:not([disabled]) {
+			border: 2px solid $support-03;
+		}
+	}
+	
+}

package/src/common-properties/form/ControlInfo.js

@@ -82,6 +82,12 @@ export class Control {
 		if (settings.increment) {
 			this.increment = settings.increment;
 		}
+		if (settings.minValue) {
+			this.minValue = settings.minValue;
+		}
+		if (settings.maxValue) {
+			this.maxValue = settings.maxValue;
+		}
 		if (settings.generatedValues) {
 			this.generatedValues = {};
 			if (settings.generatedValues.operation) {

package/src/common-properties/form/EditorForm.js

@@ -636,6 +636,8 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.enableMaximize = parameter.enableMaximize;
 	settings.summary = parameter.summary;
 	settings.increment = parameter.increment;
+	settings.minValue = parameter.minValue;
+	settings.maxValue = parameter.maxValue;
 	settings.rowSelection = rowSelection;
 	settings.generatedValues = parameter.generatedValues;
 	settings.addRemoveRows = addRemoveRows;

package/src/common-properties/form/ParameterInfo.js

@@ -65,6 +65,12 @@ export class ParameterDef {
 		if (settings.charLimit) {
 			this.charLimit = settings.charLimit;
 		}
+		if (settings.minValue) {
+			this.minValue = settings.minValue;
+		}
+		if (settings.maxValue) {
+			this.maxValue = settings.maxValue;
+		}
 		if (settings.placeHolderText) {
 			this.placeHolderText = ResourceDef.make(settings.placeHolderText);
 		}
@@ -330,6 +336,8 @@ export class ParameterDef {
 				"orientation": propertyOf(uihint)("orientation"),
 				"width": propertyOf(uihint)("width"),
 				"charLimit": propertyOf(uihint)("char_limit"),
+				"minValue": propertyOf(uihint)("min_value"),
+				"maxValue": propertyOf(uihint)("max_value"),
 				"placeHolderText": propertyOf(uihint)("place_holder_text"),
 				"separator": propertyOf(uihint)("separator"),
 				"resource_key": propertyOf(uihint)("resource_key"),

package/src/common-properties/properties-controller.js

@@ -28,7 +28,7 @@ import { STATES, ACTIONS, CONDITION_TYPE, PANEL_TREE_ROOT, CONDITION_MESSAGE_TYP
 import CommandStack from "../command-stack/command-stack.js";
 import ControlFactory from "./controls/control-factory";
 import { Type, ParamRole, ControlType, ItemType } from "./constants/form-constants";
-import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get, difference } from "lodash";
+import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get, difference, merge } from "lodash";
 import Form from "./form/Form";
 import { getConditionOps } from "./ui-conditions/condition-ops/condition-ops";
 import { DEFAULT_LOCALE } from "./constants/constants";
@@ -395,7 +395,7 @@ export default class PropertiesController {
 		parseUiContent(this.panelTree, this.form, PANEL_TREE_ROOT);
 	}
 
-	_addToControlValues(sameParameterDefRendered, resolveParameterRefs, setDefaultValues) {
+	_addToControlValues(sameParameterDefRendered, resolveParameterRefs, setDefaults) {
 		const defaultControlValues = {};
 		for (const keyName in this.controls) {
 			if (!has(this.controls, keyName)) {
@@ -403,7 +403,12 @@ export default class PropertiesController {
 			}
 			const control = this.controls[keyName];
 			const propertyId = { name: control.name };
-			let controlValue = this.getPropertyValue(propertyId);
+			let controlValue;
+			if (setDefaults?.values) {
+				controlValue = setDefaults.values[control.name];
+			} else {
+				controlValue = this.getPropertyValue(propertyId);
+			}
 
 			if (resolveParameterRefs) {
 				if (typeof controlValue !== "undefined" && controlValue !== null && typeof controlValue.parameterRef !== "undefined") {
@@ -422,7 +427,7 @@ export default class PropertiesController {
 					controlValue = PropertyUtils.convertObjectStructureToArray(control.valueDef.isList, control.subControls, controlValue);
 				}
 
-				if (setDefaultValues) {
+				if (setDefaults?.setDefaultValues) {
 					// When setDefaultValues is set, update all default values in a single call
 					defaultControlValues[control.name] = controlValue;
 				} else if (sameParameterDefRendered && !this.differentProperties.includes(control.name)) {
@@ -440,23 +445,11 @@ export default class PropertiesController {
 			}
 		}
 
-		if (setDefaultValues) {
-			this.setDefaultControlValues(defaultControlValues);
+		if (setDefaults?.setDefaultValues) {
+			return defaultControlValues;
 		}
-	}
 
-	setDefaultControlValues(defaultControlValues) {
-		// Update all default values
-		this.propertiesStore.setPropertyValues(defaultControlValues);
-
-		// Single call to the propertyListener
-		if (this.handlers.propertyListener) {
-			this.handlers.propertyListener(
-				{
-					action: ACTIONS.SET_PROPERTIES // Setting the default control values
-				}
-			);
-		}
+		return null;
 	}
 
 	_populateFieldData(controlValue, control) {
@@ -1254,6 +1247,12 @@ export default class PropertiesController {
 			}
 		}
 
+		if (options && options.setDefaultValues) {
+			const setDefaults = { values: inValues, setDefaultValues: true };
+			const defaultValues = this._addToControlValues(false, false, setDefaults);
+			inValues = merge(defaultValues, inValues);
+		}
+
 		this.propertiesStore.setPropertyValues(inValues);
 
 		if (options && options.isInitProps) {
@@ -1291,10 +1290,6 @@ export default class PropertiesController {
 				}
 			);
 		}
-
-		if (options && options.setDefaultValues) {
-			this._addToControlValues(false, false, true);
-		}
 	}
 
 	/**

package/src/context-menu/common-context-menu.jsx

@@ -258,6 +258,19 @@ class CommonContextMenu extends React.Component {
 		return subMenuPosStyle;
 	}
 
+	// Returns the menu definition array passed in making sure any
+	// submenu items have an action. Note: some applications forget
+	// to do provide an action because for the submenu it is only
+	// used by the context menu code.
+	ensureAllSubMenuItemsHaveAction(menuDef) {
+		return menuDef.map((item, index) => {
+			if (item.submenu && typeof item.action === "undefined") {
+				return { ...item, action: "submenu_" + index };
+			}
+			return item;
+		});
+	}
+
 	render() {
 		// Reposition contextMenu so that it does not show off the screen
 		const menuSize = this.calculateMenuSize(this.props.menuDefinition);
@@ -267,7 +280,8 @@ class CommonContextMenu extends React.Component {
 			top: menuPos.y + "px"
 		};
 
-		const menuItems = this.buildMenu(this.props.menuDefinition, menuSize, menuPos, this.props.canvasRect);
+		const menuDefinition = this.ensureAllSubMenuItemsHaveAction(this.props.menuDefinition);
+		const menuItems = this.buildMenu(menuDefinition, menuSize, menuPos, this.props.canvasRect);
 
 		return (
 			<div id="context-menu-popover" className="context-menu-popover" style={posStyle} onContextMenu={this.onContextMenu}>

package/src/tooltip/tooltip.jsx

@@ -32,6 +32,7 @@ class ToolTip extends React.Component {
 		this.uuid = uuid4();
 		this.pendingTooltip = null;
 		this.hideTooltipOnScrollAndResize = this.hideTooltipOnScrollAndResize.bind(this);
+		this.tabKeyPressed = false;
 	}
 
 	componentDidMount() {
@@ -82,6 +83,12 @@ class ToolTip extends React.Component {
 		}
 	}
 
+	setKeyPressed(evt) {
+		if (evt.key === "Tab") {
+			this.tabKeyPressed = true;
+		}
+	}
+
 	getStyleValue(value) {
 		return value + "px";
 	}
@@ -337,10 +344,14 @@ class ToolTip extends React.Component {
 			const mousedown = () => this.setTooltipVisible(false);
 			// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.
 			// Ref - https://stackoverflow.com/a/49512400
+			const onKeyDown = (evt) => this.setKeyPressed(evt);
 			const onFocus = () => this.showTooltipWithDelay();
 			const onBlur = (evt) => {
-				// Keep tooltip visible when clicked on a link.
-				if (evt.relatedTarget === null) {
+				// Close the tooltip if tab is click
+				if (this.tabKeyPressed) {
+					this.setTooltipVisible(false);
+					this.tabKeyPressed = false;
+				} else if (evt.relatedTarget === null) { // Keep tooltip visible when clicked on a link.
 					this.setTooltipVisible(false);
 				}
 			};
@@ -355,6 +366,7 @@ class ToolTip extends React.Component {
 				onClick={this.props.showToolTipOnClick ? click : null}
 				onFocus={this.props.showToolTipOnClick ? onFocus : null} // When focused using keyboard
 				onBlur={this.props.showToolTipOnClick ? onBlur : null}
+				onKeyDown={this.props.showToolTipOnClick ? onKeyDown : null}
 				tabIndex={this.props.showToolTipOnClick ? 0 : null}
 				role={this.props.showToolTipOnClick ? "button" : null}
 				aria-labelledby={this.props.showToolTipOnClick ? `${this.uuid}-${this.props.id}` : null}