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

veenas1 · 2024-06-14T05:58:48Z

Fixes: #2020

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

veenas1 · 2024-06-14T06:06:09Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

@@ -184,6 +176,8 @@
 	}

 	.properties-vt-row-selected {


@matthoward366 Added style here to retain the style until the user click somewhere else. :focus & :active , is not retaining the style after clicking, and shows at the clicking moment only.
Please let me know what looks best.

matthoward366 · 2024-06-14T18:32:33Z

Overall looks good. Checking with design on some of the interactions.

Signed-off-by: Veena S <Veena.S1@ibm.com>

matthoward366 · 2024-06-25T18:45:59Z

Keeping the cell active even after double clicking seems wrong. I chatting with design about this and this should only be there while active. After the single or double click action is done it reverts back to the row selected state.

For the mouse pointer it should be over the entire row.

veenas1 · 2024-06-26T04:03:05Z

@matthoward366 Does it mean we can highlight the row(with the blue border) on single-click as well?

matthoward366 · 2024-06-26T11:20:11Z

@matthoward366 Does it mean we can highlight the row(with the blue border) on single-click as well?

single-click would highlight the row when clicking the + button. The rest of the row requires double click.

Signed-off-by: Veena S <Veena.S1@ibm.com>

veenas1 · 2024-06-28T10:11:36Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

+				border: 1px solid $button-primary;
+				background-color: $background-active;
+			}
+		}
 	}


@matthoward366 I tried to add :focus and :active here. .properties-vt-row-doubleClick class is being detected, but the style of :focus and :active not working.

matthoward366 · 2024-07-01T20:28:32Z

...ommon-properties/controls/expression/expression-builder/expression-select-field-function.jsx

