@elyra/canvas 12.14.0 → 12.20.0

package/src/common-canvas/svg-canvas-utils-decs.js

@@ -30,11 +30,6 @@ export default class SvgCanvasDecs {
 		return null;
 	}
 
-	getDecLabelForeignClass(dec) {
-		const outlineClass = dec.label_outline ? " d3-node-label-outline" : "";
-		return "d3-foreign-object" + outlineClass;
-	}
-
 	getDecLabelClass(dec, objType) {
 		const lineTypeClass = dec.label_single_line ? " d3-label-single-line" : " d3-label-multi-line";
 		const justificationClass = dec.label_align === "center" ? " d3-label-center" : "";

package/src/common-canvas/svg-canvas-utils-links.js

@@ -212,7 +212,11 @@ export default class SvgCanvasLinks {
 			srcCenterX,
 			srcCenterY);
 
-		return { x1: startPos.x, y1: startPos.y, x2: endPos.x, y2: endPos.y };
+		return {
+			originX: startPos.originX, originY: startPos.originY,
+			x1: startPos.x, y1: startPos.y,
+			x2: endPos.x, y2: endPos.y
+		};
 	}
 
 	getCenterOffset(node, originInfo) {

package/src/common-canvas/svg-canvas-utils-nodes.js

@@ -23,13 +23,15 @@ export default class SvgCanvasNodes {
 		this.canvasLayout = canvasLayout;
 	}
 
-	getNodeImageClass(node) {
-		return "d3-node-image";
+	isPointInNodeBoundary(pos, node) {
+		return pos.x >= node.x_pos &&
+			pos.x <= node.x_pos + node.width &&
+			pos.y >= node.y_pos &&
+			pos.y <= node.y_pos + node.height;
 	}
 
-	getNodeLabelForeignClass(node) {
-		const outlineClass = node.layout.labelOutline ? " d3-node-label-outline" : "";
-		return "d3-foreign-object" + outlineClass;
+	getNodeImageClass(node) {
+		return "d3-node-image";
 	}
 
 	getNodeLabelClass(node) {
@@ -341,6 +343,22 @@ export default class SvgCanvasNodes {
 		return node.layout.errorHeight;
 	}
 
+	getNodeInputPortLeftPosX(node) {
+		return this.getElementPosX(node.width, node.layout.inputPortLeftPosX, node.layout.inputPortLeftPosition);
+	}
+
+	getNodeInputPortLeftPosY(node) {
+		return this.getElementPosY(node.height, node.layout.inputPortLeftPosY, node.layout.inputPortLeftPosition);
+	}
+
+	getNodeOutputPortRightPosX(node) {
+		return this.getElementPosX(node.width, node.layout.outputPortRightPosX, node.layout.outputPortRightPosition);
+	}
+
+	getNodeOutputPortRightPosY(node) {
+		return this.getElementPosY(node.height, node.layout.outputPortRightPosY, node.layout.outputPortRightPosition);
+	}
+
 	getElementPosX(width, xOffset = 0, position = "topLeft") {
 		let x = 0;
 

package/src/common-canvas/svg-canvas-utils-textarea.js

@@ -0,0 +1,472 @@
+/*
+ * 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.
+ */
+/* eslint no-invalid-this: "off" */
+
+import * as d3Selection from "d3-selection";
+const d3 = Object.assign({}, d3Selection);
+
+import { unescape as unescapeText } from "lodash";
+
+import Logger from "../logging/canvas-logger.js";
+import CanvasUtils from "./common-canvas-utils.js";
+import SvgCanvasMarkdown from "./svg-canvas-utils-markdown.js";
+
+const BACKSPACE_KEY = 8;
+const RETURN_KEY = 13;
+const ESC_KEY = 27;
+const LEFT_ARROW_KEY = 37;
+const UP_ARROW_KEY = 38;
+const RIGHT_ARROW_KEY = 39;
+const DOWN_ARROW_KEY = 40;
+const DELETE_KEY = 46;
+const A_KEY = 65;
+const B_KEY = 66;
+const E_KEY = 69;
+const I_KEY = 73;
+const K_KEY = 75;
+const X_KEY = 88;
+const LAB_KEY = 188; // Left angle bracket <
+const RAB_KEY = 190; // Right angle bracket >
+const SEVEN_KEY = 55;
+const EIGHT_KEY = 56;
+
+const SCROLL_PADDING = 12;
+
+export default class SvgCanvasTextArea {
+
+	constructor(config, dispUtils, nodeUtils, decUtils, canvasController,
+		canvasDiv, activePipeline, displayCommentsCallback, displayLinksCallback, getCommentToolbarPosCallback) {
+
+		this.config = config;
+		this.dispUtils = dispUtils;
+		this.nodeUtils = nodeUtils;
+		this.decUtils = decUtils;
+		this.canvasController = canvasController;
+		this.canvasDiv = canvasDiv;
+		this.activePipeline = activePipeline;
+		this.displayCommentsCallback = displayCommentsCallback;
+		this.displayLinksCallback = displayLinksCallback;
+		this.getCommentToolbarPosCallback = getCommentToolbarPosCallback;
+
+		this.logger = new Logger("SvgCanvasTextArea");
+
+		// Allows us to track the editing of text (either comments or node labels)
+		this.editingText = false;
+		this.editingTextId = "";
+
+		// Keeps track of when text is in the process of being added.
+		this.addingTextToTextArea = false;
+
+		// Keeps track of textarea height.
+		this.textAreaHeight = null;
+	}
+
+	isEditingText() {
+		return this.editingText;
+	}
+
+	getEditingTextId() {
+		return this.editingTextId;
+	}
+
+	displayCommentTextArea(d, parentDomObj) {
+		this.editingTextData = {
+			id: d.id,
+			text: d.content,
+			singleLine: false,
+			maxCharacters: null,
+			allowReturnKey: true,
+			textCanBeEmpty: true,
+			xPos: 0,
+			yPos: 0,
+			width: d.width,
+			height: d.height,
+			className: "d3-comment-entry",
+			parentDomObj: parentDomObj,
+			keyboardInputCallback: this.config.enableMarkdownInComments ? this.commentKeyboardHandler.bind(this) : null,
+			autoSizeCallback: this.autoSizeComment.bind(this),
+			saveTextChangesCallback: this.saveCommentChanges.bind(this),
+			closeTextAreaCallback: this.closeCommentTextArea.bind(this)
+		};
+		this.displayTextArea(this.editingTextData);
+
+		if (this.config.enableMarkdownInComments && this.dispUtils.isDisplayingFullPage()) {
+			const pos = this.getCommentToolbarPosCallback(d);
+			this.canvasController.openTextToolbar(pos.x, pos.y,
+				this.markdownActionHandler.bind(this),
+				this.blurInTextToolbar.bind(this));
+		}
+	}
+
+	// Handles markdown actions initiated through the keyboard.
+	commentKeyboardHandler(d3Event) {
+		const action = this.getMarkdownAction(d3Event);
+		if (action) {
+			if (action !== "return") {
+				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+			}
+			this.markdownActionHandler(action, d3Event);
+		}
+	}
+
+	// Called when the blur event occurs for the text toolbar.
+	blurInTextToolbar(evt) {
+		// When Cypress tests are running a call to focus() in addTextToTextArea()
+		// can cause an incorrect blur event to be generated for the text toolbar
+		// (where relatedTarget is null). This flag therefore allows us to avoid
+		// thus blue events that occur while addTextToTextArea() is executing.
+		if (this.addingTextToTextArea) {
+			return;
+		}
+
+		// If there is a relatedTarget and it is set to one of the elements for the
+		// textarea, texttoolbar, etc we ignore the blur event.
+		if (evt.relatedTarget &&
+				(CanvasUtils.getParentElementWithClass(evt.relatedTarget, "d3-comment-entry") ||
+					CanvasUtils.getParentElementWithClass(evt.relatedTarget, "text-toolbar") ||
+					CanvasUtils.getParentElementWithClass(evt.relatedTarget, "bx--overflow-menu-options__btn"))) {
+			return;
+		}
+
+		// If the blur event is ocurring for an object outside of the textarea and
+		// text toolbar we save the current text and close the textarea.
+		const commentParent = d3.select(this.editingTextData.parentDomObj);
+		const foreignObject = commentParent.selectAll(".d3-foreign-object-text-entry");
+		const commentEntry = this.canvasDiv.selectAll(".d3-comment-entry");
+		const commentEntryElement = commentEntry.node();
+		this.saveAndCloseTextArea(foreignObject, this.editingTextData, commentEntryElement.value, evt);
+	}
+
+	// Applies a markdown action to the comment text being edited using
+	// the same commands as the toolbar.
+	getMarkdownAction(d3Event) {
+		if (CanvasUtils.isCmndCtrlPressed(d3Event)) {
+			switch (d3Event.keyCode) {
+			case B_KEY: return "bold";
+			case I_KEY: return "italics";
+			case X_KEY: return d3Event.shiftKey ? "strikethrough" : null;
+			case SEVEN_KEY: return d3Event.shiftKey ? "numberedList" : null;
+			case EIGHT_KEY: return d3Event.shiftKey ? "bulletedList" : null;
+			case E_KEY: return "code";
+			case K_KEY: return "link";
+			case LAB_KEY: return "decreaseHashes";
+			case RAB_KEY: return d3Event.shiftKey ? "quote" : "increaseHashes";
+			default:
+			}
+		} else if (d3Event.keyCode === RETURN_KEY) {
+			return "return";
+		}
+
+		return null;
+	}
+
+	// Handles any actions requested on the comment text to add markdown
+	// characters to the text. evt can be either a d3Event object from D3 when
+	// this method is called from keyboard entry in the textarea or it can be
+	// a synthetic event object from React when called from the text toolbar.
+	markdownActionHandler(action, evt) {
+		this.logger.log("markdownActionHandler - action = " + action);
+
+		const commentEntry = this.canvasDiv.selectAll(".d3-comment-entry");
+		const commentEntryElement = commentEntry.node();
+		const start = commentEntryElement.selectionStart;
+		const end = commentEntryElement.selectionEnd;
+		const text = commentEntryElement.value;
+
+		const mdObj = SvgCanvasMarkdown.processMarkdownAction(action, text, start, end);
+		if (mdObj) {
+			CanvasUtils.stopPropagationAndPreventDefault(evt);
+			this.addTextToTextArea(mdObj, commentEntryElement);
+		}
+	}
+
+	// Replaces the text in the currently displayed textarea with the text
+	// passed in. We use execCommand because this adds the inserted text to the
+	// textarea's undo/redo stack whereas setting the text directly into the
+	// textarea control does not.
+	addTextToTextArea(mdObj, commentEntryElement) {
+		this.addingTextToTextArea = true;
+		const text = unescapeText(mdObj.newText);
+		commentEntryElement.focus();
+		commentEntryElement.select();
+		document.execCommand("insertText", false, text);
+		commentEntryElement.setSelectionRange(mdObj.newStart, mdObj.newEnd);
+		this.addingTextToTextArea = false;
+	}
+
+	autoSizeComment(textArea, foreignObject, data) {
+		this.logger.log("autoSizeComment - textAreaHt = " + this.textAreaHeight + " scroll ht = " + textArea.scrollHeight);
+
+		const scrollHeight = textArea.scrollHeight + SCROLL_PADDING;
+		if (this.textAreaHeight < scrollHeight) {
+			this.textAreaHeight = scrollHeight;
+			foreignObject.style("height", this.textAreaHeight + "px");
+			this.activePipeline.getComment(data.id).height = this.textAreaHeight;
+			this.displayCommentsCallback();
+			this.displayLinksCallback();
+		}
+	}
+
+	saveCommentChanges(id, newText, newHeight) {
+		const comment = this.activePipeline.getComment(id);
+		const data = {
+			editType: "editComment",
+			editSource: "canvas",
+			id: comment.id,
+			content: newText,
+			width: comment.width,
+			height: newHeight,
+			x_pos: comment.x_pos,
+			y_pos: comment.y_pos,
+			pipelineId: this.activePipeline.id
+		};
+		this.canvasController.editActionHandler(data);
+	}
+
+	closeCommentTextArea() {
+		this.canvasController.closeTextToolbar();
+	}
+
+	displayNodeLabelTextArea(node, parentDomObj) {
+		d3.select(parentDomObj)
+			.selectAll("div")
+			.attr("style", "display:none;");
+
+		this.editingTextData = {
+			id: node.id,
+			text: node.label,
+			singleLine: node.layout.labelSingleLine,
+			maxCharacters: node.layout.labelMaxCharacters,
+			allowReturnKey: node.layout.labelAllowReturnKey,
+			textCanBeEmpty: false,
+			xPos: this.nodeUtils.getNodeLabelTextAreaPosX(node),
+			yPos: this.nodeUtils.getNodeLabelTextAreaPosY(node),
+			width: this.nodeUtils.getNodeLabelTextAreaWidth(node),
+			height: this.nodeUtils.getNodeLabelTextAreaHeight(node),
+			className: this.nodeUtils.getNodeLabelTextAreaClass(node),
+			parentDomObj: parentDomObj,
+			autoSizeCallback: this.autoSizeMultiLineLabel.bind(this),
+			saveTextChangesCallback: this.saveNodeLabelChanges.bind(this),
+			closeTextAreaCallback: this.closeNodeLabelTextArea.bind(this)
+		};
+		this.displayTextArea(this.editingTextData);
+	}
+
+	// Increases the size of the editable multi-line text area for a label based
+	//  on the characters entered, and also ensures the maximum number of
+	//  characters for the label, if one is provided, is not exceeded.
+	// This callback works for editable multi-line node labels and also
+	// editable multi-line text decorations for either nodes or links.
+	autoSizeMultiLineLabel(textArea, foreignObject, data) {
+		this.logger.log("autoSizeNodeLabel - textAreaHt = " + this.textAreaHeight + " scroll ht = " + textArea.scrollHeight);
+
+		// Restrict max characters in case text was pasted in to the text area.
+		if (data.maxCharacters &&
+				textArea.value.length > data.maxCharacters) {
+			textArea.value = textArea.value.substring(0, data.maxCharacters);
+		}
+		// Temporarily set the height to zero so the scrollHeight will get set to
+		// the full height of the text in the textarea. This allows us to close up
+		// the text area when the lines of text reduce.
+		foreignObject.style("height", 0);
+		const scrollHeight = textArea.scrollHeight + SCROLL_PADDING;
+		this.textAreaHeight = scrollHeight;
+		foreignObject.style("height", this.textAreaHeight + "px");
+	}
+
+	saveNodeLabelChanges(id, newText, newHeight, taData) {
+		const data = {
+			editType: "setNodeLabel",
+			editSource: "canvas",
+			nodeId: id,
+			label: newText,
+			pipelineId: this.activePipeline.id
+		};
+		this.canvasController.editActionHandler(data);
+	}
+
+	// Called when the node label text area is closed. Sets the style of the
+	// div for the node label so the label is displayed (because it was hidden
+	// when the text area opened).
+	closeNodeLabelTextArea(nodeId) {
+		d3.select(this.editingTextData.parentDomObj)
+			.selectAll("div")
+			.attr("style", null);
+	}
+
+	// Displays a text area for an editable text decoration on either a node
+	// or link.
+	displayDecLabelTextArea(dec, obj, objType, parentDomObj) {
+		this.displayTextArea({
+			id: dec.id,
+			text: dec.label,
+			singleLine: dec.label_single_line || false,
+			maxCharacters: dec.label_max_characters || null,
+			allowReturnKey: dec.label_allow_return_key || false,
+			textCanBeEmpty: false,
+			xPos: this.decUtils.getDecLabelTextAreaPosX(),
+			yPos: this.decUtils.getDecLabelTextAreaPosY(),
+			width: this.decUtils.getDecLabelTextAreaWidth(dec, obj, objType),
+			height: this.decUtils.getDecLabelTextAreaHeight(dec, obj, objType),
+			className: this.decUtils.getDecLabelTextAreaClass(dec),
+			parentDomObj: parentDomObj,
+			objId: obj.id,
+			objType: objType,
+			autoSizeCallback: this.autoSizeMultiLineLabel.bind(this),
+			saveTextChangesCallback: this.saveDecLabelChanges.bind(this),
+			closeTextAreaCallback: null
+		});
+	}
+
+	// Handles saved changes to editable text decorations.
+	saveDecLabelChanges(id, newText, newHeight, taData) {
+		const data = {
+			editType: "editDecorationLabel",
+			editSource: "canvas",
+			decId: id,
+			objId: taData.objId,
+			objType: taData.objType,
+			label: newText,
+			pipelineId: this.activePipeline.id
+		};
+		this.canvasController.editActionHandler(data);
+	}
+
+	// Displays a text area to allow text entry and editing for: comments;
+	// node labels; or text decorations on either a node or link.
+	displayTextArea(data) {
+		this.textAreaHeight = data.height; // Save for comparison during auto-resize
+		this.editingText = true;
+		this.editingTextId = data.id;
+
+		const foreignObject = d3.select(data.parentDomObj)
+			.append("foreignObject")
+			.attr("class", "d3-foreign-object-text-entry")
+			.attr("width", data.width)
+			.attr("height", data.height)
+			.attr("x", data.xPos)
+			.attr("y", data.yPos);
+
+		const textArea = foreignObject
+			.append("xhtml:textarea")
+			.attr("class", data.className)
+			.text(unescapeText(data.text))
+			.on("keydown", (d3Event) => {
+				// Don't accept return key press when text is all on one line or
+				// if application doesn't want line feeds inserted in the label.
+				if ((data.singleLine || !data.allowReturnKey) &&
+						d3Event.keyCode === RETURN_KEY) {
+					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+				}
+				// If user presses ESC key revert back to original text by just
+				// closing the text area.
+				if (d3Event.keyCode === ESC_KEY) {
+					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+					this.textAreaEscKeyPressed = true;
+					this.closeTextArea(foreignObject, data);
+				}
+				// Prevent user entering more than any allowed maximum for characters.
+				if (data.maxCharacters &&
+						d3Event.target.value.length >= data.maxCharacters &&
+						!this.textAreaAllowedKeys(d3Event)) {
+					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+				}
+				// Call any specific keyboard handler for the type of
+				// text being edited.
+				if (data.keyboardInputCallback) {
+					data.keyboardInputCallback(d3Event);
+				}
+			})
+			.on("keyup", (d3Event) => {
+				data.autoSizeCallback(d3Event.target, foreignObject, data);
+			})
+			.on("paste", (d3Event) => {
+				this.logger.log("Text area - Paste - Scroll Ht = " + d3Event.target.scrollHeight);
+				// Allow some time for pasted text (from context menu) to be
+				// loaded into the text area. Otherwise the text is not there
+				// and the auto size does not increase the height correctly.
+				setTimeout(data.autoSizeCallback, 500, d3Event.target, foreignObject, data);
+			})
+			.on("blur", (d3Event, d) => {
+				this.logger.log("Text area - blur");
+				// If the esc key was pressed to cause the blur event just return
+				// so label returns to what it was before editing started.
+				if (this.textAreaEscKeyPressed) {
+					this.textAreaEscKeyPressed = false;
+					return;
+				}
+
+				// If the user clicked on an element in the text toolbar to cause the
+				// blur event, just return.
+				if (d3Event.relatedTarget && CanvasUtils.getParentElementWithClass(d3Event.relatedTarget, "text-toolbar")) {
+					return;
+				}
+
+				this.saveAndCloseTextArea(foreignObject, data, d3Event.target.value, d3Event);
+			})
+			.on("focus", (d3Event, d) => {
+				this.logger.log("Text area - focus");
+				data.autoSizeCallback(d3Event.target, foreignObject, data);
+			})
+			.on("mousedown click dblclick contextmenu", (d3Event, d) => {
+				d3Event.stopPropagation(); // Allow default behavior to show system contenxt menu
+			});
+
+		textArea.node().focus();
+
+		// Set the cusrsor to the end of the text.
+		textArea.node().setSelectionRange(data.text.length, data.text.length);
+	}
+
+	saveAndCloseTextArea(foreignObject, data, newValue, d3Event) {
+		// If there is no text for the label and textCanBeEmpty is false
+		// just return, so label returns to what it was before editing started.
+		if (!newValue && !data.textCanBeEmpty) {
+			CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+			this.closeTextArea(foreignObject, data);
+			return;
+		}
+		const newText = newValue; // Save the text before closing the foreign object
+		this.closeTextArea(foreignObject, data);
+		if (data.text !== newText || this.textAreaHeight !== data.height) {
+			this.isCommentBeingUpdated = true;
+			data.saveTextChangesCallback(data.id, newText, this.textAreaHeight, data);
+			this.isCommentBeingUpdatd = false;
+		}
+	}
+
+	// Closes the text area and resets the flags.
+	closeTextArea(foreignObject, data) {
+		if (data.closeTextAreaCallback) {
+			data.closeTextAreaCallback(data.id);
+		}
+		foreignObject.remove();
+		this.editingText = false;
+		this.editingTextId = "";
+	}
+
+	// Returns true if one of the keys that are allowed in the text area, when
+	// checking for maximum characters, has been pressed.
+	textAreaAllowedKeys(d3Event) {
+		return d3Event.keyCode === DELETE_KEY ||
+			d3Event.keyCode === BACKSPACE_KEY ||
+			d3Event.keyCode === LEFT_ARROW_KEY ||
+			d3Event.keyCode === RIGHT_ARROW_KEY ||
+			d3Event.keyCode === UP_ARROW_KEY ||
+			d3Event.keyCode === DOWN_ARROW_KEY ||
+			(d3Event.keyCode === A_KEY && CanvasUtils.isCmndCtrlPressed(d3Event));
+	}
+}

package/src/common-properties/actions.js

@@ -37,6 +37,7 @@ 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";
@@ -129,6 +130,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 };
 }

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

@@ -24,7 +24,7 @@ import { TextInput, Button } from "carbon-components-react";
 import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
 import * as PropertyUtils from "./../../util/property-utils";
 import classNames from "classnames";
-import { Information16, Edit16, Close16 } from "@carbon/icons-react";
+import { Help16, Edit16, Close16 } from "@carbon/icons-react";
 
 
 class TitleEditor extends Component {
@@ -121,7 +121,7 @@ class TitleEditor extends Component {
 				data-id="help"
 				onClick={this.helpClickHandler}
 				tooltipPosition="bottom"
-				renderIcon={Information16}
+				renderIcon={Help16}
 				size="small"
 				iconDescription={helpButtonLabel}
 				hasIconOnly

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

@@ -34,7 +34,7 @@
 	}
 	.properties-title-editor-btn.help {
 		&.help {
-			margin: 0 0 0 $spacing-02; // spacing between heading label and help button
+			margin-left: $spacing-02; // spacing between heading label and help button
 		}
 	}
 }
@@ -84,21 +84,6 @@
 	width: calc(100% - 2px); // subtract 2px for input active right border
 }
 
-.properties-title-editor-btn.help, .properties-title-editor-btn.edit {
-	fill: $icon-02;
-	// edit & help buttons size - 32x32
-	width: $spacing-07;
-	min-height: $spacing-07;
-	padding-left: $spacing-04;
-	padding-right: $spacing-04;
-	&:hover {
-		background-color: $ui-03;
-	}
-	&:active {
-		background-color: $ui-03;
-	}
-}
-
 // Close icon without heading
 .properties-close-button {
 	position: relative;

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

@@ -396,6 +396,11 @@ class VirtualizedTable extends React.Component {
 					onMouseLeave={(evt) => this.overSelectOption(evt)}
 					onFocus={(evt) => this.overSelectOption(evt)}
 					onBlur={(evt) => this.overSelectOption(evt)}
+					onKeyDown={(evt) => {
+						if (evt.code === "Space" || evt.code === "Enter") {
+							this.onRowClick(evt, rowData, index);
+						}
+					}}
 				>
 					<Checkbox
 						id={`properties-vt-row-cb-${scrollKey}-${index}`}
@@ -442,11 +447,6 @@ class VirtualizedTable extends React.Component {
 				role="row"
 				style={newStyle}
 				onMouseDown={(evt) => this.onRowClick(evt, rowData, index)}
-				onKeyPress={(evt) => {
-					if (evt.code === "Space" || evt.code === "Enter") {
-						this.onRowClick(evt, rowData, index);
-					}
-				}}
 			>
 				{selectOption}
 				{columns}

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

@@ -100,7 +100,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 +126,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

@@ -78,6 +78,7 @@ const ControlType = {
 	TIMEFIELD: "timefield",
 	TIMESTAMP: "timestampfield",
 	CHECKBOX: "checkbox",
+	TOGGLE: "toggle",
 	RADIOSET: "radioset",
 	CHECKBOXSET: "checkboxset",
 	ONEOFSELECT: "oneofselect",