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 a453be738b600379fe435bd12ba73aca7f63bdc2 Author: Marat Gubaidullin <[email protected]> AuthorDate: Mon Sep 9 17:04:49 2024 -0400 Each child in a list should have a unique "key" prop fix. --- .../property/property/DslPropertyField.tsx | 128 ++++++++++++++------- .../src/designer/route/DslConnections.tsx | 16 +-- .../src/designer/route/DslConnections.tsx | 16 +-- 3 files changed, 104 insertions(+), 56 deletions(-) diff --git a/karavan-designer/src/designer/property/property/DslPropertyField.tsx b/karavan-designer/src/designer/property/property/DslPropertyField.tsx index 7a8d99e3..db7dc97e 100644 --- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx @@ -32,7 +32,8 @@ import { Tooltip, Card, InputGroup, - capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem, HelperTextItem, FormHelperText, HelperText + SelectOptionProps, + capitalize, InputGroupItem, TextVariants, ToggleGroup, ToggleGroupItem, } from '@patternfly/react-core'; import { Select, @@ -77,6 +78,11 @@ import {BeanProperties} from "./BeanProperties"; import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown"; import {VariablesDropdown} from "./VariablesDropdown"; import {ROUTE, GLOBAL} from "karavan-core/lib/api/VariableUtil"; +import {SpiBeanApi} from "karavan-core/lib/api/SpiBeanApi"; +import {SelectField} from "./SelectField"; + +const beanPrefix = "#bean:"; +const classPrefix = "#class:"; interface Props { property: PropertyMeta, @@ -93,7 +99,7 @@ interface Props { export function DslPropertyField(props: Props) { const [integration, setIntegration, addVariable, files] = useIntegrationStore((s) => [s.integration, s.setIntegration, s.addVariable, s.files], shallow) - const [dark, setSelectedStep] = useDesignerStore((s) => [s.dark, s.setSelectedStep], shallow) + const [dark, setSelectedStep, beans] = useDesignerStore((s) => [s.dark, s.setSelectedStep, s.beans], shallow) const [isShowAdvanced, setIsShowAdvanced] = useState<string[]>([]); const [arrayValues, setArrayValues] = useState<Map<string, string>>(new Map<string, string>()); @@ -470,42 +476,83 @@ export function DslPropertyField(props: Props) { function getJavaTypeGeneratedInput(property: PropertyMeta, value: any) { const {dslLanguage} = props; - return (<InputGroup> - <InputGroupItem isFill> - <TextInput - ref={ref} - className="text-field" isRequired - type="text" - id={property.name} name={property.name} - value={value?.toString()} - onChange={(_, value) => { - propertyChanged(property.name, CamelUtil.capitalizeName(value?.replace(/\s/g, ''))) - }} - readOnlyVariant={isUriReadOnly(property) ? "default" : undefined}/> - </InputGroupItem> - <InputGroupItem> - <Tooltip position="bottom-end" content={"Create Java Class"}> - <Button isDisabled={value?.length === 0} variant="control" - onClick={e => showCode(value, property.javaType)}> - <PlusIcon/> - </Button> - </Tooltip> - </InputGroupItem> - {showEditor && <InputGroupItem> - <ExpressionModalEditor name={property.name} - customCode={customCode} - showEditor={showEditor} - dark={dark} - dslLanguage={dslLanguage} - title="Java Class" - onClose={() => setShowEditor(false)} - onSave={(fieldId, value1) => { - propertyChanged(fieldId, value); - InfrastructureAPI.onSaveCustomCode?.(value, value1); - setShowEditor(false) - }}/> - </InputGroupItem>} - </InputGroup>) + const selectOptions: SelectOptionProps[] = []; + if (beans) { + selectOptions.push(<SelectOption key={0} value={"Select..."} isPlaceholder/>); + selectOptions.push(...beans.map((bean) => { + // <SelectOption key={bean.name} value={beanPrefix + bean.name} description={bean.type}/> + return {value: beanPrefix + bean.name, children: bean.name} + })); + selectOptions.push(...SpiBeanApi.findByInterfaceTypeSimple(property.javaType).map((bean) => { + return { + value: beanPrefix + bean.name, children: bean.name + } + }) + ); + } + return ( + <InputGroup> + <InputGroupItem isFill> + {/*<Select*/} + {/* id={property.name} name={property.name}*/} + {/* variant={SelectVariant.typeahead}*/} + {/* aria-label={property.name}*/} + {/* onToggle={(_event, isExpanded) => {*/} + {/* openSelect(property.name, isExpanded)*/} + {/* }}*/} + {/* onSelect={(e, value, isPlaceholder) => propertyChanged(property.name, (!isPlaceholder ? value : undefined))}*/} + {/* selections={value}*/} + {/* isCreatable={true}*/} + {/* createText=""*/} + {/* isOpen={isSelectOpen(property.name)}*/} + {/* aria-labelledby={property.name}*/} + {/* direction={SelectDirection.down}*/} + {/*>*/} + {/* {selectOptions}*/} + {/*</Select>*/} + <SelectField + id={property.name} + name={property.name} + placeholder='Select bean' + selectOptions={selectOptions} + onChange={(_, v) => { + }} + /> + {/*<TextInput*/} + {/* ref={ref}*/} + {/* className="text-field" isRequired*/} + {/* type="text"*/} + {/* id={property.name} name={property.name}*/} + {/* value={value?.toString()}*/} + {/* onChange={(_, value) => {*/} + {/* propertyChanged(property.name, CamelUtil.capitalizeName(value?.replace(/\s/g, '')))*/} + {/* }}*/} + {/* readOnlyVariant={isUriReadOnly(property) ? "default" : undefined}/>*/} + </InputGroupItem> + <InputGroupItem> + <Tooltip position="bottom-end" content={"Create Java Class"}> + <Button isDisabled={value?.length === 0} variant="control" + onClick={e => showCode(value, property.javaType)}> + <PlusIcon/> + </Button> + </Tooltip> + </InputGroupItem> + {showEditor && <InputGroupItem> + <ExpressionModalEditor name={property.name} + customCode={customCode} + showEditor={showEditor} + dark={dark} + dslLanguage={dslLanguage} + title="Java Class" + onClose={() => setShowEditor(false)} + onSave={(fieldId, value1) => { + propertyChanged(fieldId, value); + InfrastructureAPI.onSaveCustomCode?.(value, value1); + setShowEditor(false) + }}/> + </InputGroupItem>} + </InputGroup> + ) } function getTextArea(property: PropertyMeta, value: any) { @@ -630,8 +677,8 @@ export function DslPropertyField(props: Props) { const beans = CamelUi.getBeans(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}/>)); + selectOptions.push(...beans.map((bean) => + <SelectOption key={bean.name} value={bean.name} description={bean.type}/>)); } return ( <Select @@ -1013,6 +1060,7 @@ export function DslPropertyField(props: Props) { const isVariable = getIsVariable(); const beanConstructors = element?.dslName === 'BeanFactoryDefinition' && property.name === 'constructors' const beanProperties = element?.dslName === 'BeanFactoryDefinition' && property.name === 'properties' + const isSpi = property.javaType.startsWith("org.apache.camel.spi") || property.javaType.startsWith("org.apache.camel.AggregationStrategy"); return ( <div> <FormGroup diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx index f27782e3..88bdec74 100644 --- a/karavan-designer/src/designer/route/DslConnections.tsx +++ b/karavan-designer/src/designer/route/DslConnections.tsx @@ -125,12 +125,12 @@ export function DslConnections() { const isNav = data[2] === 'nav'; return (!isInternal ? <g key={pos.step.uuid + "-incoming"}> - <circle cx={incomingX} cy={fromY} r={r} className="circle-incoming"/> - <path d={`M ${lineX1},${lineY1} C ${lineX1},${lineY2} ${lineX2},${lineY1} ${lineX2},${lineY2}`} + <circle key={pos.step.uuid + "-circle"} cx={incomingX} cy={fromY} r={r} className="circle-incoming"/> + <path key={pos.step.uuid + "-path"} d={`M ${lineX1},${lineY1} C ${lineX1},${lineY2} ${lineX2},${lineY1} ${lineX2},${lineY2}`} className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/> </g> - : <></> + : <div key={pos.step.uuid + "-incoming"} style={{display: 'none'}}></div> ) } } @@ -179,7 +179,7 @@ export function DslConnections() { </Tooltip> )} </div> - : <></> + : <div key={pos.step.uuid + "-icon"} style={{display: 'none'}}></div> ) } } @@ -247,7 +247,7 @@ export function DslConnections() { d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`} className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/> </g> - : <></> + : <div key={pos.step.uuid + "-outgoing"} style={{display: 'none'}}></div> ) } } @@ -288,7 +288,7 @@ export function DslConnections() { </Tooltip> } </div> - : <></> + : <div key={pos.step.uuid + "-icon"} style={{display: 'none'}}></div> ) } } @@ -475,8 +475,8 @@ export function DslConnections() { <svg key={svgKey} style={{width: width, height: height, position: "absolute", left: 0, top: 0}} viewBox={"0 0 " + (width) + " " + (height)}> - <defs> - <marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" + <defs key='defs'> + <marker key='maker' id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" className="arrow"> <polygon points="0 0, 9 3, 0 6"/> </marker> diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx index f27782e3..88bdec74 100644 --- a/karavan-space/src/designer/route/DslConnections.tsx +++ b/karavan-space/src/designer/route/DslConnections.tsx @@ -125,12 +125,12 @@ export function DslConnections() { const isNav = data[2] === 'nav'; return (!isInternal ? <g key={pos.step.uuid + "-incoming"}> - <circle cx={incomingX} cy={fromY} r={r} className="circle-incoming"/> - <path d={`M ${lineX1},${lineY1} C ${lineX1},${lineY2} ${lineX2},${lineY1} ${lineX2},${lineY2}`} + <circle key={pos.step.uuid + "-circle"} cx={incomingX} cy={fromY} r={r} className="circle-incoming"/> + <path key={pos.step.uuid + "-path"} d={`M ${lineX1},${lineY1} C ${lineX1},${lineY2} ${lineX2},${lineY1} ${lineX2},${lineY2}`} className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/> </g> - : <></> + : <div key={pos.step.uuid + "-incoming"} style={{display: 'none'}}></div> ) } } @@ -179,7 +179,7 @@ export function DslConnections() { </Tooltip> )} </div> - : <></> + : <div key={pos.step.uuid + "-icon"} style={{display: 'none'}}></div> ) } } @@ -247,7 +247,7 @@ export function DslConnections() { d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`} className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/> </g> - : <></> + : <div key={pos.step.uuid + "-outgoing"} style={{display: 'none'}}></div> ) } } @@ -288,7 +288,7 @@ export function DslConnections() { </Tooltip> } </div> - : <></> + : <div key={pos.step.uuid + "-icon"} style={{display: 'none'}}></div> ) } } @@ -475,8 +475,8 @@ export function DslConnections() { <svg key={svgKey} style={{width: width, height: height, position: "absolute", left: 0, top: 0}} viewBox={"0 0 " + (width) + " " + (height)}> - <defs> - <marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" + <defs key='defs'> + <marker key='maker' id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" className="arrow"> <polygon points="0 0, 9 3, 0 6"/> </marker>
