[camel-karavan] branch main updated: Implements #12 (#13)

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git


The following commit(s) were added to refs/heads/main by this push:
     new 426df87  Implements #12 (#13)
426df87 is described below

commit 426df873123d1df10d77b2ceea3e0e7e833c5b3d
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Fri Oct 8 10:31:14 2021 -0400

    Implements #12 (#13)
---
 karavan-designer/src/designer/ui/DslElement.tsx | 68 +++++++++++++++++--------
 1 file changed, 48 insertions(+), 20 deletions(-)

diff --git a/karavan-designer/src/designer/ui/DslElement.tsx b/karavan-designer/src/designer/ui/DslElement.tsx
index 6024791..fcf082a 100644
--- a/karavan-designer/src/designer/ui/DslElement.tsx
+++ b/karavan-designer/src/designer/ui/DslElement.tsx
@@ -26,6 +26,8 @@ import {CamelApi} from "../api/CamelApi";
 import {CamelUi} from "../api/CamelUi";
 import {EventBus} from "../api/EventBus";
 import {DslPath} from "./DslPath";
+import {CamelApiExt} from "../api/CamelApiExt";
+import {Languages} from "../api/CamelMetadata";
 
 interface Props {
     step: CamelElement,
@@ -102,6 +104,17 @@ export class DslElement extends React.Component<Props, State> {
         return this.state.step.dslName.startsWith("from");
     }
 
+    isShowTooltip = (): boolean => {
+        const exp = CamelApiExt.getExpressionValue(this.state.element);
+        return this.state.element.hasOwnProperty("expression") && (exp !== undefined && exp?.trim().length > 0);
+    }
+
+    getExpressionTooltip = (): string => {
+        const language = CamelApiExt.getExpressionLanguage(this.state.element) || 'simple';
+        const value = CamelApiExt.getExpressionValue(this.state.element) || '';
+        return language.concat(": ", value);
+    }
+
     getArrow = () => {
         return (
             <img className={"arrow-down"} alt="arrow"
@@ -109,6 +122,39 @@ export class DslElement extends React.Component<Props, State> {
             />)
     }
 
+    getHeader = () => {
+        return (
+            <div className="header"
+                 style={
+                     ["choice", "multicast"].includes(this.state.element.dslName)
+                         ? {width: "100%", borderWidth: this.isSelected() ? "2px" : "1px"}
+                         : {borderWidth: this.isSelected() ? "2px" : "1px"}
+                 }
+                 ref={el => {
+                     if (el && (this.state.step.dslName === 'fromStep' || this.state.step.dslName === 'toStep')) EventBus.sendPosition(this.state.step, el.getBoundingClientRect());
+                 }}>
+                <img draggable={false}
+                     src={CamelUi.getIcon(this.state.element)}
+                     className="icon" alt="icon">
+                </img>
+                <Text>{CamelUi.getTitle(this.state.element)}</Text>
+                <button type="button" aria-label="Delete" onClick={e => this.delete(e)}
+                        className="delete-button">
+                    <DeleteIcon noVerticalAlign/>
+                </button>
+            </div>
+        );
+    }
+
+    getHeaderWithTooltip = () => {
+        return (
+            <Tooltip position={"auto"} disabled={this.isShowTooltip()}
+                     content={<div>{this.getExpressionTooltip()}</div>}>
+                {this.getHeader()}
+            </Tooltip>
+        );
+    }
+
     render() {
         return (
             <div className={
@@ -123,25 +169,7 @@ export class DslElement extends React.Component<Props, State> {
                  onClick={event => this.selectElement(event)}
 
             >
-                <div className="header"
-                     style={
-                         ["choice", "multicast"].includes(this.state.element.dslName)
-                             ? {width:"100%", borderWidth: this.isSelected() ? "2px" : "1px"}
-                             : {borderWidth: this.isSelected() ? "2px" : "1px"}
-                     }
-                     ref={el => {
-                         if (el && (this.state.step.dslName === 'fromStep' || this.state.step.dslName === 'toStep')) EventBus.sendPosition(this.state.step, el.getBoundingClientRect());
-                     }}>
-                    <img draggable={false}
-                         src={CamelUi.getIcon(this.state.element)}
-                         className="icon" alt="icon">
-                    </img>
-                    <Text>{CamelUi.getTitle(this.state.element)}</Text>
-                    <button type="button" aria-label="Delete" onClick={e => this.delete(e)}
-                            className="delete-button">
-                        <DeleteIcon noVerticalAlign/>
-                    </button>
-                </div>
+                {this.isShowTooltip() ? this.getHeaderWithTooltip() : this.getHeader()}
                 {this.state.element.hasSteps() && !this.horizontal() && this.getArrow()}
                 <div className={this.state.element.dslName}>
                     {this.state.element.hasSteps() &&
@@ -209,4 +237,4 @@ export class DslElement extends React.Component<Props, State> {
             </div>
         );
     }
-}
\ No newline at end of file
+}