elyra-ai#1655 Readjust FlexibleTable height when number of rows chang…

…es (elyra-ai#1656)

Signed-off-by: Carita Ou <[email protected]>

canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js

@@ -376,4 +376,19 @@ describe("FlexibleTable renders correctly", () => {
 		expect(emptyTableDiv1).to.have.text(glmmParamDef.resources["covariance_list.placeholder.label"]);
 	});
 
+	it("should readjust height when row changes", () => {
+		const wrapper = mountWithIntl(
+			<FlexibleTable
+				columns={headers}
+				data={rows}
+				rows={5}
+			/>
+		);
+		const orgTableHeight = wrapper.find("FlexibleTable").state("tableHeight");
+		expect(orgTableHeight).to.equal(192);
+
+		wrapper.setProps({ rows: 2 });
+		const newTableHeight = wrapper.find("FlexibleTable").state("tableHeight");
+		expect(newTableHeight).to.equal(96);
+	});
 });

canvas_modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx

@@ -61,6 +61,7 @@ class FlexibleTable extends React.Component {
 		this.onSort = this.onSort.bind(this);
 		this.sortHeaderClick = this.sortHeaderClick.bind(this);
 		this._updateTableWidth = this._updateTableWidth.bind(this);
+		this._updateRows = this._updateRows.bind(this);
 		this._adjustTableHeight = this._adjustTableHeight.bind(this);
 		this.handleCheckedRow = this.handleCheckedRow.bind(this);
 		this.handleCheckedAllRows = this.handleCheckedAllRows.bind(this);
@@ -74,8 +75,11 @@ class FlexibleTable extends React.Component {
 	}
 
 	componentDidUpdate(prevProps, prevState) {
-		if (prevProps.rows !== this.props.rows ||
-			prevProps.columns !== this.props.columns ||
+		if (prevProps.rows !== this.props.rows) {
+			this._updateRows();
+		}
+
+		if (prevProps.columns !== this.props.columns ||
 			prevProps.noAutoSize !== this.props.noAutoSize) {
 			this._adjustTableHeight();
 		}
@@ -243,10 +247,19 @@ class FlexibleTable extends React.Component {
 		}
 	}
 
+	_updateRows() {
+		if (this.props.rows && this.props.rows !== this.state.rows) {
+			this.setState({ rows: this.props.rows }, () => {
+				this._adjustTableHeight();
+			});
+		}
+	}
+
 	_adjustTableHeight() {
 		if (this.props.noAutoSize) {
 			return;
 		}
+
 		let newHeight = this.state.tableHeight;
 		let dynamicH = this.state.dynamicHeight;
 		const multiSelectTableHeight = REM_ROW_HEIGHT + REM_HEADER_HEIGHT;