You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/04/09 04:33:29 UTC
[camel-karavan] branch main updated: Fix #285 (#299)
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 619b07e Fix #285 (#299)
619b07e is described below
commit 619b07ebaf8e09389c3b256f622287b8eb641aa0
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Sat Apr 9 00:33:25 2022 -0400
Fix #285 (#299)
---
.../src/designer/beans/BeanProperties.tsx | 29 ++++++++++++++++++---
.../designer/dependencies/DependencyProperties.tsx | 30 +++++++++++++++++++---
2 files changed, 52 insertions(+), 7 deletions(-)
diff --git a/karavan-designer/src/designer/beans/BeanProperties.tsx b/karavan-designer/src/designer/beans/BeanProperties.tsx
index d0a9138..b5db272 100644
--- a/karavan-designer/src/designer/beans/BeanProperties.tsx
+++ b/karavan-designer/src/designer/beans/BeanProperties.tsx
@@ -18,7 +18,7 @@ import React from 'react';
import {
Form,
FormGroup,
- TextInput, Button, Title, Tooltip, Text, TextVariants,
+ TextInput, Button, Title, Tooltip, Text, TextVariants, Popover,
} from '@patternfly/react-core';
import '../karavan.css';
import "@patternfly/patternfly/patternfly.css";
@@ -32,6 +32,8 @@ import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-icon";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {IntegrationHeader} from "../utils/KaravanComponents";
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon'
+import {PropertyMeta} from "../../../../karavan-core/lib/model/CamelMetadata";
+import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
interface Props {
integration: Integration
@@ -113,6 +115,27 @@ export class BeanProperties extends React.Component<Props, State> {
}
}
+ getLabelIcon = (displayName: string, description: string) => {
+ return (
+ <Popover
+ position={"left"}
+ headerContent={displayName}
+ bodyContent={description}
+ footerContent={
+ <div>
+ <b>Required</b>
+ </div>
+ }>
+ <button type="button" aria-label="More info" onClick={e => {
+ e.preventDefault();
+ e.stopPropagation();
+ }} className="pf-c-form__group-label-help">
+ <HelpIcon noVerticalAlign/>
+ </button>
+ </Popover>
+ )
+ }
+
getBeanForm() {
const bean = this.state.bean;
return (
@@ -125,11 +148,11 @@ export class BeanProperties extends React.Component<Props, State> {
</Tooltip>
</div>
</div>
- <FormGroup label="Name" fieldId="name" isRequired>
+ <FormGroup label="Name" fieldId="name" isRequired labelIcon={this.getLabelIcon("Name", "Bean name used as a reference ex: myBean")}>
<TextInput className="text-field" isRequired type="text" id="name" name="name" value={bean?.name}
onChange={e => this.beanChanged("name", e)}/>
</FormGroup>
- <FormGroup label="Type" fieldId="type" isRequired>
+ <FormGroup label="Type" fieldId="type" isRequired labelIcon={this.getLabelIcon("Type", "Bean class Canonical Name ex: org.demo.MyBean")}>
<TextInput className="text-field" isRequired type="text" id="type" name="type" value={bean?.type} onChange={e => this.beanChanged("type", e)}/>
</FormGroup>
<FormGroup label="Properties" fieldId="properties" className="bean-properties">
diff --git a/karavan-designer/src/designer/dependencies/DependencyProperties.tsx b/karavan-designer/src/designer/dependencies/DependencyProperties.tsx
index 1ab5101..6cc6450 100644
--- a/karavan-designer/src/designer/dependencies/DependencyProperties.tsx
+++ b/karavan-designer/src/designer/dependencies/DependencyProperties.tsx
@@ -18,7 +18,7 @@ import React from 'react';
import {
Button,
Form,
- FormGroup,
+ FormGroup, Popover,
TextInput, Title, Tooltip,
} from '@patternfly/react-core';
import '../karavan.css';
@@ -28,6 +28,7 @@ import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {IntegrationHeader} from "../utils/KaravanComponents";
import {v4 as uuidv4} from "uuid";
import CloneIcon from "@patternfly/react-icons/dist/esm/icons/clone-icon";
+import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
interface Props {
integration: Integration
@@ -71,6 +72,27 @@ export class DependencyProperties extends React.Component<Props, State> {
}
}
+ getLabelIcon = (displayName: string, description: string) => {
+ return (
+ <Popover
+ position={"left"}
+ headerContent={displayName}
+ bodyContent={description}
+ footerContent={
+ <div>
+ <b>Required</b>
+ </div>
+ }>
+ <button type="button" aria-label="More info" onClick={e => {
+ e.preventDefault();
+ e.stopPropagation();
+ }} className="pf-c-form__group-label-help">
+ <HelpIcon noVerticalAlign/>
+ </button>
+ </Popover>
+ )
+ }
+
getDependencyForm() {
const dependency = this.state.dependency;
return (
@@ -83,15 +105,15 @@ export class DependencyProperties extends React.Component<Props, State> {
</Tooltip>
</div>
</div>
- <FormGroup label="Group" fieldId="group" isRequired>
+ <FormGroup label="Group" fieldId="group" isRequired labelIcon={this.getLabelIcon("Group ID", "Maven artifact groupId uniquely identifies project ex: org.demo.project ")}>
<TextInput className="text-field" isRequired type="text" id="group" name="group" value={dependency?.group}
onChange={e => this.dependencyChanged("group", e)}/>
</FormGroup>
- <FormGroup label="Artifact" fieldId="artifact" isRequired>
+ <FormGroup label="Artifact" fieldId="artifact" isRequired labelIcon={this.getLabelIcon("Artifact ID", "Maven artifact artifactId is the name of the jar without version ex: core")}>
<TextInput className="text-field" isRequired type="text" id="artifact" name="artifact" value={dependency?.artifact}
onChange={e => this.dependencyChanged("artifact", e)}/>
</FormGroup>
- <FormGroup label="Version" fieldId="version" isRequired>
+ <FormGroup label="Version" fieldId="version" isRequired labelIcon={this.getLabelIcon("Version", "Maven artifact version ex: 1.0.0")}>
<TextInput className="text-field" isRequired type="text" id="version" name="version" value={dependency?.version}
onChange={e => this.dependencyChanged("version", e)}/>
</FormGroup>