Fix errors for #833
diff --git a/karavan-designer/package-lock.json b/karavan-designer/package-lock.json
index a995696..26fea6f 100644
--- a/karavan-designer/package-lock.json
+++ b/karavan-designer/package-lock.json
@@ -9,7 +9,7 @@
"version": "4.0.0-RC2",
"license": "Apache-2.0",
"dependencies": {
- "@monaco-editor/react": "4.5.0",
+ "@monaco-editor/react": "4.5.1",
"@patternfly/patternfly": "^5.0.2",
"@patternfly/react-core": "^5.0.0",
"@patternfly/react-table": "^5.0.0",
@@ -36,7 +36,7 @@
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.39.0",
- "monaco-editor": "0.38.0",
+ "monaco-editor": "0.41.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5"
}
@@ -3198,9 +3198,9 @@
}
},
"node_modules/@monaco-editor/react": {
- "version": "4.5.0",
- "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.0.tgz",
- "integrity": "sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==",
+ "version": "4.5.1",
+ "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.1.tgz",
+ "integrity": "sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==",
"dependencies": {
"@monaco-editor/loader": "^1.3.3"
},
@@ -12777,9 +12777,9 @@
}
},
"node_modules/monaco-editor": {
- "version": "0.38.0",
- "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.38.0.tgz",
- "integrity": "sha512-11Fkh6yzEmwx7O0YoLxeae0qEGFwmyPRlVxpg7oF9czOOCB/iCjdJrG5I67da5WiXK3YJCxoz9TJFE8Tfq/v9A=="
+ "version": "0.41.0",
+ "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.41.0.tgz",
+ "integrity": "sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA=="
},
"node_modules/ms": {
"version": "2.1.2",
diff --git a/karavan-designer/package.json b/karavan-designer/package.json
index 1a04f9b..548304d 100644
--- a/karavan-designer/package.json
+++ b/karavan-designer/package.json
@@ -26,7 +26,7 @@
]
},
"dependencies": {
- "@monaco-editor/react": "4.5.0",
+ "@monaco-editor/react": "4.5.1",
"@patternfly/patternfly": "^5.0.2",
"@patternfly/react-core": "^5.0.0",
"@patternfly/react-table": "^5.0.0",
@@ -53,7 +53,7 @@
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.39.0",
- "monaco-editor": "0.38.0",
+ "monaco-editor": "0.41.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5"
},
diff --git a/karavan-designer/src/designer/beans/BeanProperties.tsx b/karavan-designer/src/designer/beans/BeanProperties.tsx
index 8758558..d1d7853 100644
--- a/karavan-designer/src/designer/beans/BeanProperties.tsx
+++ b/karavan-designer/src/designer/beans/BeanProperties.tsx
@@ -167,7 +167,7 @@
<button type="button" aria-label="More info" onClick={e => {
e.preventDefault();
e.stopPropagation();
- }} className="pf-c-form__group-label-help">
+ }} className="pf-v5-c-form__group-label-help">
<HelpIcon />
</button>
</Popover>
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index 24e912e..59a44ed 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -125,10 +125,20 @@
height: 160px;
}
+
+.kamelets-page .kamelet-card .pf-v5-c-card__header {
+ padding-top: var(--pf-v5-global--spacer--sm);
+}
+
.kamelets-page .kamelet-card .pf-v5-c-card__header .custom {
margin-left: auto;
}
+.kamelets-page .kamelet-card .pf-v5-c-card__header .pf-v5-c-card__header-main {
+ display: flex;
+ flex-direction: row;
+}
+
.kamelets-page .kamelet-card .pf-v5-c-card__title {
font-size: 15px;
font-weight: 400;
@@ -142,7 +152,7 @@
.kamelets-page .kamelet-card .icon {
height: 24px;
- width: 24px;
+ max-width: 24px;
margin-top: auto;
margin-bottom: auto;
margin-right: 5px;
@@ -879,6 +889,17 @@
cursor: pointer;
}
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+ display: flex;
+ flex-direction: row;
+}
+
+.dsl-modal .dsl-card .header-labels .pf-v5-c-card__header-main {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
.dsl-modal .dsl-card .icon {
height: 20px;
width: auto;
@@ -919,7 +940,7 @@
}
-.dsl-modal .pf-v5-c-card__body p {
+.dsl-modal .dsl-card p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -936,14 +957,14 @@
flex-wrap: wrap;
}
-.dsl-modal .pf-v5-c-card.pf-v5-m-compact .header-labels {
+.dsl-modal .dsl-card .header-labels {
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
-.dsl-modal .pf-v5-c-card.pf-v5-m-compact .footer-labels {
+.dsl-modal .dsl-card .footer-labels {
padding: 5px;
display: flex;
flex-direction: row;
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx b/karavan-designer/src/designer/route/DslSelector.tsx
index 5b54ef9..4ed0850 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -176,7 +176,7 @@
</Flex>
}
actions={{}}>
- <PageSection variant={this.props.dark ? "darker" : "light"}>
+ <PageSection padding={{default:"noPadding"}} variant={this.props.dark ? "darker" : "light"}>
{isEip && <ToggleGroup aria-label="Labels" isCompact>
{eipLabels.map(eipLabel => <ToggleGroupItem
key={eipLabel}
diff --git a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
index 94ba33c..69175d9 100644
--- a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
@@ -240,14 +240,14 @@
type={property.secret && !showPassword ? "password" : "text"}
id={this.state.id} name={this.state.id}
value={value !== undefined ? value : property.defaultValue}
- onChange={e => this.parametersChanged(property.name, e, property.kind === 'path')}/>}
+ onChange={(e, value) => this.parametersChanged(property.name, value, property.kind === 'path')}/>}
{showEditor && !property.secret &&
<TextArea autoResize={true} ref={this.state.ref}
className="text-field" isRequired
type="text"
id={this.state.id} name={this.state.id}
value={value !== undefined ? value : property.defaultValue}
- onChange={e => this.parametersChanged(property.name, e, property.kind === 'path')}/>}
+ onChange={(e, value) => this.parametersChanged(property.name, value, property.kind === 'path')}/>}
{!property.secret &&
<Tooltip position="bottom-end" content={showEditor ? "Change to TextField" : "Change to Text Area"}>
<Button variant="control" onClick={e => this.setState({showEditor: !showEditor})}>
@@ -272,7 +272,9 @@
type={['integer', 'int', 'number'].includes(property.type) ? 'number' : (property.secret ? "password" : "text")}
id={this.state.id} name={this.state.id}
value={value !== undefined ? value : property.defaultValue}
- onChange={e => this.parametersChanged(property.name, ['integer', 'int', 'number'].includes(property.type) ? Number(e) : e, property.kind === 'path')}/>
+ onChange={(e, value) => {
+ this.parametersChanged(property.name, ['integer', 'int', 'number'].includes(property.type) ? Number(value) : value, property.kind === 'path')
+ }}/>
)
}
@@ -333,7 +335,7 @@
</div>
}>
<button type="button" aria-label="More info" onClick={e => e.preventDefault()}
- className="pf-c-form__group-label-help">
+ className="pf-v5-c-form__group-label-help">
<HelpIcon />
</button>
</Popover>
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index 51db0c5..3021baf 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -176,7 +176,7 @@
isUriReadOnly = (property: PropertyMeta): boolean => {
const dslName: string = this.props.element?.dslName || '';
- return property.name === 'uri' && !['ToDefinition', 'ToDynamicDefinition', 'WireTapDefinition'].includes(dslName)
+ return property.name === 'uri' && !['ToDynamicDefinition', 'WireTapDefinition'].includes(dslName)
}
selectInfrastructure = (value: string) => {
@@ -232,7 +232,8 @@
type={['integer', 'number'].includes(property.type) ? 'number' : (property.secret ? "password" : "text")}
id={property.name} name={property.name}
value={value?.toString()}
- onChange={e => this.propertyChanged(property.name, ['integer', 'number'].includes(property.type) ? Number(e) : e)} readOnlyVariant="default"/>
+ onChange={(_, v) => this.propertyChanged(property.name, ['integer', 'number'].includes(property.type) ? Number(v) : v)}
+ readOnlyVariant={this.isUriReadOnly(property) ? "default" : undefined}/>
}
{showEditor && !property.secret && <TextArea
ref={this.state.ref}
@@ -241,7 +242,8 @@
type="text"
id={property.name} name={property.name}
value={value?.toString()}
- onChange={e => this.propertyChanged(property.name, ['integer', 'number'].includes(property.type) ? Number(e) : e)} readOnlyVariant="default"/>
+ onChange={(_, v) => this.propertyChanged(property.name, ['integer', 'number'].includes(property.type) ? Number(v) : v)}
+ readOnlyVariant={this.isUriReadOnly(property) ? "default" : undefined}/>
}
{!property.secret &&
<Tooltip position="bottom-end" content={showEditor ? "Change to TextField" : "Change to Text Area"}>
@@ -278,7 +280,8 @@
value={value?.toString()}
onChange={(_, value) => {
this.propertyChanged(property.name, CamelUtil.capitalizeName(value?.replace(/\s/g, '')))
- }} readOnlyVariant="default"/>
+ }}
+ readOnlyVariant={this.isUriReadOnly(property) ? "default" : undefined}/>
</InputGroupItem>
<InputGroupItem><Tooltip position="bottom-end" content={"Create Java Class"}>
<Button isDisabled={value?.length === 0} variant="control" onClick={e => this.showCode(value, property.javaType)}>
@@ -313,7 +316,7 @@
name={property.name}
height={"100px"}
value={value?.toString()}
- onChange={e => this.propertyChanged(property.name, e)}/></InputGroupItem>
+ onChange={(_, v) => this.propertyChanged(property.name, v)}/></InputGroupItem>
<InputGroupItem><Tooltip position="bottom-end" content={"Show Editor"}>
<Button variant="control" onClick={e => this.setState({showEditor: !showEditor})}>
<EditorIcon/>
@@ -366,7 +369,7 @@
value={value?.toString()}
aria-label={property.name}
isChecked={isChecked}
- onChange={e => this.propertyChanged(property.name, e)}/>
+ onChange={(_, v) => this.propertyChanged(property.name, v)}/>
)
}
@@ -666,7 +669,7 @@
<button type="button" aria-label="More info" onClick={e => {
e.preventDefault();
e.stopPropagation();
- }} className="pf-c-form__group-label-help">
+ }} className="pf-v5-c-form__group-label-help">
<HelpIcon />
</button>
</Popover>
diff --git a/karavan-designer/src/designer/route/property/ExpressionField.tsx b/karavan-designer/src/designer/route/property/ExpressionField.tsx
index 3cbb2ab..08d542c 100644
--- a/karavan-designer/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -143,7 +143,7 @@
e.preventDefault();
e.stopPropagation();
}}
- className="pf-c-form__group-label-help">
+ className="pf-v5-c-form__group-label-help">
<HelpIcon />
</button>
</Popover> : <div></div>
diff --git a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
index 2f5b80a..e837677 100644
--- a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
@@ -127,14 +127,14 @@
type={property.format && !showPassword ? "password" : "text"}
id={id} name={id}
value={value}
- onChange={e => this.parametersChanged(property.id, e)}/>}
+ onChange={(e, value) => this.parametersChanged(property.id, value)}/>}
{showEditor && property.format !== "password" &&
<TextArea autoResize={true}
className="text-field" isRequired
type="text"
id={id} name={id}
value={value}
- onChange={e => this.parametersChanged(property.id, e)}/>}
+ onChange={(e, value) => this.parametersChanged(property.id, value)}/>}
{property.format !== "password" &&
<Tooltip position="bottom-end" content={showEditor ? "Change to TextField" : "Change to Text Area"}>
<Button variant="control" onClick={e => this.setState({showEditor: !showEditor})}>
@@ -177,7 +177,7 @@
</div>
}>
<button type="button" aria-label="More info" onClick={e => e.preventDefault()}
- className="pf-c-form__group-label-help">
+ className="pf-v5-c-form__group-label-help">
<HelpIcon />
</button>
</Popover>
@@ -186,7 +186,7 @@
}
{['integer', 'int', 'number'].includes(property.type) &&
<TextInput className="text-field" isRequired type='number' id={id} name={id} value={value}
- onChange={e => this.parametersChanged(property.id, Number(e))}
+ onChange={(e, value) => this.parametersChanged(property.id, Number(value))}
/>
}
{property.type === 'boolean' && <Switch
diff --git a/karavan-designer/src/knowledgebase/eip/EipCard.tsx b/karavan-designer/src/knowledgebase/eip/EipCard.tsx
index 0930e40..db98061 100644
--- a/karavan-designer/src/knowledgebase/eip/EipCard.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipCard.tsx
@@ -49,9 +49,11 @@
onClick={event => this.click(event)}
>
<CardHeader>
- {CamelUi.getIconForDslName(component.className)}
</CardHeader>
- <CardTitle>{component.title}</CardTitle>
+ <CardHeader>
+ {CamelUi.getIconForDslName(component.className)}
+ <CardTitle>{component.title}</CardTitle>
+ </CardHeader>
<CardBody>{component.description}</CardBody>
<CardFooter className="footer-labels">
<div>