elyra-ai#2292 For single select tables, show table toolbar when movea…

…ble_rows is set (elyra-ai#2293) Signed-off-by: Neha Gokhale <[email protected]>
srikant-ch5 · Jan 10, 2025 · b93d750 · b93d750
1 parent 637e7ea
commit b93d750
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 20 deletions.
diff --git a/...as_modules/common-canvas/__tests__/common-properties/controls/structurelisteditor-test.js b/...as_modules/common-canvas/__tests__/common-properties/controls/structurelisteditor-test.js
@@ -498,12 +498,10 @@ describe("StructureListEditor render from paramdef", () => {
 		expect(tableUtilsRTL.getTableRows(container)).to.have.length(2);
 
 		// select the first row in the table
-		tableUtilsRTL.selectCheckboxes(container, [0]);
+		tableUtilsRTL.clickTableRows(container, [0]);
 
-		// ensure table toolbar has Delete button and select it
-		const tableToolbar = container.querySelector("div.properties-table-toolbar");
-		const deleteButton = tableToolbar.querySelectorAll("button.properties-action-delete");
-		expect(deleteButton).to.have.length(1);
+		// ensure row has Delete button and select it
+		const deleteButton = summaryPanel.querySelectorAll("button.delete-button");
 		fireEvent.click(deleteButton[0]);
 
 		// verify row is deleted
@@ -525,7 +523,7 @@ describe("StructureListEditor render from paramdef", () => {
 		expect(tableData).to.have.length(3);
 
 		// set the error in the last row
-		const checkboxCell = summaryPanel.querySelectorAll("input[type='checkbox']")[7];
+		const checkboxCell = summaryPanel.querySelectorAll("input[type='checkbox']")[3];
 		checkboxCell.setAttribute("checked", false);
 		fireEvent.click(checkboxCell);
 
@@ -544,9 +542,8 @@ describe("StructureListEditor render from paramdef", () => {
 		expect(errorMessage).to.eql(actual);
 
 		// remove the first row and ensure the error message is associated with the correct row.
-		tableUtilsRTL.selectCheckboxes(container, [0]);
-		const tableToolbar = container.querySelector("div.properties-table-toolbar");
-		let deleteButton = tableToolbar.querySelectorAll("button.properties-action-delete");
+		tableUtilsRTL.clickTableRows(summaryPanel, [0]);
+		let deleteButton = summaryPanel.querySelectorAll("button.delete-button");
 		fireEvent.click(deleteButton[0]);
 
 		const messages = renderedController.getAllErrorMessages();
@@ -561,8 +558,8 @@ describe("StructureListEditor render from paramdef", () => {
 		summaryPanel = container.querySelector("div.properties-wf-content.show");
 		tableData = tableUtilsRTL.getTableRows(summaryPanel);
 		expect(tableData).to.have.length(2);
-		tableUtilsRTL.selectCheckboxes(container, [1]);
-		deleteButton = container.querySelectorAll("button.properties-action-delete");
+		tableUtilsRTL.clickTableRows(summaryPanel, [1]);
+		deleteButton = summaryPanel.querySelectorAll("button.delete-button");
 		fireEvent.click(deleteButton[0]);
 		actual = renderedController.getErrorMessage({ name: "inlineEditingTableError" });
 		expect(actual).to.equal(null);
@@ -630,7 +627,7 @@ describe("StructureListEditor render from paramdef", () => {
 		expect(errorMessage).to.eql(actual);
 
 		// select the first row and move it to the bottom and make sure the error messages stay aligned.
-		tableUtilsRTL.selectCheckboxes(summaryPanel, [0]);
+		tableUtilsRTL.clickTableRows(summaryPanel, [0]);
 		summaryPanel = container.querySelector("div.properties-wf-content.show");
 		const moveRowBottom = container.querySelector("div.properties-table-toolbar").querySelector("button.table-row-move-bottom-button");
 		fireEvent.click(moveRowBottom);
@@ -656,7 +653,7 @@ describe("StructureListEditor render from paramdef", () => {
 		// select the second from the last row and move it to the top and make sure the error messages stay aligned.
 		tableData = tableUtilsRTL.getTableRows(summaryPanel);
 		expect(tableData).to.have.length(5);
-		tableUtilsRTL.selectCheckboxes(summaryPanel, [3]);
+		tableUtilsRTL.clickTableRows(summaryPanel, [3]);
 		summaryPanel = container.querySelector("div.properties-wf-content.show");
 		const moveRowTop = container.querySelector("div.properties-table-toolbar").querySelector("button.table-row-move-top-button");
 		fireEvent.click(moveRowTop);

diff --git a/...odules/common-canvas/__tests__/test_resources/paramDefs/structurelisteditor_paramDef.json b/...odules/common-canvas/__tests__/test_resources/paramDefs/structurelisteditor_paramDef.json
@@ -1216,7 +1216,7 @@
       },
       {
         "complex_type_ref": "inlineEditingTableError",
-        "row_selection": "multiple-edit",
+        "row_selection": "single",
         "moveable_rows": true,
         "parameters": [
           {

diff --git a/...modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.scss b/...modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.scss
@@ -39,7 +39,7 @@ $row-left-padding: $spacing-02;
 	height: $spacing-07;
 }
 
-.single-row-selection-table {
+.single-row-selection-table:not(:has(.properties-table-toolbar)) {
 	display: flex;
 	justify-content: right;
 }

diff --git a/...as_modules/common-canvas/src/common-properties/components/table-toolbar/table-toolbar.jsx b/...as_modules/common-canvas/src/common-properties/components/table-toolbar/table-toolbar.jsx
@@ -303,7 +303,7 @@ class TableToolbar extends React.Component {
 								: null
 						}
 						{
-							(this.props.addRemoveRows && !this.props.isReadonlyTable)
+							(this.props.addRemoveRows && !this.props.isReadonlyTable && !this.props.isSingleSelectTable)
 								? (<Button
 									size="sm"
 									renderIcon={TrashCan}
@@ -360,6 +360,7 @@ TableToolbar.propTypes = {
 	smallFlyout: PropTypes.bool, // list control in right flyout having editor size small
 	tableState: PropTypes.string,
 	isReadonlyTable: PropTypes.bool,
+	isSingleSelectTable: PropTypes.bool,
 	addRemoveRows: PropTypes.bool,
 	moveableRows: PropTypes.bool,
 	multiSelectEdit: PropTypes.bool,

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx b/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.jsx
@@ -431,9 +431,12 @@ export default class AbstractTable extends React.Component {
 	}
 
 	makeTableToolbar(selectedRows) {
-		if ((this.props.addRemoveRows || this.props.control?.moveableRows || this.isSelectSummaryEdit(selectedRows)) &&
-		selectedRows?.length > 0 &&
-		this.props.control.rowSelection !== ROW_SELECTION.SINGLE) {
+		// For single select tables, table toolbar doesn't show delete icon because it is added at row level
+		const singleSelectTable = this.props.control.rowSelection === ROW_SELECTION.SINGLE;
+		if (
+			((this.props.addRemoveRows && !singleSelectTable) || this.props.control?.moveableRows || this.isSelectSummaryEdit(selectedRows)) &&
+			selectedRows?.length > 0
+		) {
 			const multiSelectEditRowPropertyId = {
 				name: this.selectSummaryPropertyName,
 				row: 0
@@ -458,6 +461,7 @@ export default class AbstractTable extends React.Component {
 						multiSelectEditSubPanel={multiSelectEditSubPanel}
 						multiSelectEditRowPropertyId={multiSelectEditRowPropertyId}
 						isReadonlyTable={this.isReadonlyTable()}
+						isSingleSelectTable={singleSelectTable}
 						smallFlyout={false}
 					/>
 				</>

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/list/list.jsx b/canvas_modules/common-canvas/src/common-properties/controls/list/list.jsx
@@ -135,6 +135,7 @@ class ListControl extends AbstractTable {
 					setScrollToRow={this.setScrollToRow}
 					setCurrentControlValueSelected={this.setCurrentControlValueSelected}
 					isReadonlyTable={false}
+					isSingleSelectTable={false}
 					smallFlyout={this.props.rightFlyout && this.props.controller.getEditorSize() === "small"}
 				/>
 			);

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/selectcolumns/selectcolumns.jsx b/canvas_modules/common-canvas/src/common-properties/controls/selectcolumns/selectcolumns.jsx
@@ -123,6 +123,7 @@ class SelectColumnsControl extends AbstractTable {
 					setScrollToRow={this.setScrollToRow}
 					setCurrentControlValueSelected={this.setCurrentControlValueSelected}
 					isReadonlyTable={false}
+					isSingleSelectTable={false}
 					smallFlyout={false}
 				/>
 			);

diff --git a/canvas_modules/harness/test_resources/parameterDefs/structurelisteditor_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/structurelisteditor_paramDef.json
@@ -1216,7 +1216,7 @@
       },
       {
         "complex_type_ref": "inlineEditingTableError",
-        "row_selection": "multiple-edit",
+        "row_selection": "single",
         "moveable_rows": true,
         "parameters": [
           {