@elyra/canvas 12.23.1 → 12.24.0

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

@@ -87,7 +87,11 @@ export default class SvgCanvasLinks {
 	// Returns the lineArray passed in with connection path info added to it.
 	addConnectionPaths(links) {
 		links.forEach((link) => {
-			link.pathInfo = this.getConnectorPathInfo(link);
+			// Only necessary to get the path info, if the start and end coords of
+			// the link have changed.
+			if (link.coordsUpdated) {
+				link.pathInfo = this.getConnectorPathInfo(link);
+			}
 		});
 		return links;
 	}
@@ -592,11 +596,13 @@ export default class SvgCanvasLinks {
 		elements.push(
 			{ p: "M", x: data.x1, y: data.y1 },
 			{ p: "L", x: (corner1X - this.canvasLayout.elbowSize), y: corner1Y },
-			{ p: "Q", x: corner1X, y: corner1Y, x2: corner1X, y2: (corner1Y + elbowYOffset) }
 		);
 
 		if (extraSegments === false) {
-			elements.push({ p: "L", x: corner2X, y: (corner2Y - elbowYOffset) });
+			elements.push(
+				{ p: "Q", x: corner1X, y: corner1Y, x2: corner1X, y2: (corner1Y + elbowYOffset) },
+				{ p: "L", x: corner2X, y: (corner2Y - elbowYOffset) }
+			);
 
 			centerPoint.x = corner2X;
 			centerPoint.y = corner2Y;
@@ -606,6 +612,14 @@ export default class SvgCanvasLinks {
 				? this.calculateMidY(data, topSrc, bottomSrc, topTrg, bottomTrg)
 				: corner2Y - (corner2Y - corner1Y) / 2;
 
+			if (xDiff < 0) {
+				if (midY >= bottomSrc) {
+					elbowYOffset = this.canvasLayout.elbowSize;
+				} else {
+					elbowYOffset = -this.canvasLayout.elbowSize;
+				}
+			}
+
 			let corner2Ya;
 			let corner2Yb;
 
@@ -613,12 +627,14 @@ export default class SvgCanvasLinks {
 					(midY > bottomTrg && midY > bottomSrc)) {
 				corner2Ya = midY - elbowYOffset;
 				corner2Yb = corner2Y + elbowYOffset;
+
 			} else {
 				corner2Ya = midY + elbowYOffset;
 				corner2Yb = corner2Y - elbowYOffset;
 			}
 
 			elements.push(
+				{ p: "Q", x: corner1X, y: corner1Y, x2: corner1X, y2: (corner1Y + elbowYOffset) },
 				{ p: "L", x: corner1X, y: (midY - elbowYOffset) },
 				{ p: "Q", x: corner1X, y: midY, x2: (corner1X - elbowXOffset), y2: midY },
 				{ p: "L", x: (corner2X + elbowXOffset), y: midY },
@@ -643,19 +659,33 @@ export default class SvgCanvasLinks {
 	// the target node is to the left of the source node. This is either the
 	// center point between the source and target nodes, if there is room to draw
 	// the line between them, or it is the coordinate of a wrap-around line to be
-	// drawn around the outside of the source and target nodes.
+	// drawn around the outside of the source and target nodes. The direction of
+	// the wrap around line is chosen based on which is the shortest route from
+	// the source port to the target port.
 	calculateMidY(data, topSrc, bottomSrc, topTrg, bottomTrg) {
 		let midY;
 
 		if (topTrg >= bottomSrc + this.canvasLayout.wrapAroundNodePadding) {
 			midY = bottomSrc + ((topTrg - bottomSrc) / 2);
+
 		} else if (bottomTrg <= topSrc - this.canvasLayout.wrapAroundNodePadding) {
 			midY = bottomTrg + ((topSrc - bottomTrg) / 2);
+
 		} else {
-			if (data.y1 > data.y2) {
-				midY = Math.min(topSrc, topTrg) - this.canvasLayout.wrapAroundSpacing;
+			const maxBottom = Math.max(bottomSrc, bottomTrg);
+			const srcBottomInc = maxBottom - data.y1;
+			const trgBottomInc = maxBottom - data.y2;
+
+			const minTop = Math.min(topSrc, topTrg);
+			const srcTopInc = data.y1 - minTop;
+			const trgTopInc = data.y2 - minTop;
+
+			// Set the mid-point based in the shortest distance from the source port
+			// on the source node to the target port on the target node.
+			if (srcBottomInc + trgBottomInc > srcTopInc + trgTopInc) {
+				midY = minTop - this.canvasLayout.wrapAroundSpacing;
 			} else {
-				midY = Math.max(bottomSrc, bottomTrg) + this.canvasLayout.wrapAroundSpacing;
+				midY = maxBottom + this.canvasLayout.wrapAroundSpacing;
 			}
 		}
 

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

@@ -502,8 +502,6 @@ export default class SvgCanvasUtilsComments {
 					finished = true; // As soon as we hit a line without a number we finished renumbering
 				}
 			}
-
-			newText += "\n";
 		});
 		return newText;
 	}

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

@@ -127,7 +127,7 @@ export default class SvgCanvasTextArea {
 		// 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.
+		// that blur event that occurs while addTextToTextArea() is executing.
 		if (this.addingTextToTextArea) {
 			return;
 		}
@@ -143,11 +143,7 @@ export default class SvgCanvasTextArea {
 
 		// 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);
+		this.completeEditing(evt);
 	}
 
 	// Applies a markdown action to the comment text being edited using
@@ -207,13 +203,13 @@ export default class SvgCanvasTextArea {
 		this.addingTextToTextArea = false;
 	}
 
-	autoSizeComment(textArea, foreignObject, data) {
+	autoSizeComment(textArea, 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.foreignObject.style("height", this.textAreaHeight + "px");
 			this.activePipeline.getComment(data.id).height = this.textAreaHeight;
 			this.displayCommentsCallback();
 			this.displayLinksCallback();
@@ -241,9 +237,12 @@ export default class SvgCanvasTextArea {
 	}
 
 	displayNodeLabelTextArea(node, parentDomObj) {
-		d3.select(parentDomObj)
-			.selectAll("div")
-			.attr("style", "display:none;");
+		// Save the current style for the display <div> and set the style so the
+		// <div> is hidden while the text area is displayed on top of it. This
+		// prevents the <div> from protruding below the text area.
+		this.displayDiv = d3.select(parentDomObj).selectAll(".d3-foreign-object-node-label div");
+		this.displayDivStyle = this.displayDiv.attr("style");
+		this.displayDiv.attr("style", "display:none;");
 
 		this.editingTextData = {
 			id: node.id,
@@ -260,7 +259,7 @@ export default class SvgCanvasTextArea {
 			parentDomObj: parentDomObj,
 			autoSizeCallback: this.autoSizeMultiLineLabel.bind(this),
 			saveTextChangesCallback: this.saveNodeLabelChanges.bind(this),
-			closeTextAreaCallback: this.closeNodeLabelTextArea.bind(this)
+			closeTextAreaCallback: this.closeEntryTextArea.bind(this)
 		};
 		this.displayTextArea(this.editingTextData);
 	}
@@ -270,7 +269,7 @@ export default class SvgCanvasTextArea {
 	//  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) {
+	autoSizeMultiLineLabel(textArea, 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.
@@ -281,10 +280,10 @@ export default class SvgCanvasTextArea {
 		// 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);
+		this.foreignObject.style("height", 0);
 		const scrollHeight = textArea.scrollHeight + SCROLL_PADDING;
 		this.textAreaHeight = scrollHeight;
-		foreignObject.style("height", this.textAreaHeight + "px");
+		this.foreignObject.style("height", this.textAreaHeight + "px");
 	}
 
 	saveNodeLabelChanges(id, newText, newHeight, taData) {
@@ -298,19 +297,24 @@ export default class SvgCanvasTextArea {
 		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);
+	// Called when the node label or decoration label text area is closing.
+	// Resets the inline style of the <div>, that displays the text, back
+	// to what is was before it was hidden when the entry text area opened.
+	closeEntryTextArea() {
+		this.displayDiv.attr("style", this.displayDivStyle);
 	}
 
 	// Displays a text area for an editable text decoration on either a node
 	// or link.
 	displayDecLabelTextArea(dec, obj, objType, parentDomObj) {
-		this.displayTextArea({
+		// Save the current style for the display <div> and set the style so the
+		// <div> is hidden while the text area is displayed on top of it. This
+		// prevents the <div> from protruding below the text area.
+		this.displayDiv = d3.select(parentDomObj).selectAll(".d3-foreign-object-dec-label div");
+		this.displayDivStyle = this.displayDiv.attr("style");
+		this.displayDiv.attr("style", "display:none;");
+
+		this.editingTextData = {
 			id: dec.id,
 			text: dec.label,
 			singleLine: dec.label_single_line || false,
@@ -327,8 +331,9 @@ export default class SvgCanvasTextArea {
 			objType: objType,
 			autoSizeCallback: this.autoSizeMultiLineLabel.bind(this),
 			saveTextChangesCallback: this.saveDecLabelChanges.bind(this),
-			closeTextAreaCallback: null
-		});
+			closeTextAreaCallback: this.closeEntryTextArea.bind(this)
+		};
+		this.displayTextArea(this.editingTextData);
 	}
 
 	// Handles saved changes to editable text decorations.
@@ -352,7 +357,7 @@ export default class SvgCanvasTextArea {
 		this.editingText = true;
 		this.editingTextId = data.id;
 
-		const foreignObject = d3.select(data.parentDomObj)
+		this.foreignObject = d3.select(data.parentDomObj)
 			.append("foreignObject")
 			.attr("class", "d3-foreign-object-text-entry")
 			.attr("width", data.width)
@@ -360,7 +365,7 @@ export default class SvgCanvasTextArea {
 			.attr("x", data.xPos)
 			.attr("y", data.yPos);
 
-		const textArea = foreignObject
+		const textArea = this.foreignObject
 			.append("xhtml:textarea")
 			.attr("class", data.className)
 			.text(unescapeText(data.text))
@@ -368,8 +373,8 @@ export default class SvgCanvasTextArea {
 				// If user hits return/enter
 				if (d3Event.keyCode === RETURN_KEY) {
 					if (data.allowReturnKey === "save") {
-						this.textAreaLabelSaved = true;
-						this.saveAndCloseTextArea(foreignObject, data, d3Event.target.value, d3Event);
+						this.textContentSaved = true;
+						this.saveAndCloseTextArea(data, d3Event.target.value, d3Event);
 						return;
 
 					// Don't accept return key press when text is all on one line or
@@ -383,7 +388,7 @@ export default class SvgCanvasTextArea {
 				if (d3Event.keyCode === ESC_KEY) {
 					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 					this.textAreaEscKeyPressed = true;
-					this.closeTextArea(foreignObject, data);
+					this.closeTextArea(data);
 				}
 				// Prevent user entering more than any allowed maximum for characters.
 				if (data.maxCharacters &&
@@ -398,14 +403,14 @@ export default class SvgCanvasTextArea {
 				}
 			})
 			.on("keyup", (d3Event) => {
-				data.autoSizeCallback(d3Event.target, foreignObject, data);
+				data.autoSizeCallback(d3Event.target, 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);
+				setTimeout(data.autoSizeCallback, 500, d3Event.target, data);
 			})
 			.on("blur", (d3Event, d) => {
 				this.logger.log("Text area - blur");
@@ -418,8 +423,8 @@ export default class SvgCanvasTextArea {
 
 				// If the text label has been saved by the user hitting the return key
 				// we just return since there's nothing further to do.
-				if (this.textAreaLabelSaved) {
-					this.textAreaLabelSaved = false;
+				if (this.textContentSaved) {
+					this.textContentSaved = false;
 					return;
 				}
 
@@ -429,11 +434,11 @@ export default class SvgCanvasTextArea {
 					return;
 				}
 
-				this.saveAndCloseTextArea(foreignObject, data, d3Event.target.value, d3Event);
+				this.saveAndCloseTextArea(data, d3Event.target.value, d3Event);
 			})
 			.on("focus", (d3Event, d) => {
 				this.logger.log("Text area - focus");
-				data.autoSizeCallback(d3Event.target, foreignObject, data);
+				data.autoSizeCallback(d3Event.target, data);
 			})
 			.on("mousedown click dblclick contextmenu", (d3Event, d) => {
 				d3Event.stopPropagation(); // Allow default behavior to show system contenxt menu
@@ -445,29 +450,37 @@ export default class SvgCanvasTextArea {
 		textArea.node().setSelectionRange(data.text.length, data.text.length);
 	}
 
-	saveAndCloseTextArea(foreignObject, data, newValue, d3Event) {
+	// Complete the text editing. evt may be undefined when called from the
+	// canvas renderer.
+	completeEditing(evt) {
+		// const commentEntry = this.canvasDiv.selectAll(".d3-comment-entry");
+		const commentEntry = this.foreignObject.selectAll("textarea");
+		const commentEntryElement = commentEntry.node();
+		this.textContentSaved = true;
+		this.saveAndCloseTextArea(this.editingTextData, commentEntryElement.value, evt);
+	}
+
+	saveAndCloseTextArea(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);
+			this.closeTextArea(data);
 			return;
 		}
 		const newText = newValue; // Save the text before closing the foreign object
-		this.closeTextArea(foreignObject, data);
+		this.closeTextArea(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) {
+	closeTextArea(data) {
 		if (data.closeTextAreaCallback) {
 			data.closeTextAreaCallback(data.id);
 		}
-		foreignObject.remove();
+		this.foreignObject.remove();
 		this.editingText = false;
 		this.editingTextId = "";
 	}

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

@@ -155,7 +155,7 @@ class EditorForm extends React.Component {
 			// if total non-tearsheet tabs is 1; don't show any tabs
 			if (totalTabs.length === 1 && nonTearsheetTabs.length === 1) {
 				return (
-					<div key={"cat." + key} className="properties-category">
+					<div key={"cat." + key} className="properties-single-category">
 						{panelItems}
 						{additionalComponent}
 					</div>
@@ -170,7 +170,7 @@ class EditorForm extends React.Component {
 				}
 				if (tab.content.itemType !== ItemType.TEARSHEET && nonTearsheetTabs.length === 1) {
 					tabContent.push(
-						<div key={"cat." + key} className="properties-category">
+						<div key={"cat." + key} className="properties-single-category">
 							{panelItems}
 							{additionalComponent}
 						</div>
@@ -202,6 +202,7 @@ class EditorForm extends React.Component {
 						key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
 						tabIndex={i}
 						label={tab.text}
+						title={tab.text}
 						className={classNames({ "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })}
 						onClick={this._modalTabsOnClick.bind(this, tab.group)}
 					>
@@ -220,7 +221,12 @@ class EditorForm extends React.Component {
 			);
 		}
 		return (
-			<Tabs key={"tab." + key} className="properties-primaryTabs" selected={modalSelected} light={this.props.controller.getLight()}>
+			<Tabs key={"tab." + key}
+				className="properties-primaryTabs"
+				selected={modalSelected}
+				light={this.props.controller.getLight()}
+				tabContentClassName={classNames("properties-primary-tab-panel", { "tearsheet-container": this.props.controller.isTearsheetContainer() })}
+			>
 				{tabContent}
 			</Tabs>
 		);
@@ -342,6 +348,7 @@ class EditorForm extends React.Component {
 		case ("tearsheet"):
 			return this.genPanel(key, uiItem.panel, inPropertyId, indexof);
 		case ("subTabs"):
+			// All Subtabs will become a LeftNav if displayed inside a Tearsheet container
 			return (<Subtabs key={"subtabs." + key}
 				tabs={uiItem.tabs}
 				className={uiItem.className}
@@ -349,6 +356,7 @@ class EditorForm extends React.Component {
 				rightFlyout={this.props.rightFlyout}
 				genUIItem={this.genUIItem}
 				nestedPanel={uiItem.nestedPanel}
+				leftnav={this.props.controller.isTearsheetContainer()}
 			/>);
 		case ("primaryTabs"):
 			return this.genPrimaryTabs(key, uiItem.tabs, inPropertyId, indexof);
@@ -467,11 +475,14 @@ class EditorForm extends React.Component {
 			}
 			if (!this.FIRST_TEARSHEET_ID || this.FIRST_TEARSHEET_ID === panel.id) {
 				this.FIRST_TEARSHEET_ID = panel.id;
+				const onCloseCallback = () => {
+					this.props.controller.clearActiveTearsheet();
+				};
 				return (
 					<TearSheet
 						open={this.props.controller.getActiveTearsheet() !== null}
+						onCloseCallback={onCloseCallback}
 						key={panel.id}
-						controller={this.props.controller}
 						tearsheet={this.visibleTearsheet}
 					/>
 				);
@@ -622,7 +633,10 @@ class EditorForm extends React.Component {
 		}
 
 		return (
-			<div className="properties-editor-form">
+			<div className={classNames("properties-editor-form",
+				{ "tearsheet-container": this.props.controller.isTearsheetContainer() },
+				{ "field-picker": this.state.showFieldPicker })}
+			>
 				{content}
 				{wideFly}
 			</div>

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

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+$primary-tab-height: $spacing-08;
+
 .properties-primaryTabs {
 	.bx--tabs__nav-item {
 		margin-left: 1rem;
@@ -21,7 +23,7 @@
 }
 
 // styling when there is only 1 tab
-.properties-category {
+.properties-single-category {
 	padding: $spacing-05;
 }
 
@@ -107,8 +109,8 @@
 	svg {
 		margin-right: $spacing-05;
 		margin-top: 1px;
-		width: 16px;
-		height: 16px;
+		width: $spacing-05;
+		height: $spacing-05;
 		flex-shrink: 0;
 	}
 	.properties-link-text {
@@ -123,3 +125,28 @@
 .properties-custom-panel + .properties-control-panel {
 	padding-top: $spacing-05; // padding between the two classes
 }
+
+// Display in full height if inside a tearsheet
+.properties-editor-form.tearsheet-container {
+	height: 100%;
+	overflow: hidden;
+
+	.properties-primaryTabs {
+		position: absolute;
+		height: $primary-tab-height;
+		padding-left: $spacing-05;
+	}
+
+	.properties-primary-tab-panel.tearsheet-container {
+		height: calc(100% - #{$primary-tab-height});
+		position: relative;
+		top: $primary-tab-height;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	&.field-picker {
+		border-top: 1px solid $ui-03;
+		padding: $spacing-05;
+	}
+}

package/src/common-properties/components/field-picker/field-picker.jsx

@@ -27,7 +27,7 @@ import { Button } from "carbon-components-react";
 
 import { MESSAGE_KEYS, DATA_TYPE, SORT_DIRECTION, ROW_SELECTION } from "./../../constants/constants";
 import Icon from "./../../../icons/icon.jsx";
-import { ArrowLeft24, Reset24 } from "@carbon/icons-react";
+import { Reset24 } from "@carbon/icons-react";
 
 import { has, isEmpty, sortBy, isEqual } from "lodash";
 
@@ -298,50 +298,20 @@ export default class FieldPicker extends React.Component {
 	}
 
 	_genBackButton() {
-		if (this.props.rightFlyout) {
-			const applyLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.APPLYBUTTON_LABEL);
-			const rejectLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.REJECTBUTTON_LABEL);
-
-			return (<PropertiesButtons
-				okHandler={this.handleSave}
-				cancelHandler={this.handleCancel}
-				showPropertiesButtons
-				applyLabel={applyLabel}
-				rejectLabel={rejectLabel}
-			/>);
-		}
+		let applyLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.APPLYBUTTON_LABEL);
+		const rejectLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.REJECTBUTTON_LABEL);
 
-		const saveTooltip = PropertyUtils.formatMessage(this.props.controller.getReactIntl(),
-			MESSAGE_KEYS.FIELDPICKER_SAVEBUTTON_TOOLTIP);
-		const tooltipId = uuid4() + "-tooltip-fp";
-		const tooltip = (
-			<div className="properties-tooltips">
-				{saveTooltip}
-			</div>
-		);
+		if (!this.props.rightFlyout) {
+			applyLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.FIELDPICKER_SAVEBUTTON_MODAL_LABEL);
+		}
 
-		return (
-			<div>
-				<Tooltip
-					id={tooltipId}
-					tip={tooltip}
-					direction="left"
-					className="properties-tooltips"
-				>
-					<div>
-						<Button
-							className="properties-fp-back-button"
-							renderIcon={ArrowLeft24}
-							iconDescription={this.props.title}
-							size="small"
-							kind="primary"
-							onClick={this.handleSave}
-						/>
-						<label className="properties-fp-button-label">{this.props.title}</label>
-					</div>
-				</Tooltip>
-			</div>
-		);
+		return (<PropertiesButtons
+			okHandler={this.handleSave}
+			cancelHandler={this.handleCancel}
+			showPropertiesButtons
+			applyLabel={applyLabel}
+			rejectLabel={rejectLabel}
+		/>);
 	}
 
 	_genResetButton() {
@@ -449,7 +419,7 @@ export default class FieldPicker extends React.Component {
 				selectedRows={this.selectedRowsIndex}
 				updateRowSelections={this.updateFieldSelections}
 				rowSelection={ROW_SELECTION.MULTIPLE}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.controller.isTearsheetContainer()}
 			/>
 		);
 	}
@@ -460,25 +430,14 @@ export default class FieldPicker extends React.Component {
 		const filterTypes = this._genFilterTypes();
 		const table = this._genTable();
 
-		if (this.props.rightFlyout) {
-			return (<React.Fragment>
-				<div className="properties-fp-top-row">
-					{filterTypes}
-					{resetButton}
-				</div>
-				{table}
-				{backButton}
-			</React.Fragment>);
-		}
-
-		return (<div>
+		return (<React.Fragment>
 			<div className="properties-fp-top-row">
-				{backButton}
+				{filterTypes}
 				{resetButton}
 			</div>
-			{filterTypes}
 			{table}
-		</div>);
+			{backButton}
+		</React.Fragment>);
 	}
 }
 

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

@@ -90,35 +90,26 @@
 			}
 		}
 	}
+
+	// This only happens when all rows of the table are filtered. The field-picker should never be empty elsewise
+	.properties-ft-empty-table {
+		display: none;
+	}
 }
 
-// This is for field-picker in properties-modal instead of flyout
-.properties-modal {
-	.properties-fp-top-row {
-		width: 100%;
-		margin-bottom: $spacing-03;
-		display: flex;
-		justify-content: space-between;
+// This is for field-picker in properties-modal, containerType="Modal"
+.properties-modal, .properties-tearsheet-panel.bx--modal {
+	.properties-fp-table {
+		padding-bottom: $spacing-06;
+		margin-bottom: $spacing-10; // Accommodate footer buttons
 
-		.properties-fp-button-label {
-			position: relative;
-			top: $spacing-03;
+		.properties-fp-top-row {
+			display: flex;
+			justify-content: flex-end;
 		}
 
-		// This back button is used in common-properties modal format
-		.properties-fp-back-button {
-			height: $spacing-07;
-			width: $spacing-07;
-			padding: 0;
-			margin-right: $spacing-03;
-
-			> svg {
-				left: $spacing-03;
-			}
+		.properties-modal-buttons {
+			width: 100%;
 		}
 	}
-
-	.properties-fp-filter-list {
-		float: right;
-	}
 }