@elyra/canvas 12.16.0 → 12.21.0

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();
@@ -6697,7 +6702,7 @@ export default class SVGCanvasRenderer {
 	// Return the x,y coordinates of the svg group relative to the window's viewport
 	// This is used when a new comment is created from the toolbar to make sure the
 	// new comment always appears in the view port.
-	getSvgViewportOffset() {
+	getDefaultCommentOffset() {
 		let xPos = this.canvasLayout.addCommentOffsetX;
 		let yPos = this.canvasLayout.addCommentOffsetY;
 
@@ -6710,10 +6715,11 @@ export default class SVGCanvasRenderer {
 			yPos = -yPos + this.canvasLayout.addCommentOffsetY;
 		}
 
-		return {
-			x_pos: xPos,
-			y_pos: yPos
-		};
+		if (this.config.enableSnapToGridType === SNAP_TO_GRID_DURING ||
+				this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
+			return this.snapToGridPosition({ x: xPos, y: yPos });
+		}
+		return { x: xPos, y: yPos };
 	}
 
 	// Returns a string that explains which flags are set to true.

package/src/common-properties/actions.js

@@ -37,11 +37,13 @@ export const SET_TITLE = "SET_TITLE";
 export const SET_ACTIVE_TAB = "SET_ACTIVE_TAB";
 export const DISABLE_ROW_MOVE_BUTTONS = "DISABLE_ROW_MOVE_BUTTONS";
 export const SET_SAVE_BUTTON_DISABLE = "SET_SAVE_BUTTON_DISABLE";
+export const SET_WIDE_FLYOUT_PRIMARY_BUTTON_DISABLED = "SET_WIDE_FLYOUT_PRIMARY_BUTTON_DISABLED";
 export const SET_ADD_REMOVE_ROWS = "SET_ADD_REMOVE_ROWS";
 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";
 
 
 /*
@@ -129,6 +131,10 @@ export function setSaveButtonDisable(disableState) {
 	return { type: SET_SAVE_BUTTON_DISABLE, disableState };
 }
 
+export function setWideFlyoutPrimaryButtonDisabled(info) {
+	return { type: SET_WIDE_FLYOUT_PRIMARY_BUTTON_DISABLED, info };
+}
+
 export function setAddRemoveRows(info) {
 	return { type: SET_ADD_REMOVE_ROWS, info };
 }
@@ -144,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/components/wide-flyout/wide-flyout.jsx

@@ -82,6 +82,7 @@ export default class WideFlyout extends Component {
 				showPropertiesButtons={this.props.showPropertiesButtons}
 				applyLabel={this.props.applyLabel}
 				rejectLabel={this.props.rejectLabel}
+				applyButtonEnabled={this.props.okButtonEnabled}
 			/>);
 			children = (<div className="properties-wf-children"> {this.props.children} </div>);
 		}
@@ -109,9 +110,11 @@ WideFlyout.propTypes = {
 	applyLabel: PropTypes.string,
 	rejectLabel: PropTypes.string,
 	title: PropTypes.string,
-	light: PropTypes.bool
+	light: PropTypes.bool,
+	okButtonEnabled: PropTypes.bool
 };
 
 WideFlyout.defaultProps = {
-	show: false
+	show: false,
+	okButtonEnabled: true
 };

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",
@@ -100,7 +102,9 @@ export const MESSAGE_KEYS = {
 	TOGGLETEXT_ICON_DESCRIPTION: "toggletext.icon.description",
 	MULTISELECT_DROPDOWN_EMPTY_LABEL: "multiselect.dropdown.empty.label",
 	MULTISELECT_DROPDOWN_OPTIONS_SELECTED_LABEL: "multiselect.dropdown.options.selected.label",
-	PROPERTIES_EMPTY_TABLE_TEXT: "properties.empty.table.text"
+	PROPERTIES_EMPTY_TABLE_TEXT: "properties.empty.table.text",
+	TOGGLE_ON_LABEL: "toggle.on.label",
+	TOGGLE_OFF_LABEL: "toggle.off.label"
 };
 
 export const TRUNCATE_LIMIT = 10000;
@@ -124,6 +128,11 @@ export const CONDITION_MESSAGE_TYPE = {
 
 export const SPINNER = "spinner";
 
+
+export const UPDATE_TYPE = {
+	INITIAL_LOAD: "initial_load"
+};
+
 export const DATA_TYPE = {
 	INTEGER: "integer",
 	DOUBLE: "double",

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 = {
@@ -78,6 +81,7 @@ const ControlType = {
 	TIMEFIELD: "timefield",
 	TIMESTAMP: "timestampfield",
 	CHECKBOX: "checkbox",
+	TOGGLE: "toggle",
 	RADIOSET: "radioset",
 	CHECKBOXSET: "checkboxset",
 	ONEOFSELECT: "oneofselect",

package/src/common-properties/controls/abstract-table.jsx

@@ -27,7 +27,7 @@ import classNames from "classnames";
 import { Add16, TrashCan16, Edit16 } from "@carbon/icons-react";
 import { ControlType, EditStyle } from "./../constants/form-constants";
 
-import { MESSAGE_KEYS, STATES, TABLE_SUBPANEL_BUTTON_WIDTH, SORT_DIRECTION, ROW_SELECTION } from "./../constants/constants";
+import { MESSAGE_KEYS, STATES, TABLE_SUBPANEL_BUTTON_WIDTH, SORT_DIRECTION, ROW_SELECTION, UPDATE_TYPE } from "./../constants/constants";
 
 import { isEqual, findIndex, sortBy, cloneDeep } from "lodash";
 
@@ -85,7 +85,7 @@ export default class AbstractTable extends React.Component {
 	componentDidMount() {
 		if (this.props.control.subControls) {
 			const updatedControlValues = this.setReadOnlyColumnValue();
-			this.props.controller.updatePropertyValue(this.props.propertyId, updatedControlValues, true);
+			this.props.controller.updatePropertyValue(this.props.propertyId, updatedControlValues, true, UPDATE_TYPE.INITIAL_LOAD);
 		}
 	}
 

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/control-factory.js

@@ -35,6 +35,7 @@ import NumberfieldControl from "./numberfield";
 import DatefieldControl from "./datefield";
 import TimefieldControl from "./timefield";
 import CheckboxControl from "./checkbox";
+import ToggleControl from "./toggle";
 import CheckboxsetControl from "./checkboxset";
 import RadiosetControl from "./radioset";
 import Dropdown from "./dropdown";
@@ -66,6 +67,7 @@ const accessibleControls = [
 	ControlType.TIMEFIELD,
 	ControlType.TOGGLETEXT,
 	ControlType.LIST,
+	ControlType.TOGGLE,
 	ControlType.SOMEOFSELECT,
 	ControlType.SELECTCOLUMNS,
 	ControlType.READONLY,
@@ -183,6 +185,9 @@ export default class ControlFactory {
 		case (ControlType.TEXTAREA):
 			createdControl = (<TextareaControl {...props} />);
 			break;
+		case (ControlType.TOGGLE):
+			createdControl = (<ToggleControl {...props} />);
+			break;
 		case (ControlType.LIST):
 			createdControl = (<ListControl {...props} />);
 			break;

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

@@ -17,6 +17,7 @@
 @import "./readonly/readonly";
 @import "./selectcolumns/selectcolumns";
 @import "./checkbox/checkbox";
+@import "./toggle/toggle";
 @import "./checkboxset/checkboxset";
 @import "./dropdown/dropdown";
 @import "./expression/expression";

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

@@ -24,7 +24,7 @@ import ValidationMessage from "./../../components/validation-message";
 import classNames from "classnames";
 import * as PropertyUtils from "./../../util/property-utils.js";
 import { ControlType } from "./../../constants/form-constants";
-import { MESSAGE_KEYS, STATES } from "./../../constants/constants.js";
+import { MESSAGE_KEYS, STATES, UPDATE_TYPE } from "./../../constants/constants.js";
 import { formatMessage } from "./../../util/property-utils";
 
 class DropDown extends React.Component {
@@ -46,7 +46,7 @@ class DropDown extends React.Component {
 	}
 
 	componentDidMount() {
-		this.updateValueFromFilterEnum(true);
+		this.updateValueFromFilterEnum(true, UPDATE_TYPE.INITIAL_LOAD);
 	}
 
 	componentDidUpdate(prevProps) {
@@ -63,8 +63,10 @@ class DropDown extends React.Component {
 		});
 		selectedOption = typeof selectedOption === "undefined" ? null : selectedOption;
 
+		// Show the existing value but with a warning instead of filtering it out.
+		const showExistingValue = (selectedOption === null && value);
 		// user defined value
-		if (selectedOption === null && this.props.control.customValueAllowed) {
+		if (showExistingValue || this.props.control.customValueAllowed) {
 			selectedOption = {
 				value: value,
 				label: value
@@ -132,7 +134,7 @@ class DropDown extends React.Component {
 		};
 	}
 	// this is needed in order to reset the property value when a value is filtered out.
-	updateValueFromFilterEnum(skipValidateInput) {
+	updateValueFromFilterEnum(skipValidateInput, updateType) {
 		// update property value if value isn't in current enum value.  Should only be used for oneofselect
 		if (this.props.control.controlType === ControlType.ONEOFSELECT && this.props.value !== null && typeof this.props.value !== "undefined" &&
 			!this.props.controlOpts.values.includes(this.props.value)) {
@@ -143,7 +145,7 @@ class DropDown extends React.Component {
 			} else if (this.props.control.customValueAllowed && this.props.value) {
 				defaultValue = this.props.value;
 			}
-			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput);
+			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput, updateType);
 		}
 	}
 

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";
@@ -312,7 +314,8 @@ class ExpressionControl extends React.Component {
 			theme: theme + " custom",
 			readOnly: (this.props.state === STATES.DISABLED) ? "nocursor" : false,
 			extraKeys: { "Ctrl-Space": "autocomplete" },
-			autoRefresh: true
+			autoRefresh: true,
+			lineNumbers: true
 		};
 		const applyLabel = formatMessage(reactIntl, MESSAGE_KEYS.APPLYBUTTON_LABEL);
 		const rejectLabel = formatMessage(reactIntl, MESSAGE_KEYS.REJECTBUTTON_LABEL);
@@ -352,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}
 					>