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 9eca7d1 Select bean component (#186)
9eca7d1 is described below
commit 9eca7d1b1a4082aec7206cabcf7f70fddbfc14cf
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Fri Feb 11 10:57:47 2022 -0500
Select bean component (#186)
* Beans in Component configuration
* Basic bean config for components
---
karavan-core/src/core/api/ComponentApi.ts | 3 +-
karavan-demo/integrations/docker-compose.yml | 118 +++++++-------
karavan-demo/integrations/sql-to-kafka.yaml | 19 +++
karavan-demo/integrations/sql-to-log.yaml | 27 ++++
karavan-demo/integrations/timer-yaml.yaml | 11 --
karavan-designer/public/components/sql.json | 2 +-
.../kamelets/insert-field-action.kamelet.yaml | 12 +-
karavan-designer/src/App.tsx | 6 +-
.../src/designer/field/ComponentParameterField.tsx | 120 --------------
.../src/designer/route/DslProperties.tsx | 4 +-
.../route/property/ComponentParameterField.tsx | 173 +++++++++++++++++++++
.../{field => route/property}/DataFormatField.tsx | 2 +-
.../{field => route/property}/DslPropertyField.tsx | 6 +-
.../{field => route/property}/ExpressionField.tsx | 4 +-
.../property}/KameletPropertyField.tsx | 2 +-
.../{field => route/property}/ObjectField.tsx | 2 +-
16 files changed, 300 insertions(+), 211 deletions(-)
diff --git a/karavan-core/src/core/api/ComponentApi.ts
b/karavan-core/src/core/api/ComponentApi.ts
index 347ddd1..f598d5a 100644
--- a/karavan-core/src/core/api/ComponentApi.ts
+++ b/karavan-core/src/core/api/ComponentApi.ts
@@ -174,8 +174,7 @@ export const ComponentApi = {
prop.enum = value.enum;
prop.kind = value.kind;
if (value.defaultValue) prop.defaultValue =
value.defaultValue
- if (!value.deprecated && value.type !== 'object')
properties.push(prop);
- if (!value.deprecated && value.type === 'object' &&
value.enum) properties.push(prop);
+ if (!value.deprecated) properties.push(prop);
})
}
} finally {
diff --git a/karavan-demo/integrations/docker-compose.yml
b/karavan-demo/integrations/docker-compose.yml
index 24e861a..4693a45 100644
--- a/karavan-demo/integrations/docker-compose.yml
+++ b/karavan-demo/integrations/docker-compose.yml
@@ -2,57 +2,57 @@
version: '3.8'
services:
- mongo:
- image: mongo
- restart: always
- ports:
- - 27017:27017
- environment:
- MONGO_INITDB_ROOT_USERNAME: root
- MONGO_INITDB_ROOT_PASSWORD: example
- networks:
- - karavan-demo
+ # mongo:
+ # image: mongo
+ # restart: always
+ # ports:
+ # - 27017:27017
+ # environment:
+ # MONGO_INITDB_ROOT_USERNAME: root
+ # MONGO_INITDB_ROOT_PASSWORD: example
+ # networks:
+ # - karavan-demo
- zookeeper:
- container_name: zookeeper
- image: confluentinc/cp-zookeeper:latest
- ports:
- - "2181:2181"
- environment:
- ZOOKEEPER_CLIENT_PORT: 2181
- ZOOKEEPER_TICK_TIME: 2000
- networks:
- - karavan-demo
+ # zookeeper:
+ # container_name: zookeeper
+ # image: confluentinc/cp-zookeeper:latest
+ # ports:
+ # - "2181:2181"
+ # environment:
+ # ZOOKEEPER_CLIENT_PORT: 2181
+ # ZOOKEEPER_TICK_TIME: 2000
+ # networks:
+ # - karavan-demo
- kafka:
- container_name: kafka
- image: confluentinc/cp-kafka:latest
- depends_on:
- - zookeeper
- ports:
- - "9092:9092"
- environment:
- KAFKA_BROKER_ID: 1
- KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
- KAFKA_ADVERTISED_LISTENERS:
PLAINTEXT://kafka:29092,PLAINTEXT_HOST://localhost:9092
- KAFKA_LISTENER_SECURITY_PROTOCOL_MAP:
PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
- KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
- KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
- KAFKA_CREATE_TOPICS: "events:1:1"
- networks:
- - karavan-demo
+ # kafka:
+ # container_name: kafka
+ # image: confluentinc/cp-kafka:latest
+ # depends_on:
+ # - zookeeper
+ # ports:
+ # - "9092:9092"
+ # environment:
+ # KAFKA_BROKER_ID: 1
+ # KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
+ # KAFKA_ADVERTISED_LISTENERS:
PLAINTEXT://kafka:29092,PLAINTEXT_HOST://localhost:9092
+ # KAFKA_LISTENER_SECURITY_PROTOCOL_MAP:
PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
+ # KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
+ # KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
+ # KAFKA_CREATE_TOPICS: "events:1:1"
+ # networks:
+ # - karavan-demo
- activemq:
- image: registry.redhat.io/amq7/amq-broker:latest
- container_name: activemq
- environment:
- - AMQ_USER=admin
- - AMQ_PASSWORD=admin
- ports:
- - "61616:61616"
- - "8161:8161"
- networks:
- - karavan-demo
+ # activemq:
+ # image: registry.redhat.io/amq7/amq-broker:latest
+ # container_name: activemq
+ # environment:
+ # - AMQ_USER=admin
+ # - AMQ_PASSWORD=admin
+ # ports:
+ # - "61616:61616"
+ # - "8161:8161"
+ # networks:
+ # - karavan-demo
postgres:
image: postgres
@@ -70,17 +70,17 @@ services:
networks:
- karavan-demo
- # pgadmin:
- # container_name: pgadmin
- # image: dpage/pgadmin4
- # restart: always
- # environment:
- # PGADMIN_DEFAULT_EMAIL: [email protected]
- # PGADMIN_DEFAULT_PASSWORD: root
- # ports:
- # - "5050:80"
- # networks:
- # - karavan-demo
+ pgadmin:
+ container_name: pgadmin
+ image: dpage/pgadmin4
+ restart: always
+ environment:
+ PGADMIN_DEFAULT_EMAIL: [email protected]
+ PGADMIN_DEFAULT_PASSWORD: root
+ ports:
+ - "5050:80"
+ networks:
+ - karavan-demo
# mysql:
# image: mysql
diff --git a/karavan-demo/integrations/sql-to-kafka.yaml
b/karavan-demo/integrations/sql-to-kafka.yaml
new file mode 100644
index 0000000..527429b
--- /dev/null
+++ b/karavan-demo/integrations/sql-to-kafka.yaml
@@ -0,0 +1,19 @@
+- route:
+ from:
+ uri: "sql:SELECT * FROM table1"
+ parameters:
+ dataSource: "datasource"
+ steps:
+ - marshal:
+ json:
+ library: Jackson
+ - log: "${body}"
+- beans:
+ - name: datasource
+ type: "org.apache.commons.dbcp2.BasicDataSource"
+ properties:
+ username: postgres
+ password: postgres
+ url: jdbc:postgresql:localhost:5432:demo
+ driverClassName: org.postgresql.Driver
+
diff --git a/karavan-demo/integrations/sql-to-log.yaml
b/karavan-demo/integrations/sql-to-log.yaml
new file mode 100644
index 0000000..c657a25
--- /dev/null
+++ b/karavan-demo/integrations/sql-to-log.yaml
@@ -0,0 +1,27 @@
+apiVersion: camel.apache.org/v1
+kind: Integration
+metadata:
+ name: sql-to-log.yaml
+spec:
+ dependencies:
+ - "mvn:org.postgresql:postgresql:42.2.14"
+ - "mvn:org.apache.commons:commons-dbcp2:2.9.0"
+ flows:
+ - route:
+ from:
+ uri: "sql:SELECT * FROM table1"
+ parameters:
+ dataSource: "datasource"
+ steps:
+ - marshal:
+ json:
+ library: Jackson
+ - log: "${body}"
+ - beans:
+ - name: datasource
+ type: "org.apache.commons.dbcp2.BasicDataSource"
+ properties:
+ username: postgres
+ password: postgres
+ url: jdbc:postgresql:localhost:5432:demo
+ driverClassName: org.postgresql.Driver
diff --git a/karavan-demo/integrations/timer-yaml.yaml
b/karavan-demo/integrations/timer-yaml.yaml
deleted file mode 100644
index d725e86..0000000
--- a/karavan-demo/integrations/timer-yaml.yaml
+++ /dev/null
@@ -1,11 +0,0 @@
-- route:
- from:
- uri: kamelet:timer-source
- steps:
- - log:
- message: ${body}
- loggingLevel: INFO
- logName: demo
- parameters:
- period: 3000
- message: Hello world
diff --git a/karavan-designer/public/components/sql.json
b/karavan-designer/public/components/sql.json
index 5a476eb..cad3841 100644
--- a/karavan-designer/public/components/sql.json
+++ b/karavan-designer/public/components/sql.json
@@ -1 +1 @@
-{"component":{"kind":"component","name":"sql","title":"SQL","description":"Perform
SQL queries using Spring
JDBC.","deprecated":false,"firstVersion":"1.4.0","label":"database,sql","javaType":"org.apache.camel.component.sql.SqlComponent","supportLevel":"Stable","groupId":"org.apache.camel","artifactId":"camel-sql","version":"3.12.0","scheme":"sql","extendsScheme":"","syntax":"sql:query","async":false,"api":false,"consumerOnly":false,"producerOnly":false,"lenientProperties":false},"propert
[...]
\ No newline at end of file
+{"component":{"kind":"component","name":"sql","title":"SQL","description":"Perform
SQL queries using Spring
JDBC.","deprecated":false,"firstVersion":"1.4.0","label":"database,sql","javaType":"org.apache.camel.component.sql.SqlComponent","supportLevel":"Stable","groupId":"org.apache.camel","artifactId":"camel-sql","version":"3.15.0","scheme":"sql","extendsScheme":"","syntax":"sql:query","async":false,"api":false,"consumerOnly":false,"producerOnly":false,"lenientProperties":false},"propert
[...]
\ No newline at end of file
diff --git a/karavan-designer/public/kamelets/insert-field-action.kamelet.yaml
b/karavan-designer/public/kamelets/insert-field-action.kamelet.yaml
index 951795d..f40116f 100644
--- a/karavan-designer/public/kamelets/insert-field-action.kamelet.yaml
+++ b/karavan-designer/public/kamelets/insert-field-action.kamelet.yaml
@@ -1,7 +1,7 @@
apiVersion: camel.apache.org/v1alpha1
kind: Kamelet
metadata:
- name: insert-field-action
+ name: insert-property-action
labels:
camel.apache.org/kamelet.type: "action"
annotations:
@@ -22,16 +22,16 @@ spec:
No headers mapping supported, only constant values.
required:
- - field
+ - property
- value
properties:
field:
title: Field
- description: The name of the field to be added
+ description: The name of the property to be added
type: string
value:
title: Value
- description: The value of the field
+ description: The value of the property
type: string
type: object
dependencies:
@@ -55,8 +55,8 @@ spec:
library: Jackson
unmarshalTypeName: com.fasterxml.jackson.databind.JsonNode
- set-property:
- name: "field"
- constant: "{{field}}"
+ name: "property"
+ constant: "{{property}}"
- set-property:
name: "value"
constant: "{{value}}"
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index c504245..bb4ab23 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -84,7 +84,7 @@ class App extends React.Component<Props, State> {
' - beans:\n' +
' - name: myNested\n' +
' type: ${MyBean.class.name}\n' +
- ' properties:\n' +
+ ' property:\n' +
' field1: \'value1\'\n' +
' field2: \'value2\'\n' +
' nested:\n' +
@@ -92,7 +92,7 @@ class App extends React.Component<Props, State> {
' bar: \'valueBar\'\n' +
' - name: myProps\n' +
' type: ${MyBean.class.name}\n' +
- ' properties:\n' +
+ ' property:\n' +
' field1: \'f1_p\'\n' +
' field2: \'f2_p\'\n' +
' nested.foo: \'nf1_p\'\n' +
@@ -110,7 +110,7 @@ class App extends React.Component<Props, State> {
"http-secured-source.kamelet.yaml",
"http-sink.kamelet.yaml",
"http-source.kamelet.yaml",
- "insert-field-action.kamelet.yaml",
+ "insert-property-action.kamelet.yaml",
"insert-header-action.kamelet.yaml",
"kafka-not-secured-sink.kamelet.yaml",
"kafka-not-secured-source.kamelet.yaml",
diff --git a/karavan-designer/src/designer/field/ComponentParameterField.tsx
b/karavan-designer/src/designer/field/ComponentParameterField.tsx
deleted file mode 100644
index 85cce99..0000000
--- a/karavan-designer/src/designer/field/ComponentParameterField.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import {
- FormGroup,
- TextInput,
- Popover,
- Switch,
- Select,
- SelectVariant,
- SelectDirection,
- SelectOption,
-} from '@patternfly/react-core';
-import '../karavan.css';
-import "@patternfly/patternfly/patternfly.css";
-import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
-import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
-
-interface Props {
- property: ComponentProperty,
- value: any,
- onParameterChange?: (parameter: string, value: string | number | boolean |
any, pathParameter?: boolean) => void
-}
-
-interface State {
- selectIsOpen: boolean
-}
-
-export class ComponentParameterField extends React.Component<Props, State> {
-
- public state: State = {
- selectIsOpen: false,
- }
-
- openSelect = () => {
- this.setState({selectIsOpen: true});
- }
-
- parametersChanged = (parameter: string, value: string | number | boolean |
any, pathParameter?: boolean) => {
- this.props.onParameterChange?.call(this, parameter, value,
pathParameter);
- this.setState({selectIsOpen: false});
- }
-
- render() {
- const property: ComponentProperty = this.props.property;
- const value = this.props.value;
- const prefix = "parameters";
- const id = prefix + "-" + property.name;
- const selectOptions: JSX.Element[] = []
- if (property.enum && property.enum.length > 0) {
- selectOptions.push(<SelectOption key={0} value={"Select ..."}
isPlaceholder/>);
- property.enum.forEach(v => selectOptions.push(<SelectOption
key={v} value={v}/>));
- }
- return (
- <FormGroup
- key={id}
- label={property.displayName}
- fieldId={id}
- isRequired={property.kind === 'path' || property.required}
- labelIcon={
- <Popover
- position={"left"}
- headerContent={property.displayName}
- bodyContent={property.description}
- footerContent={property.defaultValue !== undefined ?
"Default: " + property.defaultValue : undefined}>
- <button type="button" aria-label="More info"
onClick={e => e.preventDefault()}
- className="pf-c-form__group-label-help">
- <HelpIcon noVerticalAlign/>
- </button>
- </Popover>
- }>
- {['string', 'duration', 'integer', 'int',
'number'].includes(property.type) && property.enum === undefined &&
- <TextInput
- className="text-field" isRequired
- type={['integer', 'int', 'number'].includes(property.type)
? 'number' : (property.secret ? "password" : "text")}
- id={id} name={id}
- value={value !== undefined ? value : property.defaultValue}
- onChange={e => this.parametersChanged(property.name,
['integer', 'int', 'number'].includes(property.type) ? Number(e) : e,
property.kind === 'path')}/>
- }
- {['string', 'object'].includes(property.type) && property.enum
&&
- <Select
- variant={SelectVariant.single}
- aria-label={property.name}
- onToggle={isExpanded => {
- this.openSelect()
- }}
- onSelect={(e, value, isPlaceholder) =>
this.parametersChanged(property.name, (!isPlaceholder ? value : undefined),
property.kind === 'path')}
- selections={value !== undefined ? value.toString() :
property.defaultValue}
- isOpen={this.state.selectIsOpen}
- aria-labelledby={property.name}
- direction={SelectDirection.down}
- >
- {selectOptions}
- </Select>
- }
- {property.type === 'boolean' && <Switch
- id={id} name={id}
- value={value?.toString()}
- aria-label={id}
- isChecked={value !== undefined ? Boolean(value) === true :
Boolean(property.defaultValue) === true}
- onChange={e => this.parametersChanged(property.name,
!Boolean(value))}/>
- }
- </FormGroup>
- )
- }
-}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/DslProperties.tsx
b/karavan-designer/src/designer/route/DslProperties.tsx
index c7fb57a..89e67e5 100644
--- a/karavan-designer/src/designer/route/DslProperties.tsx
+++ b/karavan-designer/src/designer/route/DslProperties.tsx
@@ -25,8 +25,8 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import "@patternfly/patternfly/patternfly.css";
-import {DataFormatField} from "../field/DataFormatField";
-import {DslPropertyField} from "../field/DslPropertyField";
+import {DataFormatField} from "./property/DataFormatField";
+import {DslPropertyField} from "./property/DslPropertyField";
import {
CamelElement,
Integration,
diff --git
a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
new file mode 100644
index 0000000..7b198b1
--- /dev/null
+++ b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
@@ -0,0 +1,173 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import {
+ FormGroup,
+ TextInput,
+ Popover,
+ Switch,
+ Select,
+ SelectVariant,
+ SelectDirection,
+ SelectOption,
+} from '@patternfly/react-core';
+import '../../karavan.css';
+import "@patternfly/patternfly/patternfly.css";
+import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
+import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
+import {CamelUi} from "../../utils/CamelUi";
+import {Integration} from "karavan-core/lib/model/CamelDefinition";
+
+const prefix = "parameters";
+
+interface Props {
+ property: ComponentProperty,
+ integration: Integration,
+ value: any,
+ onParameterChange?: (parameter: string, value: string | number | boolean |
any, pathParameter?: boolean) => void
+}
+
+interface State {
+ selectStatus: Map<string, boolean>
+}
+
+export class ComponentParameterField extends React.Component<Props, State> {
+
+ public state: State = {
+ selectStatus: new Map<string, boolean>(),
+ }
+
+ parametersChanged = (parameter: string, value: string | number | boolean |
any, pathParameter?: boolean) => {
+ this.props.onParameterChange?.call(this, parameter, value,
pathParameter);
+ this.setState({selectStatus: new Map<string, boolean>([[parameter,
false]])});
+ }
+
+ openSelect = (propertyName: string) => {
+ this.setState({selectStatus: new Map<string, boolean>([[propertyName,
true]])});
+ }
+
+ isSelectOpen = (propertyName: string): boolean => {
+ return this.state.selectStatus.has(propertyName) &&
this.state.selectStatus.get(propertyName) === true;
+ }
+
+ getSelectBean = (property: ComponentProperty, value: any) => {
+ const selectOptions: JSX.Element[] = [];
+ const beans = CamelUi.getBeans(this.props.integration);
+ if (beans) {
+ selectOptions.push(<SelectOption key={0} value={"Select..."}
isPlaceholder/>);
+ selectOptions.push(...beans.map((bean) => <SelectOption
key={bean.name} value={bean.name} description={bean.type}/>));
+ }
+ return (
+ <Select
+ variant={SelectVariant.single}
+ aria-label={property.name}
+ onToggle={isExpanded => {
+ this.openSelect(property.name)
+ }}
+ onSelect={(e, value, isPlaceholder) =>
this.parametersChanged(property.name, (!isPlaceholder ? value : undefined))}
+ selections={value}
+ isOpen={this.isSelectOpen(property.name)}
+ aria-labelledby={property.name}
+ direction={SelectDirection.down}
+ >
+ {selectOptions}
+ </Select>
+ )
+ }
+
+ getTextInput = (property: ComponentProperty, value: any) => {
+ const id = prefix + "-" + property.name;
+ return (
+ <TextInput
+ className="text-field" isRequired
+ type={['integer', 'int', 'number'].includes(property.type) ?
'number' : (property.secret ? "password" : "text")}
+ id={id} name={id}
+ value={value !== undefined ? value : property.defaultValue}
+ onChange={e => this.parametersChanged(property.name,
['integer', 'int', 'number'].includes(property.type) ? Number(e) : e,
property.kind === 'path')}/>
+ )
+ }
+
+ getSelect = (property: ComponentProperty, value: any) => {
+ const selectOptions: JSX.Element[] = []
+ if (property.enum && property.enum.length > 0) {
+ selectOptions.push(<SelectOption key={0} value={"Select ..."}
isPlaceholder/>);
+ property.enum.forEach(v => selectOptions.push(<SelectOption
key={v} value={v}/>));
+ }
+ return (
+ <Select
+ variant={SelectVariant.single}
+ aria-label={property.name}
+ onToggle={isExpanded => {
+ this.openSelect(property.name)
+ }}
+ onSelect={(e, value, isPlaceholder) =>
this.parametersChanged(property.name, (!isPlaceholder ? value : undefined),
property.kind === 'path')}
+ selections={value !== undefined ? value.toString() :
property.defaultValue}
+ isOpen={this.isSelectOpen(property.name)}
+ aria-labelledby={property.name}
+ direction={SelectDirection.down}
+ >
+ {selectOptions}
+ </Select>
+ )
+ }
+
+ getSwitch = (property: ComponentProperty, value: any) => {
+ const id = prefix + "-" + property.name;
+ return (
+ <Switch
+ id={id} name={id}
+ value={value?.toString()}
+ aria-label={id}
+ isChecked={value !== undefined ? Boolean(value) === true :
Boolean(property.defaultValue) === true}
+ onChange={e => this.parametersChanged(property.name,
!Boolean(value))}/>
+ )
+ }
+
+ render() {
+ const property: ComponentProperty = this.props.property;
+ const value = this.props.value;
+ const id = prefix + "-" + property.name;
+ return (
+ <FormGroup
+ key={id}
+ label={property.displayName}
+ fieldId={id}
+ isRequired={property.kind === 'path' || property.required}
+ labelIcon={
+ <Popover
+ position={"left"}
+ headerContent={property.displayName}
+ bodyContent={property.description}
+ footerContent={property.defaultValue !== undefined ?
"Default: " + property.defaultValue : undefined}>
+ <button type="button" aria-label="More info"
onClick={e => e.preventDefault()}
+ className="pf-c-form__group-label-help">
+ <HelpIcon noVerticalAlign/>
+ </button>
+ </Popover>
+ }>
+ {['string', 'duration', 'integer', 'int',
'number'].includes(property.type) && property.enum === undefined
+ && this.getTextInput(property, value)}
+ {['object'].includes(property.type) && !property.enum
+ && this.getSelectBean(property, value)}
+ {['string', 'object'].includes(property.type) && property.enum
+ && this.getSelect(property, value)}
+ {property.type === 'boolean'
+ && this.getSwitch(property, value)}
+ </FormGroup>
+ )
+ }
+}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/field/DataFormatField.tsx
b/karavan-designer/src/designer/route/property/DataFormatField.tsx
similarity index 99%
rename from karavan-designer/src/designer/field/DataFormatField.tsx
rename to karavan-designer/src/designer/route/property/DataFormatField.tsx
index 7513eba..beb6ff4 100644
--- a/karavan-designer/src/designer/field/DataFormatField.tsx
+++ b/karavan-designer/src/designer/route/property/DataFormatField.tsx
@@ -22,7 +22,7 @@ import {
SelectDirection,
SelectOption,
} from '@patternfly/react-core';
-import '../karavan.css';
+import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import {CamelMetadataApi, PropertyMeta} from
"karavan-core/lib/model/CamelMetadata";
import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt";
diff --git a/karavan-designer/src/designer/field/DslPropertyField.tsx
b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
similarity index 98%
rename from karavan-designer/src/designer/field/DslPropertyField.tsx
rename to karavan-designer/src/designer/route/property/DslPropertyField.tsx
index c1941c9..841e3e1 100644
--- a/karavan-designer/src/designer/field/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -25,7 +25,7 @@ import {
SelectDirection,
SelectOption, ExpandableSection, TextArea, Chip, TextInputGroup,
TextInputGroupMain, TextInputGroupUtilities, ChipGroup, Button, Text, Tooltip
} from '@patternfly/react-core';
-import '../karavan.css';
+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";
@@ -33,7 +33,7 @@ import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import { PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt";
import {ExpressionField} from "./ExpressionField";
-import {CamelUi} from "../utils/CamelUi";
+import {CamelUi} from "../../utils/CamelUi";
import {ComponentParameterField} from "./ComponentParameterField";
import {CamelElement, DataFormatDefinition, Integration} from
"karavan-core/lib/model/CamelDefinition";
import {KameletPropertyField} from "./KameletPropertyField";
@@ -268,6 +268,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
<ComponentParameterField
key={kp.name}
property={kp}
+ integration={this.props.integration}
value={CamelDefinitionApiExt.getParametersValue(this.props.element, kp.name,
kp.kind === 'path')}
onParameterChange={this.props.onParameterChange}
/>)}
@@ -291,6 +292,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
<div className="parameters">
{CamelUi.getComponentProperties(this.props.element,
true).map(kp =>
<ComponentParameterField
+ integration={this.props.integration}
key={kp.name}
property={kp}
value={CamelDefinitionApiExt.getParametersValue(this.props.element, kp.name,
kp.kind === 'path')}
diff --git a/karavan-designer/src/designer/field/ExpressionField.tsx
b/karavan-designer/src/designer/route/property/ExpressionField.tsx
similarity index 98%
rename from karavan-designer/src/designer/field/ExpressionField.tsx
rename to karavan-designer/src/designer/route/property/ExpressionField.tsx
index cc9608f..5fc1c0e 100644
--- a/karavan-designer/src/designer/field/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -23,7 +23,7 @@ import {
SelectDirection,
SelectOption,
} from '@patternfly/react-core';
-import '../karavan.css';
+import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
import {CamelMetadataApi, Languages, PropertyMeta} from
"karavan-core/lib/model/CamelMetadata";
@@ -31,7 +31,7 @@ import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt"
import {CamelElement, ExpressionDefinition, Integration} from
"karavan-core/lib/model/CamelDefinition";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {DslPropertyField} from "./DslPropertyField";
-import {CamelUi} from "../utils/CamelUi";
+import {CamelUi} from "../../utils/CamelUi";
interface Props {
property: PropertyMeta,
diff --git a/karavan-designer/src/designer/field/KameletPropertyField.tsx
b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
similarity index 99%
rename from karavan-designer/src/designer/field/KameletPropertyField.tsx
rename to karavan-designer/src/designer/route/property/KameletPropertyField.tsx
index 7e21e02..4e5c0f0 100644
--- a/karavan-designer/src/designer/field/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
@@ -21,7 +21,7 @@ import {
Popover,
Switch,
} from '@patternfly/react-core';
-import '../karavan.css';
+import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
import {Property} from "karavan-core/lib/model/KameletModels";
diff --git a/karavan-designer/src/designer/field/ObjectField.tsx
b/karavan-designer/src/designer/route/property/ObjectField.tsx
similarity index 99%
rename from karavan-designer/src/designer/field/ObjectField.tsx
rename to karavan-designer/src/designer/route/property/ObjectField.tsx
index 6af4d83..17c2526 100644
--- a/karavan-designer/src/designer/field/ObjectField.tsx
+++ b/karavan-designer/src/designer/route/property/ObjectField.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import React from 'react';
-import '../karavan.css';
+import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import {DslPropertyField} from "./DslPropertyField";
import {
