From 8483035f03b9c79dfc2e8f70b683f6bcdf39175f Mon Sep 17 00:00:00 2001 From: Veena S <151116685+veenas1@users.noreply.github.com> Date: Tue, 13 Aug 2024 02:49:59 +0530 Subject: [PATCH] #2020 expression editor allow for double click to add value (#2021) Signed-off-by: Veena S Co-authored-by: Matt Howard --- .../controls/expression-test.js | 32 +++++++++++++++++++ .../expression-builder.scss | 18 +++++++++++ .../expression-select-field-function.jsx | 29 ++++++++++------- 3 files changed, 67 insertions(+), 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 index cd5f9c8351..331b422a52 100644 --- 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( + + + + ); + 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( + + + + ); + 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/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss index 82552b6a58..33ac8f3be2 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss +++ b/canvas_modules/common-canvas/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/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx index 38117f1f3f..059331841c 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx +++ b/canvas_modules/common-canvas/src/common-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" > - + {} ); 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 (
{fieldCategory} -
+
-
+
-
+