@elyra/canvas 12.26.0 → 12.27.0

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * 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.
@@ -16,8 +16,8 @@
 
 @import "carbon-components/scss/globals/scss/_vars";
 $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
-$bottom-panel-border-width: 1px;
-$bottom-panel-border-color: $ui-03;
+$panel-border-width: 1px;
+$panel-border-color: $ui-03;
 
 /* Default layout for common-canvas components where the canvas appears below
  * the toolbar and right-side flyout appears to the right of the toolbar and
@@ -55,6 +55,10 @@ $bottom-panel-border-color: $ui-03;
 .common-canvas-with-bottom-panel {
 	width: 100%;
 	position: relative;
+
+	.top-panel {
+		top: 0;
+	}
 }
 
 .common-canvas-drop-div {
@@ -87,14 +91,14 @@ $bottom-panel-border-color: $ui-03;
 	display: flex;
 	flex-direction: column;
 	position: absolute;
-	left:0;
-	right:0;
+	left: 0;
+	right: 0;
 	bottom: 0;
-	border-top: $bottom-panel-border-width solid $bottom-panel-border-color;
+	border-top: $panel-border-width solid $panel-border-color;
 }
 
 .bottom-panel-drag {
-	border-top: $bottom-panel-border-color;
+	border-top: $panel-border-color;
 	cursor: row-resize;
 	flex: 0 0 2px;
 	border-top-width: 1px;
@@ -112,6 +116,21 @@ $bottom-panel-border-color: $ui-03;
 	height: 100%;
 }
 
+.top-panel {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: $toolbar-button-height;
+	border-bottom: $panel-border-width solid $panel-border-color;
+
+	&.common-canvas-toolbar-none {
+		top: 0;
+	}
+}
+
+
 .text-toolbar {
 	position: absolute;
 	// top and left will be calculated and set for the text toolbar programmatically

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

@@ -906,10 +906,6 @@ g.bkg-col-cyan-50 {
 	stroke-width: 1;
 	stroke-dasharray: 0;
 }
-.d3-link-decorations-group g rect {
-	stroke: transparent;
-	stroke-width: 0px;
-}
 
 /* 'object link' is the historical name for an association link */
 /* This styles is used for association links on a regular data flow canvas */

package/src/common-canvas/svg-canvas-renderer.js

