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 0534301b Fix #857
0534301b is described below
commit 0534301bbd7a9da21ea41df1c47a0964b573ddc8
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Fri Aug 11 12:34:28 2023 -0400
Fix #857
---
karavan-designer/package.json | 4 +-
karavan-space/package-lock.json | 167 ++++++++-------------
karavan-space/package.json | 6 +-
karavan-space/src/App.tsx | 8 +-
.../src/designer/beans/BeanProperties.tsx | 37 +++--
.../src/designer/rest/RestMethodSelector.tsx | 2 +-
.../src/designer/route/DslConnections.tsx | 4 +-
karavan-space/src/designer/route/DslElement.tsx | 8 +-
karavan-space/src/designer/route/DslProperties.tsx | 17 ++-
karavan-space/src/designer/route/DslSelector.tsx | 13 +-
karavan-space/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 +-
karavan-space/src/designer/utils/CamelUi.tsx | 1 -
.../src/designer/utils/KaravanComponents.tsx | 4 +-
karavan-space/src/index.css | 26 ++--
.../src/knowledgebase/KnowledgebasePage.tsx | 4 +-
.../knowledgebase/components/ComponentModal.tsx | 15 +-
karavan-space/src/knowledgebase/eip/EipCard.tsx | 6 +-
karavan-space/src/knowledgebase/eip/EipModal.tsx | 15 +-
.../src/knowledgebase/kamelets/KameletCard.tsx | 2 +-
.../src/knowledgebase/kamelets/KameletModal.tsx | 15 +-
karavan-space/src/space/GithubModal.tsx | 14 +-
karavan-space/src/space/SpaceBus.ts | 6 +-
karavan-space/src/space/SpacePage.tsx | 10 +-
karavan-space/src/space/UploadModal.tsx | 17 ++-
32 files changed, 321 insertions(+), 333 deletions(-)
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-space/package-lock.json b/karavan-space/package-lock.json
index c8f2a906..e6696d93 100644
--- a/karavan-space/package-lock.json
+++ b/karavan-space/package-lock.json
@@ -10,9 +10,9 @@
"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.15.3",
"@types/uuid": "9.0.1",
@@ -3379,63 +3379,62 @@
"integrity":
"sha512-AanzbulOHljrku1NGfafxdpTCfw2ENaWzH01N2vqQM+cUFbk868Cgh0xylz0JIM9BoKbfI++bdD6EYX0Q/UTEw=="
},
"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",
@@ -5025,12 +5024,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"
}
@@ -8073,14 +8069,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": {
@@ -8208,11 +8204,11 @@
"integrity":
"sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
},
"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": {
@@ -13086,16 +13082,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";,
@@ -14423,18 +14409,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";,
@@ -14725,20 +14699,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": {
@@ -16161,9 +16134,9 @@
"integrity":
"sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"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",
@@ -16363,14 +16336,6 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz";,
"integrity":
"sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
- "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";,
@@ -16790,14 +16755,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-space/package.json b/karavan-space/package.json
index bd111fa6..0a7e0fe7 100644
--- a/karavan-space/package.json
+++ b/karavan-space/package.json
@@ -32,9 +32,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.15.3",
"@types/uuid": "9.0.1",
diff --git a/karavan-space/src/App.tsx b/karavan-space/src/App.tsx
index 0c594cb8..f647aa14 100644
--- a/karavan-space/src/App.tsx
+++ b/karavan-space/src/App.tsx
@@ -38,9 +38,9 @@ class ToastMessage {
id: string = ''
text: string = ''
title: string = ''
- variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+ variant?: 'success' | 'danger' | 'warning' | 'info' | 'custom';
- constructor(title: string, text: string, variant: 'success' | 'danger' |
'warning' | 'info' | 'default') {
+ constructor(title: string, text: string, variant: 'success' | 'danger' |
'warning' | 'info' | 'custom') {
this.id = Date.now().toString().concat(Math.random().toString());
this.title = title;
this.text = text;
@@ -85,7 +85,7 @@ class App extends React.Component<Props, State> {
githubModalIsOpen: false
}
- toast = (title: string, text: string, variant: 'success' | 'danger' |
'warning' | 'info' | 'default') => {
+ toast = (title: string, text: string, variant: 'success' | 'danger' |
'warning' | 'info' | 'custom') => {
const mess = [];
mess.push(...this.state.alerts, new ToastMessage(title, text,
variant));
this.setState({alerts: mess})
@@ -144,7 +144,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>
)
}
diff --git a/karavan-space/src/designer/beans/BeanProperties.tsx
b/karavan-space/src/designer/beans/BeanProperties.tsx
index 45f773fc..4470c01a 100644
--- a/karavan-space/src/designer/beans/BeanProperties.tsx
+++ b/karavan-space/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-space/src/designer/rest/RestMethodSelector.tsx
b/karavan-space/src/designer/rest/RestMethodSelector.tsx
index 316145ce..d3c4ec66 100644
--- a/karavan-space/src/designer/rest/RestMethodSelector.tsx
+++ b/karavan-space/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-space/src/designer/route/DslConnections.tsx
b/karavan-space/src/designer/route/DslConnections.tsx
index 5280bc12..938042d4 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -126,7 +126,7 @@ export class DslConnections extends React.Component<Props,
State> {
const imageX = incomingX - r + 5;
const imageY = fromY - r + 5;
return (
- <div style={{display: "block", position: "absolute", top:
imageY, left: imageX}}>
+ <div key={pos.step.uuid + "-icon"} style={{display: "block",
position: "absolute", top: imageY, left: imageX}}>
{CamelUi.getConnectionIcon(pos.step)}
</div>
)
@@ -212,7 +212,7 @@ export class DslConnections extends React.Component<Props,
State> {
const imageX = outgoingX - r + 5;
const imageY = outgoingY - r + 5;
return (
- <div style={{display: "block", position: "absolute", top:
imageY, left: imageX}}>
+ <div key={pos.step.uuid + "-icon"} style={{display: "block",
position: "absolute", top: imageY, left: imageX}}>
{CamelUi.getConnectionIcon(pos.step)}
</div>
)
diff --git a/karavan-space/src/designer/route/DslElement.tsx
b/karavan-space/src/designer/route/DslElement.tsx
index f9cd9498..2ea1aaa2 100644
--- a/karavan-space/src/designer/route/DslElement.tsx
+++ b/karavan-space/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-space/src/designer/route/DslProperties.tsx
b/karavan-space/src/designer/route/DslProperties.tsx
index 435480de..87f93c79 100644
--- a/karavan-space/src/designer/route/DslProperties.tsx
+++ b/karavan-space/src/designer/route/DslProperties.tsx
@@ -33,7 +33,7 @@ import {Integration, CamelElement} from
"karavan-core/lib/model/IntegrationDefin
import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelUi, RouteToCreate} from "../utils/CamelUi";
-import {CamelMetadataApi, PropertyMeta} from
"karavan-core/lib/model/CamelMetadata";
+import {CamelMetadataApi, DataFormats, PropertyMeta} from
"karavan-core/lib/model/CamelMetadata";
import {IntegrationHeader} from "../utils/KaravanComponents";
import CloneIcon from "@patternfly/react-icons/dist/esm/icons/clone-icon";
@@ -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>)}
@@ -170,7 +170,7 @@ export class DslProperties extends React.Component<Props,
State> {
getPropertyFields = (properties: PropertyMeta[]) => {
return (<>
- {this.state.step && !['MarshalDefinition',
'UnmarshalDefinition'].includes(this.state.step.dslName) &&
properties.map((property: PropertyMeta) =>
+ {properties.map((property: PropertyMeta) =>
<DslPropertyField key={property.name}
integration={this.props.integration}
property={property}
@@ -186,7 +186,11 @@ export class DslProperties extends React.Component<Props,
State> {
}
render() {
- const properties = this.getProperties();
+ const dataFormats = DataFormats.map(value => value[0]);
+ const dataFormatElement = this.state.step !== undefined &&
['MarshalDefinition', 'UnmarshalDefinition'].includes(this.state.step.dslName);
+ const properties = !dataFormatElement
+ ? this.getProperties()
+ : this.getProperties().filter(p =>
!dataFormats.includes(p.name));
const propertiesMain = properties.filter(p =>
!p.label.includes("advanced"));
const propertiesAdvanced = properties.filter(p =>
p.label.includes("advanced"));
return (
@@ -196,10 +200,11 @@ export class DslProperties extends React.Component<Props,
State> {
{this.state.step === undefined && <IntegrationHeader
integration={this.props.integration}/>}
{this.state.step && this.getComponentHeader()}
{this.getPropertyFields(propertiesMain)}
- {propertiesAdvanced.length > 0 &&
+ {this.state.step && !['MarshalDefinition',
'UnmarshalDefinition'].includes(this.state.step.dslName)
+ && 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-space/src/designer/route/DslSelector.tsx
b/karavan-space/src/designer/route/DslSelector.tsx
index 3baca8d8..47eb3b39 100644
--- a/karavan-space/src/designer/route/DslSelector.tsx
+++ b/karavan-space/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>
)
@@ -99,7 +99,7 @@ export class DslSelector extends React.Component<Props,
State> {
</CardBody>
<CardFooter className="footer-labels">
<div style={{display: "flex", flexDirection: "row",
justifyContent: "start"}}>
- {labels.map(label => <Badge isRead
className="labels">{label}</Badge>)}
+ {labels.map(label => <Badge key={label} isRead
className="labels">{label}</Badge>)}
</div>
</CardFooter>
@@ -176,9 +176,10 @@ 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}
text={eipLabel}
buttonId={eipLabel}
isSelected={this.state.selectedLabels.includes(eipLabel)}
diff --git a/karavan-space/src/designer/route/RouteDesigner.tsx
b/karavan-space/src/designer/route/RouteDesigner.tsx
index db2662e0..f7607b90 100644
--- a/karavan-space/src/designer/route/RouteDesigner.tsx
+++ b/karavan-space/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-space/src/designer/route/property/ComponentParameterField.tsx
b/karavan-space/src/designer/route/property/ComponentParameterField.tsx
index 2a7996df..69175d98 100644
--- a/karavan-space/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-space/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-space/src/designer/route/property/DataFormatField.tsx
b/karavan-space/src/designer/route/property/DataFormatField.tsx
index aad00220..ef447b6f 100644
--- a/karavan-space/src/designer/route/property/DataFormatField.tsx
+++ b/karavan-space/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-space/src/designer/route/property/DslPropertyField.tsx
b/karavan-space/src/designer/route/property/DslPropertyField.tsx
index 63ff380f..3021baf2 100644
--- a/karavan-space/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-space/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-space/src/designer/route/property/ExpressionField.tsx
b/karavan-space/src/designer/route/property/ExpressionField.tsx
index 95cf6383..135c11fe 100644
--- a/karavan-space/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-space/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-space/src/designer/route/property/InfrastructureSelector.tsx
b/karavan-space/src/designer/route/property/InfrastructureSelector.tsx
index e0069bc0..a9e9649f 100644
--- a/karavan-space/src/designer/route/property/InfrastructureSelector.tsx
+++ b/karavan-space/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-space/src/designer/route/property/KameletPropertyField.tsx
b/karavan-space/src/designer/route/property/KameletPropertyField.tsx
index 9b0a3b39..e837677f 100644
--- a/karavan-space/src/designer/route/property/KameletPropertyField.tsx
+++ b/karavan-space/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-space/src/designer/route/property/ModalEditor.tsx
b/karavan-space/src/designer/route/property/ModalEditor.tsx
index 0d5568e8..ac953db3 100644
--- a/karavan-space/src/designer/route/property/ModalEditor.tsx
+++ b/karavan-space/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-space/src/designer/templates/TemplatesDesigner.tsx
b/karavan-space/src/designer/templates/TemplatesDesigner.tsx
index 78c8b070..ffc5d9d9 100644
--- a/karavan-space/src/designer/templates/TemplatesDesigner.tsx
+++ b/karavan-space/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-space/src/designer/utils/CamelUi.tsx
b/karavan-space/src/designer/utils/CamelUi.tsx
index a94ed0ac..8d4157c4 100644
--- a/karavan-space/src/designer/utils/CamelUi.tsx
+++ b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -88,7 +88,6 @@ import {
WorkflowIcon
} from "./KaravanIcons";
import React from "react";
-import {Icon} from "@patternfly/react-core";
const StepElements: string[] = [
"AggregateDefinition",
diff --git a/karavan-space/src/designer/utils/KaravanComponents.tsx
b/karavan-space/src/designer/utils/KaravanComponents.tsx
index 72b92b93..faddd84d 100644
--- a/karavan-space/src/designer/utils/KaravanComponents.tsx
+++ b/karavan-space/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-space/src/index.css b/karavan-space/src/index.css
index 4cb3c637..3d054e2d 100644
--- a/karavan-space/src/index.css
+++ b/karavan-space/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,26 +54,26 @@ 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);
}
-.github-modal .pf-c-form-control {
+.github-modal .pf-v5-c-form-control {
font-size: 14px;
width: 144px;
height: auto;
diff --git a/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
b/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
index d7856f55..02c6b641 100644
--- a/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-space/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-space/src/knowledgebase/components/ComponentModal.tsx
b/karavan-space/src/knowledgebase/components/ComponentModal.tsx
index 7d622425..fd082fee 100644
--- a/karavan-space/src/knowledgebase/components/ComponentModal.tsx
+++ b/karavan-space/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-space/src/knowledgebase/eip/EipCard.tsx
b/karavan-space/src/knowledgebase/eip/EipCard.tsx
index 2fee706f..db980615 100644
--- a/karavan-space/src/knowledgebase/eip/EipCard.tsx
+++ b/karavan-space/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-space/src/knowledgebase/eip/EipModal.tsx
b/karavan-space/src/knowledgebase/eip/EipModal.tsx
index 55ae5f36..4757b953 100644
--- a/karavan-space/src/knowledgebase/eip/EipModal.tsx
+++ b/karavan-space/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-space/src/knowledgebase/kamelets/KameletCard.tsx
b/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
index 649076b3..948ffb70 100644
--- a/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-space/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-space/src/knowledgebase/kamelets/KameletModal.tsx
b/karavan-space/src/knowledgebase/kamelets/KameletModal.tsx
index cf9ba3c1..33801485 100644
--- a/karavan-space/src/knowledgebase/kamelets/KameletModal.tsx
+++ b/karavan-space/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>
diff --git a/karavan-space/src/space/GithubModal.tsx
b/karavan-space/src/space/GithubModal.tsx
index ff90d220..70682d81 100644
--- a/karavan-space/src/space/GithubModal.tsx
+++ b/karavan-space/src/space/GithubModal.tsx
@@ -152,26 +152,26 @@ export class GithubModal extends React.Component<Props,
State> {
<FormGroup label="Repository" fieldId="repository"
isRequired>
<Flex direction={{default: "row"}}
justifyContent={{default: "justifyContentSpaceBetween"}} alignItems={{default:
"alignItemsStretch"}}>
<FlexItem>
- <TextInput id="owner" placeholder="Owner"
value={owner} onChange={value => this.setState({owner: value})}/>
+ <TextInput id="owner" placeholder="Owner"
value={owner} onChange={(_event, value) => this.setState({owner: value})}/>
</FlexItem>
<FlexItem>
- <TextInput id="repo" placeholder="Repo"
value={repo} onChange={value => this.setState({repo: value})}/>
+ <TextInput id="repo" placeholder="Repo"
value={repo} onChange={(_event, value) => this.setState({repo: value})}/>
</FlexItem>
<FlexItem>
- <TextInput id="path" placeholder="Path"
value={path} onChange={value => this.setState({path: value})}/>
+ <TextInput id="path" placeholder="Path"
value={path} onChange={(_event, value) => this.setState({path: value})}/>
</FlexItem>
<FlexItem>
- <TextInput id="branch" placeholder="branch"
value={branch} onChange={value => this.setState({branch: value})}/>
+ <TextInput id="branch" placeholder="branch"
value={branch} onChange={(_event, value) => this.setState({branch: value})}/>
</FlexItem>
</Flex>
</FormGroup>
<FormGroup label="Commit user" fieldId="user" isRequired>
<Flex direction={{default: "row"}}
justifyContent={{default: "justifyContentSpaceBetween"}} alignItems={{default:
"alignItemsStretch"}}>
<FlexItem>
- <TextInput id="username"
placeholder="Username" value={name} onChange={value => this.setState({name:
value})}/>
+ <TextInput id="username"
placeholder="Username" value={name} onChange={(_event, value) =>
this.setState({name: value})}/>
</FlexItem>
<FlexItem flex={{default: "flex_3"}}>
- <TextInput id="email" placeholder="Email"
value={email} onChange={value => this.setState({email: value})}/>
+ <TextInput id="email" placeholder="Email"
value={email} onChange={(_event, value) => this.setState({email: value})}/>
</FlexItem>
</Flex>
</FormGroup>
@@ -187,7 +187,7 @@ export class GithubModal extends React.Component<Props,
State> {
</FormGroup>
<FormGroup label="Save" fieldId="save" isRequired>
<TextInputGroup className="input-group">
- <Switch label="Save parameters in browser (except
token)" checked={save} onChange={checked => this.setState({save: checked})}/>
+ <Switch label="Save parameters in browser (except
token)" checked={save} onChange={(_event, checked) => this.setState({save:
checked})}/>
</TextInputGroup>
</FormGroup>
</Form>
diff --git a/karavan-space/src/space/SpaceBus.ts
b/karavan-space/src/space/SpaceBus.ts
index 2325749f..bb209bfb 100644
--- a/karavan-space/src/space/SpaceBus.ts
+++ b/karavan-space/src/space/SpaceBus.ts
@@ -21,10 +21,10 @@ const alerts = new Subject<AlertMessage>();
export class AlertMessage {
title: string;
message: string;
- variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
+ variant: 'success' | 'danger' | 'warning' | 'info' | 'custom';
- constructor(title: string, message: string, variant: "success" | "danger"
| "warning" | "info" | "default") {
+ constructor(title: string, message: string, variant: 'success' | 'danger'
| 'warning' | 'info' | 'custom') {
this.title = title;
this.message = message;
this.variant = variant;
@@ -35,7 +35,7 @@ export const SpaceBus = {
sendAlert: (
title: string,
message: string,
- variant: "success" | "danger" | "warning" | "info" | "default" =
'success'
+ variant: 'success' | 'danger' | 'warning' | 'info' | 'custom' =
'success'
) => alerts.next(new AlertMessage(title, message, variant)),
onAlert: () => alerts.asObservable(),
}
diff --git a/karavan-space/src/space/SpacePage.tsx
b/karavan-space/src/space/SpacePage.tsx
index 2aa44536..0f71ff2e 100644
--- a/karavan-space/src/space/SpacePage.tsx
+++ b/karavan-space/src/space/SpacePage.tsx
@@ -87,7 +87,9 @@ export class SpacePage extends React.Component<Props, State> {
}
addYaml = (yaml: string | undefined) => {
- this.save(this.props.name, this.props.yaml + "\n" + yaml, false);
+ if (yaml) {
+ this.save(this.props.name, this.props.yaml + "\n" + yaml, false);
+ }
this.setState({showUploadModal: false, key: Math.random().toString()})
}
@@ -135,7 +137,7 @@ export class SpacePage 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>
<Flex>
@@ -147,9 +149,9 @@ export class SpacePage extends React.Component<Props,
State> {
<FlexItem>
<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>
</FlexItem>
</Flex>
diff --git a/karavan-space/src/space/UploadModal.tsx
b/karavan-space/src/space/UploadModal.tsx
index 1ea8f463..5db50419 100644
--- a/karavan-space/src/space/UploadModal.tsx
+++ b/karavan-space/src/space/UploadModal.tsx
@@ -5,6 +5,7 @@ import {
import '../designer/karavan.css';
import {GeneratorApi} from "../api/GeneratorApi";
import {SpaceBus} from "./SpaceBus";
+import {DropEvent, FileRejection} from "react-dropzone";
interface Props {
isOpen: boolean,
@@ -50,11 +51,11 @@ export class UploadModal extends React.Component<Props,
State> {
})
}
- handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement> |
React.DragEvent<HTMLElement>, file: File) => this.setState({filename:
file.name});
+ handleFileInputChange = (file: File) => this.setState({filename:
file.name});
handleFileReadStarted = (fileHandle: File) => this.setState({isLoading:
true});
handleFileReadFinished = (fileHandle: File) => this.setState({isLoading:
false});
handleTextOrDataChange = (data: string) => this.setState({data: data});
- handleFileRejected = (acceptedOrRejected: File[], event:
React.DragEvent<HTMLElement>) => this.setState({isRejected: true});
+ handleFileRejected = (fileRejections: FileRejection[], event: DropEvent)
=> this.setState({isRejected: true});
handleClear = (event: React.MouseEvent<HTMLButtonElement>) =>
this.setState({
filename: '',
data: '',
@@ -66,7 +67,7 @@ export class UploadModal extends React.Component<Props,
State> {
const {generating} = this.state;
const fileNotUploaded = (this.state.filename === '' || this.state.data
=== '');
const isDisabled = fileNotUploaded || generating;
- const accept = '.json, .yaml';
+ const accept = {'application/yaml': ['.yaml', '.yml'],
'application/json': ['.json']}
return (
<Modal
title="Upload OpenAPI"
@@ -88,11 +89,11 @@ export class UploadModal extends React.Component<Props,
State> {
hideDefaultPreview
browseButtonText="Upload"
isLoading={this.state.isLoading}
- onFileInputChange={this.handleFileInputChange}
- onDataChange={data =>
this.handleTextOrDataChange(data)}
- onTextChange={text =>
this.handleTextOrDataChange(text)}
- onReadStarted={this.handleFileReadStarted}
- onReadFinished={this.handleFileReadFinished}
+ onFileInputChange={(event, file) =>
this.handleFileInputChange(file)}
+ onDataChange={(_event, data) =>
this.handleTextOrDataChange(data)}
+ onTextChange={(_event, text) =>
this.handleTextOrDataChange(text)}
+ onReadStarted={(_event, fileHandle: File) =>
this.handleFileReadStarted(fileHandle)}
+ onReadFinished={(_event, fileHandle: File) =>
this.handleFileReadFinished(fileHandle)}
allowEditingUploadedText={false}
onClearClick={this.handleClear}
dropzoneProps={{accept: accept, onDropRejected:
this.handleFileRejected}}
