You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2023/08/25 21:54:03 UTC

[camel-karavan] branch feature-836 updated (4f8a93e1 -> a0300a68)

This is an automated email from the ASF dual-hosted git repository.

marat pushed a change to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git


    from 4f8a93e1 Fixed issue with Expressions for #836
     new c1c184b5 Fixed issue with Select Steps #836
     new 1b230441 Fixed issue with RouteDesigner top/left #836
     new a0300a68 Fix #862

The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 karavan-core/src/core/api/CamelDefinitionYaml.ts   |   2 +-
 karavan-core/src/core/api/CamelDisplayUtil.ts      |   8 +-
 .../src/core/model/IntegrationDefinition.ts        |   2 +-
 karavan-designer/public/example/demo.camel.yaml    | 130 ++++++------
 karavan-designer/src/designer/KaravanDesigner.tsx  |  33 ++-
 karavan-designer/src/designer/KaravanStore.ts      |   8 +-
 karavan-designer/src/designer/karavan.css          |  37 +++-
 karavan-designer/src/designer/route/DslElement.tsx |  64 +++---
 .../src/designer/route/RouteDesigner.tsx           |   3 +-
 .../designer/route/property/DslPropertyField.tsx   |  17 +-
 .../designer/route/property/ExpressionField.tsx    |   1 -
 .../src/designer/route/useRouteDesignerHook.tsx    |   6 +-
 .../src/designer/utils/KaravanIcons.tsx            | 229 ++++++++++++++-------
 13 files changed, 339 insertions(+), 201 deletions(-)


[camel-karavan] 01/03: Fixed issue with Select Steps #836

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit c1c184b541b829f642c09cdd1c5b9f11b7ecbe6e
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Aug 24 19:57:53 2023 -0400

    Fixed issue with Select Steps #836
---
 karavan-designer/public/example/demo.camel.yaml    | 130 ++++++++++-----------
 karavan-designer/src/designer/KaravanStore.ts      |   6 +
 karavan-designer/src/designer/route/DslElement.tsx |  12 +-
 3 files changed, 75 insertions(+), 73 deletions(-)

diff --git a/karavan-designer/public/example/demo.camel.yaml b/karavan-designer/public/example/demo.camel.yaml
index 46692463..bfd20666 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -7,68 +7,68 @@
         - filter:
               expression: {}
               id: filter-064f
