Merge branch 'main' into Action-Image-Align

canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx

@@ -744,7 +744,8 @@ export default class AbstractTable extends React.Component {
 					const cell = this.buildChildItem(propertyName, rowIndex, tableState);
 					columns.push(cell);
 				}
-				if (this.props.control.rowSelection === ROW_SELECTION.SINGLE && !this.isReadonlyTable()) {
+				// Do not show delete icon if add_remove_rows is false (default is true)
+				if (this.props.control.rowSelection === ROW_SELECTION.SINGLE && !this.isReadonlyTable() && this.props.addRemoveRows) {
 					const toolTip = PropertyUtils.formatMessage(this.reactIntl, MESSAGE_KEYS.TABLE_DELETEICON_TOOLTIP);
 					const tooltipId = "tooltip-delete-row";
 					const deleteOption = (

canvas_modules/common-canvas/src/object-model/config-utils.js

@@ -92,6 +92,7 @@ export default class ConfigUtils {
 			enableWYSIWYGComments: false,
 			enableKeyboardNavigation: false,
 			enableAutoLinkOnlyFromSelNodes: false,
+			enableSingleClickAddFromPalette: false,
 			enableContextToolbar: false,
 			enableSaveZoom: "None",
 			enableSnapToGridType: "None",
@@ -105,7 +106,7 @@ export default class ConfigUtils {
 			enableFocusOnMount: true,
 			enableBoundingRectangles: false, // Not documented
 			enableCanvasUnderlay: "None", // Not documented
-			enableParentClass: "", // Not documented
+			enableParentClass: "",
 			enablePositionNodeOnRightFlyoutOpen: false, // May also be an object: { x: 5, y: 5 }
 			emptyCanvasContent: null,
 			dropZoneCanvasContent: null,

canvas_modules/common-canvas/src/palette/palette-content-list-item.jsx

@@ -43,6 +43,7 @@ class PaletteContentListItem extends React.Component {
 
 		this.onDragStart = this.onDragStart.bind(this);
 		this.onDragEnd = this.onDragEnd.bind(this);
+		this.onClick = this.onClick.bind(this);
 		this.onDoubleClick = this.onDoubleClick.bind(this);
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
@@ -54,12 +55,20 @@ class PaletteContentListItem extends React.Component {
 		// Make sure the tip doesn't appear when starting to drag a node.
 		this.props.canvasController.closeTip();
 
+		// Sets the focus index on the parent palette-content-list so
+		// future key presses that move focus will work correctly.
+		if (this.props.setFocusIndex) {
+			this.props.setFocusIndex();
+		}
+
 		// Prepare the ghost image on mouse down because asynchronous loading of
 		// SVG files will be too slow if this is done in onDragStart.
 		this.ghostData = this.props.canvasController.getGhostNode(this.props.nodeTypeInfo.nodeType);
 	}
 
 	onDragStart(ev) {
+		this.props.canvasController.closeTip();
+
 		// We cannot use the dataTransfer object for the nodeTemplate because
 		// the dataTransfer data is not available during dragOver events so we set
 		// the nodeTemplate into the canvas controller.
@@ -98,19 +107,15 @@ class PaletteContentListItem extends React.Component {
 		this.createAutoNode(true);
 	}
 
-	onMouseOver(ev) {
-		if (!this.props.isDisplaySearchResult && ev.buttons === 0) {
-			const nodeTemplate = this.props.nodeTypeInfo.category.empty_text
-				? { app_data: { ui_data: { label: this.props.nodeTypeInfo.category.empty_text } } }
-				: this.props.nodeTypeInfo.nodeType;
-
-			this.props.canvasController.openTip({
-				id: "paletteTip_" + this.props.nodeTypeInfo.nodeType.op,
-				type: TIP_TYPE_PALETTE_ITEM,
-				targetObj: ev.currentTarget,
-				nodeTemplate: nodeTemplate,
-				category: this.props.nodeTypeInfo.category
-			});
+	onClick() {
+		if (this.props.allowClickToAdd) {
+			this.createAutoNode(true);
+		}
+	}
+
+	onMouseOver(evt) {
+		if (!this.props.isDisplaySearchResult && evt.buttons === 0) {
+			this.displayTip();
 		}
 	}
 
@@ -262,8 +267,30 @@ class PaletteContentListItem extends React.Component {
 		this.setState({ showFullDescription: false });
 	}
 
+	// Sets the focus on this palette (node) item and displays
+	// a tooltip. This is called by the parent palette-content-list
+	// when the user moves focus to a new node using the keyboard, so
+	// we always show a tip for the keyboard user.
 	focus() {
 		this.itemRef.current.focus();
+		this.displayTip();
+	}
+
+	// Display a tip for this palette (node) item.
+	displayTip() {
+		this.props.canvasController.closeTip();
+
+		const nodeTemplate = this.props.nodeTypeInfo.category.empty_text
+			? { app_data: { ui_data: { label: this.props.nodeTypeInfo.category.empty_text } } }
+			: this.props.nodeTypeInfo.nodeType;
+
+		this.props.canvasController.openTip({
+			id: "paletteTip_" + this.props.nodeTypeInfo.nodeType.op,
+			type: TIP_TYPE_PALETTE_ITEM,
+			targetObj: this.itemRef.current,
+			nodeTemplate: nodeTemplate,
+			category: this.props.nodeTypeInfo.category
+		});
 	}
 
 	// Returns true if this item is disabled and should not be draggable or double-clicked
@@ -365,6 +392,7 @@ class PaletteContentListItem extends React.Component {
 				onMouseDown={this.props.isEditingEnabled ? this.onMouseDown : null}
 				onDragStart={this.props.isEditingEnabled ? this.onDragStart : null}
 				onDragEnd={this.props.isEditingEnabled ? this.onDragEnd : null}
+				onClick={this.props.isEditingEnabled ? this.onClick : null}
 				onDoubleClick={this.props.isEditingEnabled ? this.onDoubleClick : null}
 			>
 				{categoryLabel}
@@ -386,6 +414,8 @@ PaletteContentListItem.propTypes = {
 	tabIndex: PropTypes.number.isRequired,
 	nextNodeInCategory: PropTypes.func,
 	previousNodeInCategory: PropTypes.func,
+	setFocusIndex: PropTypes.func,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired,
 	isPaletteWide: PropTypes.bool,
 	isShowRanking: PropTypes.bool

canvas_modules/common-canvas/src/palette/palette-content-list.jsx

@@ -37,6 +37,10 @@ class PaletteContentList extends React.Component {
 		this.contentItemRefs[this.currentFocusIndex].current.focus();
 	}
 
+	setFocusIndex(idx) {
+		this.currentFocusIndex = idx;
+	}
+
 	nextNodeInCategory(evt) {
 		this.currentFocusIndex++;
 		if (this.currentFocusIndex > this.contentItemRefs.length - 1) {
@@ -68,6 +72,7 @@ class PaletteContentList extends React.Component {
 						nodeTypeInfo={{ nodeType: {}, category: this.props.category }}
 						isDisplaySearchResult={false}
 						canvasController={this.props.canvasController}
+						allowClickToAdd={this.props.allowClickToAdd}
 						isPaletteWide={this.props.isPaletteWide}
 						isEditingEnabled={this.props.isEditingEnabled}
 					/>
@@ -92,6 +97,8 @@ class PaletteContentList extends React.Component {
 						isEditingEnabled={this.props.isEditingEnabled}
 						nextNodeInCategory={this.nextNodeInCategory}
 						previousNodeInCategory={this.previousNodeInCategory}
+						setFocusIndex={this.setFocusIndex.bind(this, idx)}
+						allowClickToAdd={this.props.allowClickToAdd}
 					/>
 				);
 			}
@@ -111,6 +118,7 @@ PaletteContentList.propTypes = {
 	canvasController: PropTypes.object.isRequired,
 	isPaletteWide: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired,
+	allowClickToAdd: PropTypes.bool
 };
 
 export default PaletteContentList;

canvas_modules/common-canvas/src/palette/palette-dialog-content-grid-node.jsx

@@ -37,6 +37,7 @@ class PaletteDialogContentGridNode extends React.Component {
 
 		this.onDragStart = this.onDragStart.bind(this);
 		this.onDragEnd = this.onDragEnd.bind(this);
+		this.onClick = this.onClick.bind(this);
 		this.onDoubleClick = this.onDoubleClick.bind(this);
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
@@ -72,13 +73,16 @@ class PaletteDialogContentGridNode extends React.Component {
 		this.props.canvasController.nodeTemplateDragEnd();
 	}
 
-	onDoubleClick() {
-		if (this.props.canvasController.createAutoNode) {
-			const nodeTemplate = this.props.canvasController.convertNodeTemplate(this.props.nodeTemplate);
-			this.props.canvasController.createAutoNode(nodeTemplate);
+	onClick() {
+		if (this.props.allowClickToAdd) {
+			this.createAutoNode();
 		}
 	}
 
+	onDoubleClick() {
+		this.createAutoNode();
+	}
+
 	onMouseOver(ev) {
 		if (ev.buttons === 0) {
 			const nodeTemplate = this.props.category.empty_text
@@ -99,6 +103,13 @@ class PaletteDialogContentGridNode extends React.Component {
 		this.props.canvasController.closeTip();
 	}
 
+	createAutoNode() {
+		if (this.props.canvasController.createAutoNode) {
+			const nodeTemplate = this.props.canvasController.convertNodeTemplate(this.props.nodeTemplate);
+			this.props.canvasController.createAutoNode(nodeTemplate);
+		}
+	}
+
 	render() {
 		let label = "";
 		if (has(this.props.nodeTemplate, "app_data.ui_data.label")) {
@@ -147,6 +158,7 @@ class PaletteDialogContentGridNode extends React.Component {
 				onMouseDown={this.props.isEditingEnabled ? this.onMouseDown : null}
 				onDragStart={this.props.isEditingEnabled ? this.onDragStart : null}
 				onDragEnd={this.props.isEditingEnabled ? this.onDragEnd : null}
+				onClick={this.props.isEditingEnabled ? this.onClick : null}
 				onDoubleClick={this.props.isEditingEnabled ? this.onDoubleClick : null}
 				className="palette-dialog-grid-node-outer"
 			>
@@ -167,6 +179,7 @@ PaletteDialogContentGridNode.propTypes = {
 	category: PropTypes.object.isRequired,
 	nodeTemplate: PropTypes.object.isRequired,
 	canvasController: PropTypes.object.isRequired,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired
 };
 

canvas_modules/common-canvas/src/palette/palette-dialog-content-grid.jsx

@@ -38,6 +38,7 @@ class PaletteDialogContentGrid extends React.Component {
 					nodeTemplate={ {} }
 					canvasController={this.props.canvasController}
 					isEditingEnabled={this.props.isEditingEnabled}
+					allowClickToAdd={this.props.allowClickToAdd}
 				/>
 			);
 		} else {
@@ -48,6 +49,7 @@ class PaletteDialogContentGrid extends React.Component {
 						nodeTemplate={this.props.nodeTypes[idx]}
 						canvasController={this.props.canvasController}
 						isEditingEnabled={this.props.isEditingEnabled}
+						allowClickToAdd={this.props.allowClickToAdd}
 					/>
 				);
 			}
@@ -65,6 +67,7 @@ PaletteDialogContentGrid.propTypes = {
 	category: PropTypes.object.isRequired,
 	nodeTypes: PropTypes.array.isRequired,
 	isEditingEnabled: PropTypes.bool.isRequired,
+	allowClickToAdd: PropTypes.bool,
 	canvasController: PropTypes.object.isRequired
 };
 

canvas_modules/common-canvas/src/palette/palette-dialog-content.jsx

@@ -87,6 +87,7 @@ class PaletteDialogContent extends React.Component {
 					nodeTypes={nodeTypes}
 					canvasController={this.props.canvasController}
 					isEditingEnabled={this.props.isEditingEnabled}
+					allowClickToAdd={this.props.allowClickToAdd}
 				/>)
 			: (
 				<PaletteContentList
@@ -95,6 +96,7 @@ class PaletteDialogContent extends React.Component {
 					canvasController={this.props.canvasController}
 					isPaletteWide
 					isEditingEnabled={this.props.isEditingEnabled}
+					allowClickToAdd={this.props.allowClickToAdd}
 				/>);
 		return (
 			<div className="palette-dialog-content" ref="palettecontent">
@@ -112,6 +114,7 @@ PaletteDialogContent.propTypes = {
 	paletteJSON: PropTypes.object.isRequired,
 	showGrid: PropTypes.bool.isRequired,
 	canvasController: PropTypes.object.isRequired,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired
 };
 

canvas_modules/common-canvas/src/palette/palette-dialog-under.jsx

@@ -542,6 +542,7 @@ class PaletteDialog extends React.Component {
 						showGrid={this.state.showGrid}
 						canvasController={this.props.canvasController}
 						isEditingEnabled={this.props.isEditingEnabled}
+						allowClickToAdd={this.props.allowClickToAdd}
 					/>
 				</div>
 			</nav>
@@ -557,6 +558,7 @@ PaletteDialog.propTypes = {
 	canvasController: PropTypes.object.isRequired,
 	containingDivId: PropTypes.string.isRequired,
 	paletteJSON: PropTypes.object,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool
 };
 

canvas_modules/common-canvas/src/palette/palette-dialog.jsx

@@ -36,6 +36,7 @@ class PaletteDialog extends React.Component {
 				canvasController={this.props.canvasController}
 				paletteJSON={this.props.paletteJSON}
 				containingDivId={this.props.containingDivId}
+				allowClickToAdd={this.props.allowClickToAdd}
 				isEditingEnabled={this.props.isEditingEnabled}
 			/>);
 	}
@@ -51,11 +52,13 @@ PaletteDialog.propTypes = {
 
 	// Provided by redux
 	paletteJSON: PropTypes.object,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool
 };
 
 const mapStateToProps = (state, ownProps) => ({
 	paletteJSON: state.palette.content,
+	allowClickToAdd: state.canvasconfig.enableSingleClickAddFromPalette,
 	isEditingEnabled: state.canvasconfig.enableEditingActions
 });