@elyra/canvas 12.23.1 → 12.24.0

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

@@ -50,7 +50,7 @@
 		.properties-radioset-tooltip {
 			display: flex;
 			align-items: center;
-			margin: 2.5px 0 1.5px 1.5px;
+			margin: 2.5px 0 1.5px 0;
 		}
 		.properties-control-nested-panel{
 			flex-basis: 100%;
@@ -59,10 +59,6 @@
 		&:last-of-type {
 			margin-bottom: 0; // don't want margin when last radio button in group
 		}
-		.bx--radio-button-wrapper > label {
-			justify-content: left; // override carbon style to center justify radio-button labels
-			align-items: center;
-		}
 	}
 	&.error:not([disabled]) {
 		padding-bottom: $spacing-02;

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() && !this.props.control.light}
+				light={this.props.controller.getLight() && this.props.control.light && !this.props.controller.isTearsheetContainer()}
 				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() && !this.props.control.light}
+					light={this.props.controller.getLight() && this.props.control.light && !this.props.controller.isTearsheetContainer()}
 					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() && !this.props.control.light}
+					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() && !this.props.control.light}
+				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() && !this.props.control.light}
+				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() && !this.props.control.light}
+					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

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { get } from "lodash";
+
 import { EditStyle } from "../constants/form-constants";
 
 
@@ -184,6 +186,6 @@ export class Control {
 		if (settings.buttons) {
 			this.buttons = settings.buttons;
 		}
-		this.light = settings.light || false;
+		this.light = get(settings, "light", true);
 	}
 }

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, light = false) {
+function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = true) {
 	const groupName = group.name;
 	let groupItem = null;
 	let groupLabel = null;
@@ -147,10 +147,10 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 			_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)));
+			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light)));
 	case GroupType.ADDITIONAL: {
 		const panel = new ControlPanel(groupName, PanelType.GENERAL, groupClassName, nestedPanel,
-			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider));
+			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light));
 		groupLabel = l10nProvider.l10nLabel(group, group.name);
 		return UIItem.makeAdditionalLink(groupLabel, groupLabel, panel);
 	}
@@ -160,7 +160,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
 				const subGroupName = subGroup.name;
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
 				groupLabel = l10nProvider.l10nLabel(subGroup, subGroup.name);
 				subTabItems.push(new EditorTab(groupLabel, subGroupName, groupItem));
 			});
@@ -176,7 +176,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		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, light);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -186,7 +186,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		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, light);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -200,7 +200,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		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, light);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -232,7 +232,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		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, light);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -247,7 +247,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, true);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, false);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -262,7 +262,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 /**
  * Called on a base property group.
  */
