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 2024/01/31 17:04:54 UTC
(camel-karavan) 01/02: Properties instead on Parameters in UI
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 a68f5b2a4a6d7c3c1f58364a58a5ec89cd06ab31
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Wed Jan 31 10:52:41 2024 -0500
Properties instead on Parameters in UI
---
karavan-designer/public/example/demo.camel.yaml | 7 +++++-
.../src/designer/property/DslProperties.tsx | 2 +-
...rameterField.tsx => ComponentPropertyField.tsx} | 2 +-
.../property/property/DslPropertyField.tsx | 26 +++++++++++++---------
karavan-designer/src/topology/TopologyTab.tsx | 1 -
5 files changed, 24 insertions(+), 14 deletions(-)
diff --git a/karavan-designer/public/example/demo.camel.yaml b/karavan-designer/public/example/demo.camel.yaml
index 3748f1a6..9cb87f08 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -33,7 +33,12 @@
id: to-53a3
description: Send payments
uri: amqp
-
+- route:
+ id: route-8609
+ nodePrefixId: route-ae2
+ from:
+ id: from-6aee
+ uri: timer
# steps:
# - marshal:
diff --git a/karavan-designer/src/designer/property/DslProperties.tsx b/karavan-designer/src/designer/property/DslProperties.tsx
index dfe8ae9d..fc5879e7 100644
--- a/karavan-designer/src/designer/property/DslProperties.tsx
+++ b/karavan-designer/src/designer/property/DslProperties.tsx
@@ -216,7 +216,7 @@ export function DslProperties(props: Props) {
{selectedStep && !['MarshalDefinition', 'UnmarshalDefinition'].includes(selectedStep.dslName)
&& propertiesAdvanced.length > 0 &&
<ExpandableSection
- toggleText={'Advanced properties'}
+ toggleText={'EIP advanced properties'}
onToggle={(_event, isExpanded) => setShowAdvanced(!showAdvanced)}
isExpanded={showAdvanced}>
<div className="parameters">
diff --git a/karavan-designer/src/designer/property/property/ComponentParameterField.tsx b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
similarity index 99%
rename from karavan-designer/src/designer/property/property/ComponentParameterField.tsx
rename to karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
index 7186616d..b98b411d 100644
--- a/karavan-designer/src/designer/property/property/ComponentParameterField.tsx
+++ b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
@@ -62,7 +62,7 @@ interface Props {
onParameterChange?: (parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => void
}
-export function ComponentParameterField(props: Props) {
+export function ComponentPropertyField(props: Props) {
const {onParametersChange, getInternalComponentName} = usePropertiesHook();
diff --git a/karavan-designer/src/designer/property/property/DslPropertyField.tsx b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
index e138a88a..b01f6e7c 100644
--- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
@@ -50,7 +50,7 @@ import {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";
-import {ComponentParameterField} from "./ComponentParameterField";
+import {ComponentPropertyField} from "./ComponentPropertyField";
import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {KameletPropertyField} from "./KameletPropertyField";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
@@ -152,7 +152,11 @@ export function DslPropertyField(props: Props) {
arrayChanged(fieldId, "");
}
- function getLabel(property: PropertyMeta, value: any) {
+ function isParameter(property: PropertyMeta): boolean {
+ return property.name === 'parameters' && property.description === 'parameters';
+ }
+
+ function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
if (!isMultiValueField(property) && property.isObject && !property.isArray && !["ExpressionDefinition"].includes(property.type)) {
const tooltip = value ? "Delete " + property.name : "Add " + property.name;
const className = value ? "change-button delete-button" : "change-button add-button";
@@ -169,6 +173,8 @@ export function DslPropertyField(props: Props) {
</Tooltip>
</div>
)
+ } if (isParameter(property)) {
+ return isKamelet ? "Kamelet properties:" : "Component properties:";
} else if (!["ExpressionDefinition"].includes(property.type)) {
return CamelUtil.capitalizeName(property.displayName);
}
@@ -684,7 +690,7 @@ export function DslPropertyField(props: Props) {
<div className="parameters">
{properties.map(kp => {
const value = CamelDefinitionApiExt.getParametersValue(element, kp.name, kp.kind === 'path');
- return (<ComponentParameterField
+ return (<ComponentPropertyField
key={kp.name}
property={kp}
value={value}
@@ -696,7 +702,7 @@ export function DslPropertyField(props: Props) {
)
}
- function getExpandableComponentParameters(properties: ComponentProperty[], label: string) {
+ function getExpandableComponentProperties(properties: ComponentProperty[], label: string) {
const element = props.element;
return (
@@ -715,7 +721,7 @@ export function DslPropertyField(props: Props) {
isExpanded={isShowAdvanced.includes(label)}>
<div className="parameters">
{properties.map(kp =>
- <ComponentParameterField
+ <ComponentPropertyField
key={kp.name}
property={kp}
value={CamelDefinitionApiExt.getParametersValue(element, kp.name, kp.kind === 'path')}
@@ -779,11 +785,11 @@ export function DslPropertyField(props: Props) {
<>
{property.name === 'parameters' && getMainComponentParameters(propertiesMain)}
{property.name === 'parameters' && element && propertiesScheduler.length > 0
- && getExpandableComponentParameters(propertiesScheduler, "Scheduler parameters")}
+ && getExpandableComponentProperties(propertiesScheduler, "Component scheduler properties")}
{property.name === 'parameters' && element && propertiesSecurity.length > 0
- && getExpandableComponentParameters(propertiesSecurity, "Security parameters")}
+ && getExpandableComponentProperties(propertiesSecurity, "Component security properties")}
{property.name === 'parameters' && element && propertiesAdvanced.length > 0
- && getExpandableComponentParameters(propertiesAdvanced, "Advanced parameters")}
+ && getExpandableComponentProperties(propertiesAdvanced, "Component advanced properties")}
</>
)
}
@@ -797,9 +803,9 @@ export function DslPropertyField(props: Props) {
return (
<div>
<FormGroup
- label={props.hideLabel ? undefined : getLabel(property, value)}
+ label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)}
isRequired={property.required}
- labelIcon={getLabelIcon(property)}>
+ labelIcon={isParameter(property) ? undefined : getLabelIcon(property)}>
{value !== undefined && ["ExpressionDefinition", "ExpressionSubElementDefinition"].includes(property.type)
&& getExpressionField(property, value)}
{property.isObject && !property.isArray && !["ExpressionDefinition", "ExpressionSubElementDefinition"].includes(property.type)
diff --git a/karavan-designer/src/topology/TopologyTab.tsx b/karavan-designer/src/topology/TopologyTab.tsx
index be2e754a..727905cc 100644
--- a/karavan-designer/src/topology/TopologyTab.tsx
+++ b/karavan-designer/src/topology/TopologyTab.tsx
@@ -35,7 +35,6 @@ import {IntegrationFile, useTopologyStore} from "./TopologyStore";
import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {TopologyToolbar} from "./TopologyToolbar";
import {useDesignerStore} from "../designer/DesignerStore";
-import RankerIcon from "@patternfly/react-icons/dist/esm/icons/random-icon";
interface Props {
files: IntegrationFile[],