@@ -56,6 +56,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		this.fields = this._makeDatasetFields(props.controller.getDatasetMetadataFields(), props.controller.getExpressionInfo().fields);
 		this.resources = get(props.controller.getExpressionInfo(), "resources", {});
 		this.state = {
+			doubleClickedFieldRow: [],


Why do we need to manage double click different from single click?

@matthoward366 properties-vt-row-doubleClick class was added for styling the double clicked row(a blue border) which is not required for single click.
For activating this class, I have used doubleClickedFieldRow from props.
Couldn't rely on the doubleclick event alone, as single-clicking the + icon was supposed to act/look the same way as double-click

matthoward366

I would step back and really only handle the onRowDoubleClick and change the pointer. Possibly add focus for the row. I don't think we need to worry about the active state.

matthoward366 · 2024-07-01T20:31:12Z

...dules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.jsx

@@ -439,6 +444,7 @@ class VirtualizedTable extends React.Component {
 				className={classNames(className,
 					{ "properties-vt-row-selected": selectedRow },
 					{ "properties-vt-row-disabled": rowDisabled },
+					{ "properties-vt-row-doubleClick": this.getDoubleClickedRow()?.indexOf(rowData.rowKey) > -1 },


Why do we need this?

properties-vt-row-doubleClick class was added for styling the double clicked row(a blue border) which is not required for single click.

matthoward366 · 2024-07-01T20:32:46Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

@@ -138,7 +138,16 @@
 			// ReadonlyTable with single row selection is non-interactive. Nothing should happen on hover
 			background-color: $layer-hover-01;
 		}
-
+		.properties-vt-row-doubleClick{


We should have row focus when a user tabs into the row but I don't think we need something special for double click. Also, active and focus are different things.

matthoward366 · 2024-07-01T20:33:36Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

 			border-left: 4px solid $button-primary;
 			padding-left: 0;
 			&:not(.properties-vt-row-disabled):hover {
 				border-left: 4px solid $button-primary;
 			}
 		}
+		.properties-vt-row-doubleClick{


This seems like duplicate code.

veenas1 · 2024-07-02T05:55:10Z

I would step back and really only handle the onRowDoubleClick and change the pointer. Possibly add focus for the row. I don't think we need to worry about the active state.

ok Matt, I would revert the code added for styling the double clicked row.

matthoward366 · 2024-07-02T19:36:34Z

@veenas1 let me know when the changes are done and I'll have another look.

Signed-off-by: Veena S <Veena.S1@ibm.com>

…into virtualized-table-double-click

Signed-off-by: Veena S <Veena.S1@ibm.com>

veenas1 · 2024-07-03T08:50:52Z

@veenas1 let me know when the changes are done and I'll have another look.

@matthoward366 I have reverted all the changes added as part of styling double clicked row, the state props etc, also removed active style. The :focus is coming only on the + icon button

matthoward366

I'm seeing the wrong mouse pointer in places outside the expression builder. For example in the field picker the entire selected row has a pointer but it shouldn't since it's not clickable.

matthoward366 · 2024-07-18T19:21:18Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

@@ -138,7 +138,10 @@
 			// ReadonlyTable with single row selection is non-interactive. Nothing should happen on hover
 			background-color: $layer-hover-01;
 		}
-
+		&:focus {


What is this for? This might need to go under expression builder only and not the default for all tables.

matthoward366 · 2024-07-18T19:21:37Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

@@ -189,6 +192,7 @@
 		&:hover {
 			background-color: $layer-accent-hover-01;
 		}
+		cursor: pointer;


When does this show up? This might be specific to expression builder.

matthoward366 · 2024-07-18T19:21:50Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

@@ -200,8 +204,13 @@
 		// Table rows
 		.properties-vt-row-class {
 			padding-left: 3px;
+			&:focus {


Same comments as above.

matthoward366 · 2024-07-18T19:21:57Z

...ules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss

 		}
 		.properties-vt-row-selected {
+			cursor: pointer;


Same as above.

sonarcloud · 2024-07-30T17:43:25Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

Signed-off-by: Veena S <Veena.S1@ibm.com>

veenas1 · 2024-08-12T10:44:38Z

@matthoward366 Updated the PR to apply changes only for expression builder's table.

veenas1 commented Jun 14, 2024

View reviewed changes

veenas1 requested a review from matthoward366 June 14, 2024 06:06

veenas1 added 3 commits June 25, 2024 10:42

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

56824d8

Signed-off-by: Veena S <Veena.S1@ibm.com>

elyra-ai#2020 lint fix

e77ce32

Signed-off-by: Veena S <Veena.S1@ibm.com>

double click style changes

dd7ebdc

Signed-off-by: Veena S <Veena.S1@ibm.com>

veenas1 force-pushed the virtualized-table-double-click branch from 9334dd5 to dd7ebdc Compare June 25, 2024 05:13

double click-active, pointer

e1cc0ee

Signed-off-by: Veena S <Veena.S1@ibm.com>

veenas1 commented Jun 28, 2024

View reviewed changes

Merge branch 'main' into virtualized-table-double-click

a12128b

matthoward366 reviewed Jul 1, 2024

View reviewed changes

matthoward366 requested changes Jul 1, 2024

View reviewed changes

veenas1 added 3 commits July 3, 2024 14:10

revert doubleclick styling changes

450cd10

Signed-off-by: Veena S <Veena.S1@ibm.com>

Merge remote-tracking branch 'origin/virtualized-table-double-click' …

fa19573

…into virtualized-table-double-click

lint fix

b53bc7b

Signed-off-by: Veena S <Veena.S1@ibm.com>

matthoward366 requested changes Jul 18, 2024

View reviewed changes

veenas1 force-pushed the virtualized-table-double-click branch from 0757310 to b53bc7b Compare August 12, 2024 09:46

veenas1 added 3 commits August 12, 2024 15:31

revert doubleclick styling changes

6b1ef62

Signed-off-by: Veena S <Veena.S1@ibm.com>

elyra-ai#2020 changes only in expression builder

ef667b2

Signed-off-by: Veena S <Veena.S1@ibm.com>

minor cleanup

3f46411

Signed-off-by: Veena S <Veena.S1@ibm.com>

veenas1 and others added 2 commits August 12, 2024 22:14

Merge branch 'main' into virtualized-table-double-click

d1d0180

Merge branch 'main' into virtualized-table-double-click

4666dca

matthoward366 approved these changes Aug 12, 2024

View reviewed changes

matthoward366 merged commit 8483035 into elyra-ai:main Aug 12, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

veenas1 commented Jun 14, 2024

veenas1 Jun 14, 2024

matthoward366 commented Jun 14, 2024

matthoward366 commented Jun 25, 2024 •

edited

Loading

veenas1 commented Jun 26, 2024

matthoward366 commented Jun 26, 2024

veenas1 Jun 28, 2024

matthoward366 Jul 1, 2024

veenas1 Jul 2, 2024

matthoward366 left a comment

matthoward366 Jul 1, 2024

veenas1 Jul 2, 2024

matthoward366 Jul 1, 2024

matthoward366 Jul 1, 2024

veenas1 commented Jul 2, 2024

matthoward366 commented Jul 2, 2024

veenas1 commented Jul 3, 2024

matthoward366 left a comment

matthoward366 Jul 18, 2024

matthoward366 Jul 18, 2024

matthoward366 Jul 18, 2024

matthoward366 Jul 18, 2024

sonarcloud bot commented Jul 30, 2024

veenas1 commented Aug 12, 2024

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

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

Conversation

veenas1 commented Jun 14, 2024

Choose a reason for hiding this comment

matthoward366 commented Jun 14, 2024

matthoward366 commented Jun 25, 2024 • edited Loading

veenas1 commented Jun 26, 2024

matthoward366 commented Jun 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthoward366 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

veenas1 commented Jul 2, 2024

matthoward366 commented Jul 2, 2024

veenas1 commented Jul 3, 2024

matthoward366 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarcloud bot commented Jul 30, 2024

Quality Gate passed

veenas1 commented Aug 12, 2024

matthoward366 commented Jun 25, 2024 •

edited

Loading