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 4da2d8b740ec08e1a7a5d66a1de03d50b5e06de4 Author: Marat Gubaidullin <ma...@talismancloud.io> AuthorDate: Fri Feb 2 19:24:09 2024 -0500 Dsl properties #1098 --- .../property/property/ComponentPropertyField.tsx | 6 ++-- .../property/property/DslPropertyField.tsx | 3 ++ .../property/PropertyPlaceholderDropdown.tsx | 20 ++++++++---- .../property/property/ComponentPropertyField.tsx | 8 ++--- .../property/property/DslPropertyField.tsx | 5 ++- .../property/PropertyPlaceholderDropdown.css | 37 ++++++++++++++++++++++ .../property/PropertyPlaceholderDropdown.tsx | 20 ++++++++---- .../property/property/ComponentPropertyField.tsx | 8 ++--- .../property/property/DslPropertyField.tsx | 5 ++- .../property/PropertyPlaceholderDropdown.css | 37 ++++++++++++++++++++++ .../property/PropertyPlaceholderDropdown.tsx | 20 ++++++++---- 11 files changed, 135 insertions(+), 34 deletions(-) diff --git a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx index e32a4fb9..3798c4e4 100644 --- a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx @@ -267,7 +267,7 @@ export function ComponentPropertyField(props: Props) { </Tooltip> } <InputGroupItem> - <PropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </InputGroup> } @@ -287,7 +287,7 @@ export function ComponentPropertyField(props: Props) { }}/> </InputGroupItem> <InputGroupItem> - <PropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </InputGroup> ) @@ -345,7 +345,7 @@ export function ComponentPropertyField(props: Props) { /> </InputGroupItem> <InputGroupItem> - <PropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </TextInputGroup> ) diff --git a/karavan-designer/src/designer/property/property/DslPropertyField.tsx b/karavan-designer/src/designer/property/property/DslPropertyField.tsx index e5f4cec0..923b0e26 100644 --- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx @@ -423,6 +423,9 @@ export function DslPropertyField(props: Props) { onChange={(_, v) => propertyChanged(property.name, v)} /> </InputGroupItem> + <InputGroupItem> + <PropertyPlaceholderDropdown property={property} value={value} onDslPropertyChange={propertyChanged}/> + </InputGroupItem> </TextInputGroup> ) } diff --git a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx b/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx index 85899749..066e8b04 100644 --- a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx +++ b/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx @@ -34,13 +34,14 @@ import '../../karavan.css'; import './PropertyPlaceholderDropdown.css'; import "@patternfly/patternfly/patternfly.css"; import {ComponentProperty} from "karavan-core/lib/model/ComponentModels"; -import {RouteToCreate} from "../../utils/CamelUi"; import {usePropertiesHook} from "../usePropertiesHook"; import {useDesignerStore} from "../../DesignerStore"; import {shallow} from "zustand/shallow"; import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-icon"; import {InfrastructureAPI} from "../../utils/InfrastructureAPI"; +import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata"; +import {RouteToCreate} from "../../utils/CamelUi"; const SYNTAX_EXAMPLES = [ {key: 'property:', value: 'group.property', description: 'Application property'}, @@ -50,13 +51,14 @@ const SYNTAX_EXAMPLES = [ ] interface Props { - property: ComponentProperty, - value: any + property: ComponentProperty | PropertyMeta, + value: any, + onDslPropertyChange?: (fieldId: string, value: string | number | boolean | any, newRoute?: RouteToCreate) => void, + onComponentPropertyChange?: (parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => void } export function PropertyPlaceholderDropdown(props: Props) { - const {onParametersChange} = usePropertiesHook(); const [propertyPlaceholders, setPropertyPlaceholders] = useDesignerStore((s) => [s.propertyPlaceholders, s.setPropertyPlaceholders], shallow) const [isOpenPlaceholdersDropdown, setOpenPlaceholdersDropdown] = useState<boolean>(false); @@ -78,8 +80,12 @@ export function PropertyPlaceholderDropdown(props: Props) { const hasPlaceholders = (propertyPlaceholders && propertyPlaceholders.length > 0 ); - function parametersChanged(parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) { - onParametersChange(parameter, value, pathParameter, newRoute); + function parametersChanged(value: string | number | boolean | any) { + if (property instanceof ComponentProperty) { + props.onComponentPropertyChange?.(property.name, `{{${value}}}`, property.kind === 'path'); + } else { + props.onDslPropertyChange?.(property.name, `{{${value}}}`); + } } function onMenuToggleClick() { @@ -151,7 +157,7 @@ export function PropertyPlaceholderDropdown(props: Props) { popperProps={{position: "end"}} isOpen={isOpenPlaceholdersDropdown} onSelect={(_, value) => { - parametersChanged(property.name, `{{${value}}}`, property.kind === 'path') + parametersChanged(value); setOpenPlaceholdersDropdown(false); }} onOpenChange={(isOpen: boolean) => setOpenPlaceholdersDropdown(isOpen)} diff --git a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx index 72c145e0..3798c4e4 100644 --- a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx +++ b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx @@ -54,7 +54,7 @@ import {shallow} from "zustand/shallow"; import {KubernetesIcon} from "../../icons/ComponentIcons"; import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon"; import {ModalEditor} from "./ModalEditor"; -import {ComponentPropertyPlaceholderDropdown} from "./ComponentPropertyPlaceholderDropdown"; +import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown"; const prefix = "parameters"; const beanPrefix = "#bean:"; @@ -267,7 +267,7 @@ export function ComponentPropertyField(props: Props) { </Tooltip> } <InputGroupItem> - <ComponentPropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </InputGroup> } @@ -287,7 +287,7 @@ export function ComponentPropertyField(props: Props) { }}/> </InputGroupItem> <InputGroupItem> - <ComponentPropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </InputGroup> ) @@ -345,7 +345,7 @@ export function ComponentPropertyField(props: Props) { /> </InputGroupItem> <InputGroupItem> - <ComponentPropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </TextInputGroup> ) diff --git a/karavan-space/src/designer/property/property/DslPropertyField.tsx b/karavan-space/src/designer/property/property/DslPropertyField.tsx index 59066667..923b0e26 100644 --- a/karavan-space/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-space/src/designer/property/property/DslPropertyField.tsx @@ -74,7 +74,7 @@ import { import {TemplateApi} from "karavan-core/lib/api/TemplateApi"; import {KubernetesIcon} from "../../icons/ComponentIcons"; import {BeanProperties} from "./BeanProperties"; -import {ComponentPropertyPlaceholderDropdown} from "./ComponentPropertyPlaceholderDropdown"; +import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown"; interface Props { property: PropertyMeta, @@ -423,6 +423,9 @@ export function DslPropertyField(props: Props) { onChange={(_, v) => propertyChanged(property.name, v)} /> </InputGroupItem> + <InputGroupItem> + <PropertyPlaceholderDropdown property={property} value={value} onDslPropertyChange={propertyChanged}/> + </InputGroupItem> </TextInputGroup> ) } diff --git a/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.css b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.css new file mode 100644 index 00000000..43991634 --- /dev/null +++ b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.css @@ -0,0 +1,37 @@ +/* + * 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. + */ + +.karavan .properties .property-placeholder-toggle { + padding-left: 6px; + padding-right: 6px; +} + +.karavan .properties .property-placeholder-toggle .pf-v5-c-button__icon.pf-m-start { + margin-inline-end: 0; +} + +.karavan .properties .property-placeholder-toggle .pf-v5-c-menu-toggle__controls { + display: none; +} + +.pf-v5-c-popover .property-placeholder-toggle-form { + width: 300px; +} + +.pf-v5-c-popover .property-placeholder-toggle-form .pf-v5-c-form__group { + grid-template-columns: 1fr 2fr; +} \ No newline at end of file diff --git a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.tsx similarity index 90% copy from karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx copy to karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.tsx index 85899749..066e8b04 100644 --- a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx +++ b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.tsx @@ -34,13 +34,14 @@ import '../../karavan.css'; import './PropertyPlaceholderDropdown.css'; import "@patternfly/patternfly/patternfly.css"; import {ComponentProperty} from "karavan-core/lib/model/ComponentModels"; -import {RouteToCreate} from "../../utils/CamelUi"; import {usePropertiesHook} from "../usePropertiesHook"; import {useDesignerStore} from "../../DesignerStore"; import {shallow} from "zustand/shallow"; import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-icon"; import {InfrastructureAPI} from "../../utils/InfrastructureAPI"; +import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata"; +import {RouteToCreate} from "../../utils/CamelUi"; const SYNTAX_EXAMPLES = [ {key: 'property:', value: 'group.property', description: 'Application property'}, @@ -50,13 +51,14 @@ const SYNTAX_EXAMPLES = [ ] interface Props { - property: ComponentProperty, - value: any + property: ComponentProperty | PropertyMeta, + value: any, + onDslPropertyChange?: (fieldId: string, value: string | number | boolean | any, newRoute?: RouteToCreate) => void, + onComponentPropertyChange?: (parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => void } export function PropertyPlaceholderDropdown(props: Props) { - const {onParametersChange} = usePropertiesHook(); const [propertyPlaceholders, setPropertyPlaceholders] = useDesignerStore((s) => [s.propertyPlaceholders, s.setPropertyPlaceholders], shallow) const [isOpenPlaceholdersDropdown, setOpenPlaceholdersDropdown] = useState<boolean>(false); @@ -78,8 +80,12 @@ export function PropertyPlaceholderDropdown(props: Props) { const hasPlaceholders = (propertyPlaceholders && propertyPlaceholders.length > 0 ); - function parametersChanged(parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) { - onParametersChange(parameter, value, pathParameter, newRoute); + function parametersChanged(value: string | number | boolean | any) { + if (property instanceof ComponentProperty) { + props.onComponentPropertyChange?.(property.name, `{{${value}}}`, property.kind === 'path'); + } else { + props.onDslPropertyChange?.(property.name, `{{${value}}}`); + } } function onMenuToggleClick() { @@ -151,7 +157,7 @@ export function PropertyPlaceholderDropdown(props: Props) { popperProps={{position: "end"}} isOpen={isOpenPlaceholdersDropdown} onSelect={(_, value) => { - parametersChanged(property.name, `{{${value}}}`, property.kind === 'path') + parametersChanged(value); setOpenPlaceholdersDropdown(false); }} onOpenChange={(isOpen: boolean) => setOpenPlaceholdersDropdown(isOpen)} diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx index 72c145e0..3798c4e4 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx @@ -54,7 +54,7 @@ import {shallow} from "zustand/shallow"; import {KubernetesIcon} from "../../icons/ComponentIcons"; import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon"; import {ModalEditor} from "./ModalEditor"; -import {ComponentPropertyPlaceholderDropdown} from "./ComponentPropertyPlaceholderDropdown"; +import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown"; const prefix = "parameters"; const beanPrefix = "#bean:"; @@ -267,7 +267,7 @@ export function ComponentPropertyField(props: Props) { </Tooltip> } <InputGroupItem> - <ComponentPropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </InputGroup> } @@ -287,7 +287,7 @@ export function ComponentPropertyField(props: Props) { }}/> </InputGroupItem> <InputGroupItem> - <ComponentPropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </InputGroup> ) @@ -345,7 +345,7 @@ export function ComponentPropertyField(props: Props) { /> </InputGroupItem> <InputGroupItem> - <ComponentPropertyPlaceholderDropdown property={property} value={value}/> + <PropertyPlaceholderDropdown property={property} value={value} onComponentPropertyChange={onParametersChange}/> </InputGroupItem> </TextInputGroup> ) diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx index 59066667..923b0e26 100644 --- a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx @@ -74,7 +74,7 @@ import { import {TemplateApi} from "karavan-core/lib/api/TemplateApi"; import {KubernetesIcon} from "../../icons/ComponentIcons"; import {BeanProperties} from "./BeanProperties"; -import {ComponentPropertyPlaceholderDropdown} from "./ComponentPropertyPlaceholderDropdown"; +import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown"; interface Props { property: PropertyMeta, @@ -423,6 +423,9 @@ export function DslPropertyField(props: Props) { onChange={(_, v) => propertyChanged(property.name, v)} /> </InputGroupItem> + <InputGroupItem> + <PropertyPlaceholderDropdown property={property} value={value} onDslPropertyChange={propertyChanged}/> + </InputGroupItem> </TextInputGroup> ) } diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.css b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.css new file mode 100644 index 00000000..43991634 --- /dev/null +++ b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.css @@ -0,0 +1,37 @@ +/* + * 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. + */ + +.karavan .properties .property-placeholder-toggle { + padding-left: 6px; + padding-right: 6px; +} + +.karavan .properties .property-placeholder-toggle .pf-v5-c-button__icon.pf-m-start { + margin-inline-end: 0; +} + +.karavan .properties .property-placeholder-toggle .pf-v5-c-menu-toggle__controls { + display: none; +} + +.pf-v5-c-popover .property-placeholder-toggle-form { + width: 300px; +} + +.pf-v5-c-popover .property-placeholder-toggle-form .pf-v5-c-form__group { + grid-template-columns: 1fr 2fr; +} \ No newline at end of file diff --git a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.tsx similarity index 90% copy from karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx copy to karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.tsx index 85899749..066e8b04 100644 --- a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.tsx @@ -34,13 +34,14 @@ import '../../karavan.css'; import './PropertyPlaceholderDropdown.css'; import "@patternfly/patternfly/patternfly.css"; import {ComponentProperty} from "karavan-core/lib/model/ComponentModels"; -import {RouteToCreate} from "../../utils/CamelUi"; import {usePropertiesHook} from "../usePropertiesHook"; import {useDesignerStore} from "../../DesignerStore"; import {shallow} from "zustand/shallow"; import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-icon"; import {InfrastructureAPI} from "../../utils/InfrastructureAPI"; +import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata"; +import {RouteToCreate} from "../../utils/CamelUi"; const SYNTAX_EXAMPLES = [ {key: 'property:', value: 'group.property', description: 'Application property'}, @@ -50,13 +51,14 @@ const SYNTAX_EXAMPLES = [ ] interface Props { - property: ComponentProperty, - value: any + property: ComponentProperty | PropertyMeta, + value: any, + onDslPropertyChange?: (fieldId: string, value: string | number | boolean | any, newRoute?: RouteToCreate) => void, + onComponentPropertyChange?: (parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => void } export function PropertyPlaceholderDropdown(props: Props) { - const {onParametersChange} = usePropertiesHook(); const [propertyPlaceholders, setPropertyPlaceholders] = useDesignerStore((s) => [s.propertyPlaceholders, s.setPropertyPlaceholders], shallow) const [isOpenPlaceholdersDropdown, setOpenPlaceholdersDropdown] = useState<boolean>(false); @@ -78,8 +80,12 @@ export function PropertyPlaceholderDropdown(props: Props) { const hasPlaceholders = (propertyPlaceholders && propertyPlaceholders.length > 0 ); - function parametersChanged(parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) { - onParametersChange(parameter, value, pathParameter, newRoute); + function parametersChanged(value: string | number | boolean | any) { + if (property instanceof ComponentProperty) { + props.onComponentPropertyChange?.(property.name, `{{${value}}}`, property.kind === 'path'); + } else { + props.onDslPropertyChange?.(property.name, `{{${value}}}`); + } } function onMenuToggleClick() { @@ -151,7 +157,7 @@ export function PropertyPlaceholderDropdown(props: Props) { popperProps={{position: "end"}} isOpen={isOpenPlaceholdersDropdown} onSelect={(_, value) => { - parametersChanged(property.name, `{{${value}}}`, property.kind === 'path') + parametersChanged(value); setOpenPlaceholdersDropdown(false); }} onOpenChange={(isOpen: boolean) => setOpenPlaceholdersDropdown(isOpen)}