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[],