From 95b4a7faa852097119c90337c7ca4d7d71c9caba Mon Sep 17 00:00:00 2001
From: Marat Gubaidullin <marat@talismancloud.io>
Date: Tue, 12 Nov 2024 18:28:17 -0500
Subject: [PATCH] Designer fixes

---
 .../property/property/DslPropertyField.tsx    | 14 ++---
 .../src/designer/route/element/DslElement.tsx | 23 ++++----
 .../src/designer/selector/DslSelector.tsx     | 54 ++++++++++---------
 .../property/property/DslPropertyField.tsx    | 14 ++---
 .../src/designer/route/element/DslElement.tsx | 23 ++++----
 .../src/designer/selector/DslSelector.tsx     | 54 ++++++++++---------
 .../property/property/DslPropertyField.tsx    | 14 ++---
 .../src/designer/route/element/DslElement.tsx | 23 ++++----
 .../src/designer/selector/DslSelector.tsx     | 54 ++++++++++---------
 9 files changed, 150 insertions(+), 123 deletions(-)

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 908d2214b8a..c8346056e3a 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
@@ -322,7 +322,7 @@ export function DslPropertyField(props: Props) {
                            className="text-field route-variable" isRequired
                            type='text'
                            id={property.name} name={property.name}
-                           value={textValue?.toString()}
+                           value={textValue?.toString() || ''}
                            customIcon={property.type !== 'string' ?
                                <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                            onBlur={_ => {
@@ -360,7 +360,7 @@ export function DslPropertyField(props: Props) {
                         type={property.secret ? "password" : "text"}
                         autoComplete="off"
                         id={property.name} name={property.name}
-                        value={textValue?.toString()}
+                        value={textValue?.toString() || ''}
                         customIcon={property.type !== 'string' ?
                             <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                         onBlur={_ => {
@@ -414,7 +414,7 @@ export function DslPropertyField(props: Props) {
                            type={property.secret ? "password" : "text"}
                            autoComplete="off"
                            id={property.name} name={property.name}
-                           value={textValue?.toString()}
+                           value={textValue?.toString() || ''}
                            customIcon={property.type !== 'string' ?
                                <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                            onBlur={_ => {
@@ -639,7 +639,7 @@ export function DslPropertyField(props: Props) {
                         name={property.name + "-placeholder"}
                         type="text"
                         aria-label="placeholder"
-                        value={!isValueBoolean ? textValue?.toString() : undefined}
+                        value={!isValueBoolean ? textValue?.toString() : ''}
                         onBlur={_ => propertyChanged(property.name, textValue)}
                         onChange={(_, v) => {
                             setTextValue(v);
@@ -879,7 +879,7 @@ export function DslPropertyField(props: Props) {
         return (
             <div>
                 <TextInputGroup className="input-group">
-                    <TextInputGroupMain value={arrayValues.get(property.name)}
+                    <TextInputGroupMain value={arrayValues.get(property.name) || ''}
                                         onChange={(e, v) => arrayChanged(property.name, v)}
                                         onKeyUp={e => {
                                             if (e.key === 'Enter') arraySave(property.name)
@@ -1091,7 +1091,7 @@ export function DslPropertyField(props: Props) {
     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
                 className='dsl-property-form-group'
                 label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)}
@@ -1144,6 +1144,6 @@ export function DslPropertyField(props: Props) {
                 {beanProperties && getBeanProperties('properties')}
             </FormGroup>
             {getInfrastructureSelectorModal()}
-        </div>
+        </>
     )
 }
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx b/karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx
index 15af1ac8cdf..b11c693d67e 100644
--- a/karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx
@@ -210,16 +210,19 @@ export function DslElement(props: Props) {
                             } else {
                                 nextStep = children.at(index + 1);
                             }
-                            return (<div key={step.uuid + child.className + index}>
-                                <DslElement
-                                    inSteps={child.name === 'steps'}
-                                    position={index}
-                                    step={element}
-                                    nextStep={nextStep}
-                                    prevStep={prevStep}
-                                    inStepsLength={array.length}
-                                    parent={step}/>
-                            </div>)
+                            return (
+                                // <div key={step.uuid + child.className + index}>
+                                    <DslElement
+                                        key={step.uuid + child.className + index}
+                                        inSteps={child.name === 'steps'}
+                                        position={index}
+                                        step={element}
+                                        nextStep={nextStep}
+                                        prevStep={prevStep}
+                                        inStepsLength={array.length}
+                                        parent={step}/>
+                                // </div>
+                            )
                         }
                     )}
                     {child.name === 'steps' && getAddStepButton()}
diff --git a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
index c11e9b2f724..80eef199828 100644
--- a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
+++ b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
@@ -58,7 +58,7 @@ export function DslSelector(props: Props) {
 
     const {onDslSelect} = useRouteDesignerHook();
 
-    const [filterShown, setFilterShown] =  useState<string>('');
+    const [filterShown, setFilterShown] = useState<string>('');
     const [filter, setFilter] = useDebounceValue('', 300);
 
     const [customOnly, setCustomOnly] = useState<boolean>(false);
@@ -101,7 +101,7 @@ export function DslSelector(props: Props) {
         setPreferredElements(p);
     }
 
-    function getDslMetaModelType(dsl: DslMetaModel){
+    function getDslMetaModelType(dsl: DslMetaModel) {
         return ['ToDefinition', 'FromDefinition'].includes(dsl.type) ? 'components' : (dsl.uri?.startsWith("kamelet:") ? "kamelets" : 'eip');
     }
 
@@ -151,25 +151,30 @@ export function DslSelector(props: Props) {
         const isKam = selectedToggles.includes('kamelets')
         return (
             <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
-                {parentDsl !== undefined && <ToggleGroupItem
-                    text={
-                        <div style={{display: 'flex', flexDirection: 'row'}}>
-                            <div style={{marginRight: '6px'}}>Processors</div>
-                            {ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
-                        </div>
-                    }
-                    buttonId="eip"
-                    isSelected={selectedToggles.includes('eip')}
-                    onChange={(_, selected) => {
-                        if (selected) addSelectedToggle('eip')
-                        else deleteSelectedToggle('eip')
-                    }}
-                />}
+                {parentDsl !== undefined &&
+                    <ToggleGroupItem
+                        key='eip'
+                        text={
+                            <div style={{display: 'flex', flexDirection: 'row'}}>
+                                <div style={{marginRight: '6px'}}>Processors</div>
+                                {ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
+                            </div>
+                        }
+                        buttonId="eip"
+                        isSelected={selectedToggles.includes('eip')}
+                        onChange={(_, selected) => {
+                            if (selected) addSelectedToggle('eip')
+                            else deleteSelectedToggle('eip')
+                        }}
+                    />
+                }
                 <ToggleGroupItem
+                    key='component'
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
                             <div style={{marginRight: '6px'}}>Components</div>
-                            {ready && <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
+                            {ready &&
+                                <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
                         </div>
                     }
                     buttonId="components"
@@ -180,6 +185,7 @@ export function DslSelector(props: Props) {
                     }}
                 />
                 <ToggleGroupItem
+                    key='kamelet'
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
                             <div style={{marginRight: '6px'}}>Kamelets</div>
@@ -239,8 +245,7 @@ export function DslSelector(props: Props) {
                 } else {
                     return true;
                 }
-            }
-            else return false;
+            } else return false;
         })
         .filter(d => CamelUi.checkFilter(d, filter));
 
@@ -275,25 +280,26 @@ export function DslSelector(props: Props) {
             actions={{}}>
             <PageSection padding={{default: "noPadding"}} variant={dark ? "darker" : "light"}>
                 {!ready && [1, 2, 3, 4, 5, 6, 7, 8, 9].map(i =>
-                    <React.Fragment>
-                        <Skeleton width={i * 10 + '%'} screenreaderText="Loading..."/>
+                    <React.Fragment key={i}>
+                        <Skeleton key={i} width={i * 10 + '%'} screenreaderText="Loading..."/>
                         <br/>
                     </React.Fragment>)
                 }
                 <Gallery key={"fast-gallery"} hasGutter className="dsl-gallery"
                          minWidths={{default: '150px'}}>
                     {showSelector && fastElements.map((dsl: DslMetaModel, index: number) =>
-                        <DslFastCard dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
+                        <DslFastCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
                     )}
                 </Gallery>
                 <Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
                     {showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
-                        <DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
+                        <DslCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl}/>
                     )}
                     {moreElements > 0 &&
                         <Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
                             <Bullseye>
-                                <Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
+                                <Button variant='link'
+                                        onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
                             </Bullseye>
                         </Card>
                     }
diff --git a/karavan-designer/src/designer/property/property/DslPropertyField.tsx b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
index 908d2214b8a..c8346056e3a 100644
--- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
@@ -322,7 +322,7 @@ export function DslPropertyField(props: Props) {
                            className="text-field route-variable" isRequired
                            type='text'
                            id={property.name} name={property.name}
-                           value={textValue?.toString()}
+                           value={textValue?.toString() || ''}
                            customIcon={property.type !== 'string' ?
                                <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                            onBlur={_ => {
@@ -360,7 +360,7 @@ export function DslPropertyField(props: Props) {
                         type={property.secret ? "password" : "text"}
                         autoComplete="off"
                         id={property.name} name={property.name}
-                        value={textValue?.toString()}
+                        value={textValue?.toString() || ''}
                         customIcon={property.type !== 'string' ?
                             <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                         onBlur={_ => {
@@ -414,7 +414,7 @@ export function DslPropertyField(props: Props) {
                            type={property.secret ? "password" : "text"}
                            autoComplete="off"
                            id={property.name} name={property.name}
-                           value={textValue?.toString()}
+                           value={textValue?.toString() || ''}
                            customIcon={property.type !== 'string' ?
                                <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                            onBlur={_ => {
@@ -639,7 +639,7 @@ export function DslPropertyField(props: Props) {
                         name={property.name + "-placeholder"}
                         type="text"
                         aria-label="placeholder"
-                        value={!isValueBoolean ? textValue?.toString() : undefined}
+                        value={!isValueBoolean ? textValue?.toString() : ''}
                         onBlur={_ => propertyChanged(property.name, textValue)}
                         onChange={(_, v) => {
                             setTextValue(v);
@@ -879,7 +879,7 @@ export function DslPropertyField(props: Props) {
         return (
             <div>
                 <TextInputGroup className="input-group">
-                    <TextInputGroupMain value={arrayValues.get(property.name)}
+                    <TextInputGroupMain value={arrayValues.get(property.name) || ''}
                                         onChange={(e, v) => arrayChanged(property.name, v)}
                                         onKeyUp={e => {
                                             if (e.key === 'Enter') arraySave(property.name)
@@ -1091,7 +1091,7 @@ export function DslPropertyField(props: Props) {
     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
                 className='dsl-property-form-group'
                 label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)}
@@ -1144,6 +1144,6 @@ export function DslPropertyField(props: Props) {
                 {beanProperties && getBeanProperties('properties')}
             </FormGroup>
             {getInfrastructureSelectorModal()}
-        </div>
+        </>
     )
 }
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/element/DslElement.tsx b/karavan-designer/src/designer/route/element/DslElement.tsx
index 15af1ac8cdf..b11c693d67e 100644
--- a/karavan-designer/src/designer/route/element/DslElement.tsx
+++ b/karavan-designer/src/designer/route/element/DslElement.tsx
@@ -210,16 +210,19 @@ export function DslElement(props: Props) {
                             } else {
                                 nextStep = children.at(index + 1);
                             }
-                            return (<div key={step.uuid + child.className + index}>
-                                <DslElement
-                                    inSteps={child.name === 'steps'}
-                                    position={index}
-                                    step={element}
-                                    nextStep={nextStep}
-                                    prevStep={prevStep}
-                                    inStepsLength={array.length}
-                                    parent={step}/>
-                            </div>)
+                            return (
+                                // <div key={step.uuid + child.className + index}>
+                                    <DslElement
+                                        key={step.uuid + child.className + index}
+                                        inSteps={child.name === 'steps'}
+                                        position={index}
+                                        step={element}
+                                        nextStep={nextStep}
+                                        prevStep={prevStep}
+                                        inStepsLength={array.length}
+                                        parent={step}/>
+                                // </div>
+                            )
                         }
                     )}
                     {child.name === 'steps' && getAddStepButton()}
diff --git a/karavan-designer/src/designer/selector/DslSelector.tsx b/karavan-designer/src/designer/selector/DslSelector.tsx
index c11e9b2f724..80eef199828 100644
--- a/karavan-designer/src/designer/selector/DslSelector.tsx
+++ b/karavan-designer/src/designer/selector/DslSelector.tsx
@@ -58,7 +58,7 @@ export function DslSelector(props: Props) {
 
     const {onDslSelect} = useRouteDesignerHook();
 
-    const [filterShown, setFilterShown] =  useState<string>('');
+    const [filterShown, setFilterShown] = useState<string>('');
     const [filter, setFilter] = useDebounceValue('', 300);
 
     const [customOnly, setCustomOnly] = useState<boolean>(false);
@@ -101,7 +101,7 @@ export function DslSelector(props: Props) {
         setPreferredElements(p);
     }
 
-    function getDslMetaModelType(dsl: DslMetaModel){
+    function getDslMetaModelType(dsl: DslMetaModel) {
         return ['ToDefinition', 'FromDefinition'].includes(dsl.type) ? 'components' : (dsl.uri?.startsWith("kamelet:") ? "kamelets" : 'eip');
     }
 
@@ -151,25 +151,30 @@ export function DslSelector(props: Props) {
         const isKam = selectedToggles.includes('kamelets')
         return (
             <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
-                {parentDsl !== undefined && <ToggleGroupItem
-                    text={
-                        <div style={{display: 'flex', flexDirection: 'row'}}>
-                            <div style={{marginRight: '6px'}}>Processors</div>
-                            {ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
-                        </div>
-                    }
-                    buttonId="eip"
-                    isSelected={selectedToggles.includes('eip')}
-                    onChange={(_, selected) => {
-                        if (selected) addSelectedToggle('eip')
-                        else deleteSelectedToggle('eip')
-                    }}
-                />}
+                {parentDsl !== undefined &&
+                    <ToggleGroupItem
+                        key='eip'
+                        text={
+                            <div style={{display: 'flex', flexDirection: 'row'}}>
+                                <div style={{marginRight: '6px'}}>Processors</div>
+                                {ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
+                            </div>
+                        }
+                        buttonId="eip"
+                        isSelected={selectedToggles.includes('eip')}
+                        onChange={(_, selected) => {
+                            if (selected) addSelectedToggle('eip')
+                            else deleteSelectedToggle('eip')
+                        }}
+                    />
+                }
                 <ToggleGroupItem
+                    key='component'
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
                             <div style={{marginRight: '6px'}}>Components</div>
-                            {ready && <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
+                            {ready &&
+                                <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
                         </div>
                     }
                     buttonId="components"
@@ -180,6 +185,7 @@ export function DslSelector(props: Props) {
                     }}
                 />
                 <ToggleGroupItem
+                    key='kamelet'
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
                             <div style={{marginRight: '6px'}}>Kamelets</div>
@@ -239,8 +245,7 @@ export function DslSelector(props: Props) {
                 } else {
                     return true;
                 }
-            }
-            else return false;
+            } else return false;
         })
         .filter(d => CamelUi.checkFilter(d, filter));
 
@@ -275,25 +280,26 @@ export function DslSelector(props: Props) {
             actions={{}}>
             <PageSection padding={{default: "noPadding"}} variant={dark ? "darker" : "light"}>
                 {!ready && [1, 2, 3, 4, 5, 6, 7, 8, 9].map(i =>
-                    <React.Fragment>
-                        <Skeleton width={i * 10 + '%'} screenreaderText="Loading..."/>
+                    <React.Fragment key={i}>
+                        <Skeleton key={i} width={i * 10 + '%'} screenreaderText="Loading..."/>
                         <br/>
                     </React.Fragment>)
                 }
                 <Gallery key={"fast-gallery"} hasGutter className="dsl-gallery"
                          minWidths={{default: '150px'}}>
                     {showSelector && fastElements.map((dsl: DslMetaModel, index: number) =>
-                        <DslFastCard dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
+                        <DslFastCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
                     )}
                 </Gallery>
                 <Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
                     {showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
-                        <DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
+                        <DslCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl}/>
                     )}
                     {moreElements > 0 &&
                         <Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
                             <Bullseye>
-                                <Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
+                                <Button variant='link'
+                                        onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
                             </Bullseye>
                         </Card>
                     }
diff --git a/karavan-space/src/designer/property/property/DslPropertyField.tsx b/karavan-space/src/designer/property/property/DslPropertyField.tsx
index 908d2214b8a..c8346056e3a 100644
--- a/karavan-space/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/DslPropertyField.tsx
@@ -322,7 +322,7 @@ export function DslPropertyField(props: Props) {
                            className="text-field route-variable" isRequired
                            type='text'
                            id={property.name} name={property.name}
-                           value={textValue?.toString()}
+                           value={textValue?.toString() || ''}
                            customIcon={property.type !== 'string' ?
                                <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                            onBlur={_ => {
@@ -360,7 +360,7 @@ export function DslPropertyField(props: Props) {
                         type={property.secret ? "password" : "text"}
                         autoComplete="off"
                         id={property.name} name={property.name}
-                        value={textValue?.toString()}
+                        value={textValue?.toString() || ''}
                         customIcon={property.type !== 'string' ?
                             <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                         onBlur={_ => {
@@ -414,7 +414,7 @@ export function DslPropertyField(props: Props) {
                            type={property.secret ? "password" : "text"}
                            autoComplete="off"
                            id={property.name} name={property.name}
-                           value={textValue?.toString()}
+                           value={textValue?.toString() || ''}
                            customIcon={property.type !== 'string' ?
                                <Text component={TextVariants.p}>{property.type}</Text> : undefined}
                            onBlur={_ => {
@@ -639,7 +639,7 @@ export function DslPropertyField(props: Props) {
                         name={property.name + "-placeholder"}
                         type="text"
                         aria-label="placeholder"
-                        value={!isValueBoolean ? textValue?.toString() : undefined}
+                        value={!isValueBoolean ? textValue?.toString() : ''}
                         onBlur={_ => propertyChanged(property.name, textValue)}
                         onChange={(_, v) => {
                             setTextValue(v);
@@ -879,7 +879,7 @@ export function DslPropertyField(props: Props) {
         return (
             <div>
                 <TextInputGroup className="input-group">
-                    <TextInputGroupMain value={arrayValues.get(property.name)}
+                    <TextInputGroupMain value={arrayValues.get(property.name) || ''}
                                         onChange={(e, v) => arrayChanged(property.name, v)}
                                         onKeyUp={e => {
                                             if (e.key === 'Enter') arraySave(property.name)
@@ -1091,7 +1091,7 @@ export function DslPropertyField(props: Props) {
     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
                 className='dsl-property-form-group'
                 label={props.hideLabel ? undefined : getLabel(property, value, isKamelet)}
@@ -1144,6 +1144,6 @@ export function DslPropertyField(props: Props) {
                 {beanProperties && getBeanProperties('properties')}
             </FormGroup>
             {getInfrastructureSelectorModal()}
-        </div>
+        </>
     )
 }
\ No newline at end of file
diff --git a/karavan-space/src/designer/route/element/DslElement.tsx b/karavan-space/src/designer/route/element/DslElement.tsx
index 15af1ac8cdf..b11c693d67e 100644
--- a/karavan-space/src/designer/route/element/DslElement.tsx
+++ b/karavan-space/src/designer/route/element/DslElement.tsx
@@ -210,16 +210,19 @@ export function DslElement(props: Props) {
                             } else {
                                 nextStep = children.at(index + 1);
                             }
-                            return (<div key={step.uuid + child.className + index}>
-                                <DslElement
-                                    inSteps={child.name === 'steps'}
-                                    position={index}
-                                    step={element}
-                                    nextStep={nextStep}
-                                    prevStep={prevStep}
-                                    inStepsLength={array.length}
-                                    parent={step}/>
-                            </div>)
+                            return (
+                                // <div key={step.uuid + child.className + index}>
+                                    <DslElement
+                                        key={step.uuid + child.className + index}
+                                        inSteps={child.name === 'steps'}
+                                        position={index}
+                                        step={element}
+                                        nextStep={nextStep}
+                                        prevStep={prevStep}
+                                        inStepsLength={array.length}
+                                        parent={step}/>
+                                // </div>
+                            )
                         }
                     )}
                     {child.name === 'steps' && getAddStepButton()}
diff --git a/karavan-space/src/designer/selector/DslSelector.tsx b/karavan-space/src/designer/selector/DslSelector.tsx
index c11e9b2f724..80eef199828 100644
--- a/karavan-space/src/designer/selector/DslSelector.tsx
+++ b/karavan-space/src/designer/selector/DslSelector.tsx
@@ -58,7 +58,7 @@ export function DslSelector(props: Props) {
 
     const {onDslSelect} = useRouteDesignerHook();
 
-    const [filterShown, setFilterShown] =  useState<string>('');
+    const [filterShown, setFilterShown] = useState<string>('');
     const [filter, setFilter] = useDebounceValue('', 300);
 
     const [customOnly, setCustomOnly] = useState<boolean>(false);
@@ -101,7 +101,7 @@ export function DslSelector(props: Props) {
         setPreferredElements(p);
     }
 
-    function getDslMetaModelType(dsl: DslMetaModel){
+    function getDslMetaModelType(dsl: DslMetaModel) {
         return ['ToDefinition', 'FromDefinition'].includes(dsl.type) ? 'components' : (dsl.uri?.startsWith("kamelet:") ? "kamelets" : 'eip');
     }
 
@@ -151,25 +151,30 @@ export function DslSelector(props: Props) {
         const isKam = selectedToggles.includes('kamelets')
         return (
             <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
-                {parentDsl !== undefined && <ToggleGroupItem
-                    text={
-                        <div style={{display: 'flex', flexDirection: 'row'}}>
-                            <div style={{marginRight: '6px'}}>Processors</div>
-                            {ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
-                        </div>
-                    }
-                    buttonId="eip"
-                    isSelected={selectedToggles.includes('eip')}
-                    onChange={(_, selected) => {
-                        if (selected) addSelectedToggle('eip')
-                        else deleteSelectedToggle('eip')
-                    }}
-                />}
+                {parentDsl !== undefined &&
+                    <ToggleGroupItem
+                        key='eip'
+                        text={
+                            <div style={{display: 'flex', flexDirection: 'row'}}>
+                                <div style={{marginRight: '6px'}}>Processors</div>
+                                {ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
+                            </div>
+                        }
+                        buttonId="eip"
+                        isSelected={selectedToggles.includes('eip')}
+                        onChange={(_, selected) => {
+                            if (selected) addSelectedToggle('eip')
+                            else deleteSelectedToggle('eip')
+                        }}
+                    />
+                }
                 <ToggleGroupItem
+                    key='component'
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
                             <div style={{marginRight: '6px'}}>Components</div>
-                            {ready && <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
+                            {ready &&
+                                <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
                         </div>
                     }
                     buttonId="components"
@@ -180,6 +185,7 @@ export function DslSelector(props: Props) {
                     }}
                 />
                 <ToggleGroupItem
+                    key='kamelet'
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
                             <div style={{marginRight: '6px'}}>Kamelets</div>
@@ -239,8 +245,7 @@ export function DslSelector(props: Props) {
                 } else {
                     return true;
                 }
-            }
-            else return false;
+            } else return false;
         })
         .filter(d => CamelUi.checkFilter(d, filter));
 
@@ -275,25 +280,26 @@ export function DslSelector(props: Props) {
             actions={{}}>
             <PageSection padding={{default: "noPadding"}} variant={dark ? "darker" : "light"}>
                 {!ready && [1, 2, 3, 4, 5, 6, 7, 8, 9].map(i =>
-                    <React.Fragment>
-                        <Skeleton width={i * 10 + '%'} screenreaderText="Loading..."/>
+                    <React.Fragment key={i}>
+                        <Skeleton key={i} width={i * 10 + '%'} screenreaderText="Loading..."/>
                         <br/>
                     </React.Fragment>)
                 }
                 <Gallery key={"fast-gallery"} hasGutter className="dsl-gallery"
                          minWidths={{default: '150px'}}>
                     {showSelector && fastElements.map((dsl: DslMetaModel, index: number) =>
-                        <DslFastCard dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
+                        <DslFastCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl} onDeleteFast={deleteFast}/>
                     )}
                 </Gallery>
                 <Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
                     {showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
-                        <DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
+                        <DslCard key={dsl.name + ":" + index} dsl={dsl} index={index} onDslSelect={selectDsl}/>
                     )}
                     {moreElements > 0 &&
                         <Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
                             <Bullseye>
-                                <Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
+                                <Button variant='link'
+                                        onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
                             </Bullseye>
                         </Card>
                     }