elyra-ai#2020 expression editor allow for double click to add value

Signed-off-by: Veena S <[email protected]>
veenas1 · Jun 14, 2024 · 5f61e81 · 5f61e81
1 parent 19c1d42
commit 5f61e81
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 17 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/...s/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss b/...s/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss
@@ -121,14 +121,6 @@
 		margin-right: $spacing-02;
 	}
 
-	.properties-vt-double-click:first-of-type {
-		.properties-vt-row-class {
-			border-top: 1px solid transparent;
-			&.properties-vt-row-selected {
-				border-top: 1px solid $layer-accent-hover-01;
-			}
-		}
-	}
 
 	.properties-vt-row-class {
 		line-height: 20px;
@@ -184,6 +176,8 @@
 	}
 
 	.properties-vt-row-selected {
+		color: $button-primary;
+		border: 1px solid $button-primary;
 		background-color: $layer-selected-01;
 		border-bottom: 1px solid $layer-accent-hover-01;
 		&:hover {
@@ -202,6 +196,8 @@
 			padding-left: 3px;
 		}
 		.properties-vt-row-selected {
+			color: $button-primary;
+			border: 1px solid $button-primary;
 			border-left: 4px solid $button-primary;
 			padding-left: 0;
 			&:not(.properties-vt-row-disabled):hover {

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
@@ -130,3 +130,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:
@@ -508,6 +510,7 @@ 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()}
@@ -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()}
@@ -686,6 +690,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()}