Change renderTootlip as per conditions

Signed-off-by: srikant <[email protected]>
srikant-ch5 · Jan 8, 2025 · a82ebe1 · a82ebe1
1 parent 8214c5f
commit a82ebe1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 50 deletions.
diff --git a/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.jsx b/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.jsx
@@ -20,19 +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 { Help, Edit, Close, Information } from "@carbon/react/icons";
 import { TextInput, Button, Layer } 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";
 
-import Tooltip from "../../../tooltip/tooltip.jsx";
-import Icon from "../../../icons/icon.jsx";
-import { CARBON_ICONS } from "./../../constants/constants";
-
-
 class TitleEditor extends Component {
 	constructor(props) {
 		super(props);
@@ -140,42 +136,35 @@ 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;
 
 		// 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>
-				);
-			}
+		const renderTooltip = (isDescWithLink) => {
+			const description = this.props.description.default;
+			const tooltipButton = isDescWithLink
+				? (<ToggletipActions>
+					<Button
+						className="properties-title-editor-desc-btn desc-help"
+						onClick={this.helpClickHandler}
+						data-id="help"
+						size="sm"
+					>{helpButtonLabel}</Button>
+				</ToggletipActions>) : null;
 
-			return null;
+			return (
+				<span className="properties-heading-icon">
+					<Toggletip align="bottom" autoAlign >
+						<ToggletipButton label="Additional information">
+							<Information />
+						</ToggletipButton>
+						<ToggletipContent>
+							<p className="properties-title-editor-desc">{description}</p>
+							{tooltipButton}
+						</ToggletipContent>
+					</Toggletip>
+				</span>
+			);
 		};
 
 		const renderHelpButton = () => {
@@ -200,8 +189,9 @@ class TitleEditor extends Component {
 			return null;
 		};
 
-		if (this.props.showHeadingDesc) {
-			helpButton = renderTooltip();
+		if (this.props.showHeadingDesc && this.props.description) {
+			const isDescWithLink = this.props.help;
+			helpButton = renderTooltip(isDescWithLink);
 		} else {
 			helpButton = renderHelpButton();
 		}
@@ -250,7 +240,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
 					}

diff --git a/canvas_modules/harness/test_resources/parameterDefs/readonly_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/readonly_paramDef.json
@@ -424,16 +424,8 @@
         ]
       }
     ],
-    "description": {
-      "default": "Readonly description",
-      "link": {
-        "id": "link_for_description",
-        "data": {
-          "something": "option data"
-        }
-      }
-    },
     "help": {
+      "id": "link_for_description",
       "data": {
         "url": "randomUrl"
       }