-function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = false) {
+function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = true) {
 	const uiItems = [];
 	const panelInsertedFor = [];
 	if (!Array.isArray(group.parameterNames())) {
@@ -415,7 +415,7 @@ function _makeStringControl(parameter, isSubControl) {
 /**
  * Creates a control for the supplied property.
  */
-function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl, light = false) {
+function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl, light = true) {
 	const isSubControl = typeof subControl !== "undefined" && subControl;
 
 	// Assume the property is defined

package/src/common-properties/index.scss

@@ -38,10 +38,8 @@
 }
 
 .properties-error-content {
-	padding: 0 10px;
-	font-size: 14px;
-	font-weight: 300;
-	line-height: 16px;
+	@include carbon--type-style("label-02");
+	padding: 0 $spacing-06;
 }
 
 .properties-modal-container {

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

@@ -33,6 +33,7 @@ class ControlPanel extends React.Component {
 						"properties-control-panel",
 						{ "hide": this.props.panelState === STATES.HIDDEN },
 						{ "properties-control-nested-panel": this.props.panel.nestedPanel },
+						{ "tearsheet-container": this.props.controller.isTearsheetContainer() },
 						className
 					)}
 					disabled={this.props.panelState === STATES.DISABLED} data-id={ControlUtils.getDataId({ name: this.props.panel.id })}

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

@@ -47,3 +47,15 @@
 .properties-control-nested-panel .properties-control-nested-panel {
 	border-left: 1px solid $ui-03;
 }
+
+// Set the height of the very first panel to be full width inside a tearsheet
+.properties-control-panel.tearsheet-container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	flex-shrink: 10;
+
+	.properties-control-panel.tearsheet-container {
+		height: unset;
+	}
+}

package/src/common-properties/panels/sub-panel/invoker.jsx

@@ -57,12 +57,14 @@ export default class SubPanelInvoker extends React.Component {
 	render() {
 		let propertiesDialog = [];
 		if (this.state.subPanelVisible && !this.props.rightFlyout) {
+			const className = this.props.controller.isTearsheetContainer() ? "properties-subpanel-modal-in-tearsheet" : "";
 			propertiesDialog = (<PropertiesModal
 				title={this.state.title}
 				okHandler={this.hideSubDialog.bind(this, true)}
 				cancelHandler={this.hideSubDialog.bind(this, false)}
 				applyLabel={this.props.applyLabel}
 				rejectLabel={this.props.rejectLabel}
+				classNames={className}
 			>
 				{this.state.panel}
 			</PropertiesModal>);

package/src/common-properties/panels/sub-panel/sub-panel.scss

@@ -22,3 +22,9 @@ button.properties-subpanel-button {
 	display: flex;
 	justify-content: center;
 }
+
+.properties-subpanel-modal-in-tearsheet {
+	.properties-light-disabled {
+		background-color: $ui-01;
+	}
+}

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

@@ -52,9 +52,10 @@ class Subtabs extends React.Component {
 					<Tab
 						key={"subtabs.tab." + i}
 						disabled={panelState === STATES.DISABLED}
-						className="properties-subtab"
+						className={classNames("properties-subtab", { "properties-leftnav-subtab-item": this.props.leftnav })}
 						tabIndex={tabIdx}
 						label={tab.text}
+						title={tab.text}
 						onClick={this.onClick.bind(this, tab.group)}
 						data-id={getDataId({ name: tab.group })}
 					>
@@ -70,10 +71,14 @@ class Subtabs extends React.Component {
 					"properties-sub-tab-container",
 					{ vertical: !this.props.rightFlyout },
 					{ "properties-control-nested-panel": this.props.nestedPanel },
+					{ "properties-leftnav-container": this.props.leftnav },
 					className
 				)}
 			>
-				<Tabs className="properties-subtabs" selected={activeTab} light={this.props.controller.getLight()}>
+				<Tabs className={classNames("properties-subtabs", { "properties-leftnav-subtabs": this.props.leftnav })}
+					selected={activeTab}
+					light={this.props.controller.getLight()}
+				>
 					{subTabs}
 				</Tabs>
 			</div>
@@ -87,7 +92,12 @@ Subtabs.propTypes = {
 	rightFlyout: PropTypes.bool,
 	genUIItem: PropTypes.func.isRequired,
 	className: PropTypes.string,
-	nestedPanel: PropTypes.bool
+	nestedPanel: PropTypes.bool,
+	leftnav: PropTypes.bool
+};
+
+Subtabs.defaultProps = {
+	leftnav: false
 };
 
 export default Subtabs;

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

@@ -21,3 +21,65 @@
 		padding-right: 0;
 	}
 }
+
+// The below styles are required to override the Carbon "Tab" component to look like a leftnav
+$parent-padding: calc(#{$spacing-05} + #{$spacing-05});
+$selected-tab-width: 3px;
+
+.properties-leftnav-container {
+	display: flex;
+	border-top: px solid $ui-03;
+	height: calc(100% + #{$parent-padding}); // Include padding from parent
+	margin-top: -$spacing-05;
+	margin-left: -$spacing-05;
+	margin-bottom: calc(-1 * #{$parent-padding});
+
+	.properties-leftnav-subtabs {
+		width: 282px;
+		background-color: $ui-01;
+		border-right: 1px solid $ui-03;
+		padding-top: $spacing-02;
+		height: 100%;
+
+		ul.bx--tabs--scrollable__nav {
+			flex-direction: column;
+			width: 282px;
+		}
+
+		li.bx--tabs--scrollable__nav-item--selected {
+			border-left: $selected-tab-width solid $interactive-04;
+			border-bottom: 0;
+			background-color: $selected-ui;
+
+			&:hover {
+				background-color: $hover-row;
+			}
+
+			&.properties-leftnav-subtab-item button {
+				border-left: 0;
+			}
+		}
+
+		li.properties-leftnav-subtab-item {
+			&:hover button {
+				border-bottom: 0;
+			}
+			button {
+				border-left: $selected-tab-width solid transparent;
+				border-bottom: 0;
+				transition: none; // Prevent border/outline from flickering
+
+				&:focus, &:active {
+					outline: 0;
+					border-bottom: 0;
+					transition: none; // Prevent border/outline from flickering
+				}
+			}
+		}
+	}
+
+	div.bx--tab-content {
+		width: 100%;
+		padding: $spacing-05; // Override padding set by subtab
+	}
+}

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

@@ -1,13 +1,46 @@
+/*
+ * Copyright 2017-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.
+ */
+
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import classNames from "classnames";
+
 import { ComposedModal, ModalHeader, ModalBody } from "carbon-components-react";
 import { Portal } from "react-portal";
 
+import PropertiesButtons from "../../components/properties-buttons";
+
 class TearSheet extends Component {
 	render() {
 		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;
+		const displayFooterButtons = this.props.showPropertiesButtons && !this.props.applyOnBlur;
+		const displayTabs = !Array.isArray(content);
+
+		const buttons = this.props.applyOnBlur
+			? null
+			: (<PropertiesButtons
+				okHandler={this.props.okHandler}
+				cancelHandler={this.props.cancelHandler}
+				applyLabel={this.props.applyLabel}
+				rejectLabel={this.props.rejectLabel}
+				showPropertiesButtons={this.props.showPropertiesButtons}
+			/>);
+
 		return (
 			<Portal>
 				<ComposedModal
@@ -17,25 +50,49 @@ class TearSheet extends Component {
 					preventCloseOnClickOutside
 				>
 					<ModalHeader
+						className={classNames("properties-tearsheet-header",
+							{ "with-buttons": displayFooterButtons },
+							{ "with-tabs": displayTabs },
+							{ "hide-close-button": typeof this.props.onCloseCallback !== "function" })}
 						title={title}
-						buttonOnClick={() => {
-							this.props.controller.clearActiveTearsheet();
-						}}
+						buttonOnClick={this.props.onCloseCallback}
 					>
 						{description ? (<p>{description}</p>) : null}
 					</ModalHeader>
-					<ModalBody>
+					<ModalBody className={classNames("properties-tearsheet-body",
+						{ "with-buttons": displayFooterButtons },
+						{ "with-tabs": displayTabs })}
+					>
 						{content}
 					</ModalBody>
+					{buttons}
 				</ComposedModal>
 			</Portal>);
 	}
 }
 TearSheet.propTypes = {
 	open: PropTypes.bool,
-	controller: PropTypes.object.isRequired,
-	children: PropTypes.array,
-	tearsheet: PropTypes.object
+	onCloseCallback: PropTypes.func,
+	tearsheet: PropTypes.shape({
+		title: PropTypes.string.isRequired,
+		description: PropTypes.string,
+		content: PropTypes.oneOfType([
+			PropTypes.array,
+			PropTypes.object
+		])
+	}),
+	showPropertiesButtons: PropTypes.bool,
+	applyLabel: PropTypes.string, // Required if showPropertiesButtons is true
+	rejectLabel: PropTypes.string, // Required if showPropertiesButtons is true
+	okHandler: PropTypes.func, // Required if showPropertiesButtons is true
+	cancelHandler: PropTypes.func, // Required if showPropertiesButtons is true
+	applyOnBlur: PropTypes.bool.isRequired
+};
+
+TearSheet.defaultProps = {
+	open: false,
+	showPropertiesButtons: false,
+	applyOnBlur: false
 };
 
 export default TearSheet;

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

@@ -1,3 +1,21 @@
+/*
+ * Copyright 2017-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.
+ */
+
+$properties-buttons-height: $spacing-10;
+
 .properties-tearsheet-panel.bx--modal {
 	align-items: flex-end;
 	&.is-visible {
@@ -12,26 +30,74 @@
 		width: calc(100% - 128px);
 		transform: translate3d(0, 500px, 0);
 		transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
-		.bx--modal-header {
-			padding: $spacing-06 $spacing-07;
-			border-bottom: 1px solid $ui-03;
-			margin-bottom: 0;
-			h3 {
-				@include carbon--type-style("productive-heading-04");
-			}
-			p {
-				margin-top: $spacing-03;
-				@include carbon--type-style("body-short-01");
-			}
+		background-color: $ui-background;
+	}
+
+	// Start:: These styles are to display only parameters in a Tearsheet
+	.properties-tearsheet-header {
+		padding: $spacing-06 $spacing-07;
+		border-bottom: 1px solid $ui-03;
+		margin-bottom: 0;
+		h3 {
+			@include carbon--type-style("productive-heading-04");
 		}
-		.bx--modal-content {
-			padding: $spacing-06 $spacing-07;
-			background-color: $ui-background;
-			margin-bottom: 0;
-			.bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area {	// override carbon's modal
+		p {
+			margin-top: $spacing-03;
+			@include carbon--type-style("body-short-01");
+		}
+		background-color: $ui-01;
+	}
+
+	.properties-tearsheet-body {
+		padding: $spacing-06 $spacing-07;
+		margin-bottom: 0;
+		.bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area {	// override carbon's modal
+			background-color: $ui-01;
+		}
+	}
+	// End:: These styles are to display only parameters in a Tearsheet
+}
+
+// These styles are to display editor-form in a Tearsheet
+.properties-tearsheet-panel.bx--modal {
+	.properties-tearsheet-header.with-tabs {
+		border-bottom: 0;
+	}
+
+	.properties-tearsheet-header.hide-close-button {
+		button.bx--modal-close {
+			display: none;
+		}
+	}
+
+	.properties-tearsheet-body {
+		// Display the tabs in the Tearsheet header
+		.properties-editor-form {
+			// styling when there is only 1 tab
+			.properties-single-category {
+				padding: $spacing-05;
+			}
+
+			.properties-primaryTabs {
 				background-color: $ui-01;
+				border-bottom: 1px solid $ui-03;
+				margin-bottom: $spacing-05;
 			}
-		}	
+		}
+	}
+
+	.properties-tearsheet-body.with-buttons {
+		height: calc(100% - #{$properties-buttons-height});
+		border-bottom: 1px solid $ui-03;
+	}
+
+	.properties-tearsheet-body.with-tabs {
+		padding: 0;
+	}
+
+	.properties-modal-buttons {
+		width: 50%;
+		right: 0;
+		left: unset;
 	}
-	
 }

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

@@ -126,6 +126,10 @@ export default class PropertiesController {
 		return this.propertiesConfig;
 	}
 
+	isTearsheetContainer() {
+		return this.propertiesConfig.containerType === "Tearsheet";
+	}
+
 	setParamDef(paramDef) {
 		const rightFlyout = get(this.getPropertiesConfig(), "rightFlyout", true);
 		const formData = Form.makeForm(paramDef, !rightFlyout);

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

@@ -18,6 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import PropertiesModal from "./../components/properties-modal";
 import PropertiesEditor from "./../components/properties-editor";
+import TearSheet from "../panels/tearsheet";
 import MainEditorPropertiesButtons from "./../components/main-editor-properties-buttons";
 import EditorForm from "./../components/editor-form";
 import Form from "./../form/Form";
@@ -187,7 +188,7 @@ class PropertiesMain extends React.Component {
 				return label;
 			}
 		}
-		return PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIES_ACTION_LABEL);
+		return PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIES_ACTION_LABEL, { node_label: this.propertiesController.getTitle() });
 	}
 
 	getEditorSize() {
@@ -493,6 +494,21 @@ class PropertiesMain extends React.Component {
 					>
 						{editorForm}
 					</div>);
+			} else if (this.props.propertiesConfig.containerType === "Tearsheet") {
+				propertiesDialog = (<TearSheet
+					open
+					onCloseCallback={this.props.propertiesConfig.applyOnBlur ? this.applyPropertiesEditing.bind(this, true) : null}
+					tearsheet={{
+						title: this.propertiesController.getTitle(),
+						content: editorForm
+					}}
+					applyLabel={applyLabel}
+					rejectLabel={rejectLabel}
+					okHandler={this.applyPropertiesEditing.bind(this, true)}
+					cancelHandler={cancelHandler}
+					showPropertiesButtons={this.state.showPropertiesButtons}
+					applyOnBlur={this.props.propertiesConfig.applyOnBlur}
+				/>);
 			} else { // Modal
 				propertiesDialog = (<PropertiesModal
 					onHide={this.props.callbacks.closePropertiesDialog}

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

@@ -155,12 +155,7 @@ export default class APIPipeline {
 	}
 
 	isEmpty() {
-		if (this.getNodes() && this.getNodes().length === 0 &&
-				this.getComments() && this.getComments().length === 0 &&
-				this.getLinks() && this.getLinks().length === 0) {
-			return true;
-		}
-		return false;
+		return this.store.isEmpty(this.pipelineId);
 	}
 
 	getObject(objId) {