@elyra/canvas 12.20.0 → 12.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.20.0",
+  "version": "12.21.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@elyra/pipeline-schemas": "^3.0.61",
+    "@elyra/pipeline-schemas": "^3.0.63",
     "codemirror": "^5.58.2",
     "d3": "^7.1.1",
     "dagre": "^0.8.5",
@@ -74,7 +74,7 @@
     "eslint-config-canvas": "file:../eslint-config-canvas",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-react": "7.21.2",
-    "grunt": "1.3.0",
+    "grunt": "1.5.3",
     "grunt-contrib-clean": "2.0.0",
     "grunt-contrib-sass": "2.0.0",
     "grunt-env": "1.0.1",

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

@@ -1520,6 +1520,11 @@ export default class SVGCanvasRenderer {
 				d3.select(this).select("rect")
 					.attr("data-pointer-hover", "no");
 			})
+			.on("mousedown mouseup", (d3Event) => {
+				// Prevent mouse events going through to the canvas. This prevents
+				// a drag gesture on the button activating the canvas drag action.
+				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+			})
 			.on("click", (d3Event) => {
 				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 				this.canvasController.displayPreviousPipeline();

package/src/common-properties/actions.js

@@ -43,6 +43,7 @@ export const UPDATE_STATIC_ROWS = "UPDATE_STATIC_ROWS";
 export const CLEAR_STATIC_ROWS = "CLEAR_STATIC_ROWS";
 export const SET_TABLE_BUTTON_ENABLED = "SET_TABLE_BUTTON_ENABLED";
 export const SET_HIDE_EDIT_BUTTON = "SET_HIDE_EDIT_BUTTON";
+export const SET_ACTIVE_TEARSHEET = "SET_ACTIVE_TEARSHEET";
 
 
 /*
@@ -149,3 +150,7 @@ export function clearStaticRows(info) {
 export function setTableButtonEnabled(info) {
 	return { type: SET_TABLE_BUTTON_ENABLED, info };
 }
+
+export function setTearsheetState(tearsheetId) {
+	return { type: SET_ACTIVE_TEARSHEET, tearsheetId };
+}

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

@@ -27,4 +27,4 @@
 @import "./truncated-content-tooltip/truncated-content-tooltip";
 @import "./virtualized-table/virtualized-table";
 @import "./empty-table/empty-table";
-@import "./table-buttons/table-buttons"
+@import "./table-buttons/table-buttons";

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

@@ -20,7 +20,7 @@ import { connect } from "react-redux";
 import { setActiveTab } from "./../../actions";
 import { Tab, Tabs } from "carbon-components-react";
 import * as PropertyUtil from "./../../util/property-utils";
-import { MESSAGE_KEYS, CARBON_ICONS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
+import { MESSAGE_KEYS, CARBON_ICONS, CONDITION_MESSAGE_TYPE, STATES } from "./../../constants/constants";
 import { cloneDeep, isEmpty, sortBy, get } from "lodash";
 import logger from "./../../../../utils/logger";
 import classNames from "classnames";
@@ -34,12 +34,13 @@ import ControlPanel from "./../../panels/control";
 import Subtabs from "./../../panels/subtabs";
 
 import WideFlyout from "./../wide-flyout";
+import TearSheet from "../../panels/tearsheet";
 import FieldPicker from "./../field-picker";
 import TextPanel from "./../../panels/text-panel";
 import ActionPanel from "./../../panels/action-panel";
 
 import ActionFactory from "./../../actions/action-factory";
-import Icon from "./../../../icons/icon.jsx";
+import Icon from "./../../../icons/icon";
 
 const ALERT_TAB_GROUP = "alertMsgs";
 
@@ -128,8 +129,13 @@ class EditorForm extends React.Component {
 		const tabContent = [];
 		let hasAlertsTab = false;
 		let modalSelected = 0;
-		for (var i = 0; i < tabs.length; i++) {
+
+		for (let i = 0; i < tabs.length; i++) {
 			const tab = tabs[i];
+			const tabState = this.props.controller.getPanelState({ name: tab.group });
+			if (tabState === STATES.HIDDEN) {
+				continue;
+			}
 			if (i === 0 && tab.group === ALERT_TAB_GROUP) {
 				hasAlertsTab = true;
 			}
@@ -313,6 +319,7 @@ class EditorForm extends React.Component {
 		case ("hSeparator"):
 			return <hr key={"h-separator." + key} className="properties-h-separator" />;
 		case ("panel"):
+		case ("tearsheet"):
 			return this.genPanel(key, uiItem.panel, inPropertyId, indexof);
 		case ("subTabs"):
 			return (<Subtabs key={"subtabs." + key}
@@ -426,6 +433,19 @@ class EditorForm extends React.Component {
 				>
 					{content}
 				</TwistyPanel>);
+		case ("tearsheet"):
+			if (this.props.controller.getActiveTearsheet() === panel.id) {
+				return (
+					<TearSheet
+						key={panel.id}
+						controller={this.props.controller}
+						panel={panel}
+					>
+						{content}
+					</TearSheet>
+				);
+			}
+			return null;
 		case ("column"):
 			return (
 				<ColumnPanel

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

@@ -64,7 +64,9 @@ export const MESSAGE_KEYS = {
 	EXPRESSION_BUILDER_ICON_DESCRIPTION: "expression.builder.icon.description",
 	EXPRESSION_BUILDER_LABEL: "expression.builder.label",
 	EXPRESSION_FIELDS_TABLE_LABEL: "expression.fields.table.label",
+	EXPRESSION_FIELDS_EMPTY_TABLE_LABEL: "expression.fields.empty.table.label",
 	EXPRESSION_VALUES_TABLE_LABEL: "expression.values.table.label",
+	EXPRESSION_VALUES_EMPTY_TABLE_LABEL: "expression.values.empty.table.label",
 	EXPRESSION_FUNCTIONS_TABLE_LABEL: "expression.functions.table.label",
 	EXPRESSION_FIELDS_DROPDOWN_TITLE: "expression.fields.dropdown",
 	EXPRESSION_FIELDS_TITLE: "expression.fields.title",

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

@@ -20,6 +20,7 @@ const ItemType = {
 	STATIC_TEXT: "staticText",
 	HORIZONTAL_SEPARATOR: "hSeparator",
 	PANEL: "panel",
+	TEARSHEET: "tearsheet",
 	SUB_TABS: "subTabs",
 	PRIMARY_TABS: "primaryTabs",
 	PANEL_SELECTOR: "panelSelector",
@@ -53,7 +54,8 @@ const GroupType = {
 	ACTION_PANEL: "actionPanel",
 	TEXT_PANEL: "textPanel",
 	TWISTY_PANEL: "twistyPanel",
-	COLUMN_PANEL: "columnPanel"
+	COLUMN_PANEL: "columnPanel",
+	TEARSHEET_PANEL: "tearsheetPanel"
 };
 
 const PanelType = {
@@ -63,7 +65,8 @@ const PanelType = {
 	SUMMARY: "summary",
 	ACTION_PANEL: "actionPanel",
 	TWISTY_PANEL: "twisty",
-	COLUMN_PANEL: "column"
+	COLUMN_PANEL: "column",
+	TEARSHEET: "tearsheet"
 };
 
 const ControlType = {

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

@@ -18,15 +18,18 @@
 	&.hide {
 		display: none;
 	}
-	.bx--checkbox-wrapper { //override carbon checkbox styling TODO currently doesn't override
+	.bx--form-item.bx--checkbox-wrapper:first-of-type { //override carbon checkbox styling
 		margin-bottom: $spacing-03;
+		flex: 0 1 auto; // Do not allow value to take up entire width
 	}
 	.properties-checkboxset-container {
 		.properties-checkbox-tooltip-container{
-			display: grid;
+			display: flex;
 			align-items: center;
-			grid-template-columns: 1fr 12fr;
-			width: 100%;
+
+			.tooltip-container {
+				margin-bottom: $spacing-02;
+			}
 		}
 		&.error:not([disabled]) {
 			padding-bottom: $spacing-02;

package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx

@@ -21,7 +21,7 @@ import FlexibleTable from "./../../../components/flexible-table/flexible-table";
 import TruncatedContentTooltip from "./../../../components/truncated-content-tooltip";
 import { MESSAGE_KEYS, EXPRESSION_TABLE_ROWS, SORT_DIRECTION, ROW_SELECTION } from "./../../../constants/constants";
 import { formatMessage } from "./../../../util/property-utils";
-import { sortBy } from "lodash";
+import { sortBy, get } from "lodash";
 import { v4 as uuid4 } from "uuid";
 
 export default class ExpressionSelectFieldOrFunction extends React.Component {
@@ -47,6 +47,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		};
 		this.inCategories = Object.keys(props.functionList);
 		this.fields = this._makeDatasetFields(props.controller.getDatasetMetadataFields(), props.controller.getExpressionInfo().fields);
+		this.resources = get(props.controller.getExpressionInfo(), "resources", {});
 		this.state = {
 			fieldSelected: 0,
 			valueSelected: 0,
@@ -412,8 +413,13 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			valuesTableData = this.sortTableRows(valuesTableData, this.state.valuesTableSortSpec);
 			selectedValue = valuesTableData.findIndex((row) => row.rowKey === this.state.valueSelected);
 		}
+
 		const fieldsTableLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELDS_TABLE_LABEL);
 		const valuesTableLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUES_TABLE_LABEL);
+		const emptyFieldsLabel = get(this.resources, MESSAGE_KEYS.EXPRESSION_FIELDS_EMPTY_TABLE_LABEL,
+			formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELDS_EMPTY_TABLE_LABEL));
+		const emptyValuesLabel = get(this.resources, MESSAGE_KEYS.EXPRESSION_VALUES_EMPTY_TABLE_LABEL,
+			formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUES_EMPTY_TABLE_LABEL));
 
 		return (
 			<div className="properties-field-and-values-table-container" >
@@ -433,6 +439,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						onRowDoubleClick={this.onFieldTableDblClick}
 						onSort={this.setSortColumn.bind(this, "fieldTable")}
 						light={this.props.controller.getLight()}
+						emptyTablePlaceholder={emptyFieldsLabel}
 					/>
 				</div>
 				<div className="properties-value-table-container" >
@@ -450,6 +457,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						onRowDoubleClick={this.onValueTableDblClick}
 						onSort={this.setSortColumn.bind(this, "valuesTable")}
 						light={this.props.controller.getLight()}
+						emptyTablePlaceholder={emptyValuesLabel}
 					/>
 				</div>
 			</div>
@@ -585,6 +593,8 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			selectedFunction = data.findIndex((row) => row.rowKey === this.state.functionSelected);
 		}
 		const functionsTableLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FUNCTIONS_TABLE_LABEL);
+		const functionsEmptyLabel = get(this.resources, MESSAGE_KEYS.EXPRESSION_NO_FUNCTIONS,
+			formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_NO_FUNCTIONS));
 
 		return (
 			<div className="properties-functions-table-container" >
@@ -603,6 +613,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						onRowDoubleClick={this.onFunctionTableDblClick}
 						onSort={this.setSortColumn.bind(this, "functionTable")}
 						light={this.props.controller.getLight()}
+						emptyTablePlaceholder={functionsEmptyLabel}
 					/>
 				</div>
 				<div className="properties-help-table-container" >
@@ -621,8 +632,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 				const columns = [];
 				if (!this.state.functionFilterText || this.state.functionFilterText.length === 0 ||
 					(catFunction.locLabel.toLowerCase().indexOf(this.state.functionFilterText.toLowerCase()) > -1)) {
+					const returnType = catFunction.locReturnType ? catFunction.locReturnType : catFunction.return_type;
 					columns.push({ column: "function", content: this.createContentObject(catFunction.locLabel), value: catFunction.locLabel });
-					columns.push({ column: "return", content: this.createContentObject(catFunction.return_type), value: catFunction.return_type });
+					columns.push({ column: "return", content: this.createContentObject(returnType), value: returnType });
 					table.rows.push({ columns: columns, rowKey: index });
 					if (index === this.state.functionSelected) {
 						table.helpContainer = (

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

@@ -0,0 +1,74 @@
+/*
+ * 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.
+ */
+// Base class for table controls
+
+import React from "react";
+import PropTypes from "prop-types";
+import { injectIntl } from "react-intl";
+import { Button } from "carbon-components-react";
+import { Maximize16, Minimize16 } from "@carbon/icons-react";
+
+const maximizeId = "expression.maximize.label";
+const minimizeId = "expression.minimize.label";
+
+class ExpressionToggle extends React.Component {
+	constructor(props) {
+		super(props);
+		this.buttonHandler = props.controller.getHandlers().buttonHandler || (() => null);
+	}
+	render() {
+		return (
+			<div className="properties-expression-toggle">
+				<div className="properties-expression-toggle-absolute">
+					{this.props.enableMaximize ? (<Button
+						className="maximize"
+						type="button"
+						size="small"
+						kind="ghost"
+						renderIcon={Maximize16}
+						hasIconOnly
+						iconDescription={this.props.intl.formatMessage({ id: maximizeId })}
+						onClick={() => {
+							const handlerStatus = this.buttonHandler({
+								type: "maximize_tearsheet",
+								propertyId: this.props.control.data || {}
+							});
+							if (!handlerStatus && this.props.control.data && this.props.control.data.tearsheet_ref) {
+								this.props.controller.setActiveTearsheet(this.props.control.data.tearsheet_ref);
+							}
+						}}
+					/>) : (<Button
+						type="button"
+						className="minimize"
+						size="small"
+						kind="ghost"
+						hasIconOnly
+						renderIcon={Minimize16}
+						iconDescription={this.props.intl.formatMessage({ id: minimizeId })}
+						onClick={() => this.props.controller.clearActiveTearsheet()}
+					/>)
+					}
+				</div>
+			</div>);
+	}
+}
+ExpressionToggle.propTypes = {
+	intl: PropTypes.object.isRequired,
+	control: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	enableMaximize: PropTypes.bool
+};
+export default injectIntl(ExpressionToggle);

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

@@ -0,0 +1,12 @@
+.properties-expression-toggle {
+	position: relative;
+	z-index: 999;
+	.properties-expression-toggle-absolute {
+		position: absolute;
+		width: 100%;
+		button.bx--btn.bx--btn--icon-only {
+			position: absolute;
+			right: 0;
+		}
+	}
+}

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

@@ -32,6 +32,8 @@ import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE, DEFAULT_VALIDATION_MESSAGE } from
 import { Calculator24 } from "@carbon/icons-react";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants";
+import { get } from "lodash";
+import ExpressionToggle from "./expression-toggle/expression-toggle";
 
 import { register as registerPython } from "./languages/python-hint";
 import { register as registerR } from "./languages/r-hint";
@@ -353,12 +355,23 @@ class ExpressionControl extends React.Component {
 			</div>);
 		}
 
