[camel-karavan] 01/02: Expression description in Editor Modal

[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

commit 868b6c5caa6b7334631b96125fa9762d1a921017
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Thu Sep 22 12:49:33 2022 -0400

    Expression description in Editor Modal
---
 .../src/designer/route/property/DslPropertyField.tsx        | 13 +++++++++----
 .../src/designer/route/property/ExpressionField.tsx         |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index 37cadab..11b83a3 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -37,14 +37,14 @@ import {
     Card,
     InputGroup,
     Modal,
-    ModalVariant
+    ModalVariant, Title, TitleSizes
 } from '@patternfly/react-core';
 import '../../karavan.css';
 import "@patternfly/patternfly/patternfly.css";
 import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
 import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
 import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
-import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {CamelMetadataApi, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
 import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
 import {ExpressionField} from "./ExpressionField";
 import {CamelUi, RouteToCreate} from "../../utils/CamelUi";
@@ -77,7 +77,7 @@ interface Props {
     element?: CamelElement
     integration: Integration,
     hideLabel?: boolean,
-    dslLanguage?: string,
+    dslLanguage?: [string, string, string],
     dark: boolean
 }
 
@@ -263,7 +263,12 @@ export class DslPropertyField extends React.Component<Props, State> {
                 </Tooltip>
                 <Modal
                     variant={ModalVariant.large}
-                    title="Expression"
+                    header={<React.Fragment>
+                        <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
+                            {`Expression (${dslLanguage?.[0]})`}
+                        </Title>
+                        <p className="pf-u-pt-sm">{dslLanguage?.[2]}</p>
+                    </React.Fragment>}
                     isOpen={this.state.showEditor}
                     onClose={() => this.setState({showEditor: false})}
                     actions={[
diff --git a/karavan-designer/src/designer/route/property/ExpressionField.tsx b/karavan-designer/src/designer/route/property/ExpressionField.tsx
index 79e0177..7c756a9 100644
--- a/karavan-designer/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -156,7 +156,7 @@ export class ExpressionField extends React.Component<Props, State> {
                                           onDataFormatChange={dataFormat => {console.log(dataFormat)}}
                                           onChange={this.propertyChanged}
                                           dark={this.props.dark}
-                                          dslLanguage={dslLanguage?.[0]}/>
+                                          dslLanguage={dslLanguage}/>
                     )}
                 </FormGroup>
             </div>