#2256 Add ability to display text description next to heading label

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

@@ -20,13 +20,16 @@
 import Isvg from "react-inlinesvg";
 import { get } from "lodash";
 import classNames from "classnames";
-import { Help, Edit, Close } from "@carbon/react/icons";
+import { Edit, Close } from "@carbon/react/icons";
 import { TextInput, Button, Layer } 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";
+import Tooltip from "../../../tooltip/tooltip.jsx";
+import Icon from "../../../icons/icon.jsx";
+import { CARBON_ICONS } from "./../../constants/constants";
 
 
 class TitleEditor extends Component {
@@ -117,7 +120,7 @@
 			return null;
 		}
 		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 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;
@@ -136,19 +139,20 @@
 				iconDescription={propertiesTitleEditButtonLabel}
 				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
-			/>)
+			? (<span className="properties-heading-icon">
+				<Tooltip
+					className="properties-title-editor-btn help"
+					data-id="help"
+					tip={this.props.description?.default}
+					link={this.props.description?.link ? this.props.description?.link : null}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-title-editor-btn help" />
+				</Tooltip>
+			</span>)
 			: null;
 
 		const closeButton = this.props.closeHandler
@@ -241,6 +245,7 @@
 	showHeading: 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

@@ -152,3 +152,15 @@
 	justify-content: center;
 	padding: 0;
 }
+
+.properties-heading-icon {
+	position: absolute;
+	margin-top: $spacing-03;
+}
+
+.properties-title-editor {
+	.tooltip-container {
+		height: $spacing-05;
+		cursor: pointer;
+	}
+}

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

@@ -21,14 +21,16 @@ import { UIItem } from "./UIItem";
 import { L10nProvider } from "../util/L10nProvider";
 import { translateMessages } from "./Conditions";
 import { Size } from "../constants/form-constants";
+import { ResourceDef } from "../util/L10nProvider";
 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 = ResourceDef.make(description);
 		this.editorSize = editorSize;
 		this.pixelWidth = pixelWidth;
 		this.uiItems = uiItems;
@@ -81,6 +83,7 @@ export default class Form {
 				propDef.label,
 				propDef.labelEditable,
 				propDef.help,
+				propDef.description,
 				propDef.editorSizeHint(editorSizeDefault),
 				propDef.pixelWidth,
 				[UIItem.makePrimaryTabs(tabs)],

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

@@ -486,6 +486,7 @@ 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}

canvas_modules/harness/test_resources/parameterDefs/readonly_paramDef.json

@@ -424,6 +424,15 @@
         ]
       }
     ],
+    "description": {
+      "default": "Readonly description",
+      "link": {
+        "id": "link_for_action-buttons-panel",
+        "data": {
+          "something": "option data"
+        }
+      }
+    },
     "help": {
       "data": {
         "url": "randomUrl"