#2020 expression editor allow for double click to add value (#2021)

Signed-off-by: Veena S <[email protected]> Co-authored-by: Matt Howard <[email protected]>
elyra-ai · Aug 12, 2024 · 8483035 · 8483035
1 parent 3bd7e6e
commit 8483035
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 12 deletions.
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/expression-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/expression-test.js
@@ -512,6 +512,22 @@ describe("expression-builder select from tables correctly", () => {
 		expect(controller.getPropertyValue(propertyId)).to.equal(" Age");
 	});
 
+	it("expression builder select a field on double clicking row", () => {
+		reset();
+		const wrapper = mountWithIntl(
+			<Provider store={controller.getStore()}>
+				<ExpressionBuilder
+					control={control}
+					controller={controller}
+					propertyId={propertyId}
+				/>
+			</Provider>
+		);
+		const fieldTable = wrapper.find("div.properties-field-table-container");
+		tableUtils.dblClickTableRows(fieldTable, [0]);
+		expect(controller.getPropertyValue(propertyId)).to.equal(" Age");
+	});
+
 	it("expression builder select a field value", () => {
 		reset();
 		const wrapper = mountWithIntl(
@@ -529,6 +545,22 @@ describe("expression-builder select from tables correctly", () => {
 		expect(controller.getPropertyValue(propertyId)).to.equal(" 21");
 	});
 
+	it("expression builder select a Value on double clicking row", () => {
+		reset();
+		const wrapper = mountWithIntl(
+			<Provider store={controller.getStore()}>
+				<ExpressionBuilder
+					control={control}
+					controller={controller}
+					propertyId={propertyId}
+				/>
+			</Provider>
+		);
+		const valueTable = wrapper.find("div.properties-value-table-container");
+		tableUtils.dblClickTableRows(valueTable, [0]);
+		expect(controller.getPropertyValue(propertyId)).to.equal(" 21");
+	});
+
 	it("expression builder select a field value of type string", () => {
 		reset();
 		const wrapper = mountWithIntl(

diff --git a/...nvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss b/...nvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss
@@ -68,6 +68,18 @@ $operator-margin: 50%;
 		width: 100%;
 	}
 }
+.expression-builder-table{
+	.properties-vt-row-selected {
+		cursor: pointer;
+	}
+	.properties-vt-row-class {
+		&:focus {
+			color: $button-primary;
+			border: 1px solid $button-primary;
+		}
+	}
+
+}
 
 .properties-value-table-container {
 	width: $values-table-width;
@@ -147,3 +159,9 @@ $operator-margin: 50%;
 .properties-primaryTabs .cds--tabs-trigger {
 	margin-bottom: 5px;
 }
+
+.expression-add-field-button {
+	svg.add-btn-svg {
+		fill: $button-primary;
+	}
+}
diff --git a/...on-properties/controls/expression/expression-builder/expression-select-field-function.jsx b/...on-properties/controls/expression/expression-builder/expression-select-field-function.jsx
@@ -124,8 +124,8 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		});
 
 	}
-
-	onAddFieldClick(rowKey) {
+	// field table - called on row doubleclick & also Add btn click.
+	onAddFieldClick(evt, rowKey, index) {
 		const field = this.state.currentFieldDataset[rowKey];
 		let value = field.id;
 		if (this.state.fieldCategory !== this.recentUseCat) {
@@ -150,7 +150,8 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		});
 	}
 
-	onAddValueClick(rowKey) {
+	// value table - called on row doubleclick & also Add btn click.
+	onAddValueClick(evt, rowKey, index) {
 		if (this.props.onChange) {
 			const field = this.state.currentFieldDataset[this.state.fieldSelected];
 			const quote = "\"";
@@ -179,7 +180,8 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		});
 	}
 
-	onAddFunctionClick(rowKey) {
+	// function table - called on row doubleclick & also Add btn click.
+	onAddFunctionClick(evt, rowKey, index) {
 		let field;
 		if (this.state.functionCategory === this.recentUseCat) {
 			field = this.props.controller.getExpressionRecentlyUsed()[rowKey];
@@ -278,24 +280,24 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 				kind="ghost"
 				size="sm"
 			>
-				<Add aria-label={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN)} />
+				{<Add className="add-btn-svg" aria-label={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN)} />}
 			</Button>
 		);
 		return addValueButtonContent;
 	}
 
-	handleAddButtonClick(index, tableType) {
+	handleAddButtonClick(index, tableType, evt) {
 		switch (tableType) {
 		case "value": {
-			this.onAddValueClick(index);
+			this.onAddValueClick(evt, index);
 			break;
 		}
 		case "field": {
-			this.onAddFieldClick(index);
+			this.onAddFieldClick(evt, index);
 			break;
 		}
 		case "function": {
-			this.onAddFunctionClick(index);
+			this.onAddFunctionClick(evt, index);
 			break;
 		}
 		default:
@@ -497,7 +499,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		return (
 			<div className="properties-field-and-values-table-container" >
 				{fieldCategory}
-				<div className="properties-field-table-container" >
+				<div className="properties-field-table-container expression-builder-table" >
 					<FlexibleTable
 						columns={fieldHeaders}
 						data={tableData}
@@ -508,13 +510,14 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						tableLabel={fieldsTableLabel}
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onFieldTableClick}
+						onRowDoubleClick={this.onAddFieldClick}
 						selectedRows={[selectedField]}
 						onSort={this.setSortColumn.bind(this, "fieldTable")}
 						light={!this.props.controller.getLight()}
 						emptyTablePlaceholder={emptyFieldsLabel}
 					/>
 				</div>
-				<div className="properties-value-table-container" >
+				<div className="properties-value-table-container expression-builder-table" >
 					<FlexibleTable
 						columns={valueHeader}
 						data={valuesTableData}
@@ -525,6 +528,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						tableLabel={valuesTableLabel}
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onValueTableClick}
+						onRowDoubleClick={this.onAddValueClick}
 						selectedRows={[selectedValue]}
 						onSort={this.setSortColumn.bind(this, "valuesTable")}
 						light={!this.props.controller.getLight()}
@@ -682,7 +686,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 
 		return (
 			<div className="properties-functions-table-helper-container">
-				<div className="properties-functions-table-container">
+				<div className="properties-functions-table-container expression-builder-table">
 					<div className="properties-functions-table" >
 						<FlexibleTable
 							columns={headers}
@@ -694,6 +698,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 							tableLabel={functionsTableLabel}
 							rowSelection={ROW_SELECTION.SINGLE}
 							updateRowSelections={this.onFunctionTableClick}
+							onRowDoubleClick={this.onAddFunctionClick}
 							selectedRows={[selectedFunction]}
 							onSort={this.setSortColumn.bind(this, "functionTable")}
 							light={!this.props.controller.getLight()}