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

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

@@ -28,6 +28,10 @@ import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constant
 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 {
 	constructor(props) {
@@ -136,20 +140,71 @@ class TitleEditor extends Component {
 				iconDescription={propertiesTitleEditButtonLabel}
 				hasIconOnly
 			/>);
+		let tooltip = "";
+		if (this.props.description) {
+			tooltip = (
+				<span>{this.props.description.default}</span>
+			);
+		}
+		if (this.props.description?.link) {
+			this.props.description.link.propertyId = { name: "number" };
+		}
+		let helpButton = null;
 
-		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;
+		// If headingDesc config is enabled show tooltip with link beside heading
+		const renderTooltip = () => {
+			if (this.props.showHeadingDesc && this.props.description) {
+				const { description, controller } = this.props;
+				const { link } = description;
+				const tooltipLinkHandler = controller.getHandlers().tooltipLinkHandler;
+
+				return (
+					<span className="properties-heading-icon">
+						<Tooltip
+							id={"properties-title-tooltip" + this.id}
+							tip={tooltip}
+							link={link || null}
+							tooltipLinkHandler={tooltipLinkHandler}
+							direction="bottom"
+							className="properties-title-tooltip"
+							showToolTipOnClick
+						>
+							<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+						</Tooltip>
+					</span>
+				);
+			}
+
+			return null;
+		};
+
+		const renderHelpButton = () => {
+			const { help } = this.props;
+
+			if (help) {
+				return (
+					<Button
+						kind="ghost"
+						className="properties-title-editor-btn help"
+						data-id="help"
+						onClick={this.helpClickHandler}
+						tooltipPosition="bottom"
+						renderIcon={Help}
+						size="sm"
+						iconDescription={helpButtonLabel}
+						hasIconOnly
+					/>
+				);
+			}
+
+			return null;
+		};
+
+		if (this.props.showHeadingDesc) {
+			helpButton = renderTooltip();
+		} else {
+			helpButton = renderHelpButton();
+		}
 
 		const closeButton = this.props.closeHandler
 			? (<div className="properties-close-button">
@@ -239,8 +294,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

@@ -86,6 +86,10 @@
 			margin-left: $spacing-02; // spacing between heading label and help button
 		}
 	}
+	.properties-heading-icon {
+		position: relative;
+		margin: 0 0 0 $spacing-04;
+	}
 }
 .properties-title-editor-input {
 	width: calc(100% - #{$spacing-03}); // subtract 8px to align with Close icon when applyOnBlur is set
@@ -152,3 +156,15 @@
 	justify-content: center;
 	padding: 0;
 }
+
+.properties-heading-icon {
+	position: absolute;
+	margin: $spacing-03 0 0 $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

@@ -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.headingDesc}
 					titleInfo={formData.title}
 					rightFlyoutTabsView={this.props.propertiesConfig.categoryView === CATEGORY_VIEW.TABS}
 				/>);
@@ -666,6 +668,7 @@ PropertiesMain.propTypes = {
 		conditionReturnValueHandling: PropTypes.string,
 		returnValueFiltering: PropTypes.array,
 		heading: PropTypes.bool,
+		headingDesc: PropTypes.bool,
 		buttonLabels: PropTypes.shape({
 			primary: PropTypes.string,
 			secondary: PropTypes.string

canvas_modules/harness/src/client/App.js

@@ -287,6 +287,7 @@ class App extends React.Component {
 			trimSpaces: true,
 			displayAdditionalComponents: false,
 			heading: false,
+			headingDesc: false,
 			light: true,
 			lightTheme: false,
 			showRequiredIndicator: true,
@@ -2072,6 +2073,7 @@ class App extends React.Component {
 			disableSaveOnRequiredErrors: this.state.disableSaveOnRequiredErrors,
 			trimSpaces: this.state.trimSpaces,
 			heading: this.state.heading,
+			headingDesc: this.state.headingDesc,
 			showRequiredIndicator: this.state.showRequiredIndicator,
 			showAlertsTab: this.state.showAlertsTab,
 			enableResize: this.state.enableResize,
@@ -2511,6 +2513,7 @@ class App extends React.Component {
 			expressionBuilder: this.state.expressionBuilder,
 			displayAdditionalComponents: this.state.displayAdditionalComponents,
 			heading: this.state.heading,
+			headingDesc: this.state.headingDesc,
 			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,
+		"headingDesc": false,
 		"light": true,
 		"showRequiredIndicator": true,
 		"showAlertsTab": true,
@@ -105,6 +106,11 @@
 			"default": false,
 			"type": "boolean"
 		},
+		{
+			"id": "headingDesc",
+			"default": false,
+			"type": "boolean"
+		},
 		{
 			"id": "light",
 			"default": false,
@@ -340,6 +346,16 @@
 				},
 				"control": "toggle"
 			},
+			{
+				"parameter_ref": "headingDesc",
+				"label": {
+					"default": "headingDesc"
+				},
+				"description": {
+					"default": "Show panel heading description"
+				},
+				"control": "toggle"
+			},
 			{
 				"parameter_ref": "light",
 				"label": {
@@ -713,6 +729,7 @@
 					"disableSaveOnRequiredErrors",
 					"trimSpaces",
 					"heading",
+					"headingDesc",
 					"showRequiredIndicator",
 					"showAlertsTab",
 					"enableResize",

canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties.jsx

@@ -80,6 +80,7 @@ export default class SidePanelProperties extends React.Component {
 			"trimSpaces": this.props.propertiesConfig.trimSpaces,
 			"displayAdditionalComponents": this.props.propertiesConfig.displayAdditionalComponents,
 			"heading": this.props.propertiesConfig.heading,
+			"headingDesc": this.props.propertiesConfig.headingDesc,
 			"light": this.props.propertiesConfig.light,
 			"showRequiredIndicator": this.props.propertiesConfig.showRequiredIndicator,
 			"showAlertsTab": this.props.propertiesConfig.showAlertsTab,
@@ -332,6 +333,7 @@ SidePanelProperties.propTypes = {
 		expressionBuilder: PropTypes.bool,
 		displayAdditionalComponents: PropTypes.bool,
 		heading: PropTypes.bool,
+		headingDesc: PropTypes.bool,
 		light: PropTypes.bool,
 		showRequiredIndicator: PropTypes.bool,
 		showAlertsTab: PropTypes.bool,

canvas_modules/harness/test_resources/parameterDefs/readonly_paramDef.json

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