+		let toggleMaxMin = null;
+		if (this.props.control.enableMaximize) {
+			const isTearsheetOpen = this.props.controller.getActiveTearsheet() === get(this, "props.control.data.tearsheet_ref");
+			toggleMaxMin = (<ExpressionToggle
+				control={this.props.control}
+				controller={this.props.controller}
+				enableMaximize={!isTearsheetOpen}
+			/>);
+		}
+
 		return (
 			<div className="properties-expression-editor-wrapper" >
 				{this.props.controlItem}
 				{flyout}
 				<div className="properties-editor-container">
 					{header}
+					{toggleMaxMin}
 					<div ref={ (ref) => (this.expressionEditorDiv = ref) } data-id={ControlUtils.getDataId(this.props.propertyId)}
 						className={className}
 					>

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

@@ -15,6 +15,7 @@
  */
 
 @import "./expression-builder/expression-builder";
+@import "./expression-toggle/expression-toggle";
 
 .react-codemirror2 {
 	.CodeMirror {

package/src/common-properties/controls/expression/expressionInfo-parser.js

@@ -15,7 +15,7 @@
  */
 
 import logger from "../../../../utils/logger";
-import { L10nProvider } from "../../util/L10nProvider";
+import { L10nProvider, ResourceDef } from "../../util/L10nProvider";
 import { cloneDeep, propertyOf } from "lodash";
 
 function setExpressionInfo(inExpressionInfo) {
@@ -75,6 +75,11 @@ function setExpressionInfo(inExpressionInfo) {
 			}
 		}
 	}
+
+	if (inExpressionInfo && inExpressionInfo.resources) {
+		expressionFunctionInfo.resources = inExpressionInfo.resources;
+	}
+
 	return expressionFunctionInfo;
 }
 
@@ -85,6 +90,11 @@ function _genFunctionParameters(functionInfoList, l10nProvider) {
 		newEntry.locLabel = l10nProvider.l10nLabel(newEntry, newEntry.id);
 		newEntry.help = l10nProvider.l10nDesc(newEntry, newEntry.locLabel);
 		newEntry.value = newEntry.locLabel;
+		// Translatable return type of function
+		if (newEntry.return_type_label) {
+			const returnTypeLabel = ResourceDef.make(newEntry.return_type_label);
+			newEntry.locReturnType = l10nProvider.l10nResource(returnTypeLabel);
+		}
 		if (Array.isArray(functionInfo.parameters)) {
 			// if the function label has any parameter substituion char '?' then replace with parameter label
 			if (newEntry.locLabel && newEntry.locLabel.indexOf("?") !== -1) {

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextInput } from "carbon-components-react";
+import { TextInput, Form } from "carbon-components-react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants.js";
@@ -40,19 +40,21 @@ class PasswordControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<TextInput.PasswordInput
-					{...validationProps}
-					autoComplete="off"
-					id={this.id}
-					disabled={this.props.state === STATES.DISABLED}
-					placeholder={this.props.control.additionalText}
-					onChange={this.handleChange.bind(this)}
-					value={value}
-					labelText={this.props.controlItem}
-					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
-					tooltipAlignment="end"
-				/>
+				<Form>
+					<TextInput.PasswordInput
+						{...validationProps}
+						autoComplete="off"
+						id={this.id}
+						disabled={this.props.state === STATES.DISABLED}
+						placeholder={this.props.control.additionalText}
+						onChange={this.handleChange.bind(this)}
+						value={value}
+						labelText={this.props.controlItem}
+						hideLabel={this.props.tableControl}
+						light={this.props.controller.getLight()}
+						tooltipAlignment="end"
+					/>
+				</Form>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>);
 	}

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

@@ -31,7 +31,7 @@ import ReadonlyControl from "./../readonly";
 
 /* eslint max-depth: ["error", 6] */
 
-class SelectColumns extends AbstractTable {
+class SelectColumnsControl extends AbstractTable {
 
 	constructor(props) {
 		super(props);
@@ -170,7 +170,7 @@ class SelectColumns extends AbstractTable {
 	}
 }
 
-SelectColumns.propTypes = {
+SelectColumnsControl.propTypes = {
 	control: PropTypes.object.isRequired,
 	propertyId: PropTypes.object.isRequired,
 	controller: PropTypes.object.isRequired,
@@ -194,4 +194,4 @@ const mapStateToProps = (state, ownProps) => ({
 	tableButtons: ownProps.controller.getTableButtons(ownProps.propertyId)
 });
 
-export default connect(mapStateToProps, null)(SelectColumns);
+export default connect(mapStateToProps, null)(SelectColumnsControl);

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

@@ -68,6 +68,9 @@ export class Control {
 		if (settings.language) {
 			this.language = settings.language;
 		}
+		if (settings.enableMaximize) {
+			this.enableMaximize = settings.enableMaximize;
+		}
 		if (settings.charLimit) {
 			this.charLimit = settings.charLimit;
 		}

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

@@ -238,6 +238,17 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		}
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.TWISTY_PANEL, groupClassName, nestedPanel, panSubItems, groupLabel, group.open));
 	}
+	case GroupType.TEARSHEET_PANEL: {
+		groupLabel = l10nProvider.l10nLabel(group, group.name);
+		const panSubItems = [];
+		if (Array.isArray(group.subGroups)) {
+			group.subGroups.forEach(function(subGroup) {
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider);
+				panSubItems.push(groupItem);
+			});
+		}
+		return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), group.description);
+	}
 	default:
 		logger.warn("(Unknown group type '" + group.groupType() + "')");
 		return null;
