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
The following commit(s) were added to refs/heads/main by this push:
new 95b4a7fa Designer fixes
95b4a7fa is described below
commit 95b4a7faa852097119c90337c7ca4d7d71c9caba
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Nov 12 18:28:17 2024 -0500
Designer fixes
---
.../property/property/DslPropertyField.tsx | 14 +++---
.../src/designer/route/element/DslElement.tsx | 23 +++++----
.../webui/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 908d2214..c8346056 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 15af1ac8..b11c693d 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 c11e9b2f..80eef199 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 908d2214..c8346056 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 15af1ac8..b11c693d 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 c11e9b2f..80eef199 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 908d2214..c8346056 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 15af1ac8..b11c693d 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 c11e9b2f..80eef199 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>
}
