@elyra/canvas 12.13.0 → 12.14.0

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

@@ -29,12 +29,31 @@
 		display: inline-flex;
 		flex-wrap: wrap;
 		.properties-radioset-panel {
+			display: flex;
+			height: auto;
+			align-items: center;
 			margin-bottom: 0;
 		}
 	}
 	.properties-radioset-panel {
 		margin-bottom: $spacing-02;
 		margin-right: $spacing-04;
+		display: grid;
+		grid-template-columns: 1fr 8fr;
+		grid-template-rows: auto;
+		grid-template-areas:
+			"radio tooltip"
+			"panel panel";
+		.bx--radio-button-wrapper{
+			grid-area: radio;
+			margin-right: 0; // We removed the space between radio & tooltip to position it correctly
+		}
+		.tooltip-container{
+			grid-area: tooltip;
+		}
+		.properties-control-nested-panel{
+			grid-area: panel;
+		}
 		&:last-of-type {
 			margin-bottom: 0; // don't want margin when last radio button in group
 		}

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

@@ -50,6 +50,9 @@ export class Control {
 		if (settings.valueLabels) {
 			this.valueLabels = settings.valueLabels;
 		}
+		if (settings.valueDescs) {
+			this.valueDescs = settings.valueDescs;
+		}
 		if (settings.valueIcons) {
 			this.valueIcons = settings.valueIcons;
 		}

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

@@ -570,6 +570,11 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	if (parameter.getRole() === ParamRole.ENUM) {
 		valueLabels = _parameterValueLabels(parameter, l10nProvider);
 	}
+
+	let valueDescs;
+	if (parameter.getRole() === ParamRole.ENUM) {
+		valueDescs = _parameterValueDescription(parameter, l10nProvider);
+	}
 	let action;
 	if (!isSubControl && parameter.actionRef) {
 		action = _makeAction(actionMetadata.getAction(parameter.actionRef), l10nProvider);
@@ -587,6 +592,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.orientation = orientation;
 	settings.values = parameter.getValidValues();
 	settings.valueLabels = valueLabels;
+	settings.valueDescs = valueDescs;
 	settings.valueIcons = parameter.valueIcons;
 	settings.sortable = parameter.sortable;
 	settings.filterable = parameter.filterable;
@@ -761,6 +767,24 @@ function _parameterValueLabels(parameter, l10nProvider) {
 	return [];
 }
 
+function _parameterValueDescription(parameter, l10nProvider) {
+	if (Array.isArray(parameter.getValidValues())) {
+		let key;
+		if (parameter.resource_key) {
+			key = parameter.resource_key;
+		} else {
+			key = parameter.name;
+		}
+		const paramDescs = [];
+		parameter.getValidValues().forEach(function(paramValue) {
+			paramDescs.push(l10nProvider.l10nValueDesc(key, String(paramValue)));
+		});
+		return paramDescs;
+	}
+	return [];
+}
+
+
 export {
 	makePrimaryTab, _makeControl as makeControl
 };

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

@@ -1051,10 +1051,11 @@ export default class PropertiesController {
 	/*
 	* return the property value for the given 'inPropertyId'
 	* options - optional object of config options where
-	*   filterHiddenDisabled: true - filter out values from controls that are hidden or disabled
+	*   filterHiddenDisabled: true - filter out values from controls having state "hidden" or "disabled"
 	*   applyProperties: true - this function is called from PropertiesMain.applyPropertiesEditing()
-	*   filterHidden: true - filter out values from controls that are hidden
-	*   filterDisabled: true - filter out values from controls that are disabled
+	*   filterHidden: true - filter out values from controls having state "hidden"
+	*   filterDisabled: true - filter out values from controls having state "disabled"
+	*   filterHiddenControls: true - filter out values from controls having type "hidden"
 	*/
 	getPropertyValue(inPropertyId, options, defaultValue) {
 		const propertyId = this.convertPropertyId(inPropertyId);
@@ -1064,10 +1065,16 @@ export default class PropertiesController {
 		// don't return hidden/disabled values
 		const filterHidden = options && (options.filterHiddenDisabled || options.filterHidden);
 		const filterDisabled = options && (options.filterHiddenDisabled || options.filterDisabled);
-		if (filterHidden || filterDisabled) {
+		const filterHiddenControls = options && options.filterHiddenControls;
+		if (filterHidden || filterDisabled || filterHiddenControls) {
 			// top level value
 			const controlState = this.getControlState(propertyId);
-			if ((controlState === STATES.DISABLED && filterDisabled) || (controlState === STATES.HIDDEN && filterHidden)) {
+			const controlType = this.getControlType(propertyId);
+			if (
+				(controlState === STATES.DISABLED && filterDisabled) ||
+				(controlState === STATES.HIDDEN && filterHidden) ||
+				(controlType === ControlType.HIDDEN && filterHiddenControls)
+			) {
 				return filteredValue;
 			}
 			// copy array to modify it and clear out disabled/hidden values
@@ -1083,7 +1090,12 @@ export default class PropertiesController {
 								col: colIdx
 							};
 							const valueState = this.getControlState(colPropertyId);
-							if ((valueState === STATES.DISABLED && filterDisabled) || (valueState === STATES.HIDDEN && filterHidden)) {
+							const valueType = this.getControlType(colPropertyId);
+							if (
+								(valueState === STATES.DISABLED && filterDisabled) ||
+								(valueState === STATES.HIDDEN && filterHidden) ||
+								(valueType === ControlType.HIDDEN && filterHiddenControls)
+							) {
 								filteredValue[rowIdx][colIdx] = null;
 							}
 						}
@@ -1121,15 +1133,16 @@ export default class PropertiesController {
 	/*
 	* return the property values for all controls
 	* options - optional object of config options where
-	*   filterHiddenDisabled: true - filter out values from controls that are hidden or disabled
+	*   filterHiddenDisabled: true - filter out values from controls having state "hidden" or "disabled"
 	*   applyProperties: true - this function is called from PropertiesMain.applyPropertiesEditing()
-	*   filterHidden: true - filter out values from controls that are hidden
-	*   filterDisabled: true - filter out values from controls that are disabled
+	*   filterHidden: true - filter out values from controls having state "hidden"
+	*   filterDisabled: true - filter out values from controls having state "disabled"
+	*   filterHiddenControls: true - filter out values from controls having type "hidden"
 	*/
 	getPropertyValues(options) {
 		const propertyValues = this.propertiesStore.getPropertyValues();
 		let returnValues = propertyValues;
-		if (options && (options.filterHiddenDisabled || options.filterHidden || options.filterDisabled)) {
+		if (options && (options.filterHiddenDisabled || options.filterHidden || options.filterDisabled || options.filterHiddenControls)) {
 			const filteredValues = {};
 			for (const propKey in propertyValues) {
 				if (!has(propertyValues, propKey)) {

package/src/common-properties/util/L10nProvider.js

@@ -77,6 +77,12 @@ export class L10nProvider {
 		const lookupKey = baseKey + "." + value + ".label";
 		return this.l10n(lookupKey, value);
 	}
+
+	l10nValueDesc(baseKey, value) {
+		const lookupKey = baseKey + "." + value + ".desc";
+		const desc = this.l10n(lookupKey, value);
+		return (desc !== value ? desc : null);
+	}
 }
 
 export class ResourceDef {

package/src/object-model/config-utils.js

@@ -75,6 +75,7 @@ export default class CanvasUtils {
 			enablePanIntoViewOnOpen: false,
 			enableZoomIntoSubFlows: false,
 			enableBrowserEditMenu: true,
+			enableMarkdownInComments: false,
 			enableAutoLinkOnlyFromSelNodes: false,
 			enableSaveZoom: "None",
 			enableSnapToGridType: "None",

package/src/object-model/layout-dimensions.js

@@ -358,6 +358,11 @@ const portsHorizontalDefaultLayout = {
 		// Comment port (circle) radius
 		commentPortRadius: 5,
 
+		// Position of the comment toolbar as an offset from the comment position
+		// (which is the top left corner of the comment bounding box).
+		commentToolbarPosX: -2,
+		commentToolbarPosY: -44,
+
 		// ---------------------------------------------------------------------------
 		// Layout values for operations
 		// ---------------------------------------------------------------------------
@@ -742,6 +747,11 @@ const portsVerticalDefaultLayout = {
 		// Comment port (circle) radius
 		commentPortRadius: 5,
 
+		// Position of the comment toolbar as an offset from the comment position
+		// (which is the top left corner of the comment bounding box).
+		commentToolbarPosX: -2,
+		commentToolbarPosY: -44,
+
 		// ---------------------------------------------------------------------------
 		// Layout values for operations
 		// ---------------------------------------------------------------------------

package/src/object-model/object-model.js

@@ -1442,6 +1442,10 @@ export default class ObjectModel {
 		return this.store.isBottomPanelOpen();
 	}
 
+	setBottomPanelHeight(ht) {
+		this.store.dispatch({ type: "SET_BOTTOM_PANEL_CONFIG", data: { config: { panelHeight: ht } } });
+	}
+
 	// ---------------------------------------------------------------------------
 	// Clone methods
 	// ---------------------------------------------------------------------------
@@ -2380,4 +2384,12 @@ export default class ObjectModel {
 	isTooltipOpen() {
 		return this.store.isTooltipOpen();
 	}
+
+	// ---------------------------------------------------------------------------
+	// Text Toolbar methods
+	// ---------------------------------------------------------------------------
+	setTextToolbarDef(textToolbarDef) {
+		this.store.dispatch({ type: "SET_TEXT_TOOLBAR_DEF", data: { textToolbarDef: textToolbarDef } });
+	}
+
 }

package/src/object-model/redux/canvas-store.js

@@ -28,6 +28,7 @@ import bottompanel from "./reducers/bottompanel.js";
 import breadcrumbs from "./reducers/breadcrumbs.js";
 import canvasconfig from "./reducers/canvasconfig.js";
 import canvastoolbar from "./reducers/canvastoolbar.js";
+import texttoolbar from "./reducers/texttoolbar.js";
 import notifications from "./reducers/notifications.js";
 import selectioninfo from "./reducers/selectioninfo.js";
 import notificationpanel from "./reducers/notificationpanel.js";
@@ -50,6 +51,7 @@ export default class CanavasStore {
 			externalpipelineflows,
 			tooltip,
 			canvastoolbar,
+			texttoolbar,
 			contextmenu,
 			rightflyout,
 			bottompanel
@@ -66,9 +68,10 @@ export default class CanavasStore {
 			externalpipelineflows: [],
 			tooltip: {},
 			canvastoolbar: {},
+			texttoolbar: { isOpen: false },
 			contextmenu: { menuDef: [] },
 			rightflyout: {},
-			bottompanel: {}
+			bottompanel: { panelHeight: 393 }
 		};
 
 		let enableDevTools = false;

package/src/object-model/redux/reducers/bottompanel.js

@@ -18,9 +18,7 @@ export default (state = {}, action) => {
 	switch (action.type) {
 	case "SET_BOTTOM_PANEL_CONFIG": {
 		if (action.data.config) {
-			return {
-				content: action.data.config.content,
-				isOpen: action.data.config.isOpen };
+			return Object.assign({}, state, action.data.config);
 		}
 		return state;
 	}

package/src/object-model/redux/reducers/texttoolbar.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2022 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.
+ */
+
+export default (state = {}, action) => {
+	switch (action.type) {
+	case "SET_TEXT_TOOLBAR_DEF": {
+		if (action.data.textToolbarDef) {
+			return Object.assign({}, state, action.data.textToolbarDef);
+		}
+		return state;
+	}
+
+	default:
+		return state;
+	}
+};

package/src/toolbar/toolbar-action-item.jsx

@@ -138,8 +138,8 @@ class ToolbarActionItem extends React.Component {
 		return null;
 	}
 
-	actionClickHandler() {
-		this.props.toolbarActionHandler(this.props.actionObj.action);
+	actionClickHandler(evt) {
+		this.props.toolbarActionHandler(this.props.actionObj.action, evt);
 	}
 
 	generateButton(actionObj) {
@@ -199,12 +199,13 @@ class ToolbarActionItem extends React.Component {
 	wrapInTooltip(content) {
 		if (!this.props.overflow && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {
 			const actionName = this.generateActionName();
-			const tipText = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
+			const tip = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
 			const tooltipId = actionName + "-" + this.props.instanceId + "-tooltip";
-			const enableTooltip = this.props.actionObj.enable ? this.props.actionObj.enable : false;
+			const enableTooltip = this.props.actionObj.enable || this.props.actionObj.jsx; // JSX 'tools' don't have enable attr so always display a tooltip for them.
+			const direction = this.props.tooltipDirection ? this.props.tooltipDirection : "bottom";
 
 			return (
-				<Tooltip id={tooltipId} tip={tipText} disable={!enableTooltip} className="icon-tooltip" >
+				<Tooltip id={tooltipId} tip={tip} disable={!enableTooltip} className="icon-tooltip" direction={direction}>
 					{content}
 				</Tooltip>
 			);
@@ -282,9 +283,11 @@ ToolbarActionItem.propTypes = {
 		jsx: PropTypes.object,
 		tooltip: PropTypes.oneOfType([
 			PropTypes.string,
-			PropTypes.object
+			PropTypes.object,
+			PropTypes.func
 		])
 	}),
+	tooltipDirection: PropTypes.oneOf(["top", "bottom"]),
 	toolbarActionHandler: PropTypes.func.isRequired,
 	instanceId: PropTypes.number.isRequired,
 	overflow: PropTypes.bool,

package/src/toolbar/toolbar-overflow-item.jsx

@@ -49,6 +49,7 @@ class ToolbarOverflowItem extends React.Component {
 			<div className={className} >
 				<div className={"toolbar-overflow-item"}>
 					<Button kind="ghost"
+						tabIndex={-1}
 						onClick={this.toggleExtendedMenu}
 						onFocus={this.props.onFocus}
 						aria-label={this.props.label}

package/src/toolbar/toolbar.jsx

@@ -15,9 +15,7 @@
  */
 
 import React from "react";
-import { injectIntl } from "react-intl";
 import PropTypes from "prop-types";
-import defaultMessages from "../../locales/toolbar/locales/en.json";
 import ReactResizeDetector from "react-resize-detector";
 
 import ToolbarActionItem from "./toolbar-action-item.jsx";
@@ -205,6 +203,7 @@ class Toolbar extends React.Component {
 					<ToolbarActionItem
 						key={"toolbar-item-key-" + i}
 						actionObj={actionObj}
+						tooltipDirection={this.props.tooltipDirection}
 						toolbarActionHandler={this.props.toolbarActionHandler}
 						overflow={overflow}
 						instanceId={this.props.instanceId}
@@ -282,29 +281,27 @@ class Toolbar extends React.Component {
 		const rightItems = this.generateToolbarItems(this.rightBar, false, false);
 
 		const canvasToolbar = (
-			<section aria-label={this.props.intl.formatMessage({ id: "toolbar.label", defaultMessage: defaultMessages["toolbar.label"] })} role="toolbar">
-				<ReactResizeDetector handleWidth onResize={this.onToolbarResize}>
-					<div className="toolbar-div" instanceid={this.props.instanceId}>
-						<div className="toolbar-left-bar" onScroll={this.onScroll}>
-							{leftItems}
-						</div>
-						<div className="toolbar-right-bar">
-							{rightItems}
-						</div>
+			<ReactResizeDetector handleWidth onResize={this.onToolbarResize}>
+				<div className="toolbar-div" instanceid={this.props.instanceId}>
+					<div className="toolbar-left-bar" onScroll={this.onScroll}>
+						{leftItems}
 					</div>
-				</ReactResizeDetector>
-			</section>
+					<div className="toolbar-right-bar">
+						{rightItems}
+					</div>
+				</div>
+			</ReactResizeDetector>
 		);
 		return canvasToolbar;
 	}
 }
 
 Toolbar.propTypes = {
-	intl: PropTypes.object.isRequired,
 	config: PropTypes.object.isRequired,
 	instanceId: PropTypes.number,
 	toolbarActionHandler: PropTypes.func,
+	tooltipDirection: PropTypes.string,
 	additionalText: PropTypes.object
 };
 
-export default injectIntl(Toolbar);
+export default Toolbar;

package/src/tooltip/tooltip.jsx

@@ -378,6 +378,8 @@ class ToolTip extends React.Component {
 					{this.props.tip}
 				</div>
 			);
+		} else if ((typeof this.props.tip) === "function") {
+			tooltipContent = this.props.tip();
 		}
 
 		let tipClass = "common-canvas-tooltip";
@@ -400,9 +402,9 @@ class ToolTip extends React.Component {
 			}
 		}
 
-		return (
-			<div className="tooltip-container">
-				{triggerContent}
+		let tooltip = null;
+		if (tooltipContent || link) {
+			tooltip = (
 				<Portal>
 					<div data-id={this.props.id} className={tipClass} aria-hidden={!this.state.isTooltipVisible} direction={this.props.direction}>
 						<svg id="tipArrow" x="0px" y="0px" viewBox="0 0 9.1 16.1">
@@ -413,13 +415,20 @@ class ToolTip extends React.Component {
 						{link}
 					</div>
 				</Portal>
+			);
+		}
+
+		return (
+			<div className="tooltip-container">
+				{triggerContent}
+				{tooltip}
 			</div>
 		);
 	}
 }
 
 ToolTip.propTypes = {
-	tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
 	link: PropTypes.object,
 	tooltipLinkHandler: PropTypes.func,
 	direction: PropTypes.oneOf(["left", "right", "top", "bottom"]),