@@ -605,6 +616,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.moveableRows = moveableRows;
 	settings.required = required;
 	settings.language = parameter.language;
+	settings.enableMaximize = parameter.enableMaximize;
 	settings.summary = parameter.summary;
 	settings.increment = parameter.increment;
 	settings.rowSelection = rowSelection;
@@ -625,7 +637,6 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
 	settings.buttons = buttons;
-
 	if (isSubControl) {
 		settings.visible = parameter.visible;
 		settings.width = parameter.columns(8);

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

@@ -113,6 +113,10 @@ export class ParameterDef {
 		if (settings.language) {
 			this.language = settings.language;
 		}
+		if (settings.enableMaximize) {
+			this.enableMaximize = settings.enableMaximize;
+		}
+
 		if (toType(settings.summary) === "boolean") {
 			this.summary = settings.summary;
 		}
@@ -314,6 +318,7 @@ export class ParameterDef {
 		if (param) {
 			return new ParameterDef({
 				"id": propertyOf(param)("id"),
+				"enableMaximize": propertyOf(uihint)("enable_maximize"),
 				"label": propertyOf(uihint)("label"),
 				"description": propertyOf(uihint)("description"),
 				"type": propertyOf(param)("type"),

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

@@ -123,4 +123,14 @@ export class UIItem {
 			className: className
 		});
 	}
+
+	static makeTearsheetPanel(control, description) {
+		return new UIItem({
+			itemType: ItemType.TEARSHEET,
+			panel: {
+				...control,
+				description
+			}
+		});
+	}
 }

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

@@ -22,3 +22,4 @@
 @import "./action-panel/action-panel";
 @import "./column/column";
 @import "./control/control";
+@import "./tearsheet/tearsheet";

package/src/common-properties/panels/tearsheet/index.js

@@ -0,0 +1,18 @@
+/*
+ * 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 TearSheet from "./tearsheet.jsx";
+export default TearSheet;

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

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+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;
+		return (
+			<Portal>
+				<ComposedModal
+					className="properties-tearsheet-panel"
+					open={this.state.open}
+					size="lg"
+					preventCloseOnClickOutside
+				>
+					<ModalHeader
+						title={title}
+						buttonOnClick={() => {
+							setTimeout(() => {
+								this.props.controller.clearActiveTearsheet();
+							}, 500);
+						}}
+					>
+						{description ? (<p>{description}</p>) : null}
+					</ModalHeader>
+					<ModalBody>
+						{this.props.children}
+					</ModalBody>
+				</ComposedModal>
+			</Portal>);
+	}
+}
+TearSheet.propTypes = {
+	panel: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	children: PropTypes.array
+};
+
+export default TearSheet;