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/09/12 14:58:29 UTC
(camel-karavan) 02/16: Each child in a list should have a unique "key" prop fix.
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 <ma...@talismancloud.io>
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>