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 0b49a1a16896cb8397e28aab42d3fbe880776579
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Sep 16 14:03:00 2024 -0400
#1398
---
.../src/designer/icons/ComponentIcons.tsx | 103 ++++++++++++++++++---
.../src/designer/selector/DslSelector.tsx | 24 +++--
karavan-designer/src/designer/utils/CamelUi.tsx | 14 ++-
.../src/designer/icons/ComponentIcons.tsx | 103 ++++++++++++++++++---
.../src/designer/selector/DslSelector.tsx | 24 +++--
karavan-space/src/designer/utils/CamelUi.tsx | 14 ++-
6 files changed, 228 insertions(+), 54 deletions(-)
diff --git a/karavan-designer/src/designer/icons/ComponentIcons.tsx
b/karavan-designer/src/designer/icons/ComponentIcons.tsx
index 5d13362a..c7f9c3ea 100644
--- a/karavan-designer/src/designer/icons/ComponentIcons.tsx
+++ b/karavan-designer/src/designer/icons/ComponentIcons.tsx
@@ -16,6 +16,35 @@
*/
import React from 'react';
+export function SalesforceIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ xmlnsXlink="http://www.w3.org/1999/xlink";
+ viewBox="0 0 273 191"
+ className="icon"
+ >
+ <defs>
+ <path id="a" d="M.06.5h272v190H.06z" />
+ </defs>
+ <g fillRule="evenodd">
+ <path
+ fill="#00A1E0"
+ d="M113 21.3c8.78-9.14 21-14.8 34.5-14.8 18 0 33.6 10
42 24.9a58 58 0 0 1 23.7-5.05c32.4 0 58.7 26.5 58.7 59.2s-26.3 59.2-58.7
59.2c-3.96 0-7.82-.398-11.6-1.15-7.35 13.1-21.4 22-37.4 22a42.7 42.7 0 0
1-18.8-4.32c-7.45 17.5-24.8 29.8-45 29.8-21.1 0-39-13.3-45.9-32a45.1 45.1 0 0
1-9.34.972c-25.1 0-45.4-20.6-45.4-45.9 0-17 9.14-31.8 22.7-39.8a52.6 52.6 0 0
1-4.35-21c0-29.2 23.7-52.8 52.9-52.8 17.1 0 32.4 8.15 42 20.8"
+ mask="url(#b)"
+ />
+ <path
+ fill="#FFFFFE"
+ d="M39.4 99.3c-.171.446.061.539.116.618.511.37
1.03.638 1.55.939 2.78 1.47 5.4 1.9 8.14 1.9 5.58 0 9.05-2.97
9.05-7.75v-.094c0-4.42-3.92-6.03-7.58-7.18l-.479-.155c-2.77-.898-5.16-1.68-5.16-3.5v-.093c0-1.56
1.4-2.71 3.56-2.71 2.4 0 5.26.799 7.09 1.81 0 0 .542.35.739-.173.107-.283
1.04-2.78
1.14-3.06.106-.293-.08-.514-.271-.628-2.1-1.28-5-2.15-8-2.15l-.557.002c-5.11
0-8.68 3.09-8.68 7.51v.095c0 4.66 3.94 6.18 7.62 7.23l.592.184c2.68.824 5 1.54
5 3.42v.094c0 1.73-1.5 [...]
+ />
+ <path
+ fill="#FFFFFE"
+ d="M162.201 67.548a13.258 13.258 0 0 0-1.559-.37
12.217 12.217 0 0 0-2.144-.166c-2.853 0-5.102.806-6.681 2.398-1.568 1.58-2.635
3.987-3.17 7.154l-.193 1.069h-3.581s-.437-.018-.529.459l-.588
3.28c-.041.314.094.51.514.508h3.486l-3.537 19.743c-.277 1.59-.594 2.898-.945
3.889-.346.978-.684 1.711-1.1 2.243-.403.515-.785.894-1.444
1.115-.544.183-1.17.267-1.856.267-.382
0-.89-.064-1.265-.139-.375-.074-.57-.158-.851-.276 0
0-.409-.156-.57.254-.131.335-1.06 2.89-1.17 3.206 [...]
+ />
+ </g>
+ </svg>
+ )
+}
export function SlackIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg"; width={127} height={127}
className="icon">
@@ -135,7 +164,6 @@ export function DHIS2Icon() {
<defs id="defs1">
<style id="style1">{".cls-1{fill:#0080d4}"}</style>
</defs>
- <title id="title1">{"dhis2-logo-rgb-positive"}</title>
<path
id="path1"
d="m189.415 56.477-82.74-53.66a19.75 19.75 0 0 0-20.33
0l-80.35 52.09a12 12 0 0 0-.25 20.63l80.54 54.94a19.39 19.39 0 0 0
20.38.25l82.75-53.65a11.87 11.87 0 0 0 0-20.59zm-91 61.45a4.29 4.29 0 0
1-3.49-.05l-77-52.49 76.71-49.78a4.76 4.76 0 0 1 3.74 0l78.91 51.15z"
@@ -254,7 +282,6 @@ export function FileIcon() {
xmlSpace="preserve"
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"document"}</title>
<path
d="m25.7 9.3-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0
1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24
28H8V4h8v6c0 1.1.9 2 2 2h6v16z"/>
<path d="M10 22h12v2H10zM10 16h12v2H10z"/>
@@ -379,7 +406,6 @@ export function MailIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"email"}</title>
<path
d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2
2 0 0 0-2-2Zm-2.2 2L16 14.78 6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28
8.91V24Z"/>
<path
@@ -399,7 +425,6 @@ export function IotIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"iot--platform"}</title>
<path
d="M30 19h-4v-4h-2v9H8V8h9V6h-4V2h-2v4H8a2.002 2.002 0 0 0-2
2v3H2v2h4v6H2v2h4v3a2.002 2.002 0 0 0 2 2h3v4h2v-4h6v4h2v-4h3a2.003 2.003 0 0 0
2-2v-3h4Z"/>
<path d="M21 21H11V11h10Zm-8-2h6v-6h-6ZM31 13h-2A10.012 10.012 0 0
0 19 3V1a12.013 12.013 0 0 1 12 12Z"/>
@@ -880,7 +905,6 @@ export function TerminalIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"terminal"}</title>
<path
d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0
2-2v-20a2 2 0 0 0-2-2Zm0 2v4H6v-4Zm-20 20v-14h20v14Z"/>
<path d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41
4.24-4.24-4.24-4.24-1.41 1.41z"/>
@@ -925,7 +949,6 @@ export function ScriptIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"script"}</title>
<path
d="m18.83 26 2.58-2.58L20 22l-4 4 4 4 1.42-1.41L18.83
26zM27.17 26l-2.58 2.58L26 30l4-4-4-4-1.42 1.41L27.17 26z"/>
<path
@@ -1111,7 +1134,6 @@ export function BlockchainIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"blockchain"}</title>
<path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z"/>
<path
d="M0 0h32v32H0z"
@@ -1130,7 +1152,6 @@ export function ChatIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"chat"}</title>
<path
d="M17.74 30 16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0
0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4
4v12a4 4 0 0 1-4 4h-4.84Z"/>
<path d="M8 10h16v2H8zM8 16h10v2H8z"/>
@@ -1164,7 +1185,6 @@ export function WebserviceIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"fog"}</title>
<path
d="M25.829 13.116A10.02 10.02 0 0 0 16 5v2a8.023 8.023 0 0 1
7.865 6.493l.259 1.346 1.349.245A5.502 5.502 0 0 1 24.508 26H16v2h8.508a7.502
7.502 0 0 0 1.32-14.884ZM8 24h6v2H8zM4 24h2v2H4zM6 20h8v2H6zM2 20h2v2H2zM8
16h6v2H8zM4 16h2v2H4zM10 12h4v2h-4zM6 12h2v2H6zM12 8h2v2h-2z"/>
<path
@@ -1270,7 +1290,6 @@ export function TransformationIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"data-share"}</title>
<path
d="M5 25v-9.172l-3.586 3.586L0 18l6-6 6 6-1.414 1.414L7
15.828V25h12v2H7a2.002 2.002 0 0 1-2-2ZM24 22h4a2.002 2.002 0 0 1 2 2v4a2.002
2.002 0 0 1-2 2h-4a2.002 2.002 0 0 1-2-2v-4a2.002 2.002 0 0 1 2-2Zm4
6v-4h-4.002L24 28ZM27 6v9.172l3.586-3.586L32 13l-6 6-6-6 1.414-1.414L25
15.172V6H13V4h12a2.002 2.002 0 0 1 2 2ZM2 6h6v2H2zM2 2h8v2H2z"/>
<path
@@ -1311,7 +1330,6 @@ export function ApiIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"api"}</title>
<path
d="M26 22a3.86 3.86 0 0 0-2 .57l-3.09-3.1a6 6 0 0 0 0-6.94L24
9.43a3.86 3.86 0 0 0 2 .57 4 4 0 1 0-4-4 3.86 3.86 0 0 0 .57 2l-3.1 3.09a6 6 0
0 0-6.94 0L9.43 8A3.86 3.86 0 0 0 10 6a4 4 0 1 0-4 4 3.86 3.86 0 0 0 2-.57l3.09
3.1a6 6 0 0 0 0 6.94L8 22.57A3.86 3.86 0 0 0 6 22a4 4 0 1 0 4 4 3.86 3.86 0 0
0-.57-2l3.1-3.09a6 6 0 0 0 6.94 0l3.1 3.09a3.86 3.86 0 0 0-.57 2 4 4 0 1 0
4-4Zm0-18a2 2 0 1 1-2 2 2 2 0 0 1 2-2ZM4 6a2 2 0 1 1 2 2 2 2 0 0 1-2-2Zm2 22a2
2 0 1 1 2-2 2 2 0 0 1-2 [...]
<path
@@ -1331,7 +1349,6 @@ export function KameletIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
>
- <title>{"application"}</title>
<path d="M16 18H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2
2v10a2 2 0 0 1-2 2ZM6 6v10h10V6ZM26 12v4h-4v-4h4m0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0
0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2ZM26 22v4h-4v-4h4m0-2h-4a2 2 0 0 0-2
2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2ZM16 22v4h-4v-4h4m0-2h-4a2 2
0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Z" />
<path
d="M0 0h32v32H0z"
@@ -1344,6 +1361,65 @@ export function KameletIcon() {
)
}
+export function CouchbaseIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ viewBox="0 0 256 256"
+ className="icon"
+ >
+ <path
+ fill="#ED2226"
+ d="M128 0C57.426 0 0 57.233 0 128c0 70.574 57.233 128 128 128
70.574 0 128-57.233 128-128S198.574 0 128 0Zm86.429 150.429c0 7.734-4.447
14.502-13.148 16.048-15.082 2.707-46.792 4.254-73.281 4.254-26.49
0-58.2-1.547-73.281-4.254-8.7-1.546-13.148-8.314-13.148-16.048v-49.885c0-7.734
5.994-14.888 13.148-16.049 4.447-.773 14.888-1.546 23.01-1.546 3.093 0 5.606
2.32 5.606 5.994v34.997l44.858-.967 44.858.967V88.943c0-3.674 2.514-5.994
5.608-5.994 8.12 0 18.562.773 23.009 1.546 7 [...]
+ />
+ </svg>
+ );
+}
+
+export function TwilioIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 0 256 256"
+ className="icon"
+ >
+ <path
+ fill="#F12E45"
+ d="M128 0c70.656 0 128 57.344 128 128s-57.344 128-128 128S0
198.656 0 128 57.344 0 128 0Zm0 33.792c-52.224 0-94.208 41.984-94.208
94.208S75.776 222.208 128 222.208s94.208-41.984 94.208-94.208S180.224 33.792
128 33.792Zm31.744 99.328c14.704 0 26.624 11.92 26.624 26.624 0 14.704-11.92
26.624-26.624 26.624-14.704 0-26.624-11.92-26.624-26.624 0-14.704 11.92-26.624
26.624-26.624Zm-63.488 0c14.704 0 26.624 11.92 26.624 26.624 0 14.704-11.92
26.624-26.624 26.624-14.704 0-26.624- [...]
+ />
+ </svg>
+ );
+}
+
+export function TwitterIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ viewBox="-0.25 -104.25 1109.5 1109.5"
+ className="icon"
+ >
+ <path
+ fill="#5da8dc"
+ stroke="#5da8dc"
+ strokeWidth={0.5}
+ d="M741 .2V0h52l19 3.8c12.667 2.467 24.167 5.7 34.5 9.7 10.334
4 20.334 8.667 30 14 9.667 5.333 18.434 10.767 26.301 16.3 7.8 5.467 14.8
11.267 21 17.4C929.933 67.4 939.5 69 952.5 66s27-7.167 42-12.5 29.834-11.333
44.5-18c14.667-6.667 23.601-10.9 26.801-12.7 3.133-1.866 4.8-2.866 5-3l.199-.3
1-.5 1-.5 1-.5 1-.5.2-.3.3-.2.301-.2.199-.3 1-.3 1-.2-.199 1.5-.301 1.5-.5
1.5-.5 1.5-.5 1-.5 1-.5 1.5c-.333 1-.666 2.333-1 4-.333 1.667-3.5 8.333-9.5
20S1051 73 1042 85s-17.066 21.06 [...]
+ />
+ <path
+ fill="#fff"
+ stroke="#fff"
+ strokeWidth={0.5}
+ d="M0 399V0h741v.2c0 .2-4.333.966-13 2.3-8.666 1.333-19.333
4.167-32 8.5-12.666 4.333-26.5 10.667-41.5 19s-28.333 17.833-40 28.5c-11.666
10.667-21.166 21-28.5 31-7.333 10-13.266 18.9-17.8 26.7-4.466 7.866-9.033
18.3-13.7 31.3-4.666 13-8.166 25.833-10.5 38.5-2.333 12.667-3.5 26.5-3.5
41.5s.667 26.667 2 35l2 12.5.301 1.5.199
1.5-7-.2c-4.666-.2-13.333-.966-26-2.3-12.666-1.333-31.5-4.333-56.5-9s-42.666-8.5-53-11.5c-10.333-3-28.333-9.333-54-19-25.666-9.667-49.666-20.5-72-32.5-
[...]
+ />
+ </svg>
+ );
+}
export function MonitoringIcon() {
return (
@@ -1412,7 +1488,7 @@ export function KubernetesIcon(className?: string) {
<svg
xmlns="http://www.w3.org/2000/svg";
viewBox="0 -10.44 722.846 722.846"
- className={className ? className + " icon" : "icon"}
+ className={className ? className + " icon" : "icon"}
width="32px" height="32px">
<path
fill="#326ce5"
@@ -1445,7 +1521,6 @@ export function DocumentIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"document--blank"}</title>
<path
d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2
2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.908.908 0 0 0-.3-.7ZM18
4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z"/>
<path
diff --git a/karavan-designer/src/designer/selector/DslSelector.tsx
b/karavan-designer/src/designer/selector/DslSelector.tsx
index 85837e12..23c1018d 100644
--- a/karavan-designer/src/designer/selector/DslSelector.tsx
+++ b/karavan-designer/src/designer/selector/DslSelector.tsx
@@ -40,7 +40,7 @@ import TimesIcon from
"@patternfly/react-icons/dist/esm/icons/times-icon";
import {addPreferredElement, deletePreferredElement, getPreferredElements}
from "./DslPreferences";
import {DslFastCard} from "./DslFastCard";
import {DslCard} from "./DslCard";
-import {useDebounceValue} from 'usehooks-ts';
+import {useDebounceCallback, useDebounceValue} from 'usehooks-ts';
interface Props {
tabIndex?: string | number
@@ -58,7 +58,9 @@ export function DslSelector(props: Props) {
const {onDslSelect} = useRouteDesignerHook();
- const [filter, setFilter] = useDebounceValue('', 300)
+ const [filterShown, setFilterShown] = useState<string>('');
+ const [filter, setFilter] = useDebounceValue('', 300);
+
const [customOnly, setCustomOnly] = useState<boolean>(false);
const [elements, setElements] = useState<DslMetaModel[]>([]);
const [preferredElements, setPreferredElements] = useState<string[]>([]);
@@ -119,20 +121,22 @@ export function DslSelector(props: Props) {
return (
<TextInputGroup className="search">
<TextInput
- defaultValue={filter}
+ value={filterShown}
type="text"
autoComplete={"off"}
autoFocus={true}
- onChange={(_event, value) => setFilter(value)}
+ onChange={(_event, value) => {
+ setFilterShown(value);
+ setFilter(value);
+ }}
aria-label="text input example"
/>
- {/*<TextInputGroupMain className="text-field" type="text"
autoComplete={"off"}*/}
- {/* value={filter}*/}
- {/* autoFocus={true}*/}
- {/* onChange={(_, value) =>
setFilter(value)}/>*/}
<TextInputGroupUtilities>
- <Button variant="plain" onClick={_ => setFilter('')}>
- <TimesIcon/>
+ <Button variant="plain" onClick={_ => {
+ setFilterShown('');
+ setFilter('');
+ }}>
+ <TimesIcon aria-hidden={true}/>
</Button>
</TextInputGroupUtilities>
</TextInputGroup>
diff --git a/karavan-designer/src/designer/utils/CamelUi.tsx
b/karavan-designer/src/designer/utils/CamelUi.tsx
index fe6de7f2..15a3ba9f 100644
--- a/karavan-designer/src/designer/utils/CamelUi.tsx
+++ b/karavan-designer/src/designer/utils/CamelUi.tsx
@@ -36,7 +36,7 @@ import {
CassandraIcon,
ChatIcon,
CloudIcon,
- ClusterIcon,
+ ClusterIcon, CouchbaseIcon,
DatabaseIcon,
DebeziumIcon, DHIS2Icon, DirectIcon,
DocumentIcon,
@@ -63,7 +63,7 @@ import {
OpenstackIcon,
RedisIcon,
RefIcon,
- RpcIcon,
+ RpcIcon, SalesforceIcon,
SapIcon,
SchedulingIcon,
ScriptIcon,
@@ -72,7 +72,7 @@ import {
SpringIcon,
TerminalIcon,
TestingIcon,
- TransformationIcon,
+ TransformationIcon, TwilioIcon, TwitterIcon,
ValidationIcon, VertXIcon,
WebserviceIcon,
WorkflowIcon
@@ -591,6 +591,14 @@ export class CamelUi {
return DirectIcon();
} else if (title.startsWith("Vert.x")) {
return VertXIcon();
+ } else if (title.startsWith("Couchbase")) {
+ return CouchbaseIcon();
+ } else if (title.startsWith("Twilio")) {
+ return TwilioIcon();
+ } else if (title.startsWith("Twitter")) {
+ return TwitterIcon();
+ } else if (title.startsWith("Salesforce")) {
+ return SalesforceIcon();
} else if (title.startsWith("Slack")) {
return SlackIcon();
} else if (title === "Exec") {
diff --git a/karavan-space/src/designer/icons/ComponentIcons.tsx
b/karavan-space/src/designer/icons/ComponentIcons.tsx
index 5d13362a..c7f9c3ea 100644
--- a/karavan-space/src/designer/icons/ComponentIcons.tsx
+++ b/karavan-space/src/designer/icons/ComponentIcons.tsx
@@ -16,6 +16,35 @@
*/
import React from 'react';
+export function SalesforceIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ xmlnsXlink="http://www.w3.org/1999/xlink";
+ viewBox="0 0 273 191"
+ className="icon"
+ >
+ <defs>
+ <path id="a" d="M.06.5h272v190H.06z" />
+ </defs>
+ <g fillRule="evenodd">
+ <path
+ fill="#00A1E0"
+ d="M113 21.3c8.78-9.14 21-14.8 34.5-14.8 18 0 33.6 10
42 24.9a58 58 0 0 1 23.7-5.05c32.4 0 58.7 26.5 58.7 59.2s-26.3 59.2-58.7
59.2c-3.96 0-7.82-.398-11.6-1.15-7.35 13.1-21.4 22-37.4 22a42.7 42.7 0 0
1-18.8-4.32c-7.45 17.5-24.8 29.8-45 29.8-21.1 0-39-13.3-45.9-32a45.1 45.1 0 0
1-9.34.972c-25.1 0-45.4-20.6-45.4-45.9 0-17 9.14-31.8 22.7-39.8a52.6 52.6 0 0
1-4.35-21c0-29.2 23.7-52.8 52.9-52.8 17.1 0 32.4 8.15 42 20.8"
+ mask="url(#b)"
+ />
+ <path
+ fill="#FFFFFE"
+ d="M39.4 99.3c-.171.446.061.539.116.618.511.37
1.03.638 1.55.939 2.78 1.47 5.4 1.9 8.14 1.9 5.58 0 9.05-2.97
9.05-7.75v-.094c0-4.42-3.92-6.03-7.58-7.18l-.479-.155c-2.77-.898-5.16-1.68-5.16-3.5v-.093c0-1.56
1.4-2.71 3.56-2.71 2.4 0 5.26.799 7.09 1.81 0 0 .542.35.739-.173.107-.283
1.04-2.78
1.14-3.06.106-.293-.08-.514-.271-.628-2.1-1.28-5-2.15-8-2.15l-.557.002c-5.11
0-8.68 3.09-8.68 7.51v.095c0 4.66 3.94 6.18 7.62 7.23l.592.184c2.68.824 5 1.54
5 3.42v.094c0 1.73-1.5 [...]
+ />
+ <path
+ fill="#FFFFFE"
+ d="M162.201 67.548a13.258 13.258 0 0 0-1.559-.37
12.217 12.217 0 0 0-2.144-.166c-2.853 0-5.102.806-6.681 2.398-1.568 1.58-2.635
3.987-3.17 7.154l-.193 1.069h-3.581s-.437-.018-.529.459l-.588
3.28c-.041.314.094.51.514.508h3.486l-3.537 19.743c-.277 1.59-.594 2.898-.945
3.889-.346.978-.684 1.711-1.1 2.243-.403.515-.785.894-1.444
1.115-.544.183-1.17.267-1.856.267-.382
0-.89-.064-1.265-.139-.375-.074-.57-.158-.851-.276 0
0-.409-.156-.57.254-.131.335-1.06 2.89-1.17 3.206 [...]
+ />
+ </g>
+ </svg>
+ )
+}
export function SlackIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg"; width={127} height={127}
className="icon">
@@ -135,7 +164,6 @@ export function DHIS2Icon() {
<defs id="defs1">
<style id="style1">{".cls-1{fill:#0080d4}"}</style>
</defs>
- <title id="title1">{"dhis2-logo-rgb-positive"}</title>
<path
id="path1"
d="m189.415 56.477-82.74-53.66a19.75 19.75 0 0 0-20.33
0l-80.35 52.09a12 12 0 0 0-.25 20.63l80.54 54.94a19.39 19.39 0 0 0
20.38.25l82.75-53.65a11.87 11.87 0 0 0 0-20.59zm-91 61.45a4.29 4.29 0 0
1-3.49-.05l-77-52.49 76.71-49.78a4.76 4.76 0 0 1 3.74 0l78.91 51.15z"
@@ -254,7 +282,6 @@ export function FileIcon() {
xmlSpace="preserve"
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"document"}</title>
<path
d="m25.7 9.3-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0
1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24
28H8V4h8v6c0 1.1.9 2 2 2h6v16z"/>
<path d="M10 22h12v2H10zM10 16h12v2H10z"/>
@@ -379,7 +406,6 @@ export function MailIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"email"}</title>
<path
d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2
2 0 0 0-2-2Zm-2.2 2L16 14.78 6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28
8.91V24Z"/>
<path
@@ -399,7 +425,6 @@ export function IotIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"iot--platform"}</title>
<path
d="M30 19h-4v-4h-2v9H8V8h9V6h-4V2h-2v4H8a2.002 2.002 0 0 0-2
2v3H2v2h4v6H2v2h4v3a2.002 2.002 0 0 0 2 2h3v4h2v-4h6v4h2v-4h3a2.003 2.003 0 0 0
2-2v-3h4Z"/>
<path d="M21 21H11V11h10Zm-8-2h6v-6h-6ZM31 13h-2A10.012 10.012 0 0
0 19 3V1a12.013 12.013 0 0 1 12 12Z"/>
@@ -880,7 +905,6 @@ export function TerminalIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"terminal"}</title>
<path
d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0
2-2v-20a2 2 0 0 0-2-2Zm0 2v4H6v-4Zm-20 20v-14h20v14Z"/>
<path d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41
4.24-4.24-4.24-4.24-1.41 1.41z"/>
@@ -925,7 +949,6 @@ export function ScriptIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"script"}</title>
<path
d="m18.83 26 2.58-2.58L20 22l-4 4 4 4 1.42-1.41L18.83
26zM27.17 26l-2.58 2.58L26 30l4-4-4-4-1.42 1.41L27.17 26z"/>
<path
@@ -1111,7 +1134,6 @@ export function BlockchainIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"blockchain"}</title>
<path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z"/>
<path
d="M0 0h32v32H0z"
@@ -1130,7 +1152,6 @@ export function ChatIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"chat"}</title>
<path
d="M17.74 30 16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0
0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4
4v12a4 4 0 0 1-4 4h-4.84Z"/>
<path d="M8 10h16v2H8zM8 16h10v2H8z"/>
@@ -1164,7 +1185,6 @@ export function WebserviceIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"fog"}</title>
<path
d="M25.829 13.116A10.02 10.02 0 0 0 16 5v2a8.023 8.023 0 0 1
7.865 6.493l.259 1.346 1.349.245A5.502 5.502 0 0 1 24.508 26H16v2h8.508a7.502
7.502 0 0 0 1.32-14.884ZM8 24h6v2H8zM4 24h2v2H4zM6 20h8v2H6zM2 20h2v2H2zM8
16h6v2H8zM4 16h2v2H4zM10 12h4v2h-4zM6 12h2v2H6zM12 8h2v2h-2z"/>
<path
@@ -1270,7 +1290,6 @@ export function TransformationIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"data-share"}</title>
<path
d="M5 25v-9.172l-3.586 3.586L0 18l6-6 6 6-1.414 1.414L7
15.828V25h12v2H7a2.002 2.002 0 0 1-2-2ZM24 22h4a2.002 2.002 0 0 1 2 2v4a2.002
2.002 0 0 1-2 2h-4a2.002 2.002 0 0 1-2-2v-4a2.002 2.002 0 0 1 2-2Zm4
6v-4h-4.002L24 28ZM27 6v9.172l3.586-3.586L32 13l-6 6-6-6 1.414-1.414L25
15.172V6H13V4h12a2.002 2.002 0 0 1 2 2ZM2 6h6v2H2zM2 2h8v2H2z"/>
<path
@@ -1311,7 +1330,6 @@ export function ApiIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"api"}</title>
<path
d="M26 22a3.86 3.86 0 0 0-2 .57l-3.09-3.1a6 6 0 0 0 0-6.94L24
9.43a3.86 3.86 0 0 0 2 .57 4 4 0 1 0-4-4 3.86 3.86 0 0 0 .57 2l-3.1 3.09a6 6 0
0 0-6.94 0L9.43 8A3.86 3.86 0 0 0 10 6a4 4 0 1 0-4 4 3.86 3.86 0 0 0 2-.57l3.09
3.1a6 6 0 0 0 0 6.94L8 22.57A3.86 3.86 0 0 0 6 22a4 4 0 1 0 4 4 3.86 3.86 0 0
0-.57-2l3.1-3.09a6 6 0 0 0 6.94 0l3.1 3.09a3.86 3.86 0 0 0-.57 2 4 4 0 1 0
4-4Zm0-18a2 2 0 1 1-2 2 2 2 0 0 1 2-2ZM4 6a2 2 0 1 1 2 2 2 2 0 0 1-2-2Zm2 22a2
2 0 1 1 2-2 2 2 0 0 1-2 [...]
<path
@@ -1331,7 +1349,6 @@ export function KameletIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
>
- <title>{"application"}</title>
<path d="M16 18H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2
2v10a2 2 0 0 1-2 2ZM6 6v10h10V6ZM26 12v4h-4v-4h4m0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0
0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2ZM26 22v4h-4v-4h4m0-2h-4a2 2 0 0 0-2
2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2ZM16 22v4h-4v-4h4m0-2h-4a2 2
0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Z" />
<path
d="M0 0h32v32H0z"
@@ -1344,6 +1361,65 @@ export function KameletIcon() {
)
}
+export function CouchbaseIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ viewBox="0 0 256 256"
+ className="icon"
+ >
+ <path
+ fill="#ED2226"
+ d="M128 0C57.426 0 0 57.233 0 128c0 70.574 57.233 128 128 128
70.574 0 128-57.233 128-128S198.574 0 128 0Zm86.429 150.429c0 7.734-4.447
14.502-13.148 16.048-15.082 2.707-46.792 4.254-73.281 4.254-26.49
0-58.2-1.547-73.281-4.254-8.7-1.546-13.148-8.314-13.148-16.048v-49.885c0-7.734
5.994-14.888 13.148-16.049 4.447-.773 14.888-1.546 23.01-1.546 3.093 0 5.606
2.32 5.606 5.994v34.997l44.858-.967 44.858.967V88.943c0-3.674 2.514-5.994
5.608-5.994 8.12 0 18.562.773 23.009 1.546 7 [...]
+ />
+ </svg>
+ );
+}
+
+export function TwilioIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 0 256 256"
+ className="icon"
+ >
+ <path
+ fill="#F12E45"
+ d="M128 0c70.656 0 128 57.344 128 128s-57.344 128-128 128S0
198.656 0 128 57.344 0 128 0Zm0 33.792c-52.224 0-94.208 41.984-94.208
94.208S75.776 222.208 128 222.208s94.208-41.984 94.208-94.208S180.224 33.792
128 33.792Zm31.744 99.328c14.704 0 26.624 11.92 26.624 26.624 0 14.704-11.92
26.624-26.624 26.624-14.704 0-26.624-11.92-26.624-26.624 0-14.704 11.92-26.624
26.624-26.624Zm-63.488 0c14.704 0 26.624 11.92 26.624 26.624 0 14.704-11.92
26.624-26.624 26.624-14.704 0-26.624- [...]
+ />
+ </svg>
+ );
+}
+
+export function TwitterIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ viewBox="-0.25 -104.25 1109.5 1109.5"
+ className="icon"
+ >
+ <path
+ fill="#5da8dc"
+ stroke="#5da8dc"
+ strokeWidth={0.5}
+ d="M741 .2V0h52l19 3.8c12.667 2.467 24.167 5.7 34.5 9.7 10.334
4 20.334 8.667 30 14 9.667 5.333 18.434 10.767 26.301 16.3 7.8 5.467 14.8
11.267 21 17.4C929.933 67.4 939.5 69 952.5 66s27-7.167 42-12.5 29.834-11.333
44.5-18c14.667-6.667 23.601-10.9 26.801-12.7 3.133-1.866 4.8-2.866 5-3l.199-.3
1-.5 1-.5 1-.5 1-.5.2-.3.3-.2.301-.2.199-.3 1-.3 1-.2-.199 1.5-.301 1.5-.5
1.5-.5 1.5-.5 1-.5 1-.5 1.5c-.333 1-.666 2.333-1 4-.333 1.667-3.5 8.333-9.5
20S1051 73 1042 85s-17.066 21.06 [...]
+ />
+ <path
+ fill="#fff"
+ stroke="#fff"
+ strokeWidth={0.5}
+ d="M0 399V0h741v.2c0 .2-4.333.966-13 2.3-8.666 1.333-19.333
4.167-32 8.5-12.666 4.333-26.5 10.667-41.5 19s-28.333 17.833-40 28.5c-11.666
10.667-21.166 21-28.5 31-7.333 10-13.266 18.9-17.8 26.7-4.466 7.866-9.033
18.3-13.7 31.3-4.666 13-8.166 25.833-10.5 38.5-2.333 12.667-3.5 26.5-3.5
41.5s.667 26.667 2 35l2 12.5.301 1.5.199
1.5-7-.2c-4.666-.2-13.333-.966-26-2.3-12.666-1.333-31.5-4.333-56.5-9s-42.666-8.5-53-11.5c-10.333-3-28.333-9.333-54-19-25.666-9.667-49.666-20.5-72-32.5-
[...]
+ />
+ </svg>
+ );
+}
export function MonitoringIcon() {
return (
@@ -1412,7 +1488,7 @@ export function KubernetesIcon(className?: string) {
<svg
xmlns="http://www.w3.org/2000/svg";
viewBox="0 -10.44 722.846 722.846"
- className={className ? className + " icon" : "icon"}
+ className={className ? className + " icon" : "icon"}
width="32px" height="32px">
<path
fill="#326ce5"
@@ -1445,7 +1521,6 @@ export function DocumentIcon() {
xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
- <title>{"document--blank"}</title>
<path
d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2
2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.908.908 0 0 0-.3-.7ZM18
4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z"/>
<path
diff --git a/karavan-space/src/designer/selector/DslSelector.tsx
b/karavan-space/src/designer/selector/DslSelector.tsx
index 85837e12..23c1018d 100644
--- a/karavan-space/src/designer/selector/DslSelector.tsx
+++ b/karavan-space/src/designer/selector/DslSelector.tsx
@@ -40,7 +40,7 @@ import TimesIcon from
"@patternfly/react-icons/dist/esm/icons/times-icon";
import {addPreferredElement, deletePreferredElement, getPreferredElements}
from "./DslPreferences";
import {DslFastCard} from "./DslFastCard";
import {DslCard} from "./DslCard";
-import {useDebounceValue} from 'usehooks-ts';
+import {useDebounceCallback, useDebounceValue} from 'usehooks-ts';
interface Props {
tabIndex?: string | number
@@ -58,7 +58,9 @@ export function DslSelector(props: Props) {
const {onDslSelect} = useRouteDesignerHook();
- const [filter, setFilter] = useDebounceValue('', 300)
+ const [filterShown, setFilterShown] = useState<string>('');
+ const [filter, setFilter] = useDebounceValue('', 300);
+
const [customOnly, setCustomOnly] = useState<boolean>(false);
const [elements, setElements] = useState<DslMetaModel[]>([]);
const [preferredElements, setPreferredElements] = useState<string[]>([]);
@@ -119,20 +121,22 @@ export function DslSelector(props: Props) {
return (
<TextInputGroup className="search">
<TextInput
- defaultValue={filter}
+ value={filterShown}
type="text"
autoComplete={"off"}
autoFocus={true}
- onChange={(_event, value) => setFilter(value)}
+ onChange={(_event, value) => {
+ setFilterShown(value);
+ setFilter(value);
+ }}
aria-label="text input example"
/>
- {/*<TextInputGroupMain className="text-field" type="text"
autoComplete={"off"}*/}
- {/* value={filter}*/}
- {/* autoFocus={true}*/}
- {/* onChange={(_, value) =>
setFilter(value)}/>*/}
<TextInputGroupUtilities>
- <Button variant="plain" onClick={_ => setFilter('')}>
- <TimesIcon/>
+ <Button variant="plain" onClick={_ => {
+ setFilterShown('');
+ setFilter('');
+ }}>
+ <TimesIcon aria-hidden={true}/>
</Button>
</TextInputGroupUtilities>
</TextInputGroup>
diff --git a/karavan-space/src/designer/utils/CamelUi.tsx
b/karavan-space/src/designer/utils/CamelUi.tsx
index fe6de7f2..15a3ba9f 100644
--- a/karavan-space/src/designer/utils/CamelUi.tsx
+++ b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -36,7 +36,7 @@ import {
CassandraIcon,
ChatIcon,
CloudIcon,
- ClusterIcon,
+ ClusterIcon, CouchbaseIcon,
DatabaseIcon,
DebeziumIcon, DHIS2Icon, DirectIcon,
DocumentIcon,
@@ -63,7 +63,7 @@ import {
OpenstackIcon,
RedisIcon,
RefIcon,
- RpcIcon,
+ RpcIcon, SalesforceIcon,
SapIcon,
SchedulingIcon,
ScriptIcon,
@@ -72,7 +72,7 @@ import {
SpringIcon,
TerminalIcon,
TestingIcon,
- TransformationIcon,
+ TransformationIcon, TwilioIcon, TwitterIcon,
ValidationIcon, VertXIcon,
WebserviceIcon,
WorkflowIcon
@@ -591,6 +591,14 @@ export class CamelUi {
return DirectIcon();
} else if (title.startsWith("Vert.x")) {
return VertXIcon();
+ } else if (title.startsWith("Couchbase")) {
+ return CouchbaseIcon();
+ } else if (title.startsWith("Twilio")) {
+ return TwilioIcon();
+ } else if (title.startsWith("Twitter")) {
+ return TwitterIcon();
+ } else if (title.startsWith("Salesforce")) {
+ return SalesforceIcon();
} else if (title.startsWith("Slack")) {
return SlackIcon();
} else if (title === "Exec") {
