elyra-ai#2256 Add ability to display text description next to heading…

… label (elyra-ai#2263)

Signed-off-by: srikant <[email protected]>
Co-authored-by: Matt Howard <[email protected]>

canvas_modules/common-canvas/__tests__/common-properties/components/title-editor-test.js

@@ -39,6 +39,7 @@ controller.setAppData(appData);
 
 const helpClickHandler = sinon.spy();
 const help = { data: "test-data" };
+const description = "test description";
 
 const titleChangeHandlerFunction = function(title, callbackFunction) {
 	// If Title is valid. No need to send anything in callbackFunction
@@ -143,6 +144,52 @@ describe("title-editor renders correctly", () => {
 		const helpButton = container.querySelector(".properties-title-editor-btn[data-id='help']");
 		fireEvent.click(helpButton);
 	});
+	it("test description button callback", () => {
+		helpClickHandler.resetHistory();
+		const wrapper = renderWithIntl(
+			<TitleEditor
+				store={controller.getStore()}
+				controller={controller}
+				labelEditable
+				help={help}
+				description={description}
+				showHeadingDesc
+			/>
+		);
+		const { container } = wrapper;
+		const helpButton = container.querySelector(".properties-title-editor-desc-btn[data-id='desc-help']");
+		fireEvent.click(helpButton);
+	});
+	it("test description should not be visible if description is not present", () => {
+		helpClickHandler.resetHistory();
+		const wrapper = renderWithIntl(
+			<TitleEditor
+				store={controller.getStore()}
+				controller={controller}
+				labelEditable
+				help={help}
+				showHeadingDesc
+			/>
+		);
+		const { container } = wrapper;
+		expect(container.querySelector(".properties-title-desc-icon")).to.not.exist;
+	});
+	it("test description should not be visible if showHeadingDesc is not present", () => {
+		helpClickHandler.resetHistory();
+		const wrapper = renderWithIntl(
+			<TitleEditor
+				store={controller.getStore()}
+				controller={controller}
+				labelEditable
+				help={help}
+				description={description}
+			/>
+		);
+		const { container } = wrapper;
+		expect(container.querySelector(".properties-title-desc-icon")).to.not.exist;
+		const helpButton = container.querySelector(".properties-title-editor-btn[data-id='help']");
+		fireEvent.click(helpButton);
+	});
 	it("test edit link", () => {
 		helpClickHandler.resetHistory();
 		const wrapper = renderWithIntl(

canvas_modules/common-canvas/__tests__/common-properties/form/form-test.js

@@ -94,10 +94,11 @@ describe("Correct form should be created", () => {
 			}
 		};
 		let help;
+		let description;
 		let pixelWidth; // Pass in an undefined pixelWidth to simulate it missing from ParamDefs.
 		let conditions;
 		let resources;
-		const expectedForm = new Form("TestOp", "TestOp", true, help, "small", pixelWidth, [primaryTabs], buttons, data, conditions, resources, "./test.svg");
+		const expectedForm = new Form("TestOp", "TestOp", true, help, description, "small", pixelWidth, [primaryTabs], buttons, data, conditions, resources, "./test.svg");
 
 		const paramSpec = {
 			"current_parameters": {

canvas_modules/common-canvas/__tests__/test_resources/json/form-placement-test.json

@@ -150,6 +150,7 @@
     "componentId": "org.apache.spark.ml.ibm.transformers.Distinct",
     "label": "Form placement test",
     "labelEditable": true,
+    "description": "Remove rows to leave only rows with distinct combinations of rows",
     "editorSize": "small",
     "uiItems": [
       {

canvas_modules/common-canvas/__tests__/test_resources/json/form-structure2-test.json

@@ -191,6 +191,7 @@
     "componentId": "sort",
     "label": "Form structure2 test",
     "labelEditable": false,
+    "description": "Sorts the data",
     "editorSize": "large",
     "uiItems": [
       {

canvas_modules/common-canvas/locales/common-properties/locales/en.json

@@ -33,7 +33,8 @@
   "summary.longTable.placeholder": "More than ten fields...",
   "alerts.tab.title": "Alerts",
   "title.editor.label": "edit title",
-  "title.editor.helpButton.label": "help",
+  "title.editor.helpButton.label": "Help",
+  "title.editor.descButton.label": "Heading additional information",
   "table.summary.error": "There are {errorMsgCount} error cells. ",
   "table.summary.warning": "There are {warningMsgCount} warning cells. ",
   "control.summary.error": "There are {errorMsgCount} parameters with errors. ",

canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.jsx

@@ -20,15 +20,15 @@ import { connect } from "react-redux";
 import Isvg from "react-inlinesvg";
 import { get } from "lodash";
 import classNames from "classnames";
-import { Help, Edit, Close } from "@carbon/react/icons";
-import { TextInput, Button, Layer } from "@carbon/react";
+import { Help, Edit, Close, Information } from "@carbon/react/icons";
+import { TextInput, Button, Layer, Link } from "@carbon/react";
+import { Toggletip, ToggletipButton, ToggletipContent, ToggletipActions } from "@carbon/react";
 
 import { setTitle } from "./../../actions";
 import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
 import * as PropertyUtils from "./../../util/property-utils";
 import ActionFactory from "../../actions/action-factory.js";
 
-
 class TitleEditor extends Component {
 	constructor(props) {
 		super(props);
@@ -118,6 +118,7 @@ class TitleEditor extends Component {
 		}
 		const propertiesTitleEditButtonLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.TITLE_EDITOR_LABEL);
 		const helpButtonLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.TITLE_EDITOR_HELPBUTTON_LABEL);
+		const descButtonLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.TITLE_EDITOR_DESCBUTTON_LABEL);
 		const closeButtonLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.PROPERTIESEDIT_CLOSEBUTTON_LABEL);
 		const titleValidationTypes = [CONDITION_MESSAGE_TYPE.ERROR, CONDITION_MESSAGE_TYPE.WARNING];
 		const titleWithWarning = get(this.state.titleValidation, "type", null) === CONDITION_MESSAGE_TYPE.WARNING;
@@ -137,19 +138,65 @@ class TitleEditor extends Component {
 				hasIconOnly
 			/>);
 
-		const helpButton = this.props.help
-			? (<Button
-				kind="ghost"
-				className="properties-title-editor-btn help"
-				data-id="help"
-				onClick={this.helpClickHandler}
-				tooltipPosition="bottom"
-				renderIcon={Help}
-				size="sm"
-				iconDescription={helpButtonLabel}
-				hasIconOnly
-			/>)
-			: null;
+		const renderTooltip = (isDescWithLink) => {
+			const { description } = this.props;
+			// If description is present and has a link, show help button
+			const tooltipButton = isDescWithLink ? (
+				<ToggletipActions>
+					<Link
+						className="properties-title-editor-desc-btn desc-help"
+						onClick={this.helpClickHandler}
+						data-id="desc-help"
+					>
+						{helpButtonLabel}
+					</Link>
+				</ToggletipActions>
+			) : null;
+
+			return (
+				<Toggletip className="properties-title-desc-tooltip" align="bottom" autoAlign>
+					<ToggletipButton label={descButtonLabel}>
+						<Information />
+					</ToggletipButton>
+					<ToggletipContent>
+						<p className="properties-title-editor-desc">{description}</p>
+						{tooltipButton}
+					</ToggletipContent>
+				</Toggletip>
+			);
+		};
+
+		const renderHelpButton = () => {
+			const { help } = this.props;
+
+			return help ? (
+				<Button
+					kind="ghost"
+					className="properties-title-editor-btn help"
+					data-id="help"
+					onClick={this.helpClickHandler}
+					tooltipPosition="bottom"
+					renderIcon={Help}
+					size="sm"
+					iconDescription={helpButtonLabel}
+					hasIconOnly
+				/>
+			) : null;
+		};
+
+		const renderHelpOrTooltipButton = () => {
+			const { showHeadingDesc, description, help } = this.props;
+
+			// If showHeadingDesc is true and description is present, show tooltip
+			if (showHeadingDesc && description) {
+				return renderTooltip(help);
+			}
+
+			// If description is not present, show help button
+			return renderHelpButton();
+		};
+
+		const helpButton = renderHelpOrTooltipButton();
 
 		const closeButton = this.props.closeHandler
 			? (<div className="properties-close-button">
@@ -195,7 +242,8 @@ class TitleEditor extends Component {
 				<div className={classNames(
 					"properties-title-editor-input",
 					{
-						"properties-title-editor-with-help": this.props.help && !this.headingEnabled && !titleValidationTypes.includes(get(this.state.titleValidation, "type")),
+						"properties-title-editor-with-help": (this.props.help || this.props.description) &&
+															!this.headingEnabled && !titleValidationTypes.includes(get(this.state.titleValidation, "type")),
 						"properties-title-editor-with-warning": titleWithWarning,
 						"properties-title-editor-with-error": titleWithErrror
 					}
@@ -239,8 +287,10 @@ TitleEditor.propTypes = {
 	icon: PropTypes.string,
 	heading: PropTypes.string,
 	showHeading: PropTypes.bool,
+	showHeadingDesc: PropTypes.bool,
 	rightFlyoutTabsView: PropTypes.bool,
 	titleInfo: PropTypes.object,
+	description: PropTypes.object,
 	title: PropTypes.string, // set by redux
 	setTitle: PropTypes.func // set by redux
 };

canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss

@@ -36,6 +36,15 @@
 			}
 		}
 	}
+
+	.properties-title-desc-tooltip {
+		position: absolute;
+		margin: $spacing-03 0 0 $spacing-03; // spacing between desc tooltip and heading label
+
+		.properties-title-editor-desc-btn {
+			cursor: pointer;
+		}
+	}
 }
 
 // Action buttons within a small right flyout will take up 50% width and display 2 buttons per row
@@ -86,6 +95,10 @@
 			margin-left: $spacing-02; // spacing between heading label and help button
 		}
 	}
+	.properties-title-desc-tooltip {
+		position: relative;
+		margin: 0 0 0 $spacing-04; // spacing between desc tooltip and heading label
+	}
 }
 .properties-title-editor-input {
 	width: calc(100% - #{$spacing-03}); // subtract 8px to align with Close icon when applyOnBlur is set
@@ -152,3 +165,11 @@
 	justify-content: center;
 	padding: 0;
 }
+
+
+.properties-title-editor {
+	.tooltip-container {
+		height: $spacing-05;
+		cursor: pointer;
+	}
+}

canvas_modules/common-canvas/src/common-properties/constants/constants.js

@@ -48,6 +48,7 @@ export const MESSAGE_KEYS = {
 	ALERTS_TAB_TITLE: "alerts.tab.title",
 	TITLE_EDITOR_LABEL: "title.editor.label",
 	TITLE_EDITOR_HELPBUTTON_LABEL: "title.editor.helpButton.label",
+	TITLE_EDITOR_DESCBUTTON_LABEL: "title.editor.descButton.label",
 	TABLE_SUMMARY_ERROR: "table.summary.error",
 	TABLE_SUMMARY_WARNING: "table.summary.warning",
 	CONTROL_SUMMARY_ERROR: "control.summary.error",

canvas_modules/common-canvas/src/common-properties/form/Form.js

@@ -24,11 +24,12 @@ import { Size } from "../constants/form-constants";
 import { CONTAINER_TYPE } from "../constants/constants";
 
 export default class Form {
-	constructor(componentId, label, labelEditable, help, editorSize, pixelWidth, uiItems, buttons, data, conditions, resources, icon, heading, title, titleUiItems) {
+	constructor(componentId, label, labelEditable, help, description, editorSize, pixelWidth, uiItems, buttons, data, conditions, resources, icon, heading, title, titleUiItems) {
 		this.componentId = componentId;
 		this.label = label;
 		this.labelEditable = labelEditable;
 		this.help = help;
+		this.description = description;
 		this.editorSize = editorSize;
 		this.pixelWidth = pixelWidth;
 		this.uiItems = uiItems;
@@ -81,6 +82,7 @@ export default class Form {
 				propDef.label,
 				propDef.labelEditable,
 				propDef.help,
+				l10nProvider.l10nResource(propDef.description),
 				propDef.editorSizeHint(editorSizeDefault),
 				propDef.pixelWidth,
 				[UIItem.makePrimaryTabs(tabs)],

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx

@@ -501,12 +501,14 @@ class PropertiesMain extends React.Component {
 				propertiesTitle = (<TitleEditor
 					labelEditable={formData.labelEditable}
 					help={formData.help}
+					description={formData.description}
 					controller={this.propertiesController}
 					helpClickHandler={this.props.callbacks.helpClickHandler}
 					closeHandler={applyOnBlurEnabled ? this.applyPropertiesEditing.bind(this, true) : null}
 					icon={formData.icon}
 					heading={formData.heading}
 					showHeading={this.props.propertiesConfig.heading}
+					showHeadingDesc={this.props.propertiesConfig.showHeadingDesc}
 					titleInfo={formData.title}
 					rightFlyoutTabsView={this.props.propertiesConfig.categoryView === CATEGORY_VIEW.TABS}
 				/>);
@@ -668,6 +670,7 @@ PropertiesMain.propTypes = {
 		conditionReturnValueHandling: PropTypes.string,
 		returnValueFiltering: PropTypes.array,
 		heading: PropTypes.bool,
+		showHeadingDesc: PropTypes.bool,
 		buttonLabels: PropTypes.shape({
 			primary: PropTypes.string,
 			secondary: PropTypes.string

canvas_modules/harness/src/client/App.js

@@ -288,6 +288,7 @@ class App extends React.Component {
 			trimSpaces: true,
 			displayAdditionalComponents: false,
 			heading: false,
+			showHeadingDesc: false,
 			light: true,
 			lightTheme: false,
 			showRequiredIndicator: true,
@@ -2073,6 +2074,7 @@ class App extends React.Component {
 			disableSaveOnRequiredErrors: this.state.disableSaveOnRequiredErrors,
 			trimSpaces: this.state.trimSpaces,
 			heading: this.state.heading,
+			showHeadingDesc: this.state.showHeadingDesc,
 			showRequiredIndicator: this.state.showRequiredIndicator,
 			showAlertsTab: this.state.showAlertsTab,
 			enableResize: this.state.enableResize,
@@ -2513,6 +2515,7 @@ class App extends React.Component {
 			expressionBuilder: this.state.expressionBuilder,
 			displayAdditionalComponents: this.state.displayAdditionalComponents,
 			heading: this.state.heading,
+			showHeadingDesc: this.state.showHeadingDesc,
 			light: this.state.light,
 			showRequiredIndicator: this.state.showRequiredIndicator,
 			showAlertsTab: this.state.showAlertsTab,

canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties-param-def.json

@@ -12,6 +12,7 @@
 		"trimSpaces": true,
 		"displayAdditionalComponents": false,
 		"heading": false,
+		"showHeadingDesc": false,
 		"light": true,
 		"showRequiredIndicator": true,
 		"showAlertsTab": true,
@@ -105,6 +106,11 @@
 			"default": false,
 			"type": "boolean"
 		},
+		{
+			"id": "showHeadingDesc",
+			"default": false,
+			"type": "boolean"
+		},
 		{
 			"id": "light",
 			"default": false,
@@ -340,6 +346,16 @@
 				},
 				"control": "toggle"
 			},
+			{
+				"parameter_ref": "showHeadingDesc",
+				"label": {
+					"default": "showHeadingDesc"
+				},
+				"description": {
+					"default": "Show panel heading description"
+				},
+				"control": "toggle"
+			},
 			{
 				"parameter_ref": "light",
 				"label": {
@@ -713,6 +729,7 @@
 					"disableSaveOnRequiredErrors",
 					"trimSpaces",
 					"heading",
+					"showHeadingDesc",
 					"showRequiredIndicator",
 					"showAlertsTab",
 					"enableResize",