This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch designer-pf5
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit d6715c5c350358aca8c38773e7998bde641937af
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Thu Aug 10 19:35:38 2023 -0400
Fix errors for #833
---
karavan-designer/package-lock.json | 16 ++++++------
karavan-designer/package.json | 4 +--
.../src/designer/beans/BeanProperties.tsx | 2 +-
karavan-designer/src/designer/karavan.css | 29 +++++++++++++++++++---
.../src/designer/route/DslSelector.tsx | 2 +-
.../route/property/ComponentParameterField.tsx | 10 +++++---
.../designer/route/property/DslPropertyField.tsx | 17 +++++++------
.../designer/route/property/ExpressionField.tsx | 2 +-
.../route/property/KameletPropertyField.tsx | 8 +++---
karavan-designer/src/knowledgebase/eip/EipCard.tsx | 4 ++-
10 files changed, 61 insertions(+), 33 deletions(-)
diff --git a/karavan-designer/package-lock.json
b/karavan-designer/package-lock.json
index a9956967..26fea6f6 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 1a04f9bd..548304dd 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 87585588..d1d78539 100644
--- a/karavan-designer/src/designer/beans/BeanProperties.tsx
+++ b/karavan-designer/src/designer/beans/BeanProperties.tsx
@@ -167,7 +167,7 @@ export class BeanProperties extends React.Component<Props,
State> {
<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 24e912e1..59a44eda 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 5b54ef9b..4ed08500 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -176,7 +176,7 @@ export class DslSelector extends React.Component<Props,
State> {
</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 94ba33ce..69175d98 100644
--- a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
@@ -240,14 +240,14 @@ export class ComponentParameterField extends
React.Component<Props, State> {
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 @@ export class ComponentParameterField extends
React.Component<Props, State> {
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 @@ export class ComponentParameterField extends
React.Component<Props, State> {
</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 51db0c50..3021baf2 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -176,7 +176,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
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 @@ export class DslPropertyField extends
React.Component<Props, State> {
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 @@ export class DslPropertyField extends
React.Component<Props, State> {
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 @@ export class DslPropertyField extends
React.Component<Props, State> {
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 @@ export class DslPropertyField extends
React.Component<Props, State> {
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 @@ export class DslPropertyField extends
React.Component<Props, State> {
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 @@ export class DslPropertyField extends
React.Component<Props, State> {
<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 3cbb2ab3..08d542cd 100644
--- a/karavan-designer/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -143,7 +143,7 @@ export class ExpressionField extends React.Component<Props,
State> {
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 2f5b80a2..e837677f 100644
--- a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
@@ -127,14 +127,14 @@ export class KameletPropertyField extends
React.Component<Props, State> {
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 @@ export class KameletPropertyField extends
React.Component<Props, State> {
</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 @@ export class KameletPropertyField extends
React.Component<Props, State> {
}
{['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 0930e407..db980615 100644
--- a/karavan-designer/src/knowledgebase/eip/EipCard.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipCard.tsx
@@ -48,10 +48,12 @@ export class EipCard extends React.Component<Props, State> {
<Card isCompact key={component.name} className="kamelet-card"
onClick={event => this.click(event)}
>
+ <CardHeader>
+ </CardHeader>
<CardHeader>
{CamelUi.getIconForDslName(component.className)}
+ <CardTitle>{component.title}</CardTitle>
</CardHeader>
- <CardTitle>{component.title}</CardTitle>
<CardBody>{component.description}</CardBody>
<CardFooter className="footer-labels">
<div>
