Skip to content

Commit 95b4a7f

Browse files
mgubaidullinmgubaidullin
committed
Designer fixes
1 parent f909f1c commit 95b4a7f

File tree

9 files changed

+150
-123
lines changed

9 files changed

+150
-123
lines changed

‎karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ export function DslPropertyField(props: Props) {
322322
className="text-field route-variable" isRequired
323323
type='text'
324324
id={property.name} name={property.name}
325-
value={textValue?.toString()}
325+
value={textValue?.toString() || ''}
326326
customIcon={property.type !== 'string' ?
327327
<Text component={TextVariants.p}>{property.type}</Text> : undefined}
328328
onBlur={_ => {
@@ -360,7 +360,7 @@ export function DslPropertyField(props: Props) {
360360
type={property.secret ? "password" : "text"}
361361
autoComplete="off"
362362
id={property.name} name={property.name}
363-
value={textValue?.toString()}
363+
value={textValue?.toString() || ''}
364364
customIcon={property.type !== 'string' ?
365365
<Text component={TextVariants.p}>{property.type}</Text> : undefined}
366366
onBlur={_ => {
@@ -414,7 +414,7 @@ export function DslPropertyField(props: Props) {
414414
type={property.secret ? "password" : "text"}
415415
autoComplete="off"
416416
id={property.name} name={property.name}
417-
value={textValue?.toString()}
417+
value={textValue?.toString() || ''}
418418
customIcon={property.type !== 'string' ?
419419
<Text component={TextVariants.p}>{property.type}</Text> : undefined}
420420
onBlur={_ => {
@@ -639,7 +639,7 @@ export function DslPropertyField(props: Props) {
639639
name={property.name + "-placeholder"}
640640
type="text"
641641
aria-label="placeholder"
642-
value={!isValueBoolean ? textValue?.toString() : undefined}
642+
value={!isValueBoolean ? textValue?.toString() : ''}
643643
onBlur={_ => propertyChanged(property.name, textValue)}
644644
onChange={(_, v) => {
645645
setTextValue(v);
@@ -879,7 +879,7 @@ export function DslPropertyField(props: Props) {
879879
return (
880880
<div>
881881
<TextInputGroup className="input-group">
882-
<TextInputGroupMain value={arrayValues.get(property.name)}
882+
<TextInputGroupMain value={arrayValues.get(property.name) || ''}
883883
onChange={(e, v) => arrayChanged(property.name, v)}
884884
onKeyUp={e => {
885885
if (e.key === 'Enter') arraySave(property.name)
@@ -1091,7 +1091,7 @@ export function DslPropertyField(props: Props) {
10911091
const beanProperties = element?.dslName === 'BeanFactoryDefinition' && property.name === 'properties'
10921092
const isSpi = property.javaType.startsWith("org.apache.camel.spi") || property.javaType.startsWith("org.apache.camel.AggregationStrategy");
10931093
return (
1094-
<div>
1094+
<>
10951095
<FormGroup
10961096
className='dsl-property-form-group'
10971097
label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)}
@@ -1144,6 +1144,6 @@ export function DslPropertyField(props: Props) {
11441144
{beanProperties && getBeanProperties('properties')}
11451145
</FormGroup>
11461146
{getInfrastructureSelectorModal()}
1147-
</div>
1147+
</>
11481148
)
11491149
}

‎karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -210,16 +210,19 @@ export function DslElement(props: Props) {
210210
} else {
211211
nextStep = children.at(index + 1);
212212
}
213-
return (<div key={step.uuid + child.className + index}>
214-
<DslElement
215-
inSteps={child.name === 'steps'}
216-
position={index}
217-
step={element}
218-
nextStep={nextStep}
219-
prevStep={prevStep}
220-
inStepsLength={array.length}
221-
parent={step}/>
222-
</div>)
213+
return (
214+
// <div key={step.uuid + child.className + index}>
215+
<DslElement
216+
key={step.uuid + child.className + index}
217+
inSteps={child.name === 'steps'}
218+
position={index}
219+
step={element}
220+
nextStep={nextStep}
221+
prevStep={prevStep}
222+
inStepsLength={array.length}
223+
parent={step}/>
224+
// </div>
225+
)
223226
}
224227
)}
225228
{child.name === 'steps' && getAddStepButton()}

‎karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function DslSelector(props: Props) {
5858

5959
const {onDslSelect} = useRouteDesignerHook();
6060

61-
const [filterShown, setFilterShown] = useState<string>('');
61+
const [filterShown, setFilterShown] = useState<string>('');
6262
const [filter, setFilter] = useDebounceValue('', 300);
6363

6464
const [customOnly, setCustomOnly] = useState<boolean>(false);
@@ -101,7 +101,7 @@ export function DslSelector(props: Props) {
101101
setPreferredElements(p);
102102
}
103103

104-
function getDslMetaModelType(dsl: DslMetaModel){
104+
function getDslMetaModelType(dsl: DslMetaModel) {
105105
return ['ToDefinition', 'FromDefinition'].includes(dsl.type) ? 'components' : (dsl.uri?.startsWith("kamelet:") ? "kamelets" : 'eip');
106106
}
107107

@@ -151,25 +151,30 @@ export function DslSelector(props: Props) {
151151
const isKam = selectedToggles.includes('kamelets')
152152
return (
153153
<ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
154-
{parentDsl !== undefined && <ToggleGroupItem
155-
text={
156-
<div style={{display: 'flex', flexDirection: 'row'}}>
157-
<div style={{marginRight: '6px'}}>Processors</div>
158-
{ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
159-
</div>
160-
}
161-
buttonId="eip"
162-
isSelected={selectedToggles.includes('eip')}
163-
onChange={(_, selected) => {
164-
if (selected) addSelectedToggle('eip')
165-
else deleteSelectedToggle('eip')
166-
}}
167-
/>}
154+
{parentDsl !== undefined &&
155+
<ToggleGroupItem
156+
key='eip'
157+
text={
158+
<div style={{display: 'flex', flexDirection: 'row'}}>
159+
<div style={{marginRight: '6px'}}>Processors</div>
160+
{ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
161+
</div>
162+
}
163+
buttonId="eip"
164+
isSelected={selectedToggles.includes('eip')}
165+
onChange={(_, selected) => {
166+
if (selected) addSelectedToggle('eip')
167+
else deleteSelectedToggle('eip')
168+
}}
169+
/>
170+
}
168171
<ToggleGroupItem
172+
key='component'
169173
text={
170174
<div style={{display: 'flex', flexDirection: 'row'}}>
171175
<div style={{marginRight: '6px'}}>Components</div>
172-
{ready && <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
176+
{ready &&
177+
<Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
173178
</div>
174179
}
175180
buttonId="components"
@@ -180,6 +185,7 @@ export function DslSelector(props: Props) {
180185
}}
181186
/>
182187
<ToggleGroupItem
188+
key='kamelet'
183189
text={
184190
<div style={{display: 'flex', flexDirection: 'row'}}>
185191
<div style={{marginRight: '6px'}}>Kamelets</div>
@@ -239,8 +245,7 @@ export function DslSelector(props: Props) {
239245
} else {
240246
return true;
241247
}
242-
}
243-
else return false;
248+
} else return false;
244249
})
245250
.filter(d => CamelUi.checkFilter(d, filter));
246251

@@ -275,25 +280,26 @@ export function DslSelector(props: Props) {
275280
actions={{}}>
276281
<PageSection padding={{default: "noPadding"}} variant={dark ? "darker" : "light"}>
277282
{!ready && [1, 2, 3, 4, 5, 6, 7, 8, 9].map(i =>
278-
<React.Fragment>
279-
<Skeleton width={i * 10 + '%'} screenreaderText="Loading..."/>
283+
<React.Fragment key={i}>
284+
<Skeleton key={i} width={i * 10 + '%'} screenreaderText="Loading..."/>
280285
<br/>
281286
</React.Fragment>)
282287
}
283288
<Gallery key={"fast-gallery"} hasGutter className="dsl-gallery"
284289
minWidths={{default: '150px'}}>
285290
{showSelector && fastElements.map((dsl: DslMetaModel, index: number) =>
286-
<DslFastCard dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
291+
<DslFastCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
287292
)}
288293
</Gallery>
289294
<Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
290295
{showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
291-
<DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
296+
<DslCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl}/>
292297
)}
293298
{moreElements > 0 &&
294299
<Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
295300
<Bullseye>
296-
<Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
301+
<Button variant='link'
302+
onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
297303
</Bullseye>
298304
</Card>
299305
}

‎karavan-designer/src/designer/property/property/DslPropertyField.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ export function DslPropertyField(props: Props) {
322322
className="text-field route-variable" isRequired
323323
type='text'
324324
id={property.name} name={property.name}
325-
value={textValue?.toString()}
325+
value={textValue?.toString() || ''}
326326
customIcon={property.type !== 'string' ?
327327
<Text component={TextVariants.p}>{property.type}</Text> : undefined}
328328
onBlur={_ => {
@@ -360,7 +360,7 @@ export function DslPropertyField(props: Props) {
360360
type={property.secret ? "password" : "text"}
361361
autoComplete="off"
362362
id={property.name} name={property.name}
363-
value={textValue?.toString()}
363+
value={textValue?.toString() || ''}
364364
customIcon={property.type !== 'string' ?
365365
<Text component={TextVariants.p}>{property.type}</Text> : undefined}
366366
onBlur={_ => {
@@ -414,7 +414,7 @@ export function DslPropertyField(props: Props) {
414414
type={property.secret ? "password" : "text"}
415415
autoComplete="off"
416416
id={property.name} name={property.name}
417-
value={textValue?.toString()}
417+
value={textValue?.toString() || ''}
418418
customIcon={property.type !== 'string' ?
419419
<Text component={TextVariants.p}>{property.type}</Text> : undefined}
420420
onBlur={_ => {
@@ -639,7 +639,7 @@ export function DslPropertyField(props: Props) {
639639
name={property.name + "-placeholder"}
640640
type="text"
641641
aria-label="placeholder"
642-
value={!isValueBoolean ? textValue?.toString() : undefined}
642+
value={!isValueBoolean ? textValue?.toString() : ''}
643643
onBlur={_ => propertyChanged(property.name, textValue)}
644644
onChange={(_, v) => {
645645
setTextValue(v);
@@ -879,7 +879,7 @@ export function DslPropertyField(props: Props) {
879879
return (
880880
<div>
881881
<TextInputGroup className="input-group">
882-
<TextInputGroupMain value={arrayValues.get(property.name)}
882+
<TextInputGroupMain value={arrayValues.get(property.name) || ''}
883883
onChange={(e, v) => arrayChanged(property.name, v)}
884884
onKeyUp={e => {
885885
if (e.key === 'Enter') arraySave(property.name)
@@ -1091,7 +1091,7 @@ export function DslPropertyField(props: Props) {
10911091
const beanProperties = element?.dslName === 'BeanFactoryDefinition' && property.name === 'properties'
10921092
const isSpi = property.javaType.startsWith("org.apache.camel.spi") || property.javaType.startsWith("org.apache.camel.AggregationStrategy");
10931093
return (
1094-
<div>
1094+
<>
10951095
<FormGroup
10961096
className='dsl-property-form-group'
10971097
label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)}
@@ -1144,6 +1144,6 @@ export function DslPropertyField(props: Props) {
11441144
{beanProperties && getBeanProperties('properties')}
11451145
</FormGroup>
11461146
{getInfrastructureSelectorModal()}
1147-
</div>
1147+
</>
11481148
)
11491149
}

‎karavan-designer/src/designer/route/element/DslElement.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -210,16 +210,19 @@ export function DslElement(props: Props) {
210210
} else {
211211
nextStep = children.at(index + 1);
212212
}
213-
return (<div key={step.uuid + child.className + index}>
214-
<DslElement
215-
inSteps={child.name === 'steps'}
216-
position={index}
217-
step={element}
218-
nextStep={nextStep}
219-
prevStep={prevStep}
220-
inStepsLength={array.length}
221-
parent={step}/>
222-
</div>)
213+
return (
214+
// <div key={step.uuid + child.className + index}>
215+
<DslElement
216+
key={step.uuid + child.className + index}
217+
inSteps={child.name === 'steps'}
218+
position={index}
219+
step={element}
220+
nextStep={nextStep}
221+
prevStep={prevStep}
222+
inStepsLength={array.length}
223+
parent={step}/>
224+
// </div>
225+
)
223226
}
224227
)}
225228
{child.name === 'steps' && getAddStepButton()}

0 commit comments

Comments
 (0)