@elyra/canvas 12.21.0 → 12.22.0

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

@@ -41,9 +41,9 @@ import ActionPanel from "./../../panels/action-panel";
 
 import ActionFactory from "./../../actions/action-factory";
 import Icon from "./../../../icons/icon";
+import { ItemType } from "../../constants/form-constants";
 
 const ALERT_TAB_GROUP = "alertMsgs";
-
 class EditorForm extends React.Component {
 
 	constructor(props) {
@@ -70,6 +70,10 @@ class EditorForm extends React.Component {
 
 		this.actionFactory = new ActionFactory(this.props.controller);
 
+		this.FIRST_TEARSHEET_ID = null;
+		this.TEARSHEETS = {};
+		this.visibleTearsheet = null;
+
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
@@ -129,9 +133,12 @@ class EditorForm extends React.Component {
 		const tabContent = [];
 		let hasAlertsTab = false;
 		let modalSelected = 0;
+		const nonTearsheetTabs = tabs.filter((t) => t.content.itemType !== ItemType.TEARSHEET);
+		const tearsheetTabs = tabs.filter((t) => t.content.itemType === ItemType.TEARSHEET);
+		const totalTabs = tearsheetTabs.concat(nonTearsheetTabs);
 
-		for (let i = 0; i < tabs.length; i++) {
-			const tab = tabs[i];
+		for (let i = 0; i < totalTabs.length; i++) {
+			const tab = totalTabs[i];
 			const tabState = this.props.controller.getPanelState({ name: tab.group });
 			if (tabState === STATES.HIDDEN) {
 				continue;
@@ -144,8 +151,9 @@ class EditorForm extends React.Component {
 			if (this.props.additionalComponents) {
 				additionalComponent = this.props.additionalComponents[tab.group];
 			}
-			// if only 1 tab don't show any tabs
-			if (tabs.length === 1) {
+			// if only 1 tab AND
+			// if total non-tearsheet tabs is 1; don't show any tabs
+			if (totalTabs.length === 1 && nonTearsheetTabs.length === 1) {
 				return (
 					<div key={"cat." + key} className="properties-category">
 						{panelItems}
@@ -160,20 +168,31 @@ class EditorForm extends React.Component {
 					panelArrow = <Icon type={CARBON_ICONS.CHEVRONARROWS.UP} className="properties-category-caret-up" />;
 					categoryOpen = true;
 				}
-				tabContent.push(
-					<div key={this._getContainerIndex(hasAlertsTab, i) + "-" + key} className="properties-category-container">
-						<button type="button" onClick={this._showCategoryPanel.bind(this, tab.group)}
-							className={classNames("properties-category-title", { "properties-light-enabled": this.props.controller.getLight() }) }
-						>
-							{tab.text}{this._getMessageCountForCategory(tab)}
-							{panelArrow}
-						</button>
-						<div className={classNames("properties-category-content", { "show": categoryOpen }) }>
+				if (tab.content.itemType !== ItemType.TEARSHEET && nonTearsheetTabs.length === 1) {
+					tabContent.push(
+						<div key={"cat." + key} className="properties-category">
 							{panelItems}
 							{additionalComponent}
 						</div>
-					</div>
-				);
+					);
+				} else {
+					tabContent.push(
+						<div key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
+							className={classNames("properties-category-container", { "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })}
+						>
+							<button type="button" onClick={this._showCategoryPanel.bind(this, tab.group)}
+								className={classNames("properties-category-title", { "properties-light-enabled": this.props.controller.getLight() }) }
+							>
+								{tab.text}{this._getMessageCountForCategory(tab)}
+								{panelArrow}
+							</button>
+							<div className={classNames("properties-category-content", { "show": categoryOpen }) }>
+								{panelItems}
+								{additionalComponent}
+							</div>
+						</div>
+					);
+				}
 			} else {
 				if (this.props.activeTab === tab.group) {
 					modalSelected = i;
@@ -183,6 +202,7 @@ class EditorForm extends React.Component {
 						key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
 						tabIndex={i}
 						label={tab.text}
+						className={classNames({ "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })}
 						onClick={this._modalTabsOnClick.bind(this, tab.group)}
 					>
 						{panelItems}
@@ -434,15 +454,28 @@ class EditorForm extends React.Component {
 					{content}
 				</TwistyPanel>);
 		case ("tearsheet"):
-			if (this.props.controller.getActiveTearsheet() === panel.id) {
+			if (!this.TEARSHEETS[panel.id]) {
+				this.TEARSHEETS[panel.id] = {
+					panel: panel,
+					title: panel.label,
+					description: panel.description ? panel.description.text : null,
+					content: content
+				};
+			}
+			if (this.props.controller.getActiveTearsheet() !== null) {
+				this.visibleTearsheet = this.TEARSHEETS[this.props.controller.getActiveTearsheet()];
+			} else {
+				this.visibleTearsheet = null;
+			}
+			if (!this.FIRST_TEARSHEET_ID || this.FIRST_TEARSHEET_ID === panel.id) {
+				this.FIRST_TEARSHEET_ID = panel.id;
 				return (
 					<TearSheet
+						open={this.props.controller.getActiveTearsheet() !== null}
 						key={panel.id}
 						controller={this.props.controller}
-						panel={panel}
-					>
-						{content}
-					</TearSheet>
+						tearsheet={this.visibleTearsheet}
+					/>
 				);
 			}
 			return null;

package/src/common-properties/components/flexible-table/flexible-table.scss

@@ -40,7 +40,7 @@ $row-left-padding: $spacing-02;
 }
 
 .properties-ft-container-panel {
-	height: calc(100% - $spacing-07); // adjust height for table header
+	height: calc(100% - #{$spacing-07}); // adjust height for table header
 }
 
 .properties-ft-control-container {
@@ -130,7 +130,7 @@ $row-left-padding: $spacing-02;
 }
 
 .properties-ft-empty-table {
-	height: calc($spacing-11 + $spacing-08);
+	height: calc(#{$spacing-11} + #{$spacing-08});
 	display: flex;
 	justify-content: center;
 	align-items: center;

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

@@ -83,7 +83,7 @@ class DatefieldControl extends React.Component {
 					value={this.value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

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

@@ -208,7 +208,7 @@ class DropDown extends React.Component {
 				disabled={this.props.state === STATES.DISABLED}
 				onChange={this.handleChange}
 				value={selection}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			>
 				{ options }
 			</Select>);
@@ -223,7 +223,7 @@ class DropDown extends React.Component {
 				items={dropDown.options}
 				onChange={this.handleComboOnChange}
 				onInputChange={this.handleOnInputChange}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 				titleText={this.props.controlItem}
 			/>);
@@ -237,7 +237,7 @@ class DropDown extends React.Component {
 				onChange={this.handleChange}
 				selectedItem={dropDown.selectedOption}
 				label={this.emptyLabel}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 				titleText={this.props.controlItem}
 			/>);

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

@@ -339,7 +339,7 @@ class ExpressionControl extends React.Component {
 			</div>
 		</WideFlyout>) : null;
 
-		const className = classNames(`properties-expression-editor ${messageType}`, { "properties-light-disabled": !this.props.controller.getLight() });
+		const className = classNames(`properties-expression-editor ${messageType}`, { "properties-light-disabled": this.props.control.light || !this.props.controller.getLight() });
 
 		const expressionLink = (<div className="properties-expression-link-container" >
 			{button}

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

@@ -150,7 +150,7 @@ class ListControl extends AbstractTable {
 				selectedRows={this.props.selectedRows}
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 

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

@@ -154,7 +154,7 @@ class MultiSelectControl extends React.Component {
 				onChange={this.handleOnChange}
 				placeholder={label}
 				titleText={this.props.tableControl ? null : this.props.controlItem}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		} else {
 			dropdownComponent = (<MultiSelect
@@ -167,7 +167,7 @@ class MultiSelectControl extends React.Component {
 				onChange={this.handleOnChange}
 				label={label}
 				titleText={this.props.tableControl ? null : this.props.controlItem}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		}
 

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

@@ -125,7 +125,7 @@ class NumberfieldControl extends React.Component {
 					label={this.props.controlItem}
 					hideLabel={this.props.tableControl}
 					allowEmpty
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
 				/>
 				{numberGenerator}

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

@@ -51,7 +51,7 @@ class PasswordControl extends React.Component {
 						value={value}
 						labelText={this.props.controlItem}
 						hideLabel={this.props.tableControl}
-						light={this.props.controller.getLight()}
+						light={this.props.controller.getLight() && !this.props.control.light}
 						tooltipAlignment="end"
 					/>
 				</Form>

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

@@ -137,7 +137,7 @@ class SelectColumnsControl extends AbstractTable {
 				selectedRows={this.props.selectedRows}
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 

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

@@ -109,7 +109,7 @@ class SomeofselectControl extends React.Component {
 					updateRowSelections={this.updateSelections}
 					selectable
 					showHeader={false}
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 					emptyTablePlaceholder={this.props.control.additionalText}
 				/>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />

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

@@ -78,7 +78,7 @@ class TextareaControl extends React.Component {
 					value={value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
 			</div>);
@@ -92,7 +92,7 @@ class TextareaControl extends React.Component {
 				value={value}
 				labelText={this.props.controlItem}
 				hideLabel={this.props.tableControl}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		}
 

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

@@ -103,7 +103,7 @@ class TextfieldControl extends React.Component {
 				value={value}
 				labelText={this.props.controlItem}
 				hideLabel={this.props.tableControl}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		}
 

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

@@ -81,7 +81,7 @@ class TimefieldControl extends React.Component {
 					value={this.value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

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

@@ -184,5 +184,6 @@ export class Control {
 		if (settings.buttons) {
 			this.buttons = settings.buttons;
 		}
+		this.light = settings.light || false;
 	}
 }

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

@@ -135,7 +135,7 @@ function makePrimaryTab(propertyDef, group, l10nProvider) {
 	return new EditorTab(label, group.name, _makeUIItem(propertyDef.parameterMetadata, propertyDef.actionMetadata, group, propertyDef.structureMetadata, l10nProvider));
 }
 
-function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider) {
+function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = false) {
 	const groupName = group.name;
 	let groupItem = null;
 	let groupLabel = null;
@@ -144,7 +144,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 	switch (group.groupType()) {
 	case GroupType.CONTROLS:
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.GENERAL, groupClassName, nestedPanel,
-			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider)));
+			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light)));
 	case GroupType.COLUMN_SELECTION:
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.COLUMN_SELECTION, groupClassName, nestedPanel,
 			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider)));
@@ -240,14 +240,18 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 	}
 	case GroupType.TEARSHEET_PANEL: {
 		groupLabel = l10nProvider.l10nLabel(group, group.name);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description));
+		}
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, true);
 				panSubItems.push(groupItem);
 			});
 		}
-		return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), group.description);
+		return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), groupDesc);
 	}
 	default:
 		logger.warn("(Unknown group type '" + group.groupType() + "')");
@@ -258,7 +262,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 /**
  * Called on a base property group.
  */
-function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider) {
+function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = false) {
 	const uiItems = [];
 	const panelInsertedFor = [];
 	if (!Array.isArray(group.parameterNames())) {
@@ -272,7 +276,7 @@ function _makeControls(parameterMetadata, actionMetadata, group, structureMetada
 			structureDef = structureMetadata.getStructure(prop.baseType());
 		}
 		if (!(group instanceof StructureDef) || (group instanceof StructureDef && prop.isSubPanelEdit())) {
-			const ctrl = _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata);
+			const ctrl = _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, null, light);
 			const control = UIItem.makeControl(ctrl);
 			if (prop.separatorBefore()) {
 				uiItems.push(UIItem.makeHSeparator());
@@ -316,7 +320,7 @@ function _makeControls(parameterMetadata, actionMetadata, group, structureMetada
 	if (Array.isArray(group.subGroups)) {
 		group.subGroups.forEach(function(subGroup) {
 			if (!_hasPanelBeenInserted(panelInsertedFor, subGroup.dependsOn)) {
-				const uiItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider);
+				const uiItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
 				uiItems.push(uiItem);
 			}
 		});
@@ -411,8 +415,8 @@ function _makeStringControl(parameter, isSubControl) {
 /**
  * Creates a control for the supplied property.
  */
-function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl) {
-	const isSubControl = typeof subControl !== "undefined";
+function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl, light = false) {
+	const isSubControl = typeof subControl !== "undefined" && subControl;
 
 	// Assume the property is defined
 	const parameter = isSubControl ? subControl : parameterMetadata.getParameter(paramName);
@@ -637,6 +641,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
 	settings.buttons = buttons;
+	settings.light = light;
 	if (isSubControl) {
 		settings.visible = parameter.visible;
 		settings.width = parameter.columns(8);

package/src/common-properties/index.scss

@@ -49,6 +49,11 @@
 	align-items: left;
 }
 
+.bx--tabs--scrollable .bx--tabs--scrollable__nav-item.properties-hidden-container,
+.properties-hidden-container {
+	display: none;
+}
+
 .properties-modal-error {
 	button:first-of-type { // hides the secondary button
 		display: none;

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

@@ -4,51 +4,38 @@ import { ComposedModal, ModalHeader, ModalBody } from "carbon-components-react";
 import { Portal } from "react-portal";
 
 class TearSheet extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			open: false
-		};
-	}
-	componentDidMount() {
-		setTimeout(() => {
-			this.setState({
-				open: true
-			});
-		}, 0);
-	}
 	render() {
-		const title = this.props.panel.label ? this.props.panel.label : null;
-		const description = this.props.panel.description ? this.props.panel.description.default : null;
+		const title = this.props.tearsheet ? this.props.tearsheet.title : null;
+		const description = this.props.tearsheet ? this.props.tearsheet.description : null;
+		const content = this.props.tearsheet ? this.props.tearsheet.content : null;
 		return (
 			<Portal>
 				<ComposedModal
 					className="properties-tearsheet-panel"
-					open={this.state.open}
+					open={this.props.open}
 					size="lg"
 					preventCloseOnClickOutside
 				>
 					<ModalHeader
 						title={title}
 						buttonOnClick={() => {
-							setTimeout(() => {
-								this.props.controller.clearActiveTearsheet();
-							}, 500);
+							this.props.controller.clearActiveTearsheet();
 						}}
 					>
 						{description ? (<p>{description}</p>) : null}
 					</ModalHeader>
 					<ModalBody>
-						{this.props.children}
+						{content}
 					</ModalBody>
 				</ComposedModal>
 			</Portal>);
 	}
 }
 TearSheet.propTypes = {
-	panel: PropTypes.object.isRequired,
+	open: PropTypes.bool,
 	controller: PropTypes.object.isRequired,
-	children: PropTypes.array
+	children: PropTypes.array,
+	tearsheet: PropTypes.object
 };
 
 export default TearSheet;

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

@@ -1,5 +1,11 @@
 .properties-tearsheet-panel.bx--modal {
 	align-items: flex-end;
+	&.is-visible {
+		.bx--modal-container {
+			transform: translate3d(0, 0, 0);
+			transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
+		}
+	}
 	.bx--modal-container {
 		max-height: calc(100% - 88px);
 		height: 100%;
@@ -22,7 +28,7 @@
 			padding: $spacing-06 $spacing-07;
 			background-color: $ui-background;
 			margin-bottom: 0;
-			.react-codemirror2, .react-codemirror2 .CodeMirror {
+			.bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area {	// override carbon's modal
 				background-color: $ui-01;
 			}
 		}	

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

@@ -31,7 +31,7 @@ import { Type, ParamRole, ControlType } from "./constants/form-constants";
 import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get } from "lodash";
 import Form from "./form/Form";
 import { getConditionOps } from "./ui-conditions/condition-ops/condition-ops";
-
+import { ItemType } from "./constants/form-constants";
 export default class PropertiesController {
 
 	constructor() {
@@ -180,7 +180,11 @@ export default class PropertiesController {
 			this.uiItems = this.form.uiItems; // set last so properties dialog doesn't render too early
 			// set initial tab to first tab
 			if (!isEmpty(this.uiItems) && !isEmpty(this.uiItems[0].tabs)) {
-				this.propertiesStore.setActiveTab(this.uiItems[0].tabs[0].group);
+				// active tab is the first non-tearsheet
+				const filteredTearsheets = this.uiItems[0].tabs.filter((tab) => tab.content.itemType !== ItemType.TEARSHEET);
+				if (filteredTearsheets.length) {
+					this.propertiesStore.setActiveTab(filteredTearsheets[0].group);
+				}
 			}
 
 			// set title

package/src/common-properties/ui-conditions/ui-conditions-parser.js

@@ -193,6 +193,7 @@ function parseUiItem(controls, actions, uiItem, panelId, parentCategoryId) {
 		break;
 	case ItemType.STATIC_TEXT:
 	case ItemType.TEXT_PANEL:
+	case ItemType.TEARSHEET:
 	case ItemType.HORIZONTAL_SEPARATOR: {
 		break;
 	}

package/src/common-properties/ui-conditions/ui-groups-parser.js

@@ -93,6 +93,7 @@ function parseUiItem(panelTree, uiItem, currentPanel) {
 		break;
 	}
 	case ItemType.STATIC_TEXT:
+	case ItemType.TEARSHEET:
 	case ItemType.HORIZONTAL_SEPARATOR: {
 		break;
 	}

package/src/palette/palette.scss

@@ -182,7 +182,7 @@ $palette-search-container-height: 41px;
 }
 
 .palette-flyout-categories {
-	height: calc(100% - $palette-search-container-height);
+	height: calc(100% - #{$palette-search-container-height});
 	width: 100%;
 	position: absolute;
 	overflow-x: hidden;