-#        - choice:
-#            when:
-#              - expression: {}
-#                id: when-064f
-#                steps:
-#                  - multicast:
-#                      id: multicast-38cea
-#                      steps:
-#                        - bean:
-#                            id: bean-3b8e
-#                        - log:
-#                            message: ${body}
-#                            id: log-546f
-#                        - loop:
-#                            expression: {}
-#                            id: loop-4635
-#                            steps:
-#                              - convertBodyTo:
-#                                  id: convertBodyTo-1cae
-#            otherwise:
-#              id: otherwise-0b09
-#              steps:
-#                - filter:
-#                    expression: {}
-#                    id: filter-a02b
-#            id: choice-c53c
-#        - doTry:
-#            id: doTry-8fd5
-#            doCatch:
-#              - id: doCatch-1071
-#              - id: doCatch-c38e
-#            steps:
-#              - routingSlip:
-#                  expression: {}
-#                  id: routingSlip-a85a
-#- route:
-#    id: route-178a
-#    from:
-#      uri: kamelet:aws-cloudtrail-source
-#      id: from-3e7d
-#      steps:
-#        - multicast:
-#            id: multicast-eef7
-#            steps:
-#              - bean:
-#                  id: bean-a5ef
-#              - aggregate:
-#                  id: aggregate-f5d8
-#              - aggregate:
-#                  id: aggregate-b9e7
-#              - aggregate:
-#                  id: aggregate-5eb8
-#              - aggregate:
-#                  id: aggregate-c57e
-#              - aggregate:
-#                  id: aggregate-1cd4
-#              - bean:
-#                  id: bean-72a1
-#              - choice:
-#                  when:
-#                    - expression: {}
-#                      id: when-a56b
-#                  otherwise:
-#                    id: otherwise-9f31
-#                  id: choice-1905
+        - choice:
+            when:
+              - expression: {}
+                id: when-064f
+                steps:
+                  - multicast:
+                      id: multicast-38cea
+                      steps:
+                        - bean:
+                            id: bean-3b8e
+                        - log:
+                            message: ${body}
+                            id: log-546f
+                        - loop:
+                            expression: {}
+                            id: loop-4635
+                            steps:
+                              - convertBodyTo:
+                                  id: convertBodyTo-1cae
+            otherwise:
+              id: otherwise-0b09
+              steps:
+                - filter:
+                    expression: {}
+                    id: filter-a02b
+            id: choice-c53c
+        - doTry:
+            id: doTry-8fd5
+            doCatch:
+              - id: doCatch-1071
+              - id: doCatch-c38e
+            steps:
+              - routingSlip:
+                  expression: {}
+                  id: routingSlip-a85a
+- route:
+    id: route-178a
+    from:
+      uri: kamelet:aws-cloudtrail-source
+      id: from-3e7d
+      steps:
+        - multicast:
+            id: multicast-eef7
+            steps:
+              - bean:
+                  id: bean-a5ef
+              - aggregate:
+                  id: aggregate-f5d8
+              - aggregate:
+                  id: aggregate-b9e7
+              - aggregate:
+                  id: aggregate-5eb8
+              - aggregate:
+                  id: aggregate-c57e
+              - aggregate:
+                  id: aggregate-1cd4
+              - bean:
+                  id: bean-72a1
+              - choice:
+                  when:
+                    - expression: {}
+                      id: when-a56b
+                  otherwise:
+                    id: otherwise-9f31
+                  id: choice-1905
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/KaravanStore.ts
index 3bc87681..30d6ee85 100644
--- a/karavan-designer/src/designer/KaravanStore.ts
+++ b/karavan-designer/src/designer/KaravanStore.ts
@@ -143,6 +143,8 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set)
 interface DesignerState {
     dark: boolean;
     setDark: (dark: boolean) => void;
+    showLogDSL: boolean;
+    setShowLogDSL: (showLogDSL: boolean) => void;
     shiftKeyPressed: boolean;
     setShiftKeyPressed: (shiftKeyPressed: boolean) => void;
     showDeleteConfirmation: boolean;
@@ -168,6 +170,7 @@ interface DesignerState {
 
 export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({
     dark: false,
+    showLogDSL: true,
     shiftKeyPressed: false,
     showDeleteConfirmation: false,
     showMoveConfirmation: false,
@@ -178,6 +181,9 @@ export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({
     setDark: (dark: boolean) => {
         set({dark: dark})
     },
+    setShowLogDSL: (showLogDSL: boolean) => {
+        set({showLogDSL: showLogDSL})
+    },
     setShiftKeyPressed: (shiftKeyPressed: boolean) => {
         set({shiftKeyPressed: shiftKeyPressed})
     },
diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx
index 383700b0..b69e4f9a 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -45,16 +45,12 @@ interface Props {
 export const DslElement = (props: Props) => {
 
     const headerRef = React.useRef<HTMLDivElement>(null);
-    const {deleteElement, selectElement, moveElement, onShowDeleteConfirmation, openSelector} = useRouteDesignerHook();
+    const {selectElement, moveElement, onShowDeleteConfirmation, openSelector} = useRouteDesignerHook();
 
-    const [integration, setIntegration] = useIntegrationStore((s) => [s.integration, s.setIntegration], shallow)
+    const [integration] = useIntegrationStore((s) => [s.integration, s.setIntegration], shallow)
 
-    const [showDeleteConfirmation, propertyOnly, deleteMessage, selectedUuids, clipboardSteps, selectedStep, showMoveConfirmation,
-        setShowDeleteConfirmation, setPropertyOnly, setDeleteMessage, setSelectedUuids, setClipboardSteps, setPosition, setShowMoveConfirmation,
-        width, height, top, left] = useDesignerStore((s) =>
-        [s.showDeleteConfirmation, s.propertyOnly, s.deleteMessage, s.selectedUuids, s.clipboardSteps, s.selectedStep, s.showMoveConfirmation,
-            s.setShowDeleteConfirmation, s.setPropertyOnly, s.setDeleteMessage, s.setSelectedUuids, s.setClipboardSteps, s.setPosition, s.setShowMoveConfirmation,
-            s.width, s.height, s.top, s.left], shallow)
+    const [selectedUuids, selectedStep, showMoveConfirmation, setShowMoveConfirmation] = useDesignerStore((s) =>
+        [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation,], shallow)
     const [isDragging, setIsDragging] = useState<boolean>(false);
 
     const [isDraggedOver, setIsDraggedOver] = useState<boolean>(false);


[camel-karavan] 02/03: Fixed issue with RouteDesigner top/left #836

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit 1b230441e76cf142e0e48ff3300c6c8d81ece4e6
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Aug 24 20:06:17 2023 -0400

    Fixed issue with RouteDesigner top/left #836
---
 karavan-designer/src/designer/route/RouteDesigner.tsx             | 3 ++-
 karavan-designer/src/designer/route/property/DslPropertyField.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 8614418c..97e8257a 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -49,7 +49,8 @@ export const RouteDesigner = () => {
     const {openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp, unselectElement} = useRouteDesignerHook();
 
     const [integration] = useIntegrationStore((state) => [state.integration], shallow)
-    const [showDeleteConfirmation , setPosition,] = useDesignerStore((s) => [s.showDeleteConfirmation, s.setPosition], shallow)
+    const [showDeleteConfirmation, setPosition, width, height, top, left] = useDesignerStore((s) =>
+        [s.showDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left], shallow)
 
     const [showSelector] = useSelectorStore((s) => [s.showSelector], shallow)
 
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index 7bfe7f9b..44b32c5f 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -749,7 +749,7 @@ export const DslPropertyField = (props: Props) => {
                 {property.enumVals
                     && getSelect(property, value)}
                 {isKamelet && property.name === 'parameters' && getKameletParameters()}
-                {!isKamelet && property.name === 'parameters' && getComponentParameters(property)}
+                {/*{!isKamelet && property.name === 'parameters' && getComponentParameters(property)}*/}
             </FormGroup>
             {getInfrastructureSelectorModal()}
         </div>


[camel-karavan] 03/03: Fix #862

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit a0300a6812cfcabf70093ca2fe17f37bf2873105
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Fri Aug 25 17:53:45 2023 -0400

    Fix #862
---
 karavan-core/src/core/api/CamelDefinitionYaml.ts   |   2 +-
 karavan-core/src/core/api/CamelDisplayUtil.ts      |   8 +-
 .../src/core/model/IntegrationDefinition.ts        |   2 +-
 karavan-designer/src/designer/KaravanDesigner.tsx  |  33 ++-
 karavan-designer/src/designer/KaravanStore.ts      |  12 +-
 karavan-designer/src/designer/karavan.css          |  37 +++-
 karavan-designer/src/designer/route/DslElement.tsx |  56 +++--
 .../src/designer/route/RouteDesigner.tsx           |   4 +-
 .../designer/route/property/DslPropertyField.tsx   |  19 +-
 .../designer/route/property/ExpressionField.tsx    |   1 -
 .../src/designer/route/useRouteDesignerHook.tsx    |   6 +-
 .../src/designer/utils/KaravanIcons.tsx            | 229 ++++++++++++++-------
 12 files changed, 272 insertions(+), 137 deletions(-)

diff --git a/karavan-core/src/core/api/CamelDefinitionYaml.ts b/karavan-core/src/core/api/CamelDefinitionYaml.ts
index 073b1a5f..ba086ef7 100644
--- a/karavan-core/src/core/api/CamelDefinitionYaml.ts
+++ b/karavan-core/src/core/api/CamelDefinitionYaml.ts
@@ -68,7 +68,7 @@ export class CamelDefinitionYaml {
         }
 
         delete object.uuid;
-        delete object.show;
+        delete object.showChildren;
 
         for (const [key, value] of Object.entries(object) as [string, any][]) {
             if (value instanceof CamelElement || (typeof value === 'object' && value?.dslName)) {
diff --git a/karavan-core/src/core/api/CamelDisplayUtil.ts b/karavan-core/src/core/api/CamelDisplayUtil.ts
index 887099ef..eee33ccb 100644
--- a/karavan-core/src/core/api/CamelDisplayUtil.ts
+++ b/karavan-core/src/core/api/CamelDisplayUtil.ts
@@ -75,13 +75,9 @@ export class CamelDisplayUtil {
         return clone;
     };
 
-    static setElementVisibility = (
-        step: CamelElement,
-        showChildren: boolean,
-        expandedUuids: string[],
-    ): CamelElement => {
+    static setElementVisibility = (step: CamelElement, showChildren: boolean, expandedUuids: string[]): CamelElement => {
         const result = CamelDefinitionApi.createStep(step.dslName, step);
-        result.show = showChildren;
+        result.showChildren = showChildren;
         if (result.dslName === 'StepDefinition') {
             showChildren = expandedUuids.includes(result.uuid);
         }
diff --git a/karavan-core/src/core/model/IntegrationDefinition.ts b/karavan-core/src/core/model/IntegrationDefinition.ts
index 1d2519b3..3af3c6c5 100644
--- a/karavan-core/src/core/model/IntegrationDefinition.ts
+++ b/karavan-core/src/core/model/IntegrationDefinition.ts
@@ -52,7 +52,7 @@ export class Integration {
 export class CamelElement {
     uuid: string = '';
     dslName: string = '';
-    show: boolean = true;
+    showChildren: boolean = true;
 
     constructor(dslName: string) {
         this.uuid = uuidv4();
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index bb8a8538..f9f7d731 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -17,7 +17,19 @@
 import React, {useEffect, useState} from 'react';
 import {
     Badge,
-    PageSection, PageSectionVariants, Tab, Tabs, TabTitleIcon, TabTitleText, Tooltip,
+    Button,
+    Checkbox,
+    PageSection,
+    PageSectionVariants,
+    Switch,
+    Tab,
+    Tabs,
+    TabTitleIcon,
+    TabTitleText, ToggleGroup, ToggleGroupItem,
+    Toolbar,
+    ToolbarContent,
+    ToolbarItem,
+    Tooltip,
 } from '@patternfly/react-core';
 import './karavan.css';
 import {RouteDesigner} from "./route/RouteDesigner";
@@ -30,6 +42,7 @@ import {RestDesigner} from "./rest/RestDesigner";
 import {useDesignerStore, useIntegrationStore} from "./KaravanStore";
 import {shallow} from "zustand/shallow";
 import {getDesignerIcon} from "./utils/KaravanIcons";
+import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
 
 interface Props {
     onSave: (filename: string, yaml: string, propertyOnly: boolean) => void
@@ -38,6 +51,7 @@ interface Props {
     filename: string
     yaml: string
     dark: boolean
+    hideLogDSL?: boolean
     tab?: string
 }
 
@@ -57,12 +71,14 @@ export class KaravanInstance {
 export const KaravanDesigner = (props: Props) => {
 
     const [tab, setTab] = useState<string>('routes');
-    const [propertyOnly, setDark] = useDesignerStore((state) => [state.propertyOnly, state.setDark], shallow )
-    const [integration, setIntegration] = useIntegrationStore((state) => [state.integration, state.setIntegration], shallow )
+    const [propertyOnly, setDark, hideLogDSL, setHideLogDSL] = useDesignerStore((s) =>
+            [s.propertyOnly, s.setDark, s.hideLogDSL, s.setHideLogDSL], shallow )
+    const [integration, setIntegration] = useIntegrationStore((s) => [s.integration, s.setIntegration], shallow )
 
     useEffect(() => {
         setIntegration(makeIntegration(props.yaml, props.filename));
         setDark(props.dark);
+        setHideLogDSL(props.hideLogDSL === true);
     }, []);
 
     function makeIntegration  (yaml: string, filename: string): Integration {
@@ -111,12 +127,21 @@ export const KaravanDesigner = (props: Props) => {
 
     return (
         <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light} className="page" isFilled padding={{default: 'noPadding'}}>
-            <div>
+            <div className={"main-tabs-wrapper"}>
                 <Tabs className="main-tabs" activeKey={tab} onSelect={(event, tabIndex) => setTab(tabIndex.toString())} style={{width: "100%"}}>
                     <Tab eventKey='routes' title={getTab("Routes", "Integration flows", "routes")}></Tab>
                     <Tab eventKey='rest' title={getTab("REST", "REST services", "rest")}></Tab>
                     <Tab eventKey='beans' title={getTab("Beans", "Beans Configuration", "beans")}></Tab>
                 </Tabs>
+                            <Switch
+                                label={"Hide Log"}
+                                isReversed
+                                isChecked={hideLogDSL}
+                                onChange={(_, checked) => {setHideLogDSL(checked)}}
+                                id="hideLogDSL"
+                                name="hideLogDSL"
+                                className={"hide-log"}
+                            />
             </div>
             {tab === 'routes' && <RouteDesigner
                 // integration={integration}
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/KaravanStore.ts
index 30d6ee85..4ec36a30 100644
--- a/karavan-designer/src/designer/KaravanStore.ts
+++ b/karavan-designer/src/designer/KaravanStore.ts
@@ -121,7 +121,7 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set)
     },
     deleteStep: (uuid: string) => {
         set((state: ConnectionsState) => {
-            state.steps.clear();
+            // state.steps.clear();
             Array.from(state.steps.entries())
                 .filter(value => value[1]?.parent?.uuid !== uuid)
                 .forEach(value => state.steps.set(value[0], value[1]));
@@ -143,8 +143,8 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set)
 interface DesignerState {
     dark: boolean;
     setDark: (dark: boolean) => void;
-    showLogDSL: boolean;
-    setShowLogDSL: (showLogDSL: boolean) => void;
+    hideLogDSL: boolean;
+    setHideLogDSL: (hideLogDSL: boolean) => void;
     shiftKeyPressed: boolean;
     setShiftKeyPressed: (shiftKeyPressed: boolean) => void;
     showDeleteConfirmation: boolean;
@@ -170,7 +170,7 @@ interface DesignerState {
 
 export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({
     dark: false,
-    showLogDSL: true,
+    hideLogDSL: false,
     shiftKeyPressed: false,
     showDeleteConfirmation: false,
     showMoveConfirmation: false,
@@ -181,8 +181,8 @@ export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({
     setDark: (dark: boolean) => {
         set({dark: dark})
     },
-    setShowLogDSL: (showLogDSL: boolean) => {
-        set({showLogDSL: showLogDSL})
+    setHideLogDSL: (hideLogDSL: boolean) => {
+        set({hideLogDSL: hideLogDSL})
     },
     setShiftKeyPressed: (shiftKeyPressed: boolean) => {
         set({shiftKeyPressed: shiftKeyPressed})
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index 71192fc2..487f3020 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -250,12 +250,31 @@
     height: 24px;
 }
 
-.karavan .main-tabs .top-menu-item {
+.karavan .designer-page .main-tabs-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.karavan .designer-page .main-tabs-wrapper::before {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: solid;
+    border-width: 0 0 var(--pf-v5-global--BorderWidth--sm) 0;
+    border-bottom-color: var(--pf-v5-global--BorderColor--100);
+}
+
+.karavan .designer-page .main-tabs-wrapper .main-tabs .top-menu-item {
     display: flex;
     flex-direction: row;
 }
 
-.karavan .main-tabs .top-menu-item .count {
+.karavan .designer-page .main-tabs-wrapper .main-tabs .top-menu-item .count {
     background: var(--pf-v5-global--active-color--100);
     color: white;
     height: fit-content;
@@ -264,12 +283,12 @@
     min-width: 0px;
 }
 
-.karavan .main-tabs .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon {
+.karavan .designer-page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon {
     height: 24px;
     margin-right: 0;
 }
 
-.karavan .main-tabs .pf-v5-c-tabs__item-text {
+.karavan .designer-page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__item-text {
     font-size: 14px;
     font-weight: bold;
     margin-top: auto;
@@ -277,6 +296,16 @@
     margin-right: 6px;
 }
 
+.karavan .designer-page .page .main-tabs-wrapper .hide-log {
+    white-space: nowrap;
+    margin-right: 16px;
+}
+
+.karavan .designer-page .page .main-tabs-wrapper .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
+         outline: transparent;
+         outline-offset: 0;
+}
+
 /*Properties*/
 .karavan .properties {
     border: 1px solid #eee;
diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx
index b69e4f9a..e187b68f 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -49,8 +49,9 @@ export const DslElement = (props: Props) => {
 
     const [integration] = useIntegrationStore((s) => [s.integration, s.setIntegration], shallow)
 
-    const [selectedUuids, selectedStep, showMoveConfirmation, setShowMoveConfirmation] = useDesignerStore((s) =>
-        [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation,], shallow)
+    const [selectedUuids, selectedStep, showMoveConfirmation, setShowMoveConfirmation, hideLogDSL] =
+        useDesignerStore((s) =>
+        [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.hideLogDSL], shallow)
     const [isDragging, setIsDragging] = useState<boolean>(false);
 
     const [isDraggedOver, setIsDraggedOver] = useState<boolean>(false);
@@ -105,10 +106,14 @@ export const DslElement = (props: Props) => {
         setMoveElements([undefined, undefined]);
     }
 
-    function isSelected(): boolean {
+    function isElementSelected(): boolean {
         return selectedUuids.includes(props.step.uuid);
     }
 
+    function isElementHidden(): boolean {
+        return props.step.dslName === 'LogDefinition' && hideLogDSL;
+    }
+
     function hasBorder(): boolean {
         return (props.step?.hasSteps() && !['FromDefinition'].includes(props.step.dslName))
             || ['RouteConfigurationDefinition',
@@ -184,22 +189,28 @@ export const DslElement = (props: Props) => {
     function getHeaderStyle() {
         const style: CSSProperties = {
             width: isWide() ? "100%" : "",
-            fontWeight: isSelected() ? "bold" : "normal",
+            fontWeight: isElementSelected() ? "bold" : "normal",
         };
         return style;
     }
 
-    function sendPosition(el: HTMLDivElement | null, isSelected: boolean) {
-        if (el) {
-            const header = Array.from(el.childNodes.values()).filter((n: any) => n.classList.contains("header"))[0];
-            if (header) {
-                const headerIcon: any = Array.from(header.childNodes.values()).filter((n: any) => n.classList.contains("header-icon"))[0];
-                const headerRect = headerIcon.getBoundingClientRect();
-                const rect = el.getBoundingClientRect();
-                if (props.step.show) {
-                    EventBus.sendPosition("add", props.step, props.parent, rect, headerRect, props.position, props.inSteps, isSelected);
-                } else {
-                    EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0);
+    function sendPosition(el: HTMLDivElement | null) {
+        const isSelected = isElementSelected();
+        const isHidden = isElementHidden();
+        if (isHidden) {
+            EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0);
+        } else {
+            if (el) {
+                const header = Array.from(el.childNodes.values()).filter((n: any) => n.classList.contains("header"))[0];
+                if (header) {
+                    const headerIcon: any = Array.from(header.childNodes.values()).filter((n: any) => n.classList.contains("header-icon"))[0];
+                    const headerRect = headerIcon.getBoundingClientRect();
+                    const rect = el.getBoundingClientRect();
+                    if (props.step.showChildren) {
+                        EventBus.sendPosition("add", props.step, props.parent, rect, headerRect, props.position, props.inSteps, isSelected);
+                    } else {
+                        EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0);
+                    }
                 }
             }
         }
@@ -225,12 +236,12 @@ export const DslElement = (props: Props) => {
             !['FromDefinition', 'RouteConfigurationDefinition', 'RouteDefinition', 'CatchDefinition', 'FinallyDefinition', 'WhenDefinition', 'OtherwiseDefinition'].includes(step.dslName)
             && !inRouteConfiguration;
         const headerClass = ['RouteConfigurationDefinition', 'RouteDefinition'].includes(step.dslName) ? "header-route" : "header"
-        const headerClasses = isSelected() ? headerClass + " selected" : headerClass;
+        const headerClasses = isElementSelected() ? headerClass + " selected" : headerClass;
         return (
             <div className={headerClasses} style={getHeaderStyle()} ref={headerRef}>
                 {!['RouteConfigurationDefinition', 'RouteDefinition'].includes(props.step.dslName) &&
                     <div
-                        ref={el => sendPosition(el, isSelected())}
+                        ref={el => sendPosition(el)}
                         className={"header-icon"}
                         style={isWide() ? {width: ""} : {}}>
                         {CamelUi.getIconForElement(step)}
@@ -252,7 +263,9 @@ export const DslElement = (props: Props) => {
         const title = (step as any).description ? (step as any).description : CamelUi.getElementTitle(props.step);
         let className = hasWideChildrenElement() ? "text text-right" : "text text-bottom";
         if (!checkRequired[0]) className = className + " header-text-required";
-        if (checkRequired[0]) return <Text className={className}>{title}</Text>
+        if (checkRequired[0]) {
+            return <Text className={className}>{title}</Text>
+        }
         else return (
             <Tooltip position={"right"} className="tooltip-required-field"
                      content={checkRequired[1].map((text, i) => (<div key={i}>{text}</div>))}>
@@ -426,14 +439,15 @@ export const DslElement = (props: Props) => {
     }
 
     const element: CamelElement = props.step;
-    const className = "step-element" + (isSelected() ? " step-element-selected" : "") + (!props.step.show ? " hidden-step" : "");
+    const className = "step-element" + (isElementSelected() ? " step-element-selected" : "") + (!props.step.showChildren ? " hidden-step" : "");
     return (
         <div key={"root" + element.uuid}
              className={className}
-             ref={el => sendPosition(el, isSelected())}
+             ref={el => sendPosition(el)}
              style={{
+                 display: isElementHidden() ? "none" : "flex",
                  borderStyle: hasBorder() ? "dotted" : "none",
-                 borderColor: isSelected() ? "var(--step-border-color-selected)" : "var(--step-border-color)",
+                 borderColor: isElementSelected() ? "var(--step-border-color-selected)" : "var(--step-border-color)",
                  marginTop: isInStepWithChildren() ? "16px" : "8px",
                  zIndex: element.dslName === 'ToDefinition' ? 20 : 10,
                  boxShadow: isDraggedOver ? "0px 0px 1px 2px var(--step-border-color-selected)" : "none",
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 97e8257a..77487a4d 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -49,8 +49,8 @@ export const RouteDesigner = () => {
     const {openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp, unselectElement} = useRouteDesignerHook();
 
     const [integration] = useIntegrationStore((state) => [state.integration], shallow)
-    const [showDeleteConfirmation, setPosition, width, height, top, left] = useDesignerStore((s) =>
-        [s.showDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left], shallow)
+    const [showDeleteConfirmation, setPosition, width, height, top, left, hideLogDSL] = useDesignerStore((s) =>
+        [s.showDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left, s.hideLogDSL], shallow)
 
     const [showSelector] = useSelectorStore((s) => [s.showSelector], shallow)
 
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index 44b32c5f..8095fdc6 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -72,7 +72,6 @@ import {usePropertiesHook} from "../usePropertiesHook";
 
 interface Props {
     property: PropertyMeta,
-    element?: CamelElement,
     value: any,
     expressionTextChanged?: (fieldId: string, value: string | number | boolean | any) => void,
     hideLabel?: boolean,
@@ -82,7 +81,7 @@ interface Props {
 export const DslPropertyField = (props: Props) => {
 
     const [integration] = useIntegrationStore((state) => [state.integration], shallow)
-    const [dark] = useDesignerStore((s) => [s.dark], shallow)
+    const [dark, selectedStep] = useDesignerStore((s) => [s.dark, s.selectedStep], shallow)
     const {onPropertyChange, onParametersChange} = usePropertiesHook();
 
     const [isShowAdvanced, setIsShowAdvanced] = useState<Map<string, boolean>>(new Map<string, boolean>());
@@ -117,7 +116,7 @@ export const DslPropertyField = (props: Props) => {
 
     function propertyChanged (fieldId: string, value: string | number | boolean | any, newRoute?: RouteToCreate ) {
         if (fieldId === 'id' && CamelDefinitionApiExt.hasElementWithId(integration, value)) {
-            value = props.element;
+            value = selectedStep;
         }
         onPropertyChange(fieldId, value, newRoute);
         clearSelection(fieldId);
@@ -172,7 +171,7 @@ export const DslPropertyField = (props: Props) => {
     }
 
     function isUriReadOnly (property: PropertyMeta): boolean {
-        const dslName: string = props.element?.dslName || '';
+        const dslName: string = selectedStep?.dslName || '';
         return property.name === 'uri' && !['ToDynamicDefinition', 'WireTapDefinition'].includes(dslName)
     }
 
@@ -599,7 +598,7 @@ export const DslPropertyField = (props: Props) => {
     }
 
     function getKameletParameters () {
-        const element = props.element;
+        const element = selectedStep;
         const requiredParameters = CamelUtil.getKameletRequiredParameters(element);
         return (
             <div className="parameters">
@@ -616,7 +615,7 @@ export const DslPropertyField = (props: Props) => {
     }
 
     function getMainComponentParameters (properties: ComponentProperty[] ) {
-        const element = props.element;
+        const element = selectedStep;
         return (
             <div className="parameters">
                 {properties.map(kp => {
@@ -635,7 +634,7 @@ export const DslPropertyField = (props: Props) => {
     }
 
     function getExpandableComponentParameters (properties: ComponentProperty[], label: string ) {
-        const element = props.element;
+        const element = selectedStep;
         return (
             <ExpandableSection
                 toggleText={label}
@@ -691,7 +690,7 @@ export const DslPropertyField = (props: Props) => {
     }
 
     function getComponentParameters(property: PropertyMeta) {
-        const element = props.element;
+        const element = selectedStep;
         const properties = CamelUtil.getComponentProperties(element);
         const propertiesMain = properties.filter(p => !p.label.includes("advanced") && !p.label.includes("security") && !p.label.includes("scheduler"));
         const propertiesAdvanced = properties.filter(p => p.label.includes("advanced"));
@@ -710,7 +709,7 @@ export const DslPropertyField = (props: Props) => {
         )
     }
 
-    const element = props.element;
+    const element = selectedStep;
     const isKamelet = CamelUtil.isKameletComponent(element);
     const property: PropertyMeta = props.property;
     const value = props.value;
@@ -749,7 +748,7 @@ export const DslPropertyField = (props: Props) => {
                 {property.enumVals
                     && getSelect(property, value)}
                 {isKamelet && property.name === 'parameters' && getKameletParameters()}
-                {/*{!isKamelet && property.name === 'parameters' && getComponentParameters(property)}*/}
+                {!isKamelet && property.name === 'parameters' && getComponentParameters(property)}
             </FormGroup>
             {getInfrastructureSelectorModal()}
         </div>
diff --git a/karavan-designer/src/designer/route/property/ExpressionField.tsx b/karavan-designer/src/designer/route/property/ExpressionField.tsx
index 9a341d41..c396cb10 100644
--- a/karavan-designer/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -143,7 +143,6 @@ export const ExpressionField = (props: Props) => {
                 {value && getProps().map((property: PropertyMeta) =>
                     <DslPropertyField key={property.name + props.value?.uuid}
                                       property={property}
-                                      element={value}
                                       value={value ? (value as any)[property.name] : undefined}
                                       dslLanguage={dslLanguage}
                                       expressionTextChanged={expressionTextChanged}/>
diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
index 61208dfa..04e83ee2 100644
--- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
@@ -40,10 +40,10 @@ export const useRouteDesignerHook = () => {
     const [integration, setIntegration] = useIntegrationStore((state) => [state.integration, state.setIntegration], shallow)
     const [selectedUuids,clipboardSteps,shiftKeyPressed,
         setShowDeleteConfirmation,setPropertyOnly, setDeleteMessage, setSelectedStep, setSelectedUuids, setClipboardSteps, setShiftKeyPressed,
-        width, height, dark] = useDesignerStore((s) =>
+        width, height, dark, hideLogDSL] = useDesignerStore((s) =>
         [s.selectedUuids,s.clipboardSteps, s.shiftKeyPressed,
             s.setShowDeleteConfirmation,s.setPropertyOnly,s.setDeleteMessage, s.setSelectedStep, s.setSelectedUuids, s.setClipboardSteps, s.setShiftKeyPressed,
-            s.width, s.height, s.dark], shallow)
+            s.width, s.height, s.dark, s.hideLogDSL], shallow)
     const [setParentId, setShowSelector, setSelectorTabIndex, setParentDsl, setShowSteps, setSelectedPosition] = useSelectorStore((s) =>
         [s.setParentId, s.setShowSelector, s.setSelectorTabIndex, s.setParentDsl, s.setShowSteps, s.setSelectedPosition], shallow)
 
@@ -108,7 +108,7 @@ export const useRouteDesignerHook = () => {
         }
         const add = shiftKeyPressed && !uuids.includes(element.uuid);
         const remove = shiftKeyPressed && uuids.includes(element.uuid);
-        // TODO: do we need to change Intgration just for select????
+        // TODO: do we need to change Integration just for select????
         const i = CamelDisplayUtil.setIntegrationVisibility(integration, element.uuid);
 
         if (remove) {
diff --git a/karavan-designer/src/designer/utils/KaravanIcons.tsx b/karavan-designer/src/designer/utils/KaravanIcons.tsx
index 23cc7a69..17560ff4 100644
--- a/karavan-designer/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-designer/src/designer/utils/KaravanIcons.tsx
@@ -497,23 +497,23 @@ export function AggregateIcon() {
 
 export function ToIcon() {
     return (
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={800}
-                height={800}
-                viewBox="0 0 32 32"
-                className="icon"
-            >
-                <title>{"plug"}</title>
-                <path d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7H2v2h6.07A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 0 1 0-12h6v12z" />
-                <path
-                    d="M0 0h32v32H0z"
-                    data-name="&lt;Transparent Rectangle&gt;"
-                    style={{
-                        fill: "none",
-                    }}
-                />
-            </svg>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={800}
+            height={800}
+            viewBox="0 0 32 32"
+            className="icon"
+        >
+            <path
+                d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/>
+            <path
+                d="M0 0h32v32H0z"
+                data-name="&lt;Transparent Rectangle&gt;"
+                style={{
+                    fill: "none",
+                }}
+            />
+        </svg>
     );
 }
 
@@ -816,6 +816,7 @@ export function MessagingIcon() {
         </svg>
     );
 }
+
 export function SchedulingIcon() {
     return (
         <svg
@@ -824,8 +825,8 @@ export function SchedulingIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z" />
-            <path d="M20.59 22 15 16.41V7h2v8.58l5 5.01L20.59 22z" />
+            <path d="M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z"/>
+            <path d="M20.59 22 15 16.41V7h2v8.58l5 5.01L20.59 22z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -845,7 +846,8 @@ export function HttpIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M30 11h-5v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2.002 2.002 0 0 0-2-2Zm-3 5v-3h3l.001 3ZM10 13h2v8h2v-8h2v-2h-6v2zM23 11h-6v2h2v8h2v-8h2v-2zM6 11v4H3v-4H1v10h2v-4h3v4h2V11H6z" />
+            <path
+                d="M30 11h-5v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2.002 2.002 0 0 0-2-2Zm-3 5v-3h3l.001 3ZM10 13h2v8h2v-8h2v-2h-6v2zM23 11h-6v2h2v8h2v-8h2v-2zM6 11v4H3v-4H1v10h2v-4h3v4h2V11H6z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -856,6 +858,7 @@ export function HttpIcon() {
         </svg>
     );
 }
+
 export function GoogleCloudIcon() {
     return (
         <svg
@@ -884,6 +887,7 @@ export function GoogleCloudIcon() {
         </svg>
     );
 }
+
 export function AwsIcon() {
     return (
         <svg
@@ -898,12 +902,15 @@ export function AwsIcon() {
                 d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 0 1 .037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 0 1-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 0 1-.192-.251 4.137 4.137 0 0 1-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.37 [...]
             />
             <g fill="#F90" fillRule="evenodd" clipRule="evenodd">
-                <path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" />
-                <path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z" />
+                <path
+                    d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z"/>
+                <path
+                    d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z"/>
             </g>
         </svg>
     );
 }
+
 export function MailIcon() {
     return (
         <svg
@@ -913,7 +920,8 @@ export function MailIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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
+                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
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -924,6 +932,7 @@ export function MailIcon() {
         </svg>
     );
 }
+
 export function IotIcon() {
     return (
         <svg
@@ -933,9 +942,10 @@ export function IotIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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" />
-            <path d="M26 13h-2a5.006 5.006 0 0 0-5-5V6a7.008 7.008 0 0 1 7 7Z" />
+            <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"/>
+            <path d="M26 13h-2a5.006 5.006 0 0 0-5-5V6a7.008 7.008 0 0 1 7 7Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -946,6 +956,7 @@ export function IotIcon() {
         </svg>
     );
 }
+
 export function GithubIcon() {
     return (
         <svg
@@ -955,10 +966,13 @@ export function GithubIcon() {
             data-view-component="true"
             viewBox="0 0 16 16"
             className="icon">
-            <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16. [...]
+            <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45 [...]
         </svg>
     );
-}export function CassandraIcon() {
+}
+
+export function CassandraIcon() {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -968,7 +982,7 @@ export function GithubIcon() {
             viewBox="0 0 113.63554 58.899029"
             className="icon">
             <defs>
-                <path id="a" d="M24.216.082v24.141H.053V.082z" />
+                <path id="a" d="M24.216.082v24.141H.053V.082z"/>
             </defs>
             <g
                 style={{
@@ -1020,7 +1034,7 @@ export function GithubIcon() {
                 />
                 <g transform="translate(43.304 10.642)">
                     <mask id="b" fill="#fff">
-                        <use xlinkHref="#a" />
+                        <use xlinkHref="#a"/>
                     </mask>
                     <path
                         fill="#fff"
@@ -1048,6 +1062,7 @@ export function GithubIcon() {
         </svg>
     );
 }
+
 export function ActivemqIcon() {
     return (
         <svg
@@ -1064,16 +1079,16 @@ export function ActivemqIcon() {
                     x={-0.017}
                     y={-0.011}
                 >
-                    <feFlood floodColor="#000" floodOpacity={0.498} result="flood" />
+                    <feFlood floodColor="#000" floodOpacity={0.498} result="flood"/>
                     <feComposite
                         in="flood"
                         in2="SourceGraphic"
                         operator="in"
                         result="composite1"
                     />
-                    <feGaussianBlur in="composite1" result="blur" stdDeviation={0.2} />
-                    <feOffset dx={1} dy={1} result="offset" />
-                    <feComposite in="SourceGraphic" in2="offset" result="composite2" />
+                    <feGaussianBlur in="composite1" result="blur" stdDeviation={0.2}/>
+                    <feOffset dx={1} dy={1} result="offset"/>
+                    <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
                 </filter>
             </defs>
             <g
@@ -1335,6 +1350,7 @@ export function ActivemqIcon() {
         </svg>
     );
 }
+
 export function KafkaIcon() {
     return (
         <svg
@@ -1351,6 +1367,7 @@ export function KafkaIcon() {
         </svg>
     );
 }
+
 export function GrapeIcon() {
     return (
         <svg
@@ -1385,6 +1402,7 @@ export function GrapeIcon() {
         </svg>
     );
 }
+
 export function MachineLearningIcon() {
     return (
         <svg
@@ -1393,8 +1411,10 @@ export function MachineLearningIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M27 24a2.96 2.96 0 0 0-1.285.3l-4.3-4.3H18v2h2.586l3.715 3.715A2.966 2.966 0 0 0 24 27a3 3 0 1 0 3-3Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 13a2.995 2.995 0 0 0-2.816 2H18v2h6.184A2.995 2.995 0 1 0 27 13Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 2a3.003 3.003 0 0 0-3 3 2.966 2.966 0 0 0 .348 1.373L20.596 10H18v2h3.404l4.4-4.252A2.999 2.999 0 1 0 27 2Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z" />
-            <path d="M18 6h2V4h-2a3.976 3.976 0 0 0-3 1.382A3.976 3.976 0 0 0 12 4h-1a9.01 9.01 0 0 0-9 9v6a9.01 9.01 0 0 0 9 9h1a3.976 3.976 0 0 0 3-1.382A3.976 3.976 0 0 0 18 28h2v-2h-2a2.002 2.002 0 0 1-2-2V8a2.002 2.002 0 0 1 2-2Zm-6 20h-1a7.005 7.005 0 0 1-6.92-6H6v-2H4v-4h3a3.003 3.003 0 0 0 3-3V9H8v2a1 1 0 0 1-1 1H4.08A7.005 7.005 0 0 1 11 6h1a2.002 2.002 0 0 1 2 2v4h-2v2h2v4h-2a3.003 3.003 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h2v4a2.002 2.002 0 0 1-2 2Z" />
+            <path
+                d="M27 24a2.96 2.96 0 0 0-1.285.3l-4.3-4.3H18v2h2.586l3.715 3.715A2.966 2.966 0 0 0 24 27a3 3 0 1 0 3-3Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 13a2.995 2.995 0 0 0-2.816 2H18v2h6.184A2.995 2.995 0 1 0 27 13Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 2a3.003 3.003 0 0 0-3 3 2.966 2.966 0 0 0 .348 1.373L20.596 10H18v2h3.404l4.4-4.252A2.999 2.999 0 1 0 27 2Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z"/>
+            <path
+                d="M18 6h2V4h-2a3.976 3.976 0 0 0-3 1.382A3.976 3.976 0 0 0 12 4h-1a9.01 9.01 0 0 0-9 9v6a9.01 9.01 0 0 0 9 9h1a3.976 3.976 0 0 0 3-1.382A3.976 3.976 0 0 0 18 28h2v-2h-2a2.002 2.002 0 0 1-2-2V8a2.002 2.002 0 0 1 2-2Zm-6 20h-1a7.005 7.005 0 0 1-6.92-6H6v-2H4v-4h3a3.003 3.003 0 0 0 3-3V9H8v2a1 1 0 0 1-1 1H4.08A7.005 7.005 0 0 1 11 6h1a2.002 2.002 0 0 1 2 2v4h-2v2h2v4h-2a3.003 3.003 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h2v4a2.002 2.002 0 0 1-2 2Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1405,6 +1425,7 @@ export function MachineLearningIcon() {
         </svg>
     );
 }
+
 export function TerminalIcon() {
     return (
         <svg
@@ -1414,8 +1435,9 @@ export function TerminalIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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" />
+            <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"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1426,6 +1448,7 @@ export function TerminalIcon() {
         </svg>
     );
 }
+
 export function SapIcon() {
     return (
         <svg
@@ -1451,6 +1474,7 @@ export function SapIcon() {
         </svg>
     );
 }
+
 export function ScriptIcon() {
     return (
         <svg
@@ -1460,8 +1484,10 @@ export function ScriptIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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 d="M14 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h6Zm4-23.6 5.6 5.6H18Z" />
+            <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
+                d="M14 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h6Zm4-23.6 5.6 5.6H18Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1472,6 +1498,7 @@ export function ScriptIcon() {
         </svg>
     );
 }
+
 export function ValidationIcon() {
     return (
         <svg
@@ -1480,8 +1507,9 @@ export function ValidationIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="m22 27.18-2.59-2.59L18 26l4 4 8-8-1.41-1.41L22 27.18z" />
-            <path d="M15 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h7Zm3-23.6 5.6 5.6H18Z" />
+            <path d="m22 27.18-2.59-2.59L18 26l4 4 8-8-1.41-1.41L22 27.18z"/>
+            <path
+                d="M15 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h7Zm3-23.6 5.6 5.6H18Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1492,6 +1520,7 @@ export function ValidationIcon() {
         </svg>
     );
 }
+
 export function OpenstackIcon() {
     return (
         <svg
@@ -1508,6 +1537,7 @@ export function OpenstackIcon() {
         </svg>
     );
 }
+
 export function OpenshiftIcon() {
     return (
         <svg
@@ -1552,6 +1582,7 @@ export function OpenshiftIcon() {
         </svg>
     );
 }
+
 export function RefIcon() {
     return (
         <svg
@@ -1560,8 +1591,9 @@ export function RefIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M4 20v2h4.586L2 28.586 3.414 30 10 23.414V28h2v-8H4zM30 30h-8v-8h8Zm-6-2h4v-4h-4ZM20 20h-8v-8h8Zm-6-2h4v-4h-4Z" />
-            <path d="M24 17h-2v-2h2a4 4 0 0 0 0-8H12V5h12a6 6 0 0 1 0 12ZM10 10H2V2h8ZM4 8h4V4H4Z" />
+            <path
+                d="M4 20v2h4.586L2 28.586 3.414 30 10 23.414V28h2v-8H4zM30 30h-8v-8h8Zm-6-2h4v-4h-4ZM20 20h-8v-8h8Zm-6-2h4v-4h-4Z"/>
+            <path d="M24 17h-2v-2h2a4 4 0 0 0 0-8H12V5h12a6 6 0 0 1 0 12ZM10 10H2V2h8ZM4 8h4V4H4Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1572,6 +1604,7 @@ export function RefIcon() {
         </svg>
     );
 }
+
 export function RedisIcon() {
     return (
         <svg
@@ -1620,6 +1653,7 @@ export function RedisIcon() {
         </svg>
     );
 }
+
 export function SearchIcon() {
     return (
         <svg
@@ -1628,7 +1662,8 @@ export function SearchIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z" />
+            <path
+                d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1639,6 +1674,7 @@ export function SearchIcon() {
         </svg>
     );
 }
+
 export function BlockchainIcon() {
     return (
         <svg
@@ -1648,7 +1684,7 @@ export function BlockchainIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <title>{"blockchain"}</title>
-            <path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z" />
+            <path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1659,6 +1695,7 @@ export function BlockchainIcon() {
         </svg>
     );
 }
+
 export function ChatIcon() {
     return (
         <svg
@@ -1668,8 +1705,9 @@ export function ChatIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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" />
+            <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"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1680,6 +1718,7 @@ export function ChatIcon() {
         </svg>
     );
 }
+
 export function WorkflowIcon() {
     return (
         <svg
@@ -1689,10 +1728,12 @@ export function WorkflowIcon() {
             height={800}
             viewBox="0 0 512 512"
             className="icon">
-            <path d="M445.66 49.341H340.206L294.008 3.143c-4.192-4.191-10.99-4.191-15.183 0l-49.341 49.342c-4.192 4.192-4.192 10.99 0 15.183l46.198 46.198v38.494h-80.516c-5.929 0-10.736 4.806-10.736 10.735v21.471h-42.942v-21.471c0-5.929-4.806-10.735-10.736-10.735H66.34c-5.929 0-10.735 4.806-10.735 10.735v64.413c0 5.929 4.806 10.735 10.735 10.735h20.755v93.798c0 5.929 4.806 10.736 10.735 10.736h95.437l-10.346 10.346c-4.192 4.192-4.193 10.99 0 15.182a10.7 10.7 0 0 0 7.591 3.144c2.747 0 5.4 [...]
+            <path
+                d="M445.66 49.341H340.206L294.008 3.143c-4.192-4.191-10.99-4.191-15.183 0l-49.341 49.342c-4.192 4.192-4.192 10.99 0 15.183l46.198 46.198v38.494h-80.516c-5.929 0-10.736 4.806-10.736 10.735v21.471h-42.942v-21.471c0-5.929-4.806-10.735-10.736-10.735H66.34c-5.929 0-10.735 4.806-10.735 10.735v64.413c0 5.929 4.806 10.735 10.735 10.735h20.755v93.798c0 5.929 4.806 10.736 10.735 10.736h95.437l-10.346 10.346c-4.192 4.192-4.193 10.99 0 15.182a10.7 10.7 0 0 0 7.591 3.144c2.747 0 5.495 [...]
         </svg>
     );
 }
+
 export function WebserviceIcon() {
     return (
         <svg
@@ -1702,7 +1743,8 @@ export function WebserviceIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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
+                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
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1713,6 +1755,7 @@ export function WebserviceIcon() {
         </svg>
     );
 }
+
 export function MobileIcon() {
     return (
         <svg
@@ -1721,9 +1764,10 @@ export function MobileIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M23 7h4v4h-4zM23 13h4v4h-4zM17 7h4v4h-4zM17 13h4v4h-4z" />
-            <circle cx={14.5} cy={24.5} r={1.5} />
-            <path d="M21 30H8a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h13v2H8v24h13v-8h2v8a2.002 2.002 0 0 1-2 2Z" />
+            <path d="M23 7h4v4h-4zM23 13h4v4h-4zM17 7h4v4h-4zM17 13h4v4h-4z"/>
+            <circle cx={14.5} cy={24.5} r={1.5}/>
+            <path
+                d="M21 30H8a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h13v2H8v24h13v-8h2v8a2.002 2.002 0 0 1-2 2Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1734,6 +1778,7 @@ export function MobileIcon() {
         </svg>
     );
 }
+
 export function ClusterIcon() {
     return (
         <svg
@@ -1742,7 +1787,8 @@ export function ClusterIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M16 7a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM11 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM7 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM21 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM25 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM4 21a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0  [...]
+            <path
+                d="M16 7a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM11 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM7 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM21 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM25 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM4 21a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1  [...]
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1753,6 +1799,7 @@ export function ClusterIcon() {
         </svg>
     );
 }
+
 export function RpcIcon() {
     return (
         <svg
@@ -1761,7 +1808,7 @@ export function RpcIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="m14 26 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16l10 10z" />
+            <path d="m14 26 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16l10 10z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1772,6 +1819,7 @@ export function RpcIcon() {
         </svg>
     );
 }
+
 export function InfinispanIcon() {
     return (
         <svg
@@ -1799,6 +1847,7 @@ export function InfinispanIcon() {
         </svg>
     );
 }
+
 export function TransformationIcon() {
     return (
         <svg
@@ -1808,7 +1857,8 @@ export function TransformationIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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
+                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
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1819,6 +1869,7 @@ export function TransformationIcon() {
         </svg>
     );
 }
+
 export function TestingIcon() {
     return (
         <svg
@@ -1827,8 +1878,10 @@ export function TestingIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M28 17v5H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-5ZM18 28h-4v-4h4Z" />
-            <path d="M30 10V8h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49-1.414-1.414-1.49 1.49A4.968 4.968 0 0 0 24 4.101V2h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49-1.414 1.414 1.49 1.49A4.968 4.968 0 0 0 18.101 8H16v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49 1.414 1.414 1.49-1.49a4.968 4.968 0 0 0 1.753.732V16h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49 1.414-1.414-1.49-1.49A4.968 4.968 0 0 0 27.899 10Zm-7 2a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Z" />
+            <path
+                d="M28 17v5H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-5ZM18 28h-4v-4h4Z"/>
+            <path
+                d="M30 10V8h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49-1.414-1.414-1.49 1.49A4.968 4.968 0 0 0 24 4.101V2h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49-1.414 1.414 1.49 1.49A4.968 4.968 0 0 0 18.101 8H16v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49 1.414 1.414 1.49-1.49a4.968 4.968 0 0 0 1.753.732V16h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49 1.414-1.414-1.49-1.49A4.968 4.968 0 0 0 27.899 10Zm-7 2a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1839,6 +1892,7 @@ export function TestingIcon() {
         </svg>
     );
 }
+
 export function ApiIcon() {
     return (
         <svg
@@ -1848,7 +1902,8 @@ export function ApiIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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 [...]
+            <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
                 d="M0 0h32v32H0z"
                 style={{
@@ -1858,6 +1913,7 @@ export function ApiIcon() {
         </svg>
     );
 }
+
 export function MonitoringIcon() {
     return (
         <svg
@@ -1866,8 +1922,10 @@ export function MonitoringIcon() {
             height={800}
             viewBox="0 0 32 32"
             className="icon">
-            <path d="M28 16v6H4V6h7V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z" />
-            <path d="M18 18h-.01a1 1 0 0 1-.951-.725L15.246 11H11V9h5a1 1 0 0 1 .962.725l1.074 3.76 3.009-9.78A1.014 1.014 0 0 1 22 3a.98.98 0 0 1 .949.684L24.72 9H30v2h-6a1 1 0 0 1-.949-.684l-1.013-3.04-3.082 10.018A1 1 0 0 1 18 18Z" />
+            <path
+                d="M28 16v6H4V6h7V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z"/>
+            <path
+                d="M18 18h-.01a1 1 0 0 1-.951-.725L15.246 11H11V9h5a1 1 0 0 1 .962.725l1.074 3.76 3.009-9.78A1.014 1.014 0 0 1 22 3a.98.98 0 0 1 .949.684L24.72 9H30v2h-6a1 1 0 0 1-.949-.684l-1.013-3.04-3.082 10.018A1 1 0 0 1 18 18Z"/>
             <path
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1878,6 +1936,7 @@ export function MonitoringIcon() {
         </svg>
     );
 }
+
 export function NetworkingIcon() {
     return (
         <svg
@@ -1887,13 +1946,18 @@ export function NetworkingIcon() {
             height={800}
             viewBox="0 0 511.984 511.984"
             className="icon">
-            <path d="M207.29 287.991H48.735C30.687 287.991 16 302.375 16 320.054v111.868c0 17.679 14.688 32.063 32.735 32.063H207.29c18.031 0 32.703-14.384 32.703-32.063V320.054c0-17.679-14.672-32.063-32.703-32.063zm0 143.996-159.291-.064.736-111.932 159.259.064.048 111.645c0 .015-.192.287-.752.287z" />
-            <path d="M383.988 239.992H127.996c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-31.999h223.993v31.999c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c0-8.832-7.167-16-15.999-16z" />
-            <path d="M463.25 287.991H304.727c-18.047 0-32.735 14.384-32.735 32.063v111.868c0 17.679 14.688 32.063 32.735 32.063H463.25c18.047 0 32.735-14.384 32.735-32.063V320.054c-.001-17.679-14.688-32.063-32.735-32.063zm0 143.996-159.259-.064.736-111.932 159.259.064.064 111.645c-.016-.001-.208.287-.8.287zM415.987 479.985h-63.998c-8.832 0-16 7.168-16 16s7.168 16 16 16h63.998c8.832 0 16-7.168 16-16s-7.168-16-16-16zM335.253 0H176.73c-18.047 0-32.735 14.384-32.735 32.063v111.869c0 17.679 1 [...]
-            <path d="M255.992 191.994c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c.001-8.832-7.167-16-15.999-16z" />
+            <path
+                d="M207.29 287.991H48.735C30.687 287.991 16 302.375 16 320.054v111.868c0 17.679 14.688 32.063 32.735 32.063H207.29c18.031 0 32.703-14.384 32.703-32.063V320.054c0-17.679-14.672-32.063-32.703-32.063zm0 143.996-159.291-.064.736-111.932 159.259.064.048 111.645c0 .015-.192.287-.752.287z"/>
+            <path
+                d="M383.988 239.992H127.996c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-31.999h223.993v31.999c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c0-8.832-7.167-16-15.999-16z"/>
+            <path
+                d="M463.25 287.991H304.727c-18.047 0-32.735 14.384-32.735 32.063v111.868c0 17.679 14.688 32.063 32.735 32.063H463.25c18.047 0 32.735-14.384 32.735-32.063V320.054c-.001-17.679-14.688-32.063-32.735-32.063zm0 143.996-159.259-.064.736-111.932 159.259.064.064 111.645c-.016-.001-.208.287-.8.287zM415.987 479.985h-63.998c-8.832 0-16 7.168-16 16s7.168 16 16 16h63.998c8.832 0 16-7.168 16-16s-7.168-16-16-16zM335.253 0H176.73c-18.047 0-32.735 14.384-32.735 32.063v111.869c0 17.679 14. [...]
+            <path
+                d="M255.992 191.994c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c.001-8.832-7.167-16-15.999-16z"/>
         </svg>
     );
 }
+
 export function HealthIcon() {
     return (
         <svg
@@ -1911,10 +1975,11 @@ export function HealthIcon() {
                 d="M27 7h0c-2.6-2.7-6.9-2.7-9.5 0l-1.3 1.4c-.1.1-.4.1-.5 0L14.4 7C11.8 4.3 7.6 4.3 5 7h0c-2.6 2.7-2.6 7.1 0 9.8l1.6 1.6 9.2 9.5c.1.1.4.1.5 0l9.2-9.5 1.6-1.6c2.6-2.7 2.6-7.1-.1-9.8z"
                 className="st0"
             />
-            <path d="M9 15h3l2-2 2 4 2-5 2 3h3" className="st0" />
+            <path d="M9 15h3l2-2 2 4 2-5 2 3h3" className="st0"/>
         </svg>
     );
 }
+
 export function KubernetesIcon() {
     return (
         <svg
@@ -1947,6 +2012,7 @@ export function KubernetesIcon() {
         </svg>
     );
 }
+
 export function DocumentIcon() {
     return (
         <svg
@@ -1956,7 +2022,8 @@ export function DocumentIcon() {
             viewBox="0 0 32 32"
             className="icon">
             <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
+                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
                 d="M0 0h32v32H0z"
                 data-name="&lt;Transparent Rectangle&gt;"
@@ -1967,6 +2034,7 @@ export function DocumentIcon() {
         </svg>
     );
 }
+
 export function GitIcon() {
     return (
         <svg
@@ -1985,6 +2053,7 @@ export function GitIcon() {
         </svg>
     );
 }
+
 export function SocialIcon() {
     return (
         <svg
@@ -2012,6 +2081,7 @@ export function SocialIcon() {
         </svg>
     );
 }
+
 export function DebeziumIcon() {
     return (
         <svg
@@ -2028,8 +2098,8 @@ export function DebeziumIcon() {
                     y2={114.02}
                     gradientUnits="userSpaceOnUse"
                 >
-                    <stop offset={0} stopColor="#91d443" />
-                    <stop offset={1} stopColor="#48bfe0" />
+                    <stop offset={0} stopColor="#91d443"/>
+                    <stop offset={1} stopColor="#48bfe0"/>
                 </linearGradient>
                 <linearGradient
                     xlinkHref="#linear-gradient"
@@ -2100,6 +2170,7 @@ export function DebeziumIcon() {
         </svg>
     );
 }
+
 export function IgniteIcon() {
     return (
         <svg
@@ -2120,6 +2191,7 @@ export function IgniteIcon() {
         </svg>
     );
 }
+
 export function HazelcastIcon() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.3 133.3" className="icon">
@@ -2157,6 +2229,7 @@ export function HazelcastIcon() {
         </svg>
     );
 }
+
 export function AzureIcon() {
     return (
         <svg
@@ -2175,8 +2248,8 @@ export function AzureIcon() {
                     gradientTransform="matrix(1 0 0 -1 1075 158)"
                     gradientUnits="userSpaceOnUse"
                 >
-                    <stop offset={0} stopColor="#114a8b" />
-                    <stop offset={1} stopColor="#0669bc" />
+                    <stop offset={0} stopColor="#114a8b"/>
+                    <stop offset={1} stopColor="#0669bc"/>
                 </linearGradient>
                 <linearGradient
                     id="b"
@@ -2187,11 +2260,11 @@ export function AzureIcon() {
                     gradientTransform="matrix(1 0 0 -1 1075 158)"
                     gradientUnits="userSpaceOnUse"
                 >
-                    <stop offset={0} stopOpacity={0.3} />
-                    <stop offset={0.071} stopOpacity={0.2} />
-                    <stop offset={0.321} stopOpacity={0.1} />
-                    <stop offset={0.623} stopOpacity={0.05} />
-                    <stop offset={1} stopOpacity={0} />
+                    <stop offset={0} stopOpacity={0.3}/>
+                    <stop offset={0.071} stopOpacity={0.2}/>
+                    <stop offset={0.321} stopOpacity={0.1}/>
+                    <stop offset={0.623} stopOpacity={0.05}/>
+                    <stop offset={1} stopOpacity={0}/>
                 </linearGradient>
                 <linearGradient
                     id="c"
@@ -2202,8 +2275,8 @@ export function AzureIcon() {
                     gradientTransform="matrix(1 0 0 -1 1075 158)"
                     gradientUnits="userSpaceOnUse"
                 >
-                    <stop offset={0} stopColor="#3ccbf4" />
-                    <stop offset={1} stopColor="#2892df" />
+                    <stop offset={0} stopColor="#3ccbf4"/>
+                    <stop offset={1} stopColor="#2892df"/>
                 </linearGradient>
             </defs>
             <path