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 42b06ddcb7ce64a3382265757552cc92f1eced33 Author: Marat Gubaidullin <[email protected]> AuthorDate: Wed Sep 11 18:37:20 2024 -0400 Fix #1401 --- .../webui/src/designer/property/DslProperties.css | 3 +++ .../webui/src/designer/property/DslProperties.tsx | 1 + .../property/property/ComponentPropertyField.tsx | 22 +++++++++++++++++++--- .../property/property/DslPropertyField.tsx | 20 ++++++++++++++++---- .../designer/property/property/ExpressionField.tsx | 4 ++-- .../property/property/KameletPropertyField.tsx | 20 ++++++++++++++++++-- .../src/designer/property/DslProperties.css | 3 +++ .../src/designer/property/DslProperties.tsx | 1 + .../property/property/ComponentPropertyField.tsx | 22 +++++++++++++++++++--- .../property/property/DslPropertyField.tsx | 20 ++++++++++++++++---- .../property/property/KameletPropertyField.tsx | 20 ++++++++++++++++++-- .../src/designer/property/DslProperties.css | 3 +++ .../src/designer/property/DslProperties.tsx | 1 + .../property/property/ComponentPropertyField.tsx | 22 +++++++++++++++++++--- .../property/property/DslPropertyField.tsx | 20 ++++++++++++++++---- .../designer/property/property/ExpressionField.tsx | 4 ++-- .../property/property/KameletPropertyField.tsx | 20 ++++++++++++++++++-- 17 files changed, 175 insertions(+), 31 deletions(-) diff --git a/karavan-app/src/main/webui/src/designer/property/DslProperties.css b/karavan-app/src/main/webui/src/designer/property/DslProperties.css index 43562bcb..37140289 100644 --- a/karavan-app/src/main/webui/src/designer/property/DslProperties.css +++ b/karavan-app/src/main/webui/src/designer/property/DslProperties.css @@ -46,6 +46,9 @@ display: flex; justify-content: space-between; } +.karavan .properties .dsl-property-form-group .pf-v5-c-form__label { + display: flex; +} .karavan .properties .pf-v5-c-form-control:focus-within { --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--after--BorderBottomColor); diff --git a/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx b/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx index a8ce0076..993f825f 100644 --- a/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx +++ b/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx @@ -88,6 +88,7 @@ export function DslProperties(props: Props) { function getProperties(): PropertyMeta[] { const dslName = selectedStep?.dslName; return CamelDefinitionApiExt.getElementProperties(dslName) + .filter((p: PropertyMeta) => !(p.name === 'uri' && dslName !== 'ToDynamicDefinition')) // show uri only to Dynamic To // .filter((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced'))) .filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')) .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name))); diff --git a/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx index 9832d9a2..7669a114 100644 --- a/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx +++ b/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx @@ -93,7 +93,7 @@ export function ComponentPropertyField(props: Props) { if (props.value !== textValue) { parametersChanged(property.name, textValue); } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -101,6 +101,7 @@ export function ComponentPropertyField(props: Props) { }, [checkChanges, textValue]) function parametersChanged(parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) { + console.log("parametersChange", parameter, value); setCheckChanges(false); onParametersChange(parameter, value, pathParameter, newRoute); setSelectStatus(new Map<string, boolean>([[parameter, false]])) @@ -413,12 +414,27 @@ export function ComponentPropertyField(props: Props) { ) } + function hasValueChanged(property: ComponentProperty, value: any): boolean { + const isSet = value !== undefined; + const isDefault = property.defaultValue !== undefined && value?.toString() === property.defaultValue?.toString(); + return isSet && !isDefault; + } + + function getLabel(property: ComponentProperty, value: any) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{property.displayName}</Text> + </div> + ) + } + const property: ComponentProperty = props.property; const value = props.value; return ( <FormGroup key={id} - label={property.displayName} + label={getLabel(property, value)} isRequired={property.required} labelIcon={ <Popover @@ -444,7 +460,7 @@ export function ComponentPropertyField(props: Props) { && getSpecialStringInput(property)} {['object'].includes(property.type) && !property.enum && getSelectBean(property, value)} - {['string', 'object'].includes(property.type) && property.enum + {['string', 'object', 'integer'].includes(property.type) && property.enum && getSelect(property, value)} {property.type === 'boolean' && getSwitch(property)} diff --git a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx index e8f6cee0..b35ca3be 100644 --- a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx @@ -33,7 +33,7 @@ import { Card, InputGroup, SelectOptionProps, - capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem, + capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; import { Select, @@ -127,7 +127,7 @@ export function DslPropertyField(props: Props) { propertyChanged(property.name, textValue); } } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -204,7 +204,14 @@ export function DslPropertyField(props: Props) { return property.name === 'parameters' && property.description === 'parameters'; } + function hasValueChanged(property: PropertyMeta, value: any): boolean { + const isSet = value !== undefined && !['id', 'uri'].includes(property.name); + const isDefault = property.defaultValue !== undefined && value?.toString() === property.defaultValue?.toString(); + return isSet && !isDefault; + } + function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; 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"; @@ -214,7 +221,7 @@ export function DslPropertyField(props: Props) { const icon = value ? (<DeleteIcon/>) : (<AddIcon/>); return ( <div style={{display: "flex"}}> - <Text>{title}</Text> + <Text style={{backgroundColor: bgColor}}>{title}</Text> <Tooltip position={"top"} content={<div>{tooltip}</div>}> <button className={className} onClick={e => props.onPropertyChange?.(property.name, x)} aria-label="Add element"> @@ -227,7 +234,11 @@ export function DslPropertyField(props: Props) { if (isParameter(property)) { return isKamelet ? "Kamelet properties:" : "Component properties:"; } else if (!["ExpressionDefinition"].includes(property.type)) { - return CamelUtil.capitalizeName(property.displayName); + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text> + </div> + ) } } @@ -1045,6 +1056,7 @@ export function DslPropertyField(props: Props) { return ( <div> <FormGroup + className='dsl-property-form-group' label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)} isRequired={property.required} labelIcon={isParameter(property) ? undefined : getLabelIcon(property)}> diff --git a/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx b/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx index dac658ce..cf2d9850 100644 --- a/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx +++ b/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx @@ -75,11 +75,11 @@ export function ExpressionField(props: Props) { } function getValueClassName (): string { - return CamelDefinitionApiExt.getExpressionLanguageClassName(props.value) || 'SimpleExpression'; + return CamelDefinitionApiExt.getExpressionLanguageClassName(props.value) || 'GroovyExpression'; } function getValueLanguage (): string { - return CamelDefinitionApiExt.getExpressionLanguageName(props.value) || 'simple'; + return CamelDefinitionApiExt.getExpressionLanguageName(props.value) || 'groovy'; } function getExpressionValue (): CamelElement { diff --git a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx index 0fb4521e..fe52431c 100644 --- a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx +++ b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx @@ -38,6 +38,7 @@ import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon"; import {ExpressionModalEditor} from "../../../expression/ExpressionModalEditor"; import {useDesignerStore} from "../../DesignerStore"; import {shallow} from "zustand/shallow"; +import {ComponentProperty} from "../../../../../karavan-core/src/core/model/ComponentModels"; interface Props { property: Property, @@ -67,7 +68,7 @@ export function KameletPropertyField(props: Props) { if (props.value !== textValue) { onParametersChange(property.id, textValue); } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -234,6 +235,21 @@ export function KameletPropertyField(props: Props) { return (typeof(num) === 'number' || (typeof(num) === "string" && num.trim() !== '')) && !isNaN(num as number); } + function hasValueChanged(property: Property, value: any): boolean { + const isSet = value !== undefined; + const isDefault = property.default !== undefined && value?.toString() === property.default?.toString(); + return isSet && !isDefault; + } + + function getLabel(property: Property, value: any) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{property.title}</Text> + </div> + ) + } + const property = props.property; const value = props.value; const prefix = "parameters"; @@ -242,7 +258,7 @@ export function KameletPropertyField(props: Props) { <div> <FormGroup key={id} - label={property.title} + label={getLabel(property, value)} fieldId={id} isRequired={ props.required} labelIcon={ diff --git a/karavan-designer/src/designer/property/DslProperties.css b/karavan-designer/src/designer/property/DslProperties.css index 43562bcb..37140289 100644 --- a/karavan-designer/src/designer/property/DslProperties.css +++ b/karavan-designer/src/designer/property/DslProperties.css @@ -46,6 +46,9 @@ display: flex; justify-content: space-between; } +.karavan .properties .dsl-property-form-group .pf-v5-c-form__label { + display: flex; +} .karavan .properties .pf-v5-c-form-control:focus-within { --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--after--BorderBottomColor); diff --git a/karavan-designer/src/designer/property/DslProperties.tsx b/karavan-designer/src/designer/property/DslProperties.tsx index a8ce0076..993f825f 100644 --- a/karavan-designer/src/designer/property/DslProperties.tsx +++ b/karavan-designer/src/designer/property/DslProperties.tsx @@ -88,6 +88,7 @@ export function DslProperties(props: Props) { function getProperties(): PropertyMeta[] { const dslName = selectedStep?.dslName; return CamelDefinitionApiExt.getElementProperties(dslName) + .filter((p: PropertyMeta) => !(p.name === 'uri' && dslName !== 'ToDynamicDefinition')) // show uri only to Dynamic To // .filter((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced'))) .filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')) .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name))); diff --git a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx index 9832d9a2..7669a114 100644 --- a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx @@ -93,7 +93,7 @@ export function ComponentPropertyField(props: Props) { if (props.value !== textValue) { parametersChanged(property.name, textValue); } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -101,6 +101,7 @@ export function ComponentPropertyField(props: Props) { }, [checkChanges, textValue]) function parametersChanged(parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) { + console.log("parametersChange", parameter, value); setCheckChanges(false); onParametersChange(parameter, value, pathParameter, newRoute); setSelectStatus(new Map<string, boolean>([[parameter, false]])) @@ -413,12 +414,27 @@ export function ComponentPropertyField(props: Props) { ) } + function hasValueChanged(property: ComponentProperty, value: any): boolean { + const isSet = value !== undefined; + const isDefault = property.defaultValue !== undefined && value?.toString() === property.defaultValue?.toString(); + return isSet && !isDefault; + } + + function getLabel(property: ComponentProperty, value: any) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{property.displayName}</Text> + </div> + ) + } + const property: ComponentProperty = props.property; const value = props.value; return ( <FormGroup key={id} - label={property.displayName} + label={getLabel(property, value)} isRequired={property.required} labelIcon={ <Popover @@ -444,7 +460,7 @@ export function ComponentPropertyField(props: Props) { && getSpecialStringInput(property)} {['object'].includes(property.type) && !property.enum && getSelectBean(property, value)} - {['string', 'object'].includes(property.type) && property.enum + {['string', 'object', 'integer'].includes(property.type) && property.enum && getSelect(property, value)} {property.type === 'boolean' && getSwitch(property)} diff --git a/karavan-designer/src/designer/property/property/DslPropertyField.tsx b/karavan-designer/src/designer/property/property/DslPropertyField.tsx index e8f6cee0..b35ca3be 100644 --- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx @@ -33,7 +33,7 @@ import { Card, InputGroup, SelectOptionProps, - capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem, + capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; import { Select, @@ -127,7 +127,7 @@ export function DslPropertyField(props: Props) { propertyChanged(property.name, textValue); } } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -204,7 +204,14 @@ export function DslPropertyField(props: Props) { return property.name === 'parameters' && property.description === 'parameters'; } + function hasValueChanged(property: PropertyMeta, value: any): boolean { + const isSet = value !== undefined && !['id', 'uri'].includes(property.name); + const isDefault = property.defaultValue !== undefined && value?.toString() === property.defaultValue?.toString(); + return isSet && !isDefault; + } + function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; 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"; @@ -214,7 +221,7 @@ export function DslPropertyField(props: Props) { const icon = value ? (<DeleteIcon/>) : (<AddIcon/>); return ( <div style={{display: "flex"}}> - <Text>{title}</Text> + <Text style={{backgroundColor: bgColor}}>{title}</Text> <Tooltip position={"top"} content={<div>{tooltip}</div>}> <button className={className} onClick={e => props.onPropertyChange?.(property.name, x)} aria-label="Add element"> @@ -227,7 +234,11 @@ export function DslPropertyField(props: Props) { if (isParameter(property)) { return isKamelet ? "Kamelet properties:" : "Component properties:"; } else if (!["ExpressionDefinition"].includes(property.type)) { - return CamelUtil.capitalizeName(property.displayName); + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text> + </div> + ) } } @@ -1045,6 +1056,7 @@ export function DslPropertyField(props: Props) { return ( <div> <FormGroup + className='dsl-property-form-group' label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)} isRequired={property.required} labelIcon={isParameter(property) ? undefined : getLabelIcon(property)}> diff --git a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx index 0fb4521e..fe52431c 100644 --- a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx @@ -38,6 +38,7 @@ import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon"; import {ExpressionModalEditor} from "../../../expression/ExpressionModalEditor"; import {useDesignerStore} from "../../DesignerStore"; import {shallow} from "zustand/shallow"; +import {ComponentProperty} from "../../../../../karavan-core/src/core/model/ComponentModels"; interface Props { property: Property, @@ -67,7 +68,7 @@ export function KameletPropertyField(props: Props) { if (props.value !== textValue) { onParametersChange(property.id, textValue); } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -234,6 +235,21 @@ export function KameletPropertyField(props: Props) { return (typeof(num) === 'number' || (typeof(num) === "string" && num.trim() !== '')) && !isNaN(num as number); } + function hasValueChanged(property: Property, value: any): boolean { + const isSet = value !== undefined; + const isDefault = property.default !== undefined && value?.toString() === property.default?.toString(); + return isSet && !isDefault; + } + + function getLabel(property: Property, value: any) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{property.title}</Text> + </div> + ) + } + const property = props.property; const value = props.value; const prefix = "parameters"; @@ -242,7 +258,7 @@ export function KameletPropertyField(props: Props) { <div> <FormGroup key={id} - label={property.title} + label={getLabel(property, value)} fieldId={id} isRequired={ props.required} labelIcon={ diff --git a/karavan-space/src/designer/property/DslProperties.css b/karavan-space/src/designer/property/DslProperties.css index 43562bcb..37140289 100644 --- a/karavan-space/src/designer/property/DslProperties.css +++ b/karavan-space/src/designer/property/DslProperties.css @@ -46,6 +46,9 @@ display: flex; justify-content: space-between; } +.karavan .properties .dsl-property-form-group .pf-v5-c-form__label { + display: flex; +} .karavan .properties .pf-v5-c-form-control:focus-within { --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--after--BorderBottomColor); diff --git a/karavan-space/src/designer/property/DslProperties.tsx b/karavan-space/src/designer/property/DslProperties.tsx index a8ce0076..993f825f 100644 --- a/karavan-space/src/designer/property/DslProperties.tsx +++ b/karavan-space/src/designer/property/DslProperties.tsx @@ -88,6 +88,7 @@ export function DslProperties(props: Props) { function getProperties(): PropertyMeta[] { const dslName = selectedStep?.dslName; return CamelDefinitionApiExt.getElementProperties(dslName) + .filter((p: PropertyMeta) => !(p.name === 'uri' && dslName !== 'ToDynamicDefinition')) // show uri only to Dynamic To // .filter((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced'))) .filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')) .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name))); diff --git a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx index 9832d9a2..7669a114 100644 --- a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx +++ b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx @@ -93,7 +93,7 @@ export function ComponentPropertyField(props: Props) { if (props.value !== textValue) { parametersChanged(property.name, textValue); } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -101,6 +101,7 @@ export function ComponentPropertyField(props: Props) { }, [checkChanges, textValue]) function parametersChanged(parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) { + console.log("parametersChange", parameter, value); setCheckChanges(false); onParametersChange(parameter, value, pathParameter, newRoute); setSelectStatus(new Map<string, boolean>([[parameter, false]])) @@ -413,12 +414,27 @@ export function ComponentPropertyField(props: Props) { ) } + function hasValueChanged(property: ComponentProperty, value: any): boolean { + const isSet = value !== undefined; + const isDefault = property.defaultValue !== undefined && value?.toString() === property.defaultValue?.toString(); + return isSet && !isDefault; + } + + function getLabel(property: ComponentProperty, value: any) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{property.displayName}</Text> + </div> + ) + } + const property: ComponentProperty = props.property; const value = props.value; return ( <FormGroup key={id} - label={property.displayName} + label={getLabel(property, value)} isRequired={property.required} labelIcon={ <Popover @@ -444,7 +460,7 @@ export function ComponentPropertyField(props: Props) { && getSpecialStringInput(property)} {['object'].includes(property.type) && !property.enum && getSelectBean(property, value)} - {['string', 'object'].includes(property.type) && property.enum + {['string', 'object', 'integer'].includes(property.type) && property.enum && getSelect(property, value)} {property.type === 'boolean' && getSwitch(property)} diff --git a/karavan-space/src/designer/property/property/DslPropertyField.tsx b/karavan-space/src/designer/property/property/DslPropertyField.tsx index e8f6cee0..b35ca3be 100644 --- a/karavan-space/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-space/src/designer/property/property/DslPropertyField.tsx @@ -33,7 +33,7 @@ import { Card, InputGroup, SelectOptionProps, - capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem, + capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; import { Select, @@ -127,7 +127,7 @@ export function DslPropertyField(props: Props) { propertyChanged(property.name, textValue); } } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -204,7 +204,14 @@ export function DslPropertyField(props: Props) { return property.name === 'parameters' && property.description === 'parameters'; } + function hasValueChanged(property: PropertyMeta, value: any): boolean { + const isSet = value !== undefined && !['id', 'uri'].includes(property.name); + const isDefault = property.defaultValue !== undefined && value?.toString() === property.defaultValue?.toString(); + return isSet && !isDefault; + } + function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; 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"; @@ -214,7 +221,7 @@ export function DslPropertyField(props: Props) { const icon = value ? (<DeleteIcon/>) : (<AddIcon/>); return ( <div style={{display: "flex"}}> - <Text>{title}</Text> + <Text style={{backgroundColor: bgColor}}>{title}</Text> <Tooltip position={"top"} content={<div>{tooltip}</div>}> <button className={className} onClick={e => props.onPropertyChange?.(property.name, x)} aria-label="Add element"> @@ -227,7 +234,11 @@ export function DslPropertyField(props: Props) { if (isParameter(property)) { return isKamelet ? "Kamelet properties:" : "Component properties:"; } else if (!["ExpressionDefinition"].includes(property.type)) { - return CamelUtil.capitalizeName(property.displayName); + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text> + </div> + ) } } @@ -1045,6 +1056,7 @@ export function DslPropertyField(props: Props) { return ( <div> <FormGroup + className='dsl-property-form-group' label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)} isRequired={property.required} labelIcon={isParameter(property) ? undefined : getLabelIcon(property)}> diff --git a/karavan-space/src/designer/property/property/ExpressionField.tsx b/karavan-space/src/designer/property/property/ExpressionField.tsx index dac658ce..cf2d9850 100644 --- a/karavan-space/src/designer/property/property/ExpressionField.tsx +++ b/karavan-space/src/designer/property/property/ExpressionField.tsx @@ -75,11 +75,11 @@ export function ExpressionField(props: Props) { } function getValueClassName (): string { - return CamelDefinitionApiExt.getExpressionLanguageClassName(props.value) || 'SimpleExpression'; + return CamelDefinitionApiExt.getExpressionLanguageClassName(props.value) || 'GroovyExpression'; } function getValueLanguage (): string { - return CamelDefinitionApiExt.getExpressionLanguageName(props.value) || 'simple'; + return CamelDefinitionApiExt.getExpressionLanguageName(props.value) || 'groovy'; } function getExpressionValue (): CamelElement { diff --git a/karavan-space/src/designer/property/property/KameletPropertyField.tsx b/karavan-space/src/designer/property/property/KameletPropertyField.tsx index 0fb4521e..fe52431c 100644 --- a/karavan-space/src/designer/property/property/KameletPropertyField.tsx +++ b/karavan-space/src/designer/property/property/KameletPropertyField.tsx @@ -38,6 +38,7 @@ import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon"; import {ExpressionModalEditor} from "../../../expression/ExpressionModalEditor"; import {useDesignerStore} from "../../DesignerStore"; import {shallow} from "zustand/shallow"; +import {ComponentProperty} from "../../../../../karavan-core/src/core/model/ComponentModels"; interface Props { property: Property, @@ -67,7 +68,7 @@ export function KameletPropertyField(props: Props) { if (props.value !== textValue) { onParametersChange(property.id, textValue); } - }, 1300); + }, 700); return () => { clearInterval(interval) } @@ -234,6 +235,21 @@ export function KameletPropertyField(props: Props) { return (typeof(num) === 'number' || (typeof(num) === "string" && num.trim() !== '')) && !isNaN(num as number); } + function hasValueChanged(property: Property, value: any): boolean { + const isSet = value !== undefined; + const isDefault = property.default !== undefined && value?.toString() === property.default?.toString(); + return isSet && !isDefault; + } + + function getLabel(property: Property, value: any) { + const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent'; + return ( + <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}> + <Text style={{backgroundColor: bgColor}}>{property.title}</Text> + </div> + ) + } + const property = props.property; const value = props.value; const prefix = "parameters"; @@ -242,7 +258,7 @@ export function KameletPropertyField(props: Props) { <div> <FormGroup key={id} - label={property.title} + label={getLabel(property, value)} fieldId={id} isRequired={ props.required} labelIcon={
