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/11 14:30:40 UTC
[camel-karavan] branch main updated: Tracking upgrade patternfly (#853)
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 2c1082a9 Tracking upgrade patternfly (#853)
2c1082a9 is described below
commit 2c1082a974e0e3217ca92b60ecd9994e77d9d476
Author: Stefan Huber <ma...@stefanhuber.at>
AuthorDate: Fri Aug 11 16:30:35 2023 +0200
Tracking upgrade patternfly (#853)
* upgrade packages, use codemods fix
* fix all compile errors, added TODOs in the code for clarification
* left vertical menu styling fixed with v5 prefixes
* fix bean property editing
* Fix errors for #833
* Fix styles for #833
* Fix TODOs for #833
* remove unused import
---------
Co-authored-by: Stefan Huber <st...@hoffmann-group.com>
Co-authored-by: Marat Gubaidullin <ma...@gmail.com>
---
karavan-designer/package-lock.json | 174 +++++--------
karavan-designer/package.json | 6 +-
karavan-designer/src/App.tsx | 3 +-
karavan-designer/src/DesignerPage.tsx | 6 +-
.../src/designer/beans/BeanProperties.tsx | 37 +--
karavan-designer/src/designer/karavan.css | 273 +++++++++++----------
.../src/designer/rest/RestMethodSelector.tsx | 2 +-
karavan-designer/src/designer/route/DslElement.tsx | 8 +-
.../src/designer/route/DslProperties.tsx | 4 +-
.../src/designer/route/DslSelector.tsx | 10 +-
.../src/designer/route/RouteDesigner.tsx | 2 +-
.../route/property/ComponentParameterField.tsx | 49 ++--
.../designer/route/property/DataFormatField.tsx | 19 +-
.../designer/route/property/DslPropertyField.tsx | 112 +++++----
.../designer/route/property/ExpressionField.tsx | 26 +-
.../route/property/InfrastructureSelector.tsx | 22 +-
.../route/property/KameletPropertyField.tsx | 10 +-
.../src/designer/route/property/ModalEditor.tsx | 6 +-
.../src/designer/templates/TemplatesDesigner.tsx | 7 +-
.../src/designer/utils/KaravanComponents.tsx | 4 +-
karavan-designer/src/index.css | 24 +-
.../src/knowledgebase/KnowledgebasePage.tsx | 4 +-
.../knowledgebase/components/ComponentModal.tsx | 15 +-
karavan-designer/src/knowledgebase/eip/EipCard.tsx | 6 +-
.../src/knowledgebase/eip/EipModal.tsx | 15 +-
.../src/knowledgebase/kamelets/KameletCard.tsx | 2 +-
.../src/knowledgebase/kamelets/KameletModal.tsx | 15 +-
27 files changed, 432 insertions(+), 429 deletions(-)
diff --git a/karavan-designer/package-lock.json b/karavan-designer/package-lock.json
index 565ad220..a9956967 100644
--- a/karavan-designer/package-lock.json
+++ b/karavan-designer/package-lock.json
@@ -1,18 +1,18 @@
{
"name": "karavan-designer",
- "version": "3.21.1-SNAPSHOT",
+ "version": "4.0.0-RC2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "karavan-designer",
- "version": "3.21.1-SNAPSHOT",
+ "version": "4.0.0-RC2",
"license": "Apache-2.0",
"dependencies": {
"@monaco-editor/react": "4.5.0",
- "@patternfly/patternfly": "4.224.2",
- "@patternfly/react-core": "4.276.8",
- "@patternfly/react-table": "4.113.0",
+ "@patternfly/patternfly": "^5.0.2",
+ "@patternfly/react-core": "^5.0.0",
+ "@patternfly/react-table": "^5.0.0",
"@types/js-yaml": "4.0.5",
"@types/node": "18.16.3",
"@types/uuid": "9.0.1",
@@ -42,7 +42,7 @@
}
},
"../karavan-core": {
- "version": "3.21.1-SNAPSHOT",
+ "version": "4.0.0-RC2",
"license": "Apache-2.0",
"dependencies": {
"@types/js-yaml": "^4.0.5",
@@ -3255,63 +3255,62 @@
}
},
"node_modules/@patternfly/patternfly": {
- "version": "4.224.2",
- "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.224.2.tgz",
- "integrity": "sha512-HGNV26uyHSIECuhjPg/WGn0mXbAotcs6ODfhAOkfYjIgGylddgiwElxUe1rpEHV5mQJJ2rMn4OdeJIIpzRX61g=="
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.0.2.tgz",
+ "integrity": "sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ=="
},
"node_modules/@patternfly/react-core": {
- "version": "4.276.8",
- "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.8.tgz",
- "integrity": "sha512-dn322rEzBeiVztZEuCZMUUittNb8l1hk30h9ZN31FLZLLVtXGlThFNV9ieqOJYA9zrYxYZrHMkTnOxSWVacMZg==",
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.0.0.tgz",
+ "integrity": "sha512-kewRVFhLw0Dvt8250pqrO47sVRx8E93sMGZbHQomJnZdachYeQ9STnQTP2gvOBq/GPnMei0LZLv0T99g8mPE4w==",
"dependencies": {
- "@patternfly/react-icons": "^4.93.6",
- "@patternfly/react-styles": "^4.92.6",
- "@patternfly/react-tokens": "^4.94.6",
- "focus-trap": "6.9.2",
- "react-dropzone": "9.0.0",
- "tippy.js": "5.1.2",
- "tslib": "^2.0.0"
+ "@patternfly/react-icons": "^5.0.0",
+ "@patternfly/react-styles": "^5.0.0",
+ "@patternfly/react-tokens": "^5.0.0",
+ "focus-trap": "7.4.3",
+ "react-dropzone": "^14.2.3",
+ "tslib": "^2.5.0"
},
"peerDependencies": {
- "react": "^16.8 || ^17 || ^18",
- "react-dom": "^16.8 || ^17 || ^18"
+ "react": "^17 || ^18",
+ "react-dom": "^17 || ^18"
}
},
"node_modules/@patternfly/react-icons": {
- "version": "4.93.6",
- "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.6.tgz",
- "integrity": "sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==",
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.0.0.tgz",
+ "integrity": "sha512-GG5Y/UYl0h346MyDU9U650Csaq4Mxk8S6U8XC7ERk/xIrRr2RF67O2uY7zKBDMTNLYdBvPzgc2s3OMV1+d2/mg==",
"peerDependencies": {
- "react": "^16.8 || ^17 || ^18",
- "react-dom": "^16.8 || ^17 || ^18"
+ "react": "^17 || ^18",
+ "react-dom": "^17 || ^18"
}
},
"node_modules/@patternfly/react-styles": {
- "version": "4.92.6",
- "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.6.tgz",
- "integrity": "sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw=="
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.0.0.tgz",
+ "integrity": "sha512-xbSCgjx+fPrXbIzUznwTFWtJEbzVS0Wn4zrejdKJYQTY+4YcuPlFkeq2tl3syzwGsaYMpHiFwQiTaKyTvlwtuw=="
},
"node_modules/@patternfly/react-table": {
- "version": "4.113.0",
- "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.113.0.tgz",
- "integrity": "sha512-qxa3NWCdYasqQQL1rqEd8DyNa8oWr6HNveNW5YJRakE7imWZhUPG2Nd6Op60+KYX8kbCSl7gwSmgAZAYMBMZkQ==",
- "dependencies": {
- "@patternfly/react-core": "^4.276.8",
- "@patternfly/react-icons": "^4.93.6",
- "@patternfly/react-styles": "^4.92.6",
- "@patternfly/react-tokens": "^4.94.6",
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-5.0.0.tgz",
+ "integrity": "sha512-Q3MBo9+ZmBvLJzVHxmV9f/4qQAz5Si743zVLHRwjh+tjbn/DrcbxJdT8Uxa3NGKkpvszzgi/LPeXipJOHOELug==",
+ "dependencies": {
+ "@patternfly/react-core": "^5.0.0",
+ "@patternfly/react-icons": "^5.0.0",
+ "@patternfly/react-styles": "^5.0.0",
+ "@patternfly/react-tokens": "^5.0.0",
"lodash": "^4.17.19",
- "tslib": "^2.0.0"
+ "tslib": "^2.5.0"
},
"peerDependencies": {
- "react": "^16.8 || ^17 || ^18",
- "react-dom": "^16.8 || ^17 || ^18"
+ "react": "^17 || ^18",
+ "react-dom": "^17 || ^18"
}
},
"node_modules/@patternfly/react-tokens": {
- "version": "4.94.6",
- "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.94.6.tgz",
- "integrity": "sha512-tm7C6nat+uKMr1hrapis7hS3rN9cr41tpcCKhx6cod6FLU8KwF2Yt5KUxakhIOCEcE/M/EhXhAw/qejp8w0r7Q=="
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.0.0.tgz",
+ "integrity": "sha512-to2CXIZ6WTuzBcjLZ+nXi5LhnYkSIDu3RBMRZwrplmECOoUWv87CC+2T0EVxtASRtpQfikjD2PDKMsif5i0BxQ=="
},
"node_modules/@pmmmwh/react-refresh-webpack-plugin": {
"version": "0.5.10",
@@ -4996,12 +4995,9 @@
}
},
"node_modules/attr-accept": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
- "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
- "dependencies": {
- "core-js": "^2.5.0"
- },
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+ "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
"engines": {
"node": ">=4"
}
@@ -6034,6 +6030,7 @@
"version": "3.30.1",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.1.tgz",
"integrity": "sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==",
+ "dev": true,
"hasInstallScript": true,
"funding": {
"type": "opencollective",
@@ -8233,14 +8230,14 @@
}
},
"node_modules/file-selector": {
- "version": "0.1.19",
- "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
- "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==",
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+ "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"dependencies": {
- "tslib": "^2.0.1"
+ "tslib": "^2.4.0"
},
"engines": {
- "node": ">= 10"
+ "node": ">= 12"
}
},
"node_modules/filelist": {
@@ -8380,11 +8377,11 @@
"dev": true
},
"node_modules/focus-trap": {
- "version": "6.9.2",
- "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz",
- "integrity": "sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
+ "version": "7.4.3",
+ "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.3.tgz",
+ "integrity": "sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==",
"dependencies": {
- "tabbable": "^5.3.2"
+ "tabbable": "^6.1.2"
}
},
"node_modules/follow-redirects": {
@@ -13509,16 +13506,6 @@
"node": ">=4"
}
},
- "node_modules/popper.js": {
- "version": "1.16.1",
- "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
- "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
- "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/popperjs"
- }
- },
"node_modules/postcss": {
"version": "8.4.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
@@ -14937,18 +14924,6 @@
"react-is": "^16.13.1"
}
},
- "node_modules/prop-types-extra": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
- "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
- "dependencies": {
- "react-is": "^16.3.2",
- "warning": "^4.0.0"
- },
- "peerDependencies": {
- "react": ">=0.14.0"
- }
- },
"node_modules/proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -15262,20 +15237,19 @@
}
},
"node_modules/react-dropzone": {
- "version": "9.0.0",
- "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-9.0.0.tgz",
- "integrity": "sha512-wZ2o9B2qkdE3RumWhfyZT9swgJYJPeU5qHEcMU8weYpmLex1eeWX0CC32/Y0VutB+BBi2D+iePV/YZIiB4kZGw==",
+ "version": "14.2.3",
+ "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+ "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
"dependencies": {
- "attr-accept": "^1.1.3",
- "file-selector": "^0.1.8",
- "prop-types": "^15.6.2",
- "prop-types-extra": "^1.1.0"
+ "attr-accept": "^2.2.2",
+ "file-selector": "^0.6.0",
+ "prop-types": "^15.8.1"
},
"engines": {
- "node": ">= 6"
+ "node": ">= 10.13"
},
"peerDependencies": {
- "react": ">=0.14.0"
+ "react": ">= 16.8 || 18.0.0"
}
},
"node_modules/react-error-overlay": {
@@ -16824,9 +16798,9 @@
"dev": true
},
"node_modules/tabbable": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
- "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
},
"node_modules/tailwindcss": {
"version": "3.3.2",
@@ -17041,14 +17015,6 @@
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
"dev": true
},
- "node_modules/tippy.js": {
- "version": "5.1.2",
- "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.1.2.tgz",
- "integrity": "sha512-Qtrv2wqbRbaKMUb6bWWBQWPayvcDKNrGlvihxtsyowhT7RLGEh1STWuy6EMXC6QLkfKPB2MLnf8W2mzql9VDAw==",
- "dependencies": {
- "popper.js": "^1.16.0"
- }
- },
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -17501,14 +17467,6 @@
"makeerror": "1.0.12"
}
},
- "node_modules/warning": {
- "version": "4.0.3",
- "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
- "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
- "dependencies": {
- "loose-envify": "^1.0.0"
- }
- },
"node_modules/watchpack": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/karavan-designer/package.json b/karavan-designer/package.json
index d77ac5d1..1a04f9bd 100644
--- a/karavan-designer/package.json
+++ b/karavan-designer/package.json
@@ -27,9 +27,9 @@
},
"dependencies": {
"@monaco-editor/react": "4.5.0",
- "@patternfly/patternfly": "4.224.2",
- "@patternfly/react-core": "4.276.8",
- "@patternfly/react-table": "4.113.0",
+ "@patternfly/patternfly": "^5.0.2",
+ "@patternfly/react-core": "^5.0.0",
+ "@patternfly/react-table": "^5.0.0",
"@types/js-yaml": "4.0.5",
"@types/node": "18.16.3",
"@types/uuid": "9.0.1",
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 99ab0551..b9cae192 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -129,7 +129,7 @@ class App extends React.Component<Props, State> {
getSpinner() {
return (
<Bullseye className="loading-page">
- <Spinner className="progress-stepper" isSVG diameter="80px" aria-label="Loading..."/>
+ <Spinner className="progress-stepper" diameter="80px" aria-label="Loading..."/>
</Bullseye>
)
}
@@ -189,6 +189,7 @@ class App extends React.Component<Props, State> {
<Page className="karavan">
<AlertGroup isToast isLiveRegion>
{this.state.alerts.map((e: ToastMessage) => (
+ // @ts-ignore
<Alert key={e.id} className="main-alert" variant={e.variant} title={e.title}
timeout={e.variant === "success" ? 2000 : 10000}
actionClose={<AlertActionCloseButton onClose={() => this.deleteErrorMessage(e.id)}/>}>
diff --git a/karavan-designer/src/DesignerPage.tsx b/karavan-designer/src/DesignerPage.tsx
index 139d96cb..9bcc0a2e 100644
--- a/karavan-designer/src/DesignerPage.tsx
+++ b/karavan-designer/src/DesignerPage.tsx
@@ -107,7 +107,7 @@ export class DesignerPage extends React.Component<Props, State> {
return (
<PageSection className="kamelet-section designer-page" padding={{default: 'noPadding'}}>
<PageSection className="tools-section" padding={{default: 'noPadding'}}
- style={{backgroundColor:"transparent", paddingLeft: "var(--pf-c-page__main-section--PaddingLeft)"}}>
+ style={{backgroundColor:"transparent", paddingLeft: "var(--pf-v5-c-page__main-section--PaddingLeft)"}}>
<Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
<FlexItem>
<TextContent className="header">
@@ -120,9 +120,9 @@ export class DesignerPage extends React.Component<Props, State> {
<ToolbarItem>
<ToggleGroup>
<ToggleGroupItem text="Design" buttonId="design" isSelected={mode === "design"}
- onChange={s => this.setState({mode: "design"})} />
+ onChange={(_event, s) => this.setState({mode: "design"})} />
<ToggleGroupItem text="Code" buttonId="code" isSelected={mode === "code"}
- onChange={s => this.setState({mode: "code"})} />
+ onChange={(_event, s) => this.setState({mode: "code"})} />
</ToggleGroup>
</ToolbarItem>
<ToolbarItem>
diff --git a/karavan-designer/src/designer/beans/BeanProperties.tsx b/karavan-designer/src/designer/beans/BeanProperties.tsx
index 45f773fc..4470c01a 100644
--- a/karavan-designer/src/designer/beans/BeanProperties.tsx
+++ b/karavan-designer/src/designer/beans/BeanProperties.tsx
@@ -18,7 +18,7 @@ import React from 'react';
import {
Form,
FormGroup,
- TextInput, Button, Title, Tooltip, Popover, InputGroup,
+ TextInput, Button, Title, Tooltip, Popover, InputGroup, InputGroupItem,
} from '@patternfly/react-core';
import '../karavan.css';
import "@patternfly/patternfly/patternfly.css";
@@ -167,8 +167,8 @@ 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">
- <HelpIcon noVerticalAlign/>
+ }} className="pf-v5-c-form__group-label-help">
+ <HelpIcon />
</button>
</Popover>
)
@@ -188,10 +188,11 @@ export class BeanProperties extends React.Component<Props, State> {
</div>
<FormGroup label="Name" fieldId="name" isRequired labelIcon={this.getLabelIcon("Name", "Bean name used as a reference ex: myBean")}>
<TextInput className="text-field" isRequired type="text" id="name" name="name" value={bean?.name}
- onChange={e => this.beanChanged("name", e)}/>
+ onChange={(_, value)=> this.beanChanged("name", value)}/>
</FormGroup>
<FormGroup label="Type" fieldId="type" isRequired labelIcon={this.getLabelIcon("Type", "Bean class Canonical Name ex: org.demo.MyBean")}>
- <TextInput className="text-field" isRequired type="text" id="type" name="type" value={bean?.type} onChange={e => this.beanChanged("type", e)}/>
+ <TextInput className="text-field" isRequired type="text" id="type" name="type" value={bean?.type}
+ onChange={(_, value) => this.beanChanged("type", value)}/>
</FormGroup>
<FormGroup label="Properties" fieldId="properties" className="bean-properties">
{Array.from(this.state.properties.entries()).map((v, index, array) => {
@@ -205,7 +206,9 @@ export class BeanProperties extends React.Component<Props, State> {
return (
<div key={"key-" + i} className="bean-property">
<TextInput placeholder="Bean Field Name" className="text-field" isRequired type="text" id="key" name="key" value={key}
- onChange={e => this.propertyChanged(i, e, value, showPassword)}/>
+ onChange={(_, beanFieldName) => {
+ this.propertyChanged(i, beanFieldName, value, showPassword)
+ }}/>
<InputGroup>
{inInfrastructure &&
<Tooltip position="bottom-end" content="Select value from Infrastructure">
@@ -213,15 +216,19 @@ export class BeanProperties extends React.Component<Props, State> {
{icon}
</Button>
</Tooltip>}
- <TextInput
- placeholder="Bean Field Value"
- type={isSecret && !showPassword ? "password" : "text"}
- className="text-field"
- isRequired
- id="value"
- name="value"
- value={value}
- onChange={e => this.propertyChanged(i, key, e, showPassword)}/>
+ <InputGroupItem isFill>
+ <TextInput
+ placeholder="Bean Field Value"
+ type={isSecret && !showPassword ? "password" : "text"}
+ className="text-field"
+ isRequired
+ id="value"
+ name="value"
+ value={value}
+ onChange={(_, value) => {
+ this.propertyChanged(i, key, value, showPassword)
+ }}/>
+ </InputGroupItem>
{isSecret && <Tooltip position="bottom-end" content={showPassword ? "Hide" : "Show"}>
<Button variant="control" onClick={e => this.propertyChanged(i, key, value, !showPassword)}>
{showPassword ? <ShowIcon/> : <HideIcon/>}
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index 5bfd3fef..59a44eda 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -35,7 +35,7 @@
}
.karavan .header-button {
- margin-left: var(--pf-c-page__header-tools--MarginRight);
+ margin-left: var(--pf-v5-c-page__header-tools--MarginRight);
}
.karavan .page-header {
@@ -43,7 +43,7 @@
justify-content: space-between;
}
-.karavan .page-header .top-toolbar .pf-c-page__header-tools {
+.karavan .page-header .top-toolbar .pf-v5-c-page__header-tools {
margin-right: 0;
}
@@ -51,7 +51,7 @@
width: 100%;
}
-.karavan .page-header .pf-c-page__header-brand {
+.karavan .page-header .pf-v5-c-page__header-brand {
padding-right: 16px;
}
@@ -63,29 +63,29 @@
width: 100%;
}
-.modal-footer .deploy-buttons .pf-c-form__actions {
+.modal-footer .deploy-buttons .pf-v5-c-form__actions {
justify-content: flex-end;
margin-top: 16px;
}
-.modal-footer .deploy-buttons .pf-c-button {
+.modal-footer .deploy-buttons .pf-v5-c-button {
margin-left: 16px;
}
-.action-buttons .pf-c-form__actions {
+.action-buttons .pf-v5-c-form__actions {
justify-content: flex-end;
margin-top: 16px;
}
-.action-buttons .pf-c-button {
+.action-buttons .pf-v5-c-button {
margin-left: 16px;
}
-.pf-c-modal-box__footer .hidden {
+.pf-v5-c-modal-box__footer .hidden {
display: none;
}
-.upload-buttons .pf-c-form__actions {
+.upload-buttons .pf-v5-c-form__actions {
margin-top: 20px;
justify-content: flex-end;
}
@@ -96,7 +96,7 @@
height: 160px;
}
-.integration-page .integration-card .pf-c-card__header {
+.integration-page .integration-card .pf-v5-c-card__header {
padding-right: 6px;
}
@@ -125,16 +125,26 @@
height: 160px;
}
-.kamelets-page .kamelet-card .pf-c-card__header .custom {
+
+.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-c-card__title {
+.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;
}
-.kamelets-page .kamelet-card .pf-c-card__body {
+.kamelets-page .kamelet-card .pf-v5-c-card__body {
overflow: hidden;
position: relative;
line-height: 1.6em;
@@ -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;
@@ -184,13 +194,13 @@
}
/*kamelet modal*/
-.kamelet-modal-card .pf-c-card__header {
+.kamelet-modal-card .pf-v5-c-card__header {
padding-right: 6px;
display: flex;
justify-content: space-between;
}
-.kamelet-modal-card .pf-c-card__title {
+.kamelet-modal-card .pf-v5-c-card__title {
font-weight: 600;
}
@@ -243,7 +253,7 @@
}
.karavan .main-tabs .top-menu-item .count {
- background: var(--pf-global--active-color--100);
+ background: var(--pf-v5-global--active-color--100);
color: white;
height: fit-content;
margin-top: auto;
@@ -251,12 +261,12 @@
min-width: 0px;
}
-.karavan .main-tabs .pf-c-tabs__link .pf-c-tabs__item-icon {
+.karavan .main-tabs .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon {
height: 24px;
margin-right: 0;
}
-.karavan .main-tabs .pf-c-tabs__item-text {
+.karavan .main-tabs .pf-v5-c-tabs__item-text {
font-size: 14px;
font-weight: bold;
margin-top: auto;
@@ -279,12 +289,12 @@
margin-bottom: 70px;
}
-.karavan .pf-c-drawer__splitter {
+.karavan .pf-v5-c-drawer__splitter {
width: 2px;
background-color: #fcfcfc;
}
-.karavan .pf-c-drawer__splitter-handle {
+.karavan .pf-v5-c-drawer__splitter-handle {
display: none;
}
@@ -311,17 +321,17 @@
display: contents;
}
-.karavan .properties .pf-c-form {
+.karavan .properties .pf-v5-c-form {
row-gap: 10px;
}
-.karavan .properties .pf-c-form__group-label {
+.karavan .properties .pf-v5-c-form__group-label {
padding-bottom: 3px;
display: flex;
justify-content: space-between;
}
-.karavan .properties .pf-c-form__label {
+.karavan .properties .pf-v5-c-form__label {
font-size: 14px;
}
@@ -330,41 +340,41 @@
height: auto;
}
-.karavan .properties .pf-c-select {
- --pf-c-select__toggle--FontSize: 14px;
- --pf-c-select__menu-item--FontSize: 14px;
+.karavan .properties .pf-v5-c-select {
+ --pf-v5-c-select__toggle--FontSize: 14px;
+ --pf-v5-c-select__menu-item--FontSize: 14px;
}
-.karavan .properties .input-group .pf-c-text-input-group__text {
+.karavan .properties .input-group .pf-v5-c-text-input-group__text {
width: 100%;
}
-.karavan .properties .input-group .pf-c-chip-group,
-.karavan .properties .input-group .pf-c-text-input-group__main,
-.karavan .properties .input-group .pf-c-chip-group .pf-c-chip-group__list,
-.karavan .properties .input-group .pf-c-chip-group .pf-c-chip-group__list .pf-c-chip-group__list-item,
-.karavan .properties .input-group .pf-c-chip-group .pf-c-chip-group__main {
+.karavan .properties .input-group .pf-v5-c-chip-group,
+.karavan .properties .input-group .pf-v5-c-text-input-group__main,
+.karavan .properties .input-group .pf-v5-c-chip-group .pf-v5-c-chip-group__list,
+.karavan .properties .input-group .pf-v5-c-chip-group .pf-v5-c-chip-group__list .pf-v5-c-chip-group__list-item,
+.karavan .properties .input-group .pf-v5-c-chip-group .pf-v5-c-chip-group__main {
display: block;
}
-.karavan .properties .input-group .pf-c-chip-group {
+.karavan .properties .input-group .pf-v5-c-chip-group {
margin-left: 0;
}
-.karavan .properties .input-group .pf-c-chip-group .pf-c-chip .pf-c-chip__text {
+.karavan .properties .input-group .pf-v5-c-chip-group .pf-v5-c-chip .pf-v5-c-chip__text {
max-width: inherit;
}
-.karavan .properties .input-group .pf-c-chip-group .pf-c-chip {
+.karavan .properties .input-group .pf-v5-c-chip-group .pf-v5-c-chip {
width: 100%;
}
-.karavan .properties .input-group .pf-c-text-input-group__utilities {
+.karavan .properties .input-group .pf-v5-c-text-input-group__utilities {
align-items: end;
margin-top: auto;
}
-.karavan .properties .chip .pf-c-button {
+.karavan .properties .chip .pf-v5-c-button {
position: absolute;
right: 0;
}
@@ -378,20 +388,20 @@
font-size: 13px;
}
-.karavan .properties .pf-c-select__menu-search {
+.karavan .properties .pf-v5-c-select__menu-search {
padding: 0px 6px 6px 6px;
}
-.karavan .properties .pf-c-select__toggle-typeahead {
+.karavan .properties .pf-v5-c-select__toggle-typeahead {
font-size: 14px;
height: auto;
}
-.karavan .properties .pf-c-select__menu-item {
+.karavan .properties .pf-v5-c-select__menu-item {
/*width: 280px;*/
}
-.karavan .properties .pf-c-select__menu-item-description {
+.karavan .properties .pf-v5-c-select__menu-item-description {
overflow-wrap: anywhere;
}
@@ -406,12 +416,12 @@
.karavan .properties .number .clear-button {
color: #b1b1b7;
- --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius);
- --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor);
- --pf-c-button--after--BorderWidth: var(--pf-c-button--m-control--after--BorderWidth);
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-control--after--BorderTopColor) var(--pf-c-button--m-control--after--BorderRightColor) var(--pf-c-button--m-control--after--BorderBottomColor) var(--pf-c-button--m-control--after--BorderLeftColor);
- color: var(--pf-c-button--m-control--Color);
- background-color: var(--pf-c-button--m-control--BackgroundColor);
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-control--BorderRadius);
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-control--disabled--BackgroundColor);
+ --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--m-control--after--BorderWidth);
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-control--after--BorderTopColor) var(--pf-v5-c-button--m-control--after--BorderRightColor) var(--pf-v5-c-button--m-control--after--BorderBottomColor) var(--pf-v5-c-button--m-control--after--BorderLeftColor);
+ color: var(--pf-v5-c-button--m-control--Color);
+ background-color: var(--pf-v5-c-button--m-control--BackgroundColor);
padding-left: 5px;
padding-right: 5px;
}
@@ -421,11 +431,11 @@
}
.karavan .properties .component-selector {
- border-width: var(--pf-global--BorderWidth--sm);
- border-top-color: var(--pf-global--BorderColor--300);
- border-right-color: var(--pf-global--BorderColor--300);
- border-bottom-color: var(--pf-global--BorderColor--200);
- border-left-color: var(--pf-global--BorderColor--300);
+ border-width: var(--pf-v5-global--BorderWidth--sm);
+ border-top-color: var(--pf-v5-global--BorderColor--300);
+ border-right-color: var(--pf-v5-global--BorderColor--300);
+ border-bottom-color: var(--pf-v5-global--BorderColor--200);
+ border-left-color: var(--pf-v5-global--BorderColor--300);
border-style: solid;
}
@@ -471,24 +481,24 @@
width: 100%;
}
-.karavan .properties .expression .pf-c-form__group-label,
-.karavan .properties .object .pf-c-form__group-label,
-.karavan .properties .dataformat .pf-c-form__group-label,
-.karavan .properties .parameters .pf-c-form__group-label {
+.karavan .properties .expression .pf-v5-c-form__group-label,
+.karavan .properties .object .pf-v5-c-form__group-label,
+.karavan .properties .dataformat .pf-v5-c-form__group-label,
+.karavan .properties .parameters .pf-v5-c-form__group-label {
font-weight: 100;
}
-.karavan .properties .expression .pf-c-form__group,
-.karavan .properties .object .pf-c-form__group,
-.karavan .properties .dataformat .pf-c-form__group,
-.karavan .properties .parameters .pf-c-form__group {
+.karavan .properties .expression .pf-v5-c-form__group,
+.karavan .properties .object .pf-v5-c-form__group,
+.karavan .properties .dataformat .pf-v5-c-form__group,
+.karavan .properties .parameters .pf-v5-c-form__group {
margin-bottom: 10px;
}
-.karavan .properties .expression .pf-c-select__menu-wrapper,
-.karavan .properties .object .pf-c-select__menu-wrapper,
-.karavan .properties .dataformat .pf-c-select__menu-wrapper,
-.karavan .properties .parameters .pf-c-select__menu-wrapper {
+.karavan .properties .expression .pf-v5-c-select__menu-wrapper,
+.karavan .properties .object .pf-v5-c-select__menu-wrapper,
+.karavan .properties .dataformat .pf-v5-c-select__menu-wrapper,
+.karavan .properties .parameters .pf-v5-c-select__menu-wrapper {
width: 350px;
}
@@ -507,23 +517,23 @@
}
.karavan .properties .add-button {
- color: var(--pf-global--active-color--100);
+ color: var(--pf-v5-global--active-color--100);
}
.karavan .properties .delete-button {
color: #909090;
}
-.karavan .properties .pf-c-expandable-section__toggle {
+.karavan .properties .pf-v5-c-expandable-section__toggle {
margin: 0;
padding: 0;
}
-.karavan .properties .pf-c-expandable-section__content {
+.karavan .properties .pf-v5-c-expandable-section__content {
margin: 0;
}
-.karavan .properties .pf-c-expandable-section__content p {
+.karavan .properties .pf-v5-c-expandable-section__content p {
min-height: 6px;
}
@@ -566,19 +576,19 @@
}
.karavan .dsl-page .graph .connections .arrow {
- stroke: var(--pf-global--Color--200);
- fill: var(--pf-global--Color--200);
+ stroke: var(--pf-v5-global--Color--200);
+ fill: var(--pf-v5-global--Color--200);
}
.karavan .dsl-page .graph .connections .path {
- stroke: var(--pf-global--Color--200);
+ stroke: var(--pf-v5-global--Color--200);
stroke-width: 1;
fill: transparent;
}
.karavan .dsl-page .graph .connections .circle-outgoing,
.karavan .dsl-page .graph .connections .circle-incoming {
- stroke: var(--pf-global--Color--200);
+ stroke: var(--pf-v5-global--Color--200);
stroke-width: 1;
fill: white;
}
@@ -587,14 +597,14 @@
stroke-dasharray: 5;
-webkit-animation: dashdraw .5s linear infinite;
animation: dashdraw .5s linear infinite;
- stroke: var(--pf-global--Color--200);
+ stroke: var(--pf-v5-global--Color--200);
stroke-width: 1;
fill: transparent;
}
.karavan .dsl-page .graph .connections .path-direct {
stroke-dasharray: 0;
- stroke: var(--pf-global--Color--200);
+ stroke: var(--pf-v5-global--Color--200);
stroke-width: 0.7;
stroke-opacity: 0.7;
fill: transparent;
@@ -602,7 +612,7 @@
.karavan .dsl-page .graph .connections .path-direct-selected {
stroke-dasharray: 0;
- stroke: var(--pf-global--active-color--100);
+ stroke: var(--pf-v5-global--active-color--100);
stroke-width: 1;
stroke-opacity: 1;
fill: transparent;
@@ -610,7 +620,7 @@
.karavan .dsl-page .graph .connections .path-seda {
stroke-dasharray: 2;
- stroke: var(--pf-global--Color--200);
+ stroke: var(--pf-v5-global--Color--200);
-webkit-animation: dashdraw .5s linear infinite;
animation: dashdraw .5s linear infinite;
stroke-width: 1;
@@ -629,7 +639,7 @@
display: flex;
flex-direction: column;
width: fit-content;
- border-color: var(--pf-global--Color--200);
+ border-color: var(--pf-v5-global--Color--200);
border-radius: 16px;
border-width: 1px;
min-width: 120px;
@@ -639,8 +649,8 @@
}
.karavan {
- --step-border-color: var(--pf-global--Color--200);
- --step-border-color-selected: var(--pf-global--active-color--100);
+ --step-border-color: var(--pf-v5-global--Color--200);
+ --step-border-color-selected: var(--pf-v5-global--active-color--100);
}
.karavan .dsl-page .flows .children {
@@ -712,12 +722,12 @@
}
.karavan .step-element-selected {
- background-color: rgba(var(--pf-global--palette--blue-50), 1);
+ background-color: rgba(var(--pf-v5-global--palette--blue-50), 1);
}
.karavan .step-element .selected .header-icon {
- border-color: var(--pf-global--primary-color--100);
- background-color: var(--pf-global--palette--blue-50);
+ border-color: var(--pf-v5-global--primary-color--100);
+ background-color: var(--pf-v5-global--palette--blue-50);
border-width: 2px;
}
@@ -745,12 +755,12 @@
}
.karavan .step-element .header .header-text-required {
- color: var(--pf-global--danger-color--100);
+ color: var(--pf-v5-global--danger-color--100);
font-weight: bold;
}
.karavan .step-element .header-icon {
- border-color: var(--pf-global--Color--200);
+ border-color: var(--pf-v5-global--Color--200);
border-style: solid;
border-radius: 30px;
border-width: 1px;
@@ -784,7 +794,7 @@
border: 0;
padding: 0;
background: transparent;
- color: var(--pf-global--primary-color--100);
+ color: var(--pf-v5-global--primary-color--100);
visibility: hidden;
z-index: 100;
position: absolute;
@@ -801,7 +811,7 @@
margin: 0 0 0 -25px;
background: transparent;
background: transparent;
- color: var(--pf-global--primary-color--100);
+ color: var(--pf-v5-global--primary-color--100);
visibility: hidden;
z-index: 100;
}
@@ -828,7 +838,7 @@
padding: 0;
margin: 0;
background: transparent;
- color: var(--pf-global--primary-color--100);
+ color: var(--pf-v5-global--primary-color--100);
visibility: hidden;
z-index: 100;
}
@@ -846,7 +856,7 @@
padding: 0;
margin: 3px auto 0 auto;
background: transparent;
- color: var(--pf-global--primary-color--100);
+ color: var(--pf-v5-global--primary-color--100);
visibility: hidden;
height: 100%;
display: flex;
@@ -872,13 +882,24 @@
.dsl-modal {
height: 80%;
- color: var(--pf-global--Color--100);
+ color: var(--pf-v5-global--Color--100);
}
.dsl-modal .dsl-card {
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;
@@ -899,7 +920,7 @@
}
-.dsl-modal .search .pf-c-form__group-label {
+.dsl-modal .search .pf-v5-c-form__group-label {
padding: 0;
margin: auto;
}
@@ -909,23 +930,23 @@
height: auto;
}
-.dsl-modal .pf-c-form.pf-m-horizontal .pf-c-form__group {
+.dsl-modal .pf-v5-c-form.pf-v5-m-horizontal .pf-v5-c-form__group {
display: contents;
}
-.dsl-modal .pf-c-card__body {
+.dsl-modal .pf-v5-c-card__body {
padding-bottom: 0;
height: 54px;
}
-.dsl-modal .pf-c-card__body p {
+.dsl-modal .dsl-card p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
-.dsl-modal .pf-c-card__footer {
+.dsl-modal .pf-v5-c-card__footer {
padding-bottom: 1em;
}
@@ -936,14 +957,14 @@
flex-wrap: wrap;
}
-.dsl-modal .pf-c-card.pf-m-compact .header-labels {
+.dsl-modal .dsl-card .header-labels {
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
-.dsl-modal .pf-c-card.pf-m-compact .footer-labels {
+.dsl-modal .dsl-card .footer-labels {
padding: 5px;
display: flex;
flex-direction: row;
@@ -970,11 +991,11 @@
width: 270px !important;
}
-.move-modal .pf-c-modal-box__body {
+.move-modal .pf-v5-c-modal-box__body {
margin-right: 0 !important;
}
-.move-modal .pf-m-plain {
+.move-modal .pf-v5-m-plain {
display: none;
}
@@ -985,7 +1006,7 @@
padding-bottom: 100px;
}
-.pf-c-popover__footer {
+.pf-v5-c-popover__footer {
overflow-wrap: anywhere;
}
@@ -1041,18 +1062,18 @@
.karavan .rest-page .rest-card-unselected,
.karavan .rest-page .rest-config-card-unselected,
.karavan .rest-page .method-card-unselected {
- border-color: var(--pf-global--Color--200);
+ border-color: var(--pf-v5-global--Color--200);
background-color: transparent;
}
.karavan .rest-page .rest-card-selected,
.karavan .rest-page .rest-config-card-selected,
.karavan .rest-page .method-card-selected {
- border-color: var(--pf-global--primary-color--100);
+ border-color: var(--pf-v5-global--primary-color--100);
}
.karavan .rest-page .rest-card-selected .title {
- color: var(--pf-global--primary-color--100);
+ color: var(--pf-v5-global--primary-color--100);
}
.karavan .rest-page .rest-config-card,
@@ -1095,11 +1116,11 @@
}
.karavan .rest-page .method-card-unselected .method {
- background: var(--pf-global--Color--400);
+ background: var(--pf-v5-global--Color--400);
}
.karavan .rest-page .method-card-selected .method {
- background: var(--pf-global--primary-color--100);
+ background: var(--pf-v5-global--primary-color--100);
}
.karavan .rest-page .rest-card .title,
@@ -1147,7 +1168,7 @@
font-size: 15px;
border: 0;
background: transparent;
- color: var(--pf-global--primary-color--100);
+ color: var(--pf-v5-global--primary-color--100);
z-index: 100;
}
@@ -1160,7 +1181,7 @@
}
/*Beans*/
-.karavan .rest-page .properties .bean-properties .pf-c-form__group-control {
+.karavan .rest-page .properties .bean-properties .pf-v5-c-form__group-control {
display: flex;
flex-direction: column;
gap: 6px;
@@ -1201,9 +1222,9 @@
background: #fafafa;
}
-.karavan .templates-page-columns .pf-c-empty-state,
-.karavan .exception-page-columns .pf-c-empty-state,
-.karavan .error-page-columns .pf-c-empty-state {
+.karavan .templates-page-columns .pf-v5-c-empty-state,
+.karavan .exception-page-columns .pf-v5-c-empty-state,
+.karavan .error-page-columns .pf-v5-c-empty-state {
margin: auto;
height: 100%;
}
@@ -1239,12 +1260,12 @@
padding-right: 10px;
}
-.karavan .project-builder .pf-c-toolbar__content {
+.karavan .project-builder .pf-v5-c-toolbar__content {
padding: 0;
}
-.karavan .project-builder .pf-c-tabs__link,
-.karavan .project-builder .pf-c-card__title,
+.karavan .project-builder .pf-v5-c-tabs__link,
+.karavan .project-builder .pf-v5-c-card__title,
.karavan .project-builder .profile-caption {
font-size: 14px;
}
@@ -1257,11 +1278,11 @@
opacity: 0.4;
}
-.karavan .project-builder .pf-c-form__label {
+.karavan .project-builder .pf-v5-c-form__label {
font-size: 14px;
}
-.karavan .project-builder .pf-c-check__label {
+.karavan .project-builder .pf-v5-c-check__label {
font-size: 14px;
}
@@ -1270,23 +1291,23 @@
height: auto;
}
-.karavan .project-builder .pf-c-input-group button {
+.karavan .project-builder .pf-v5-c-input-group button {
font-size: 14px;
height: auto;
}
-.karavan .project-builder .pf-c-form {
- --pf-c-form--GridGap: 1em;
+.karavan .project-builder .pf-v5-c-form {
+ --pf-v5-c-form--GridGap: 1em;
}
-.karavan .project-builder .pf-c-card__body {
- --pf-c-card--child--PaddingRight: 0.5em;
- --pf-c-card--child--PaddingBottom: 1em;
- --pf-c-card--child--PaddingLeft: 1em;
+.karavan .project-builder .pf-v5-c-card__body {
+ --pf-v5-c-card--child--PaddingRight: 0.5em;
+ --pf-v5-c-card--child--PaddingBottom: 1em;
+ --pf-v5-c-card--child--PaddingLeft: 1em;
}
-.karavan .project-builder .pf-c-card__header {
- --pf-c-card--first-child--PaddingTop: 0.5em;
+.karavan .project-builder .pf-v5-c-card__header {
+ --pf-v5-c-card--first-child--PaddingTop: 0.5em;
}
.karavan .project-builder .center {
@@ -1343,7 +1364,7 @@
margin-top: 6px;
}
-.root .tooltip-required-field .pf-c-tooltip__content {
+.root .tooltip-required-field .pf-v5-c-tooltip__content {
text-align: start;
}
@@ -1357,7 +1378,7 @@
overflow: auto;
flex-shrink: unset;
flex-grow: 1;
- background-color: var(--pf-global--BackgroundColor--light-300);
+ background-color: var(--pf-v5-global--BackgroundColor--light-300);
}
.karavan .designer-page {
diff --git a/karavan-designer/src/designer/rest/RestMethodSelector.tsx b/karavan-designer/src/designer/rest/RestMethodSelector.tsx
index 316145ce..d3c4ec66 100644
--- a/karavan-designer/src/designer/rest/RestMethodSelector.tsx
+++ b/karavan-designer/src/designer/rest/RestMethodSelector.tsx
@@ -50,7 +50,7 @@ export class RestMethodSelector extends React.Component<Props, State> {
getCard(dsl: DslMetaModel, index: number) {
return (
- <Card key={dsl.dsl + index} isHoverable isCompact className="dsl-card"
+ <Card key={dsl.dsl + index} isCompact className="dsl-card"
onClick={event => this.selectMethod(event, dsl)}>
<CardHeader>
{CamelUi.getIconForDsl(dsl)}
diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx
index f9cd9498..2ea1aaa2 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -379,7 +379,7 @@ export class DslElement extends React.Component<Props, State> {
content={<div>{"Add step to " + CamelUi.getTitle(step)}</div>}>
<button type="button" aria-label="Add" onClick={e => this.openSelector(e)}
className={this.isAddStepButtonLeft() ? "add-button add-button-left" : "add-button add-button-bottom"}>
- <AddIcon noVerticalAlign/>
+ <AddIcon />
</button>
</Tooltip>
)
@@ -393,7 +393,7 @@ export class DslElement extends React.Component<Props, State> {
aria-label="Add"
onClick={e => this.openSelector(e, false)}
className={"add-element-button"}>
- <AddIcon noVerticalAlign/>
+ <AddIcon />
</button>
</Tooltip>
)
@@ -402,7 +402,7 @@ export class DslElement extends React.Component<Props, State> {
getInsertElementButton() {
return (
<Tooltip position={"left"} content={<div>{"Insert element before"}</div>}>
- <button type="button" aria-label="Insert" onClick={e => this.openSelector(e, true, true)} className={"insert-element-button"}><InsertIcon noVerticalAlign/>
+ <button type="button" aria-label="Insert" onClick={e => this.openSelector(e, true, true)} className={"insert-element-button"}><InsertIcon />
</button>
</Tooltip>
)
@@ -411,7 +411,7 @@ export class DslElement extends React.Component<Props, State> {
getDeleteButton() {
return (
<Tooltip position={"right"} content={<div>{"Delete element"}</div>}>
- <button type="button" aria-label="Delete" onClick={e => this.delete(e)} className="delete-button"><DeleteIcon noVerticalAlign/></button>
+ <button type="button" aria-label="Delete" onClick={e => this.delete(e)} className="delete-button"><DeleteIcon /></button>
</Tooltip>
)
}
diff --git a/karavan-designer/src/designer/route/DslProperties.tsx b/karavan-designer/src/designer/route/DslProperties.tsx
index f10a0eec..87f93c79 100644
--- a/karavan-designer/src/designer/route/DslProperties.tsx
+++ b/karavan-designer/src/designer/route/DslProperties.tsx
@@ -128,7 +128,7 @@ export class DslProperties extends React.Component<Props, State> {
</div>
<Text component={TextVariants.p}>{descriptionLines.at(0)}</Text>
{descriptionLines.length > 1 && <ExpandableSection toggleText={isDescriptionExpanded ? 'Show less' : 'Show more'}
- onToggle={isExpanded => this.setState({isDescriptionExpanded: !isDescriptionExpanded})}
+ onToggle={(_event, isExpanded) => this.setState({isDescriptionExpanded: !isDescriptionExpanded})}
isExpanded={isDescriptionExpanded}>
{descriptionLines.filter((value, index) => index > 0)
.map((desc, index, array) => <Text key={index} component={TextVariants.p}>{desc}</Text>)}
@@ -204,7 +204,7 @@ export class DslProperties extends React.Component<Props, State> {
&& propertiesAdvanced.length > 0 &&
<ExpandableSection
toggleText={'Advanced properties'}
- onToggle={isExpanded => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
+ onToggle={(_event, isExpanded) => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
isExpanded={this.state.isShowAdvanced}>
<div className="parameters">
{this.getPropertyFields(propertiesAdvanced)}
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx b/karavan-designer/src/designer/route/DslSelector.tsx
index eb66e7ec..47eb3b39 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -17,7 +17,7 @@
import React from 'react';
import {
Badge,
- Card, CardBody, CardFooter, CardHeader, Flex, FlexItem, Form, FormGroup, Gallery, Label, Modal, PageSection,
+ Card, CardBody, CardFooter, CardHeader, Flex, FlexItem, Form, FormGroup, Gallery, Modal, PageSection,
Tab, Tabs, TabTitleText,
Text, TextInput, ToggleGroup, ToggleGroupItem,
} from '@patternfly/react-core';
@@ -71,9 +71,9 @@ export class DslSelector extends React.Component<Props, State> {
return (
<Form isHorizontal className="search" autoComplete="off">
<FormGroup fieldId="search">
- <TextInput className="text-field" type="text" id="search" name="search" iconVariant='search'
- value={this.state.filter}
- onChange={e => this.setState({filter: e})}/>
+ <TextInput className="text-field" type="text" id="search" name="search"
+ value={this.state.filter}
+ onChange={(_, value) => this.setState({filter: value})}/>
</FormGroup>
</Form>
)
@@ -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/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index db2662e0..f7607b90 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -146,7 +146,7 @@ export class RouteDesigner extends React.Component<Props, RouteDesignerState> {
getPropertiesPanel() {
return (
- <DrawerPanelContent onResize={width => this.setState({key: Math.random().toString()})}
+ <DrawerPanelContent onResize={(_event, width) => this.setState({key: Math.random().toString()})}
style={{transform: "initial"}} isResizable hasNoBorder defaultSize={'400px'}
maxSize={'800px'} minSize={'300px'}>
<DslProperties ref={this.state.ref}
diff --git a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
index 2a7996df..69175d98 100644
--- a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
@@ -16,15 +16,22 @@
*/
import React from 'react';
import {
- FormGroup,
- TextInput,
- Popover,
- Switch,
- Select,
- SelectVariant,
- SelectDirection,
- SelectOption, InputGroup, TextArea, Tooltip, Button, capitalize,
+ FormGroup,
+ TextInput,
+ Popover,
+ Switch,
+ InputGroup,
+ TextArea,
+ Tooltip,
+ Button,
+ capitalize, InputGroupItem
} from '@patternfly/react-core';
+import {
+ Select,
+ SelectVariant,
+ SelectDirection,
+ SelectOption
+} from '@patternfly/react-core/deprecated';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
@@ -99,7 +106,7 @@ export class ComponentParameterField extends React.Component<Props, State> {
id={this.state.id} name={this.state.id}
variant={SelectVariant.single}
aria-label={property.name}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(property.name, isExpanded)
}}
onSelect={(e, value, isPlaceholder) => this.parametersChanged(property.name, (!isPlaceholder ? value : undefined))}
@@ -147,12 +154,12 @@ export class ComponentParameterField extends React.Component<Props, State> {
<SelectOption key={value} value={value ? value.trim() : value}/>));
}
return <InputGroup id={this.state.id} name={this.state.id}>
- <Select
+ <InputGroupItem><Select
id={this.state.id} name={this.state.id}
placeholderText="Select or type an URI"
variant={SelectVariant.typeahead}
aria-label={property.name}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(property.name, isExpanded)
}}
onSelect={(e, value, isPlaceholder) => {
@@ -167,8 +174,8 @@ export class ComponentParameterField extends React.Component<Props, State> {
direction={SelectDirection.down}
>
{selectOptions}
- </Select>
- <Tooltip position="bottom-end" content={"Create route"}>
+ </Select></InputGroupItem>
+ <InputGroupItem><Tooltip position="bottom-end" content={"Create route"}>
<Button isDisabled={value === undefined} variant="control" onClick={e => {
if (value) {
const newRoute = !internalUris.includes(value.toString()) ? new RouteToCreate(componentName, value.toString()) : undefined;
@@ -177,7 +184,7 @@ export class ComponentParameterField extends React.Component<Props, State> {
}}>
{<PlusIcon/>}
</Button>
- </Tooltip>
+ </Tooltip></InputGroupItem>
</InputGroup>
}
@@ -233,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})}>
@@ -265,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')
+ }}/>
)
}
@@ -280,7 +289,7 @@ export class ComponentParameterField extends React.Component<Props, State> {
id={this.state.id} name={this.state.id}
variant={SelectVariant.single}
aria-label={property.name}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(property.name, isExpanded)
}}
onSelect={(e, value, isPlaceholder) => this.parametersChanged(property.name, (!isPlaceholder ? value : undefined), property.kind === 'path')}
@@ -326,8 +335,8 @@ 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">
- <HelpIcon noVerticalAlign/>
+ className="pf-v5-c-form__group-label-help">
+ <HelpIcon />
</button>
</Popover>
}>
diff --git a/karavan-designer/src/designer/route/property/DataFormatField.tsx b/karavan-designer/src/designer/route/property/DataFormatField.tsx
index aad00220..ef447b6f 100644
--- a/karavan-designer/src/designer/route/property/DataFormatField.tsx
+++ b/karavan-designer/src/designer/route/property/DataFormatField.tsx
@@ -16,11 +16,14 @@
*/
import React from 'react';
import {
- Select,
- SelectVariant,
- SelectDirection,
- SelectOption, ExpandableSection,
+ ExpandableSection
} from '@patternfly/react-core';
+import {
+ Select,
+ SelectVariant,
+ SelectDirection,
+ SelectOption
+} from '@patternfly/react-core/deprecated';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import {CamelMetadataApi, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
@@ -135,9 +138,9 @@ export class DataFormatField extends React.Component<Props, State> {
return (
<div>
<div>
- <label className="pf-c-form__label" htmlFor="expression">
- <span className="pf-c-form__label-text">{"Data Format"}</span>
- <span className="pf-c-form__label-required" aria-hidden="true"> *</span>
+ <label className="pf-v5-c-form__label" htmlFor="expression">
+ <span className="pf-v5-c-form__label-text">{"Data Format"}</span>
+ <span className="pf-v5-c-form__label-required" aria-hidden="true"> *</span>
</label>
<Select
variant={SelectVariant.typeahead}
@@ -160,7 +163,7 @@ export class DataFormatField extends React.Component<Props, State> {
{propertiesAdvanced.length > 0 &&
<ExpandableSection
toggleText={'Advanced properties'}
- onToggle={isExpanded => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
+ onToggle={(_event, isExpanded) => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
isExpanded={this.state.isShowAdvanced}>
{this.getPropertyFields(value, propertiesAdvanced)}
</ExpandableSection>}
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index 63ff380f..3021baf2 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -16,27 +16,30 @@
*/
import React from 'react';
import {
- FormGroup,
- TextInput,
- Popover,
- Switch,
- Select,
- SelectVariant,
- SelectDirection,
- SelectOption,
- ExpandableSection,
- TextArea,
- Chip,
- TextInputGroup,
- TextInputGroupMain,
- TextInputGroupUtilities,
- ChipGroup,
- Button,
- Text,
- Tooltip,
- Card,
- InputGroup, capitalize,
+ FormGroup,
+ TextInput,
+ Popover,
+ Switch,
+ ExpandableSection,
+ TextArea,
+ Chip,
+ TextInputGroup,
+ TextInputGroupMain,
+ TextInputGroupUtilities,
+ ChipGroup,
+ Button,
+ Text,
+ Tooltip,
+ Card,
+ InputGroup,
+ capitalize, InputGroupItem
} from '@patternfly/react-core';
+import {
+ Select,
+ SelectVariant,
+ SelectDirection,
+ SelectOption
+} from '@patternfly/react-core/deprecated';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
@@ -155,7 +158,7 @@ export class DslPropertyField extends React.Component<Props, State> {
const tooltip = value ? "Delete " + property.name : "Add " + property.name;
const className = value ? "change-button delete-button" : "change-button add-button";
const x = value ? undefined : CamelDefinitionApi.createStep(property.type, {});
- const icon = value ? (<DeleteIcon noVerticalAlign/>) : (<AddIcon noVerticalAlign/>);
+ const icon = value ? (<DeleteIcon />) : (<AddIcon />);
return (
<div style={{display: "flex"}}>
<Text>{property.displayName} </Text>
@@ -173,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) => {
@@ -225,20 +228,22 @@ export class DslPropertyField extends React.Component<Props, State> {
</Tooltip>}
{(!showEditor || property.secret) && <TextInput
ref={this.state.ref}
- className="text-field" isRequired isReadOnly={this.isUriReadOnly(property)}
+ className="text-field" isRequired
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)}/>
+ 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}
autoResize={true}
- className="text-field" isRequired isReadOnly={this.isUriReadOnly(property)}
+ className="text-field" isRequired
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)}/>
+ 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"}>
@@ -266,19 +271,24 @@ export class DslPropertyField extends React.Component<Props, State> {
const {dslLanguage, dark} = this.props;
const {showEditor, customCode} = this.state;
return (<InputGroup>
- <TextInput
- ref={this.state.ref}
- className="text-field" isRequired isReadOnly={this.isUriReadOnly(property)}
- type="text"
- id={property.name} name={property.name}
- value={value?.toString()}
- onChange={e => this.propertyChanged(property.name, CamelUtil.capitalizeName(e?.replace(/\s/g, '')))}/>
- <Tooltip position="bottom-end" content={"Create Java Class"}>
+ <InputGroupItem isFill >
+ <TextInput
+ ref={this.state.ref}
+ className="text-field" isRequired
+ type="text"
+ id={property.name} name={property.name}
+ value={value?.toString()}
+ onChange={(_, value) => {
+ this.propertyChanged(property.name, CamelUtil.capitalizeName(value?.replace(/\s/g, '')))
+ }}
+ 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)}>
<PlusIcon/>
</Button>
- </Tooltip>
- <ModalEditor property={property}
+ </Tooltip></InputGroupItem>
+ <InputGroupItem><ModalEditor property={property}
customCode={customCode}
showEditor={showEditor}
dark={dark}
@@ -289,7 +299,7 @@ export class DslPropertyField extends React.Component<Props, State> {
this.propertyChanged(fieldId, value);
KaravanInstance.getProps().onSaveCustomCode?.call(this, value, value1);
this.setState({showEditor: false});
- }}/>
+ }}/></InputGroupItem>
</InputGroup>)
}
@@ -298,7 +308,7 @@ export class DslPropertyField extends React.Component<Props, State> {
const {showEditor} = this.state;
return (
<InputGroup>
- <TextArea
+ <InputGroupItem isFill ><TextArea
autoResize
className="text-field" isRequired
type={"text"}
@@ -306,13 +316,13 @@ export class DslPropertyField extends React.Component<Props, State> {
name={property.name}
height={"100px"}
value={value?.toString()}
- onChange={e => this.propertyChanged(property.name, e)}/>
- <Tooltip position="bottom-end" content={"Show Editor"}>
+ 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/>
</Button>
- </Tooltip>
- <ModalEditor property={property}
+ </Tooltip></InputGroupItem>
+ <InputGroupItem><ModalEditor property={property}
customCode={value}
showEditor={showEditor}
dark={dark}
@@ -322,7 +332,7 @@ export class DslPropertyField extends React.Component<Props, State> {
onSave={(fieldId, value1) => {
this.propertyChanged(fieldId, value1);
this.setState({showEditor: false});
- }}/>
+ }}/></InputGroupItem>
</InputGroup>
)
}
@@ -359,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)}/>
)
}
@@ -374,7 +384,7 @@ export class DslPropertyField extends React.Component<Props, State> {
<Select
variant={SelectVariant.single}
aria-label={property.name}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(property.name, isExpanded)
}}
onSelect={(e, value, isPlaceholder) => this.propertyChanged(property.name, (!isPlaceholder ? value : undefined))}
@@ -399,7 +409,7 @@ export class DslPropertyField extends React.Component<Props, State> {
<Select
variant={SelectVariant.single}
aria-label={property.name}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(property.name, isExpanded)
}}
onSelect={(e, value, isPlaceholder) => this.propertyChanged(property.name, (!isPlaceholder ? value : undefined))}
@@ -433,7 +443,7 @@ export class DslPropertyField extends React.Component<Props, State> {
placeholderText="Select Media Type"
variant={SelectVariant.typeahead}
aria-label={property.name}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(property.name, isExpanded)
}}
onSelect={(e, value, isPlaceholder) => this.propertyChanged(property.name, (!isPlaceholder ? value : undefined))}
@@ -490,7 +500,7 @@ export class DslPropertyField extends React.Component<Props, State> {
variant={SelectVariant.typeahead}
aria-label={property.name}
onClear={event => this.clearSelection(property.name)}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(property.name, isExpanded)
}}
onSelect={(e, value, isPlaceholder) => {
@@ -621,7 +631,7 @@ export class DslPropertyField extends React.Component<Props, State> {
return (
<ExpandableSection
toggleText={label}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.setState(state => {
state.isShowAdvanced.set(label, !state.isShowAdvanced.get(label));
return {isShowAdvanced: state.isShowAdvanced};
@@ -659,8 +669,8 @@ 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">
- <HelpIcon noVerticalAlign/>
+ }} className="pf-v5-c-form__group-label-help">
+ <HelpIcon />
</button>
</Popover>
: <div></div>
diff --git a/karavan-designer/src/designer/route/property/ExpressionField.tsx b/karavan-designer/src/designer/route/property/ExpressionField.tsx
index 95cf6383..135c11fe 100644
--- a/karavan-designer/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -16,13 +16,15 @@
*/
import React from 'react';
import {
- FormGroup,
- Popover,
- Select,
- SelectVariant,
- SelectDirection,
- SelectOption
+ FormGroup,
+ Popover
} from '@patternfly/react-core';
+import {
+ Select,
+ SelectVariant,
+ SelectDirection,
+ SelectOption
+} from '@patternfly/react-core/deprecated';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
@@ -109,14 +111,14 @@ export class ExpressionField extends React.Component<Props, State> {
})
return (
<div>
- <label className="pf-c-form__label" htmlFor="expression">
- <span className="pf-c-form__label-text">Language</span>
- <span className="pf-c-form__label-required" aria-hidden="true"> *</span>
+ <label className="pf-v5-c-form__label" htmlFor="expression">
+ <span className="pf-v5-c-form__label-text">Language</span>
+ <span className="pf-v5-c-form__label-required" aria-hidden="true"> *</span>
</label>
<Select
variant={SelectVariant.typeahead}
aria-label={property.name}
- onToggle={isExpanded => {
+ onToggle={(_event, isExpanded) => {
this.openSelect(isExpanded)
}}
onSelect={(e, lang, isPlaceholder) => {
@@ -141,8 +143,8 @@ export class ExpressionField extends React.Component<Props, State> {
e.preventDefault();
e.stopPropagation();
}}
- className="pf-c-form__group-label-help">
- <HelpIcon noVerticalAlign/>
+ className="pf-v5-c-form__group-label-help">
+ <HelpIcon />
</button>
</Popover> : <div></div>
}>
diff --git a/karavan-designer/src/designer/route/property/InfrastructureSelector.tsx b/karavan-designer/src/designer/route/property/InfrastructureSelector.tsx
index e0069bc0..a9e9649f 100644
--- a/karavan-designer/src/designer/route/property/InfrastructureSelector.tsx
+++ b/karavan-designer/src/designer/route/property/InfrastructureSelector.tsx
@@ -22,7 +22,7 @@ import {
Tab, Tabs, TabTitleText, TextInput,
} from '@patternfly/react-core';
import '../../karavan.css';
-import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {InfrastructureAPI} from "../../utils/InfrastructureAPI";
interface Props {
@@ -65,9 +65,11 @@ export class InfrastructureSelector extends React.Component<Props, State> {
return (
<Form isHorizontal className="search" autoComplete="off">
<FormGroup fieldId="search">
- <TextInput className="text-field" type="text" id="search" name="search" iconVariant='search'
- value={this.state.filter}
- onChange={e => this.setState({filter: e})}/>
+ <TextInput className="text-field" type="text" id="search" name="search"
+ value={this.state.filter}
+ onChange={(_, value) => {
+ this.setState({filter: value})
+ }}/>
</FormGroup>
</Form>
)
@@ -76,7 +78,7 @@ export class InfrastructureSelector extends React.Component<Props, State> {
getConfigMapTable() {
const configMaps = this.state.configMaps;
return (
- <TableComposable variant='compact' borders={false}>
+ <Table variant='compact' borders={false}>
<Thead>
<Tr>
<Th/>
@@ -108,14 +110,14 @@ export class InfrastructureSelector extends React.Component<Props, State> {
)
})}
</Tbody>
- </TableComposable>
+ </Table>
)
}
getSecretsTable() {
const secrets = this.state.secrets;
return (
- <TableComposable variant='compact' borders={false}>
+ <Table variant='compact' borders={false}>
<Thead>
<Tr>
<Th/>
@@ -147,14 +149,14 @@ export class InfrastructureSelector extends React.Component<Props, State> {
)
})}
</Tbody>
- </TableComposable>
+ </Table>
)
}
getServicesTable() {
const services = this.state.services;
return (
- <TableComposable variant='compact' borders={false}>
+ <Table variant='compact' borders={false}>
<Thead>
<Tr>
<Th/>
@@ -202,7 +204,7 @@ export class InfrastructureSelector extends React.Component<Props, State> {
)
})}
</Tbody>
- </TableComposable>
+ </Table>
)
}
diff --git a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
index 9b0a3b39..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,8 +177,8 @@ 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">
- <HelpIcon noVerticalAlign/>
+ 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/designer/route/property/ModalEditor.tsx b/karavan-designer/src/designer/route/property/ModalEditor.tsx
index 0d5568e8..ac953db3 100644
--- a/karavan-designer/src/designer/route/property/ModalEditor.tsx
+++ b/karavan-designer/src/designer/route/property/ModalEditor.tsx
@@ -71,14 +71,14 @@ export class ModalEditor extends React.Component<Props, State> {
<Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
{title}
</Title>
- <p className="pf-u-pt-sm">{dslLanguage?.[2]}</p>
+ <p className="pf-v5-u-pt-sm">{dslLanguage?.[2]}</p>
</React.Fragment>}
isOpen={showEditor}
onClose={() => this.close()}
actions={[
- <Button key="save" variant="primary" isSmall
+ <Button key="save" variant="primary" size="sm"
onClick={e => this.closeAndSave()}>Save</Button>,
- <Button key="cancel" variant="secondary" isSmall
+ <Button key="cancel" variant="secondary" size="sm"
onClick={e => this.close()}>Close</Button>
]}
onEscapePress={e => this.close()}>
diff --git a/karavan-designer/src/designer/templates/TemplatesDesigner.tsx b/karavan-designer/src/designer/templates/TemplatesDesigner.tsx
index 78c8b070..ffc5d9d9 100644
--- a/karavan-designer/src/designer/templates/TemplatesDesigner.tsx
+++ b/karavan-designer/src/designer/templates/TemplatesDesigner.tsx
@@ -17,7 +17,7 @@
import React from 'react';
import {
EmptyState, EmptyStateBody, EmptyStateIcon,
- PageSection, Title
+ PageSection, EmptyStateHeader,
} from '@patternfly/react-core';
import '../karavan.css';
import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
@@ -59,10 +59,7 @@ export class TemplatesDesigner extends React.Component<Props, State> {
<PageSection className="templates-page" isFilled padding={{default: 'noPadding'}}>
<div className="templates-page-columns">
<EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
- <Title headingLevel="h4" size="lg">
- Templates
- </Title>
+ <EmptyStateHeader titleText="Templates" icon={<EmptyStateIcon icon={CubesIcon} />} headingLevel="h4" />
<EmptyStateBody>
Templates not implemented yet
</EmptyStateBody>
diff --git a/karavan-designer/src/designer/utils/KaravanComponents.tsx b/karavan-designer/src/designer/utils/KaravanComponents.tsx
index 72b92b93..faddd84d 100644
--- a/karavan-designer/src/designer/utils/KaravanComponents.tsx
+++ b/karavan-designer/src/designer/utils/KaravanComponents.tsx
@@ -35,8 +35,8 @@ export class IntegrationHeader extends React.Component<Props> {
{/* }/>*/}
{/*</FormGroup>*/}
<FormGroup label="Name" fieldId="name" isRequired>
- <TextInput className="text-field" type="text" id="name" name="name" isReadOnly
- value={this.props.integration.metadata.name}/>
+ <TextInput className="text-field" type="text" id="name" name="name"
+ value={this.props.integration.metadata.name} readOnlyVariant="default"/>
</FormGroup>
</div>
)
diff --git a/karavan-designer/src/index.css b/karavan-designer/src/index.css
index e6a61da8..d2ffcae4 100644
--- a/karavan-designer/src/index.css
+++ b/karavan-designer/src/index.css
@@ -15,7 +15,7 @@ body,
flex-direction: column;
}
-.karavan .pf-c-page__main {
+.karavan .pf-v5-c-page__main {
overflow: hidden;
}
@@ -23,13 +23,13 @@ body,
display: flex;
}
-.logo .pf-c-brand {
+.logo .pf-v5-c-brand {
height: 30px;
margin-right: 10px;
}
.karavan .nav-buttons {
- background: var(--pf-c-page__header--BackgroundColor);
+ background: var(--pf-v5-c-page__header--BackgroundColor);
}
.karavan .nav-buttons .logo {
@@ -39,14 +39,14 @@ body,
height: 32px;
}
-.karavan .nav-buttons .pf-c-button {
+.karavan .nav-buttons .pf-v5-c-button {
padding: 0;
width: 64px;
height: 64px;
- color: var(--pf-global--Color--light-100);
+ color: var(--pf-v5-global--Color--light-100);
}
-.karavan .nav-buttons .pf-c-button svg {
+.karavan .nav-buttons .pf-v5-c-button svg {
width: 24px;
}
@@ -54,20 +54,20 @@ body,
width: 32px;
height: 32px;
margin-bottom: 6px;
- border: solid var(--pf-global--Color--light-100) 1px;
- background-color: var(--pf-global--Color--light-100);
+ border: solid var(--pf-v5-global--Color--light-100) 1px;
+ background-color: var(--pf-v5-global--Color--light-100);
border-radius: 32px;
padding: 6px;
}
-.karavan .nav-buttons .pf-c-button.pf-m-plain {
+.karavan .nav-buttons .pf-v5-c-button.pf-m-plain {
border-left-width: 3px;
border-left-style: solid;
border-left-color: transparent;
border-radius: 0;
}
-.karavan .nav-button-selected .pf-c-button.pf-m-plain {
- border-left-color: var(--pf-global--active-color--400);
- background-color: var(--pf-global--BackgroundColor--dark-400);
+.karavan .nav-button-selected .pf-v5-c-button.pf-m-plain {
+ border-left-color: var(--pf-v5-global--active-color--400);
+ background-color: var(--pf-v5-global--BackgroundColor--dark-400);
}
diff --git a/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx b/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
index d7856f55..02c6b641 100644
--- a/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
@@ -45,13 +45,13 @@ export const KnowledgebasePage = (props: Props) => {
<Switch
label="Custom only"
isChecked={customOnly}
- onChange={checked => setCustomOnly(checked)}
+ onChange={(_event, checked) => setCustomOnly(checked)}
/>
</ToolbarItem>}
<ToolbarItem>
<TextInput className="text-field" type="search" id="search" name="search"
value={filter}
- onChange={value => setFilter(value)}
+ onChange={(_event, value) => setFilter(value)}
autoComplete="off"
placeholder="Search by name"/>
</ToolbarItem>
diff --git a/karavan-designer/src/knowledgebase/components/ComponentModal.tsx b/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
index 7d622425..fd082fee 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
@@ -21,11 +21,10 @@ import {
ActionGroup,
Text,
CardHeader,
- CardActions,
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {Component} from "karavan-core/lib/model/ComponentModels";
import {CamelUi} from "../../designer/utils/CamelUi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
@@ -84,18 +83,16 @@ export class ComponentModal extends React.Component<Props, State> {
>
<Flex direction={{default: 'column'}} key={component?.component.name}
className="kamelet-modal-card">
- <CardHeader>
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {component?.component.label}</Badge></>, hasNoOffset: false, className: undefined}} >
{component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
- <CardActions>
- <Badge className="badge"
- isRead> {component?.component.label}</Badge>
- </CardActions>
+
</CardHeader>
<Text className="description">{component?.component.description}</Text>
{props.size !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
- <TableComposable aria-label="Simple table" variant='compact'>
+ <Table aria-label="Simple table" variant='compact'>
<Thead>
<Tr>
<Th key='name'>Display Name / Name</Th>
@@ -122,7 +119,7 @@ export class ComponentModal extends React.Component<Props, State> {
</Tr>
))}
</Tbody>
- </TableComposable>
+ </Table>
</div>
}
</Flex>
diff --git a/karavan-designer/src/knowledgebase/eip/EipCard.tsx b/karavan-designer/src/knowledgebase/eip/EipCard.tsx
index 2fee706f..db980615 100644
--- a/karavan-designer/src/knowledgebase/eip/EipCard.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipCard.tsx
@@ -45,13 +45,15 @@ export class EipCard extends React.Component<Props, State> {
render() {
const component = this.state.element;
return (
- <Card isHoverable isCompact key={component.name} className="kamelet-card"
+ <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>
diff --git a/karavan-designer/src/knowledgebase/eip/EipModal.tsx b/karavan-designer/src/knowledgebase/eip/EipModal.tsx
index 55ae5f36..4757b953 100644
--- a/karavan-designer/src/knowledgebase/eip/EipModal.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipModal.tsx
@@ -21,11 +21,10 @@ import {
ActionGroup,
Text,
CardHeader,
- CardActions,
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
import {ElementMeta, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
@@ -77,18 +76,16 @@ export class EipModal extends React.Component<Props, State> {
>
<Flex direction={{default: 'column'}} key={component?.name}
className="kamelet-modal-card">
- <CardHeader>
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {component?.labels}</Badge></>, hasNoOffset: false, className: undefined}} >
{component && CamelUi.getIconForDslName(component?.className)}
- <CardActions>
- <Badge className="badge"
- isRead> {component?.labels}</Badge>
- </CardActions>
+
</CardHeader>
<Text className="description">{component?.description}</Text>
{component?.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
- <TableComposable aria-label="Simple table" variant='compact'>
+ <Table aria-label="Simple table" variant='compact'>
<Thead>
<Tr>
<Th key='name'>Display Name / Name</Th>
@@ -115,7 +112,7 @@ export class EipModal extends React.Component<Props, State> {
</Tr>
))}
</Tbody>
- </TableComposable>
+ </Table>
</div>
}
</Flex>
diff --git a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
index 649076b3..948ffb70 100644
--- a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
@@ -47,7 +47,7 @@ export class KameletCard extends React.Component<Props, State> {
const kamelet = this.state.kamelet;
const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
return (
- <Card isHoverable isCompact key={kamelet.metadata.name} className="kamelet-card"
+ <Card isCompact key={kamelet.metadata.name} className="kamelet-card"
onClick={event => this.click(event)}
>
<CardHeader className="header-labels">
diff --git a/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx b/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx
index cf9ba3c1..33801485 100644
--- a/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx
+++ b/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx
@@ -21,12 +21,11 @@ import {
ActionGroup,
Text,
CardHeader,
- CardActions,
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {KameletModel, Property} from "karavan-core/lib/model/KameletModels";
-import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
interface Props {
@@ -82,18 +81,16 @@ export class KameletModal extends Component<Props, State> {
>
<Flex direction={{default: 'column'}} key={this.state.kamelet?.metadata.name}
className="kamelet-modal-card">
- <CardHeader>
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {this.state.kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge></>, hasNoOffset: false, className: undefined}} >
{this.state.kamelet && CamelUi.getIconFromSource(this.state.kamelet?.icon())}
- <CardActions>
- <Badge className="badge"
- isRead> {this.state.kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
- </CardActions>
+
</CardHeader>
<Text className="description">{this.state.kamelet?.spec.definition.description}</Text>
{this.state.kamelet?.spec.definition.properties && this.state.kamelet?.spec.definition.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
- <TableComposable aria-label="Simple table" variant='compact'>
+ <Table aria-label="Simple table" variant='compact'>
<Thead>
<Tr>
<Th key='title'>Title</Th>
@@ -114,7 +111,7 @@ export class KameletModal extends Component<Props, State> {
</Tr>
))}
</Tbody>
- </TableComposable>
+ </Table>
</div>
}
</Flex>