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
commit fee9c2a96104603e2a6e27bc5ce99ccdfbdb7100
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Wed Sep 21 19:24:46 2022 -0400
Expression editor
---
karavan-designer/package-lock.json | 218 +++++++++++++--------
karavan-designer/package.json | 10 +-
karavan-designer/src/App.tsx | 2 +-
.../designer/route/property/DslPropertyField.tsx | 72 ++++++-
.../designer/route/property/ExpressionField.tsx | 49 ++---
5 files changed, 237 insertions(+), 114 deletions(-)
diff --git a/karavan-designer/package-lock.json
b/karavan-designer/package-lock.json
index f9e83ae..6ada171 100644
--- a/karavan-designer/package-lock.json
+++ b/karavan-designer/package-lock.json
@@ -1,17 +1,18 @@
{
"name": "karavan-designer",
- "version": "3.18.3",
+ "version": "3.18.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "karavan-designer",
- "version": "3.18.3",
+ "version": "3.18.4",
"license": "Apache-2.0",
"dependencies": {
- "@patternfly/patternfly": "4.194.4",
- "@patternfly/react-core": "4.214.1",
- "@patternfly/react-table": "^4.83.1",
+ "@monaco-editor/react": "4.3.1",
+ "@patternfly/patternfly": "4.215.1",
+ "@patternfly/react-core": "4.239.0",
+ "@patternfly/react-table": "^4.108.0",
"@reactour/tour": "^2.10.3",
"@types/js-yaml": "^4.0.5",
"@types/uuid": "8.3.4",
@@ -30,11 +31,12 @@
"@types/dagre": "^0.7.47",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
- "@types/react-router-dom": "^5.3.3"
+ "@types/react-router-dom": "^5.3.3",
+ "monaco-editor": "0.29.1"
}
},
"../karavan-core": {
- "version": "3.18.3",
+ "version": "3.18.4",
"license": "Apache-2.0",
"dependencies": {
"@types/js-yaml": "^4.0.5",
@@ -2856,6 +2858,31 @@
"sourcemap-codec": "1.4.8"
}
},
+ "node_modules/@monaco-editor/loader": {
+ "version": "1.3.2",
+ "resolved":
"https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz";,
+ "integrity":
"sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+ "dependencies": {
+ "state-local": "^1.0.6"
+ },
+ "peerDependencies": {
+ "monaco-editor": ">= 0.21.0 < 1"
+ }
+ },
+ "node_modules/@monaco-editor/react": {
+ "version": "4.3.1",
+ "resolved":
"https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz";,
+ "integrity":
"sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
+ "dependencies": {
+ "@monaco-editor/loader": "^1.2.0",
+ "prop-types": "^15.7.2"
+ },
+ "peerDependencies": {
+ "monaco-editor": ">= 0.25.0 < 1",
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ }
+ },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved":
"https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz";,
@@ -2889,19 +2916,19 @@
}
},
"node_modules/@patternfly/patternfly": {
- "version": "4.194.4",
- "resolved":
"https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.194.4.tgz";,
- "integrity":
"sha512-SJxr502v0xXk1N5OiPLunD9pdKvHp5XXJLXcD5lIPrimjjUcy46m48X8YONjDvnC/Y5xV92UI2KxoCVucE34eA=="
+ "version": "4.215.1",
+ "resolved":
"https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.215.1.tgz";,
+ "integrity":
"sha512-coOipHiQs92OYYO+pWfukEKOkY+VUL6ptusTxh98DvIu/tQYzJDJxEmzYXmwqxORM19oLxAJEGktPoLNKElj6A=="
},
"node_modules/@patternfly/react-core": {
- "version": "4.214.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.214.1.tgz";,
- "integrity":
"sha512-XHEqXpnBEDyLVdAEDOYlGqFHnN43eNLSD5HABB99xO6541JV9MRnbxs0+v9iYnfhcKh/8bhA9ITXnUi3f2PEvg==",
- "dependencies": {
- "@patternfly/react-icons": "^4.65.1",
- "@patternfly/react-styles": "^4.64.1",
- "@patternfly/react-tokens": "^4.66.1",
- "focus-trap": "6.2.2",
+ "version": "4.239.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.239.0.tgz";,
+ "integrity":
"sha512-6CmYABCJLUXTlzCk6C3WouMNZpS0BCT+aHU8CvYpFQ/NrpYp3MJaDsYbqgCRWV42rmIO5iXun/4WhXBJzJEoQg==",
+ "dependencies": {
+ "@patternfly/react-icons": "^4.90.0",
+ "@patternfly/react-styles": "^4.89.0",
+ "@patternfly/react-tokens": "^4.91.0",
+ "focus-trap": "6.9.2",
"react-dropzone": "9.0.0",
"tippy.js": "5.1.2",
"tslib": "^2.0.0"
@@ -2912,28 +2939,28 @@
}
},
"node_modules/@patternfly/react-icons": {
- "version": "4.65.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.65.1.tgz";,
- "integrity":
"sha512-CUYFRPztFkR7qrXq/0UAhLjeHd8FdjLe4jBjj8tfKc7OXwxDeZczqNFyRMATZpPaduTH7BU2r3OUjQrgAbquWg==",
+ "version": "4.90.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.90.0.tgz";,
+ "integrity":
"sha512-qEnQKbxbUgyiosiKSkeKEBwmhgJwWEqniIAFyoxj+kpzAdeu7ueWe5iBbqo06mvDOedecFiM5mIE1N0MXwk8Yw==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
},
"node_modules/@patternfly/react-styles": {
- "version": "4.64.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.64.1.tgz";,
- "integrity":
"sha512-+GxULkP2o5Vpr9w+J4NiGOGzhTfNniYzdPGEF/yC+oDoAXB6Q1HJyQnEj+kJH31xNvwmw3G3VFtwRLX4ZWr0oA=="
+ "version": "4.89.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.89.0.tgz";,
+ "integrity":
"sha512-SkT+qx3Xqu70T5s+i/AUT2hI2sKAPDX4ffeiJIUDu/oyWiFdk+/9DEivnLSyJMruroXXN33zKibvzb5rH7DKTQ=="
},
"node_modules/@patternfly/react-table": {
- "version": "4.83.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.83.1.tgz";,
- "integrity":
"sha512-mkq13x9funh+Nh2Uzj2ZQBOacNYc+a60yUAHZMXgNcljCJ3LTQUoYy6EonvYrqwSrpC7vj8nLt8+/XbDNc0Aig==",
- "dependencies": {
- "@patternfly/react-core": "^4.214.1",
- "@patternfly/react-icons": "^4.65.1",
- "@patternfly/react-styles": "^4.64.1",
- "@patternfly/react-tokens": "^4.66.1",
+ "version": "4.108.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.108.0.tgz";,
+ "integrity":
"sha512-EUvd3rlkE1UXobAm7L6JHgNE3TW8IYTaVwwH/px4Mkn5mBayDO6f+w6QM3OeoDQVZcXK6IYFe7QQaYd/vWIJCQ==",
+ "dependencies": {
+ "@patternfly/react-core": "^4.239.0",
+ "@patternfly/react-icons": "^4.90.0",
+ "@patternfly/react-styles": "^4.89.0",
+ "@patternfly/react-tokens": "^4.91.0",
"lodash": "^4.17.19",
"tslib": "^2.0.0"
},
@@ -2943,9 +2970,9 @@
}
},
"node_modules/@patternfly/react-tokens": {
- "version": "4.66.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.66.1.tgz";,
- "integrity":
"sha512-k0IWqpufM6ezT+3gWlEamqQ7LW9yi8e8cBBlude5IU8eIEqIG6AccwR1WNBEK1wCVWGwVxakLMdf0XBLl4k52Q=="
+ "version": "4.91.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.91.0.tgz";,
+ "integrity":
"sha512-QeQCy8o8E/16fAr8mxqXIYRmpTsjCHJXi5p5jmgEDFmYMesN6Pqfv6N5D0FHb+CIaNOZWRps7GkWvlIMIE81sw=="
},
"node_modules/@pmmmwh/react-refresh-webpack-plugin": {
"version": "0.5.4",
@@ -7629,11 +7656,11 @@
"integrity":
"sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
},
"node_modules/focus-trap": {
- "version": "6.2.2",
- "resolved":
"https://registry.npmjs.org/focus-trap/-/focus-trap-6.2.2.tgz";,
- "integrity":
"sha512-qWovH9+LGoKqREvJaTCzJyO0hphQYGz+ap5Hc4NqXHNhZBdxCi5uBPPcaOUw66fHmzXLVwvETLvFgpwPILqKpg==",
+ "version": "6.9.2",
+ "resolved":
"https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz";,
+ "integrity":
"sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
"dependencies": {
- "tabbable": "^5.1.4"
+ "tabbable": "^5.3.2"
}
},
"node_modules/follow-redirects": {
@@ -11292,6 +11319,11 @@
"mkdirp": "bin/cmd.js"
}
},
+ "node_modules/monaco-editor": {
+ "version": "0.29.1",
+ "resolved":
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz";,
+ "integrity":
"sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
+ },
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz";,
@@ -14417,6 +14449,11 @@
"resolved":
"https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz";,
"integrity":
"sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
},
+ "node_modules/state-local": {
+ "version": "1.0.7",
+ "resolved":
"https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz";,
+ "integrity":
"sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+ },
"node_modules/statuses": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz";,
@@ -14768,9 +14805,9 @@
"integrity":
"sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"node_modules/tabbable": {
- "version": "5.2.1",
- "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.2.1.tgz";,
- "integrity":
"sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ=="
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz";,
+ "integrity":
"sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
},
"node_modules/tailwindcss": {
"version": "3.0.18",
@@ -18311,6 +18348,23 @@
"sourcemap-codec": "1.4.8"
}
},
+ "@monaco-editor/loader": {
+ "version": "1.3.2",
+ "resolved":
"https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz";,
+ "integrity":
"sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+ "requires": {
+ "state-local": "^1.0.6"
+ }
+ },
+ "@monaco-editor/react": {
+ "version": "4.3.1",
+ "resolved":
"https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz";,
+ "integrity":
"sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
+ "requires": {
+ "@monaco-editor/loader": "^1.2.0",
+ "prop-types": "^15.7.2"
+ }
+ },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved":
"https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz";,
@@ -18335,52 +18389,52 @@
}
},
"@patternfly/patternfly": {
- "version": "4.194.4",
- "resolved":
"https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.194.4.tgz";,
- "integrity":
"sha512-SJxr502v0xXk1N5OiPLunD9pdKvHp5XXJLXcD5lIPrimjjUcy46m48X8YONjDvnC/Y5xV92UI2KxoCVucE34eA=="
+ "version": "4.215.1",
+ "resolved":
"https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.215.1.tgz";,
+ "integrity":
"sha512-coOipHiQs92OYYO+pWfukEKOkY+VUL6ptusTxh98DvIu/tQYzJDJxEmzYXmwqxORM19oLxAJEGktPoLNKElj6A=="
},
"@patternfly/react-core": {
- "version": "4.214.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.214.1.tgz";,
- "integrity":
"sha512-XHEqXpnBEDyLVdAEDOYlGqFHnN43eNLSD5HABB99xO6541JV9MRnbxs0+v9iYnfhcKh/8bhA9ITXnUi3f2PEvg==",
- "requires": {
- "@patternfly/react-icons": "^4.65.1",
- "@patternfly/react-styles": "^4.64.1",
- "@patternfly/react-tokens": "^4.66.1",
- "focus-trap": "6.2.2",
+ "version": "4.239.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.239.0.tgz";,
+ "integrity":
"sha512-6CmYABCJLUXTlzCk6C3WouMNZpS0BCT+aHU8CvYpFQ/NrpYp3MJaDsYbqgCRWV42rmIO5iXun/4WhXBJzJEoQg==",
+ "requires": {
+ "@patternfly/react-icons": "^4.90.0",
+ "@patternfly/react-styles": "^4.89.0",
+ "@patternfly/react-tokens": "^4.91.0",
+ "focus-trap": "6.9.2",
"react-dropzone": "9.0.0",
"tippy.js": "5.1.2",
"tslib": "^2.0.0"
}
},
"@patternfly/react-icons": {
- "version": "4.65.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.65.1.tgz";,
- "integrity":
"sha512-CUYFRPztFkR7qrXq/0UAhLjeHd8FdjLe4jBjj8tfKc7OXwxDeZczqNFyRMATZpPaduTH7BU2r3OUjQrgAbquWg==",
+ "version": "4.90.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.90.0.tgz";,
+ "integrity":
"sha512-qEnQKbxbUgyiosiKSkeKEBwmhgJwWEqniIAFyoxj+kpzAdeu7ueWe5iBbqo06mvDOedecFiM5mIE1N0MXwk8Yw==",
"requires": {}
},
"@patternfly/react-styles": {
- "version": "4.64.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.64.1.tgz";,
- "integrity":
"sha512-+GxULkP2o5Vpr9w+J4NiGOGzhTfNniYzdPGEF/yC+oDoAXB6Q1HJyQnEj+kJH31xNvwmw3G3VFtwRLX4ZWr0oA=="
+ "version": "4.89.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.89.0.tgz";,
+ "integrity":
"sha512-SkT+qx3Xqu70T5s+i/AUT2hI2sKAPDX4ffeiJIUDu/oyWiFdk+/9DEivnLSyJMruroXXN33zKibvzb5rH7DKTQ=="
},
"@patternfly/react-table": {
- "version": "4.83.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.83.1.tgz";,
- "integrity":
"sha512-mkq13x9funh+Nh2Uzj2ZQBOacNYc+a60yUAHZMXgNcljCJ3LTQUoYy6EonvYrqwSrpC7vj8nLt8+/XbDNc0Aig==",
- "requires": {
- "@patternfly/react-core": "^4.214.1",
- "@patternfly/react-icons": "^4.65.1",
- "@patternfly/react-styles": "^4.64.1",
- "@patternfly/react-tokens": "^4.66.1",
+ "version": "4.108.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.108.0.tgz";,
+ "integrity":
"sha512-EUvd3rlkE1UXobAm7L6JHgNE3TW8IYTaVwwH/px4Mkn5mBayDO6f+w6QM3OeoDQVZcXK6IYFe7QQaYd/vWIJCQ==",
+ "requires": {
+ "@patternfly/react-core": "^4.239.0",
+ "@patternfly/react-icons": "^4.90.0",
+ "@patternfly/react-styles": "^4.89.0",
+ "@patternfly/react-tokens": "^4.91.0",
"lodash": "^4.17.19",
"tslib": "^2.0.0"
}
},
"@patternfly/react-tokens": {
- "version": "4.66.1",
- "resolved":
"https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.66.1.tgz";,
- "integrity":
"sha512-k0IWqpufM6ezT+3gWlEamqQ7LW9yi8e8cBBlude5IU8eIEqIG6AccwR1WNBEK1wCVWGwVxakLMdf0XBLl4k52Q=="
+ "version": "4.91.0",
+ "resolved":
"https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.91.0.tgz";,
+ "integrity":
"sha512-QeQCy8o8E/16fAr8mxqXIYRmpTsjCHJXi5p5jmgEDFmYMesN6Pqfv6N5D0FHb+CIaNOZWRps7GkWvlIMIE81sw=="
},
"@pmmmwh/react-refresh-webpack-plugin": {
"version": "0.5.4",
@@ -21859,11 +21913,11 @@
"integrity":
"sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
},
"focus-trap": {
- "version": "6.2.2",
- "resolved":
"https://registry.npmjs.org/focus-trap/-/focus-trap-6.2.2.tgz";,
- "integrity":
"sha512-qWovH9+LGoKqREvJaTCzJyO0hphQYGz+ap5Hc4NqXHNhZBdxCi5uBPPcaOUw66fHmzXLVwvETLvFgpwPILqKpg==",
+ "version": "6.9.2",
+ "resolved":
"https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz";,
+ "integrity":
"sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
"requires": {
- "tabbable": "^5.1.4"
+ "tabbable": "^5.3.2"
}
},
"follow-redirects": {
@@ -24497,6 +24551,11 @@
"minimist": "^1.2.5"
}
},
+ "monaco-editor": {
+ "version": "0.29.1",
+ "resolved":
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz";,
+ "integrity":
"sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
+ },
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz";,
@@ -26655,6 +26714,11 @@
"resolved":
"https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz";,
"integrity":
"sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
},
+ "state-local": {
+ "version": "1.0.7",
+ "resolved":
"https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz";,
+ "integrity":
"sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+ },
"statuses": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz";,
@@ -26917,9 +26981,9 @@
"integrity":
"sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"tabbable": {
- "version": "5.2.1",
- "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.2.1.tgz";,
- "integrity":
"sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ=="
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz";,
+ "integrity":
"sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
},
"tailwindcss": {
"version": "3.0.18",
diff --git a/karavan-designer/package.json b/karavan-designer/package.json
index 598abde..4dacf85 100644
--- a/karavan-designer/package.json
+++ b/karavan-designer/package.json
@@ -26,9 +26,9 @@
]
},
"dependencies": {
- "@patternfly/patternfly": "4.194.4",
- "@patternfly/react-core": "4.214.1",
- "@patternfly/react-table": "^4.83.1",
+ "@patternfly/patternfly": "4.215.1",
+ "@patternfly/react-core": "4.239.0",
+ "@patternfly/react-table": "^4.108.0",
"@reactour/tour": "^2.10.3",
"@types/js-yaml": "^4.0.5",
"@types/uuid": "8.3.4",
@@ -37,6 +37,7 @@
"karavan-core": "file:../karavan-core",
"react": "17.0.2",
"react-dom": "17.0.2",
+ "@monaco-editor/react": "4.3.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"rxjs": "^7.5.2",
@@ -47,6 +48,7 @@
"@types/dagre": "^0.7.47",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
- "@types/react-router-dom": "^5.3.3"
+ "@types/react-router-dom": "^5.3.3",
+ "monaco-editor": "0.29.1"
}
}
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 57145bf..276c971 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -139,7 +139,7 @@ class App extends React.Component<Props, State> {
save(filename: string, yaml: string, propertyOnly: boolean) {
// console.log(filename);
- console.log(yaml);
+ // console.log(yaml);
// console.log(propertyOnly);
}
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index cad850e..a47d824 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -23,7 +23,21 @@ import {
Select,
SelectVariant,
SelectDirection,
- SelectOption, ExpandableSection, TextArea, Chip, TextInputGroup,
TextInputGroupMain, TextInputGroupUtilities, ChipGroup, Button, Text, Tooltip,
Card, InputGroup
+ SelectOption,
+ ExpandableSection,
+ TextArea,
+ Chip,
+ TextInputGroup,
+ TextInputGroupMain,
+ TextInputGroupUtilities,
+ ChipGroup,
+ Button,
+ Text,
+ Tooltip,
+ Card,
+ InputGroup,
+ Modal,
+ ModalVariant
} from '@patternfly/react-core';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
@@ -50,6 +64,8 @@ import ExpandIcon from
"@patternfly/react-icons/dist/js/icons/expand-icon";
import KubernetesIcon from
"@patternfly/react-icons/dist/js/icons/openshift-icon";
import {KubernetesSelector} from "./KubernetesSelector";
import {KubernetesAPI} from "../../utils/KubernetesAPI";
+import Editor from "@monaco-editor/react";
+import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon";
interface Props {
property: PropertyMeta,
@@ -61,6 +77,7 @@ interface Props {
element?: CamelElement
integration: Integration,
hideLabel?: boolean,
+ dslLanguage?: string
}
interface State {
@@ -157,7 +174,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
const textVal = this.state.ref.current;
const cursorStart = textVal.selectionStart;
const cursorEnd = textVal.selectionEnd;
- if (cursorStart !== cursorEnd){
+ if (cursorStart !== cursorEnd) {
const prevValue = this.props.value;
const selectedText = prevValue.substring(cursorStart, cursorEnd)
value = prevValue.replace(selectedText, value);
@@ -226,15 +243,50 @@ export class DslPropertyField extends
React.Component<Props, State> {
}
getTextArea = (property: PropertyMeta, value: any) => {
+ const lang = this.props.dslLanguage;
+ const showEditor = this.state.showEditor;
return (
- <TextArea
- autoResize
- className="text-field" isRequired
- type={"text"}
- id={property.name} name={property.name}
- height={"100px"}
- value={value?.toString()}
- onChange={e => this.propertyChanged(property.name, e)}/>
+ <InputGroup>
+ <TextArea
+ autoResize
+ className="text-field" isRequired
+ type={"text"}
+ id={property.name} name={property.name}
+ height={"100px"}
+ value={value?.toString()}
+ onChange={e => this.propertyChanged(property.name, e)}/>
+ <Tooltip position="bottom-end" content={"Show Editor"}>
+ <Button variant="control" onClick={e =>
this.setState({showEditor: !showEditor})}>
+ <EditorIcon/>
+ </Button>
+ </Tooltip>
+ <Modal
+ variant={ModalVariant.large}
+ title="Expression"
+ isOpen={this.state.showEditor}
+ onClose={() => this.setState({showEditor: false})}
+ actions={[
+ <Button key="cancel" variant="primary" isSmall
+ onClick={e => this.setState({showEditor:
false})}>Close</Button>
+ ]}
+ onEscapePress={e => this.setState({showEditor: false})}>
+ <Editor
+ height="400px"
+ width="100%"
+ defaultLanguage={'java'}
+ language={'java'}
+ theme={'light'}
+ options={{lineNumbers:"off", folding:false,
lineNumbersMinChars:10, showUnused:false, fontSize:12, minimap:{enabled:false}}}
+ value={value?.toString()}
+ className={'code-editor'}
+ onChange={(value: any, ev: any) => {
+ if (value) {
+ this.propertyChanged(property.name, value)
+ }
+ }}
+ />
+ </Modal>
+ </InputGroup>
)
}
diff --git a/karavan-designer/src/designer/route/property/ExpressionField.tsx
b/karavan-designer/src/designer/route/property/ExpressionField.tsx
index adf58f9..5f6d0dc 100644
--- a/karavan-designer/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -21,14 +21,14 @@ import {
Select,
SelectVariant,
SelectDirection,
- SelectOption,
+ SelectOption, Text, TextContent, TextVariants,
} from '@patternfly/react-core';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
import {CamelMetadataApi, Languages, PropertyMeta} from
"karavan-core/lib/model/CamelMetadata";
import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt";
-import { ExpressionDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {ExpressionDefinition} from "karavan-core/lib/model/CamelDefinition";
import {Integration, CamelElement} from
"karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {DslPropertyField} from "./DslPropertyField";
@@ -37,7 +37,7 @@ import {CamelUi} from "../../utils/CamelUi";
interface Props {
property: PropertyMeta,
value: CamelElement,
- onExpressionChange?: (propertyName: string, exp:ExpressionDefinition) =>
void
+ onExpressionChange?: (propertyName: string, exp: ExpressionDefinition) =>
void
integration: Integration,
}
@@ -55,8 +55,8 @@ export class ExpressionField extends React.Component<Props,
State> {
this.setState({selectIsOpen: isExpanded});
}
- expressionChanged = (language: string, value:CamelElement) => {
- if (language !== (value as any).expressionName){
+ expressionChanged = (language: string, value: CamelElement) => {
+ if (language !== (value as any).expressionName) {
const className =
CamelMetadataApi.getCamelLanguageMetadataByName(language)?.className;
value = CamelDefinitionApi.createExpression(className || '',
{expression: (value as any).expression}); // perhaps copy other similar fields
later
}
@@ -108,22 +108,26 @@ export class ExpressionField extends
React.Component<Props, State> {
})
return (
<div>
- <FormGroup label={"Language"} key={this.getValueLanguage() +
"-" + property.name} fieldId={property.name}>
- <Select
- variant={SelectVariant.typeahead}
- aria-label={property.name}
- onToggle={isExpanded => {
- this.openSelect(isExpanded)
- }}
- onSelect={(e, lang, isPlaceholder) =>
this.expressionChanged(lang.toString(), value)}
- selections={dslLanguage}
- isOpen={this.state.selectIsOpen}
- aria-labelledby={property.name}
- direction={SelectDirection.down}
- >
- {selectOptions}
- </Select>
- </FormGroup>
+ <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>
+ <Select
+ variant={SelectVariant.typeahead}
+ aria-label={property.name}
+ onToggle={isExpanded => {
+ this.openSelect(isExpanded)
+ }}
+ onSelect={(e, lang, isPlaceholder) => {
+ this.expressionChanged(lang.toString(), value);
+ }}
+ selections={dslLanguage}
+ isOpen={this.state.selectIsOpen}
+ aria-labelledby={property.name}
+ direction={SelectDirection.down}
+ >
+ {selectOptions}
+ </Select>
<FormGroup
key={property.name}
fieldId={property.name}
@@ -149,7 +153,8 @@ export class ExpressionField extends React.Component<Props,
State> {
onExpressionChange={exp => {}}
onParameterChange={parameter =>
{console.log(parameter)}}
onDataFormatChange={dataFormat =>
{console.log(dataFormat)}}
- onChange={this.propertyChanged} />
+ onChange={this.propertyChanged}
+ dslLanguage={dslLanguage?.[0]}/>
)}
</FormGroup>
</div>