@@ -2823,22 +2823,23 @@ export default class SVGCanvasRenderer {
 	}
 
 	displayPorts(nodeGrp, d) {
-		// Empty inputs arrays are allowed because some apps support that when ports are deleted.
-		if (d.layout.inputPortDisplay && Array.isArray(d.inputs)) {
-			this.displayInputPorts(nodeGrp, d);
-		}
-
-		// Empty outputs arrays are allowed because some apps support that when ports are deleted.
-		if (d.layout.outputPortDisplay && Array.isArray(d.outputs)) {
-			this.displayOutputPorts(nodeGrp, d);
-		}
+		this.displayInputPorts(nodeGrp, d);
+		this.displayOutputPorts(nodeGrp, d);
 	}
 
 	displayInputPorts(nodeGrp, node) {
 		const inSelector = "." + this.getNodeInputPortClassName();
 
+		// Some applications may set inputs to undefined after inputs was
+		// previously set to an array, so use empty array in that case so any
+		// existing input ports are removed from the node.
+		let inputs = node.inputs || [];
+
+		// Don't display input ports if config says not to.
+		inputs = node.layout.inputPortDisplay ? inputs : [];
+
 		nodeGrp.selectChildren(inSelector)
-			.data(node.inputs, (p) => p.id)
+			.data(inputs, (p) => p.id)
 			.join(
 				(enter) => this.createInputPorts(enter, node)
 			)
@@ -2907,9 +2908,18 @@ export default class SVGCanvasRenderer {
 	displayOutputPorts(nodeGrp, node) {
 		const outSelector = "." + this.getNodeOutputPortClassName();
 
-		const outputs = this.config.enableSingleOutputPortDisplay && node.outputs.length > 1
-			? [node.outputs[node.outputs.length - 1]]
-			: node.outputs;
+		// Some applications may set outputs to undefined after outputs was
+		// previously set to an array, so use empty array in that case so any
+		// existing output ports are removed from the node.
+		let outputs = node.outputs || [];
+
+		// Don't display output ports if config says not to.
+		outputs = node.layout.outputPortDisplay ? outputs : [];
+
+		// Only show a single output port (the last one) if config tells us to.
+		outputs = this.config.enableSingleOutputPortDisplay && outputs.length > 1
+			? [outputs[outputs.length - 1]]
+			: outputs;
 
 		nodeGrp.selectChildren(outSelector)
 			.data(outputs, (p) => p.id)

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

@@ -247,7 +247,8 @@ CommonProperties.propTypes = {
 		conditionDisabledPropertyHandling: PropTypes.oneOf(["null", "value"]),
 		maxLengthForMultiLineControls: PropTypes.number,
 		maxLengthForSingleLineControls: PropTypes.number,
-		convertValueDataTypes: PropTypes.bool
+		convertValueDataTypes: PropTypes.bool,
+		showRequiredIndicator: PropTypes.bool
 	}),
 	callbacks: PropTypes.shape({
 		controllerHandler: PropTypes.func,
@@ -283,7 +284,8 @@ CommonProperties.defaultProps = {
 		applyPropertiesWithoutEdit: false,
 		maxLengthForMultiLineControls: 1024,
 		maxLengthForSingleLineControls: 128,
-		convertValueDataTypes: false
+		convertValueDataTypes: false,
+		showRequiredIndicator: true
 	},
 	callbacks: {
 	},

package/src/common-properties/components/control-item/control-item.jsx

@@ -21,7 +21,7 @@ import classNames from "classnames";
 import { STATES, CARBON_ICONS, MESSAGE_KEYS } from "./../../constants/constants.js";
 import { ControlType } from "./../../constants/form-constants";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
-import { isEmpty } from "lodash";
+import { isEmpty, get } from "lodash";
 import { v4 as uuid4 } from "uuid";
 import Icon from "./../../../icons/icon.jsx";
 import ActionFactory from "./../../actions/action-factory.js";
@@ -31,6 +31,7 @@ class ControlItem extends React.Component {
 	constructor(props) {
 		super(props);
 		this.actionFactory = new ActionFactory(this.props.controller);
+		this.showRequiredIndicator = props.controller ? get(props.controller.getPropertiesConfig(), "showRequiredIndicator", true) : true;
 		this.uuid = uuid4();
 	}
 
@@ -68,13 +69,13 @@ class ControlItem extends React.Component {
 				}
 			}
 			let indicator;
-			if (this.props.control.showRequiredLabel && this.props.control.required) {
+			if (this.showRequiredIndicator && this.props.control.required) {
 				indicator = (
 					<span className="properties-indicator">
 						{formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.LABEL_INDICATOR_REQUIRED)}
 					</span>
 				);
-			} else if (!this.props.control.showRequiredLabel && !("required" in this.props.control)) {
+			} else if (!this.showRequiredIndicator && !("required" in this.props.control)) {
 				indicator = (
 					<span className="properties-indicator">
 						{formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.LABEL_INDICATOR_OPTIONAL)}

package/src/common-properties/components/control-item/control-item.scss

@@ -67,6 +67,7 @@
 	@include carbon--type-style("helper-text-01");
 	color: $text-02;
 	padding-bottom: $spacing-03;
+	white-space: pre-wrap; // Add a line break for \n
 }
 
 // Removed padding in properties-label-container because .bx--label has margin-bottom: $spacing-03

package/src/common-properties/components/editor-form/editor-form.jsx

@@ -199,6 +199,7 @@ class EditorForm extends React.Component {
 				}
 				tabContent.push(
 					<Tab
+						id={"tab." + this._getContainerIndex(hasAlertsTab, i) + "-" + key}
 						key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
 						tabIndex={i}
 						label={tab.text}

package/src/common-properties/components/virtualized-table/virtualized-table.jsx

@@ -198,15 +198,16 @@ class VirtualizedTable extends React.Component {
 			{ id: "virtualizedTable.header.checkbox.label", defaultMessage: defaultMessages["virtualizedTable.header.checkbox.label"] },
 			{ header_checkbox_label: headerCheckboxLabel }
 		);
-		const checkbox = this.props.selectable && this.props.rowSelection !== ROW_SELECTION.SINGLE ? (<div role="columnheader" className="properties-vt-header-checkbox">
-			<Checkbox
-				id={`properties-vt-hd-cb-${scrollKey}`}
-				onChange={this.selectAll}
-				checked={this.props.checkedAll}
-				labelText={translatedHeaderCheckboxLabel}
-				hideLabel
-			/>
-		</div>)
+		const checkbox = this.props.selectable && this.props.rowSelection !== ROW_SELECTION.SINGLE
+			? (<div role="checkbox" aria-checked={this.props.checkedAll} className="properties-vt-header-checkbox">
+				<Checkbox
+					id={`properties-vt-hd-cb-${scrollKey}`}
+					onChange={this.selectAll}
+					checked={this.props.checkedAll}
+					labelText={translatedHeaderCheckboxLabel}
+					hideLabel
+				/>
+			</div>)
 			: "";
 
 		return (<div className={className} data-role="properties-header-row" role="row" style={style}>
@@ -499,6 +500,7 @@ class VirtualizedTable extends React.Component {
 
 								sort={this.props.onSort}
 								sortDirection={this.props.sortDirection}
+								tabIndex={-1}
 							>
 								{
 									this.state.columns.map((column) => (

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

@@ -114,8 +114,7 @@ export const MESSAGE_KEYS = {
 	SHOW_PASSWORD_TOOLTIP: "passwordShow.tooltip",
 	HIDE_PASSWORD_TOOLTIP: "passwordHide.tooltip",
 	LABEL_INDICATOR_REQUIRED: "label.indicator.required",
-	LABEL_INDICATOR_OPTIONAL: "label.indicator.optional",
-	EMPTY_LIST_PLACEHOLDER: "emptyList.placeholder"
+	LABEL_INDICATOR_OPTIONAL: "label.indicator.optional"
 };
 
 export const TRUNCATE_LIMIT = 10000;

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

@@ -36,10 +36,10 @@ class DropDown extends React.Component {
 		if (isEmpty(props.controlOpts)) {
 			// For empty dropdown, get placeholder text from resources
 			const overrideEmptyListPlaceholder = `${this.props.control.name}.emptyList.placeholder`;
-			const defaultEmptyListPlaceholder = formatMessage(this.reactIntl, MESSAGE_KEYS.EMPTY_LIST_PLACEHOLDER);
-			this.emptyLabel = props.controller.getResource(overrideEmptyListPlaceholder, defaultEmptyListPlaceholder);
+			const emptyLabelOverride = props.controller.getResource(overrideEmptyListPlaceholder);
 			// Disable empty dropdown when [property_id].emptyList.placeholder is set in resources
-			if (this.emptyLabel !== defaultEmptyListPlaceholder) {
+			if (emptyLabelOverride) {
+				this.emptyLabel = emptyLabelOverride;
 				this.disableEmptyListDropdown = true;
 			}
 		} else if (props.control.additionalText) {

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

@@ -183,9 +183,6 @@ export class Control {
 		if (settings.className) {
 			this.className = settings.className;
 		}
-		if (settings.showRequiredLabel) {
-			this.showRequiredLabel = settings.showRequiredLabel;
-		}
 		if (settings.buttons) {
 			this.buttons = settings.buttons;
 		}

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

@@ -508,7 +508,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 			controlType = ControlType.TIMESTAMP;
 			break;
 		case Type.STRUCTURE: {
-			const structureDef = isSubControl ? structureMetadata.getStructure(parameter.baseType()) : structureDefinition;
+			const structureDef = isSubControl && structureMetadata ? structureMetadata.getStructure(parameter.baseType()) : structureDefinition;
 
 			if (structureDef) {
 				if (structureDef.hasSubPanel()) {
@@ -649,7 +649,6 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.action = action;
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
-	settings.showRequiredLabel = parameter.showRequiredLabel;
 	settings.buttons = buttons;
 	settings.light = _isControlLight(additionalInfo.light, additionalInfo.containerType, parameter.isSubPanelEdit());
 	if (isSubControl) {
@@ -716,7 +715,7 @@ function _makeSubControl(parameter, l10nProvider, structureMetadata, additionalI
 	const parameterMetadata = null;
 	const paramName = null;
 	const group = null;
-	const structureDef = parameter.propType() === Type.STRUCTURE ? structureMetadata.getStructure(parameter.baseType()) : null;
+	const structureDef = parameter.propType() === Type.STRUCTURE && structureMetadata ? structureMetadata.getStructure(parameter.baseType()) : null;
 	const actionMetadata = null;
 	const subControl = parameter;
 	return _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, subControl, additionalInfo);

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

@@ -165,9 +165,6 @@ export class ParameterDef {
 		if (settings.className) {
 			this.className = settings.className;
 		}
-		if (settings.showRequiredLabel) {
-			this.showRequiredLabel = settings.showRequiredLabel;
-		}
 	}
 
 	isList() {
@@ -363,8 +360,7 @@ export class ParameterDef {
 				"uionly": propertyOf(param)("uionly"),
 				"actionRef": propertyOf(uihint)("action_ref"),
 				"customValueAllowed": propertyOf(uihint)("custom_value_allowed"),
-				"className": propertyOf(uihint)("class_name"),
-				"showRequiredLabel": propertyOf(param)("showRequiredLabel")
+				"className": propertyOf(uihint)("class_name")
 			});
 		}
 		return null;
@@ -408,19 +404,6 @@ export class ParameterMetadata {
 	// operation arguments
 	static makeParameterMetadata(parameters, uihintsParams, uihintsUiParams) {
 		const paramDefs = [];
-		if (parameters) {
-			// Add a new option for showing "required" or "optional" indicator in control-item
-			const requiredParameters = parameters.filter((parameter) => parameter.required === true);
-			const half = parameters.length / 2;
-			parameters.forEach((parameter) => {
-				if (requiredParameters.length <= half) {
-					parameter.showRequiredLabel = true;
-				} else {
-					parameter.showRequiredLabel = false;
-				}
-			});
-		}
-
 		if (Array.isArray(parameters)) {
 			for (const param of parameters) {
 				const paramDef = ParameterDef.makeParameterDef(param, getParamUIHint(param.id, uihintsParams));

package/src/common-properties/panels/subtabs/subtabs.jsx

@@ -50,6 +50,7 @@ class Subtabs extends React.Component {
 
 				subTabs.push(
 					<Tab
+						id={"subtabs.tab." + i}
 						key={"subtabs.tab." + i}
 						disabled={panelState === STATES.DISABLED}
 						className={classNames("properties-subtab", { "properties-leftnav-subtab-item": this.props.leftnav })}

package/src/common-properties/panels/tearsheet/tearsheet.jsx

@@ -47,6 +47,7 @@ class TearSheet extends Component {
 					className={classNames("properties-tearsheet-panel", { "properties-tearsheet-stacked": this.props.stacked })}
 					open={this.props.open}
 					size="lg"
+					aria-label={title}
 					preventCloseOnClickOutside
 				>
 					<ModalHeader

package/src/common-properties/properties-main/properties-main.jsx

@@ -614,7 +614,8 @@ PropertiesMain.propTypes = {
 		conditionDisabledPropertyHandling: PropTypes.oneOf(["null", "undefined", "value"]),
 		maxLengthForMultiLineControls: PropTypes.number,
 		maxLengthForSingleLineControls: PropTypes.number,
-		convertValueDataTypes: PropTypes.bool
+		convertValueDataTypes: PropTypes.bool,
+		showRequiredIndicator: PropTypes.bool
 	}),
 	callbacks: PropTypes.shape({
 		controllerHandler: PropTypes.func,

package/src/notification-panel/notification-panel.jsx

@@ -17,11 +17,13 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { injectIntl } from "react-intl";
 import Icon from "./../icons/icon.jsx";
 import { Button } from "carbon-components-react";
 import { Close16 } from "@carbon/icons-react";
 import Logger from "../logging/canvas-logger.js";
 import { DEFAULT_NOTIFICATION_HEADER, NOTIFICATION_ICON_CLASS } from "./../common-canvas/constants/canvas-constants.js";
+import defaultMessages from "../../locales/notification-panel/locales/en.json";
 
 
 class NotificationPanel extends React.Component {
@@ -212,7 +214,20 @@ class NotificationPanel extends React.Component {
 				<div className="notification-panel-header-container">
 					<div className="notification-panel-header">
 						{notificationHeader}
-						<Close16 className="notification-panel-close-icon" onClick={this.closeNotificationPanel} />
+						<Button
+							className="notification-panel-close-button"
+							size="sm"
+							kind="ghost"
+							renderIcon={Close16}
+							hasIconOnly
+							iconDescription={this.props.intl.formatMessage({
+								id: "notification.panel.close.button.description",
+								defaultMessage: defaultMessages["notification.panel.close.button.description"]
+							})}
+							onClick={this.closeNotificationPanel}
+							tooltipAlignment="end"
+							tooltipPosition="bottom"
+						/>
 					</div>
 					{notificationSubtitle}
 				</div>
@@ -263,7 +278,8 @@ NotificationPanel.propTypes = {
 	}),
 	secondaryButtonDisabled: PropTypes.bool,
 	isNotificationOpen: PropTypes.bool,
-	messages: PropTypes.array
+	messages: PropTypes.array,
+	intl: PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state, ownProps) => ({
@@ -273,4 +289,4 @@ const mapStateToProps = (state, ownProps) => ({
 	messages: state.notifications
 });
 
-export default connect(mapStateToProps)(NotificationPanel);
+export default connect(mapStateToProps)(injectIntl(NotificationPanel));

package/src/notification-panel/notification-panel.scss

@@ -59,11 +59,9 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 		color: $text-02;
 		padding-top: $spacing-02;
 	}
-	.notification-panel-close-icon {
-		position: absolute;
-		right: $spacing-05;
-		top: ($spacing-05 + $spacing-02);
-		cursor: pointer;
+	.notification-panel-close-button {
+		bottom: $spacing-02;
+		left: calc(#{$spacing-06} + #{$spacing-12});
 	}
 }
 

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * 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.
@@ -1446,6 +1446,18 @@ export default class ObjectModel {
 		this.store.dispatch({ type: "SET_BOTTOM_PANEL_CONFIG", data: { config: { panelHeight: ht } } });
 	}
 
+	// ---------------------------------------------------------------------------
+	// Top panel methods
+	// ---------------------------------------------------------------------------
+
+	setTopPanelConfig(config) {
+		this.store.dispatch({ type: "SET_TOP_PANEL_CONFIG", data: { config: config } });
+	}
+
+	isTopPanelOpen() {
+		return this.store.isTopPanelOpen();
+	}
+
 	// ---------------------------------------------------------------------------
 	// Clone methods
 	// ---------------------------------------------------------------------------

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * 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.
@@ -25,6 +25,7 @@ import canvasinfo from "./reducers/canvasinfo.js";
 import contextmenu from "./reducers/contextmenu.js";
 import rightflyout from "./reducers/rightflyout.js";
 import bottompanel from "./reducers/bottompanel.js";
+import toppanel from "./reducers/toppanel.js";
 import breadcrumbs from "./reducers/breadcrumbs.js";
 import canvasconfig from "./reducers/canvasconfig.js";
 import canvastoolbar from "./reducers/canvastoolbar.js";
@@ -54,7 +55,8 @@ export default class CanavasStore {
 			texttoolbar,
 			contextmenu,
 			rightflyout,
-			bottompanel
+			bottompanel,
+			toppanel
 		});
 
 		const initialState = {
@@ -71,7 +73,8 @@ export default class CanavasStore {
 			texttoolbar: { isOpen: false },
 			contextmenu: { menuDef: [] },
 			rightflyout: {},
-			bottompanel: { panelHeight: 393 }
+			bottompanel: { panelHeight: 393 },
+			toppanel: { }
 		};
 
 		let enableDevTools = false;
@@ -254,6 +257,10 @@ export default class CanavasStore {
 		return this.store.getState().bottompanel.isOpen;
 	}
 
+	isTopPanelOpen() {
+		return this.store.getState().toppanel.isOpen;
+	}
+
 	getNotificationPanel() {
 		return this.cloneData(this.store.getState().notificationpanel);
 	}

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

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

package/src/tooltip/tooltip.scss

@@ -34,6 +34,7 @@
 	word-wrap: break-word;
 	max-width: 228px;
 	border-radius: 2px;
+	white-space: pre-wrap; // Add a line break for \n in tooltip
 	.bx--link {
 		display: block;
 		color: $inverse-link;