Skip to content

Commit

Permalink
Designer fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgubaidullin
mgubaidullin committed Nov 12, 2024
1 parent f909f1c commit 95b4a7f
Show file tree
Hide file tree
Showing 9 changed files with 150 additions and 123 deletions.
14 changes: 7 additions & 7 deletions karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={_ => {
Expand Down Expand Up @@ -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={_ => {
Expand Down Expand Up @@ -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={_ => {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -1144,6 +1144,6 @@ export function DslPropertyField(props: Props) {
{beanProperties && getBeanProperties('properties')}
</FormGroup>
{getInfrastructureSelectorModal()}
</div>
</>
)
}
23 changes: 13 additions & 10 deletions karavan-app/src/main/webui/src/designer/route/element/DslElement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down
54 changes: 30 additions & 24 deletions karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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');
}

Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -239,8 +245,7 @@ export function DslSelector(props: Props) {
} else {
return true;
}
}
else return false;
} else return false;
})
.filter(d => CamelUi.checkFilter(d, filter));

Expand Down Expand Up @@ -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>
}
Expand Down
14 changes: 7 additions & 7 deletions karavan-designer/src/designer/property/property/DslPropertyField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={_ => {
Expand Down Expand Up @@ -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={_ => {
Expand Down Expand Up @@ -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={_ => {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -1144,6 +1144,6 @@ export function DslPropertyField(props: Props) {
{beanProperties && getBeanProperties('properties')}
</FormGroup>
{getInfrastructureSelectorModal()}
</div>
</>
)
}
23 changes: 13 additions & 10 deletions karavan-designer/src/designer/route/element/DslElement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down
Loading

0 comments on commit 95b4a7f

Please sign in to comment.