#802 Number generator button next to numeric control (#803)

elyra-ai · Oct 5, 2021 · c6831da · c6831da
1 parent 77ba822
commit c6831da
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 34 deletions.
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js
@@ -232,7 +232,7 @@ describe("numberfield control works correctly", () => {
 		const numPropertyId = { name: "number_undefined" };
 		expect(controller.getPropertyValue(numPropertyId)).to.be.undefined;
 	});
-	it("should have displayed random generator link", () => {
+	it("should have displayed random generator button", () => {
 		const category = wrapper.find(".properties-category-content").at(0); // values category
 		const generator = category.find("button.properties-number-generator");
 		expect(generator).to.have.length(2);

diff --git a/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.jsx b/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.jsx
@@ -20,12 +20,10 @@ import { connect } from "react-redux";
 import classNames from "classnames";
 import { STATES, CARBON_ICONS } from "./../../constants/constants.js";
 import { ControlType } from "./../../constants/form-constants";
-import { Button } from "carbon-components-react";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { isEmpty } from "lodash";
 import { v4 as uuid4 } from "uuid";
 import Icon from "./../../../icons/icon.jsx";
-
 import ActionFactory from "./../../actions/action-factory.js";
 
 class ControlItem extends React.Component {
@@ -41,14 +39,6 @@ class ControlItem extends React.Component {
 		}
 		const hidden = this.props.state === STATES.HIDDEN;
 		const disabled = this.props.state === STATES.DISABLED;
-		const that = this;
-		function generateNumber() {
-			const generator = that.props.control.label.numberGenerator;
-			const min = generator.range && generator.range.min ? generator.range.min : 10000;
-			const max = generator.range && generator.range.max ? generator.range.max : 99999;
-			const newValue = Math.floor(Math.random() * (max - min + 1) + min);
-			that.props.controller.updatePropertyValue(that.props.propertyId, newValue);
-		}
 
 		let label;
 		let description;
@@ -74,22 +64,10 @@ class ControlItem extends React.Component {
 			if (this.props.control.required) {
 				requiredIndicator = <span className="properties-required-indicator">*</span>;
 			}
-			let numberGenerator;
-			if (this.props.control.label.numberGenerator) {
-				numberGenerator = (<Button
-					className={classNames("properties-number-generator", { "hide": hidden })}
-					onClick={generateNumber}
-					disabled={disabled}
-					kind="ghost"
-				>
-					<span>{this.props.control.label.numberGenerator.text}</span>
-				</Button>);
-			}
 			label = (
 				<div className={classNames("properties-label-container", { "table-control": this.props.tableControl === true })}>
 					<label className="properties-control-label">{this.props.control.label.text}</label>
 					{requiredIndicator}
-					{numberGenerator}
 					{tooltip}
 				</div>);
 		}

diff --git a/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss b/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss
@@ -44,14 +44,6 @@
 		@include carbon--type-style("label-01");
 		color: $text-02;
 	}
-	.properties-number-generator {
-		margin-left: $spacing-02;
-		padding: $spacing-01;
-		min-height: 30px;
-		span {
-			text-decoration: underline;
-		}
-	}
 	&.table-control {
 		label, .properties-required-indicator {
 			@include carbon--type-style("productive-heading-01");

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx
@@ -17,17 +17,20 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { NumberInput } from "carbon-components-react";
+import { NumberInput, Button } from "carbon-components-react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants.js";
 import classNames from "classnames";
 import { ControlType } from "./../../constants/form-constants";
+import { Shuffle16 } from "@carbon/icons-react";
+import { has } from "lodash";
 
 class NumberfieldControl extends React.Component {
 	constructor(props) {
 		super(props);
 		this.onDirection = this.onDirection.bind(this);
+		this.generateNumber = this.generateNumber.bind(this);
 		this.id = ControlUtils.getControlId(this.props.propertyId);
 	}
 
@@ -71,12 +74,42 @@ class NumberfieldControl extends React.Component {
 		// TODO need to check for integer in validations
 	}
 
+	generateNumber() {
+		const generator = this.props.control.label.numberGenerator;
+		const min = generator.range && generator.range.min ? generator.range.min : 10000;
+		const max = generator.range && generator.range.max ? generator.range.max : 99999;
+		const newValue = Math.floor(Math.random() * (max - min + 1) + min);
+		this.props.controller.updatePropertyValue(this.props.propertyId, newValue);
+	}
+
 	render() {
 		let controlValue = ""; // Default to empty string to avoid '0' appearing when value is 'null'
 		if (this.props.value !== null && typeof this.props.value !== "undefined") {
 			controlValue = this.props.value;
 		}
-		const className = classNames("properties-numberfield", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null);
+
+		const disabled = this.props.state === STATES.DISABLED;
+		const hidden = this.props.state === STATES.HIDDEN;
+		let numberGenerator;
+		if (has(this.props.control, "label.numberGenerator")) {
+			numberGenerator = (<Button
+				className={classNames("properties-number-generator", { "hide": hidden })}
+				onClick={this.generateNumber}
+				disabled={disabled}
+				kind="tertiary"
+				renderIcon={Shuffle16}
+				tooltipPosition="bottom"
+				tooltipAlignment="end"
+				iconDescription={this.props.control.label.numberGenerator.text}
+				hasIconOnly
+			/>);
+		}
+		const className = classNames(
+			"properties-numberfield",
+			{ "numberfield-with-number-generator": has(this.props.control, "label.numberGenerator") ? this.props.control.label.numberGenerator : null },
+			{ "hide": hidden },
+			this.props.messageInfo ? this.props.messageInfo.type : null
+		);
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
@@ -85,7 +118,7 @@ class NumberfieldControl extends React.Component {
 					ref= { (ref) => (this.numberInput = ref)}
 					id={this.id}
 					onChange={this.handleChange.bind(this)}
-					disabled={this.props.state === STATES.DISABLED}
+					disabled={disabled}
 					step={this.props.control.increment}
 					value={controlValue}
 					placeholder={this.props.control.additionalText}
@@ -95,6 +128,7 @@ class NumberfieldControl extends React.Component {
 					light={this.props.controller.getLight()}
 					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
 				/>
+				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.scss b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.scss
@@ -20,6 +20,26 @@
 		margin-right: 0;
 		margin-bottom: 0;
 	}
+	.properties-number-generator {
+		margin-left: $spacing-05;
+		right: $spacing-01;
+		// Button dimensions 40x40 px
+		width: $spacing-08;
+		min-height: $spacing-08;
+		padding-left: $spacing-04;
+		padding-right: $spacing-04;
+	}
+	&.numberfield-with-number-generator {
+		width: 100%;
+		display: inline-flex;
+		align-items: flex-end;
+		&.error, &.warning {
+			align-items: flex-start;
+			.properties-number-generator {
+				margin-top: $spacing-05 + $spacing-03;  // 1rem label + 0.5 rem spacing below label
+			}
+		}
+	}
 }
 
 .properties-table-cell-control { // overrides when in a table cell