You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2023/08/10 23:36:08 UTC
[camel-karavan] branch designer-pf5 created (now d6715c5c)
This is an automated email from the ASF dual-hosted git repository.
marat pushed a change to branch designer-pf5
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
at d6715c5c Fix errors for #833
This branch includes the following new commits:
new d6715c5c Fix errors for #833
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[camel-karavan] 01/01: Fix errors for #833
Posted by ma...@apache.org.
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 <ma...@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>