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/10/02 16:34:15 UTC
[camel-karavan] branch main updated: Fix #922
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push:
new 71f32fe9 Fix #922
71f32fe9 is described below
commit 71f32fe9728cf435aa18a8132bb2b414c4d98aa6
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Oct 2 12:34:06 2023 -0400
Fix #922
---
.../designer/{KaravanStore.ts => DesignerStore.ts} | 0
karavan-designer/src/designer/KaravanDesigner.tsx | 2 +-
karavan-designer/src/designer/beans/BeanCard.tsx | 2 +-
.../src/designer/beans/BeanProperties.tsx | 2 +-
.../src/designer/beans/BeansDesigner.tsx | 2 +-
.../src/designer/editor/CodeEditor.tsx | 2 +-
.../designer/kamelet/KameletAnnotationsPanel.tsx | 2 +-
.../kamelet/KameletDefinitionPropertyCard.tsx | 2 +-
.../designer/kamelet/KameletDefinitionsPanel.tsx | 2 +-
.../src/designer/kamelet/KameletDesigner.tsx | 2 +-
.../src/designer/kamelet/KameletProperties.tsx | 2 +-
.../src/designer/rest/RestDesigner.tsx | 2 +-
.../src/designer/rest/RestMethodCard.tsx | 2 +-
.../src/designer/rest/RestMethodSelector.tsx | 2 +-
.../src/designer/route/DeleteConfirmation.tsx | 2 +-
.../src/designer/route/DslConnections.tsx | 2 +-
karavan-designer/src/designer/route/DslElement.tsx | 2 +-
.../src/designer/route/DslProperties.tsx | 2 +-
.../src/designer/route/DslSelector.tsx | 2 +-
.../src/designer/route/RouteDesigner.tsx | 2 +-
.../route/property/ComponentParameterField.tsx | 2 +-
.../designer/route/property/DslPropertyField.tsx | 2 +-
.../src/designer/route/usePropertiesHook.tsx | 2 +-
.../src/designer/route/useRouteDesignerHook.tsx | 2 +-
.../src/designer/utils/IntegrationHeader.tsx | 2 +-
.../src/knowledgebase/KnowledgebaseStore.ts | 57 ++++++++++
.../src/knowledgebase/components/ComponentCard.tsx | 61 +++++------
.../knowledgebase/components/ComponentModal.tsx | 117 +++++++++------------
.../src/knowledgebase/components/ComponentsTab.tsx | 65 ++++--------
karavan-designer/src/knowledgebase/eip/EipCard.tsx | 61 +++++------
.../src/knowledgebase/eip/EipModal.tsx | 96 +++++++----------
karavan-designer/src/knowledgebase/eip/EipTab.tsx | 56 ++++------
.../src/knowledgebase/kamelets/KameletCard.tsx | 65 ++++++------
.../src/knowledgebase/kamelets/KameletModal.tsx | 102 +++++++-----------
.../src/knowledgebase/kamelets/KameletsTab.tsx | 69 +++++-------
.../src/designer/DesignerStore.ts | 0
karavan-space/src/designer/KaravanDesigner.tsx | 19 +++-
karavan-space/src/designer/beans/BeanCard.tsx | 2 +-
.../src/designer/beans/BeanProperties.tsx | 9 +-
karavan-space/src/designer/beans/BeansDesigner.tsx | 2 +-
karavan-space/src/designer/editor/CodeEditor.tsx | 2 +-
.../designer/kamelet/KameletAnnotationsPanel.tsx | 2 +-
.../kamelet/KameletDefinitionPropertyCard.tsx | 2 +-
.../designer/kamelet/KameletDefinitionsPanel.tsx | 2 +-
.../src/designer/kamelet/KameletDesigner.tsx | 2 +-
.../src/designer/kamelet/KameletProperties.tsx | 2 +-
karavan-space/src/designer/kamelet/kamelet.css | 47 +++++++++
karavan-space/src/designer/rest/RestDesigner.tsx | 2 +-
karavan-space/src/designer/rest/RestMethodCard.tsx | 2 +-
.../src/designer/rest/RestMethodSelector.tsx | 2 +-
.../src/designer/route/DeleteConfirmation.tsx | 2 +-
.../src/designer/route/DslConnections.tsx | 2 +-
karavan-space/src/designer/route/DslElement.tsx | 2 +-
karavan-space/src/designer/route/DslProperties.tsx | 5 +-
karavan-space/src/designer/route/DslSelector.tsx | 2 +-
karavan-space/src/designer/route/RouteDesigner.tsx | 2 +-
.../route/property/ComponentParameterField.tsx | 2 +-
.../designer/route/property/DslPropertyField.tsx | 2 +-
.../src/designer/route/usePropertiesHook.tsx | 2 +-
.../src/designer/route/useRouteDesignerHook.tsx | 17 +--
.../src/designer/utils/IntegrationHeader.tsx | 21 +++-
karavan-space/src/designer/utils/KaravanIcons.tsx | 45 +++++---
.../src/knowledgebase/KnowledgebaseStore.ts | 57 ++++++++++
.../src/knowledgebase/components/ComponentCard.tsx | 61 +++++------
.../knowledgebase/components/ComponentModal.tsx | 117 +++++++++------------
.../src/knowledgebase/components/ComponentsTab.tsx | 65 ++++--------
karavan-space/src/knowledgebase/eip/EipCard.tsx | 61 +++++------
karavan-space/src/knowledgebase/eip/EipModal.tsx | 96 +++++++----------
karavan-space/src/knowledgebase/eip/EipTab.tsx | 56 ++++------
.../src/knowledgebase/kamelets/KameletCard.tsx | 65 ++++++------
.../src/knowledgebase/kamelets/KameletModal.tsx | 102 +++++++-----------
.../src/knowledgebase/kamelets/KameletsTab.tsx | 69 +++++-------
.../src/main/webui/src/designer/DesignerStore.ts | 0
.../main/webui/src/designer/KaravanDesigner.tsx | 19 +++-
.../src/main/webui/src/designer/beans/BeanCard.tsx | 2 +-
.../webui/src/designer/beans/BeanProperties.tsx | 9 +-
.../webui/src/designer/beans/BeansDesigner.tsx | 2 +-
.../main/webui/src/designer/editor/CodeEditor.tsx | 2 +-
.../designer/kamelet/KameletAnnotationsPanel.tsx | 2 +-
.../kamelet/KameletDefinitionPropertyCard.tsx | 2 +-
.../designer/kamelet/KameletDefinitionsPanel.tsx | 2 +-
.../src/designer/kamelet/KameletDesigner.tsx | 2 +-
.../src/designer/kamelet/KameletProperties.tsx | 2 +-
.../main/webui/src/designer/kamelet/kamelet.css | 47 +++++++++
.../main/webui/src/designer/rest/RestDesigner.tsx | 2 +-
.../webui/src/designer/rest/RestMethodCard.tsx | 2 +-
.../webui/src/designer/rest/RestMethodSelector.tsx | 2 +-
.../src/designer/route/DeleteConfirmation.tsx | 2 +-
.../webui/src/designer/route/DslConnections.tsx | 2 +-
.../main/webui/src/designer/route/DslElement.tsx | 2 +-
.../webui/src/designer/route/DslProperties.tsx | 5 +-
.../main/webui/src/designer/route/DslSelector.tsx | 2 +-
.../webui/src/designer/route/RouteDesigner.tsx | 2 +-
.../route/property/ComponentParameterField.tsx | 2 +-
.../designer/route/property/DslPropertyField.tsx | 2 +-
.../webui/src/designer/route/usePropertiesHook.tsx | 2 +-
.../src/designer/route/useRouteDesignerHook.tsx | 2 +-
.../webui/src/designer/utils/IntegrationHeader.tsx | 21 +++-
.../main/webui/src/designer/utils/KaravanIcons.tsx | 45 +++++---
.../webui/src/knowledgebase/KnowledgebaseStore.ts | 57 ++++++++++
.../src/knowledgebase/components/ComponentCard.tsx | 61 +++++------
.../knowledgebase/components/ComponentModal.tsx | 117 +++++++++------------
.../src/knowledgebase/components/ComponentsTab.tsx | 65 ++++--------
.../main/webui/src/knowledgebase/eip/EipCard.tsx | 61 +++++------
.../main/webui/src/knowledgebase/eip/EipModal.tsx | 96 +++++++----------
.../main/webui/src/knowledgebase/eip/EipTab.tsx | 56 ++++------
.../src/knowledgebase/kamelets/KameletCard.tsx | 65 ++++++------
.../src/knowledgebase/kamelets/KameletModal.tsx | 102 +++++++-----------
.../src/knowledgebase/kamelets/KameletsTab.tsx | 69 +++++-------
.../webui/src/project/ImageDownloadToolbar.tsx | 2 +-
110 files changed, 1323 insertions(+), 1361 deletions(-)
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/DesignerStore.ts
similarity index 100%
copy from karavan-designer/src/designer/KaravanStore.ts
copy to karavan-designer/src/designer/DesignerStore.ts
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index 316a71be..71914986 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -33,7 +33,7 @@ import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelUi} from "./utils/CamelUi";
-import {useDesignerStore, useIntegrationStore} from "./KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "./DesignerStore";
import {shallow} from "zustand/shallow";
import {getDesignerIcon} from "./utils/KaravanIcons";
import {InfrastructureAPI} from "./utils/InfrastructureAPI";
diff --git a/karavan-designer/src/designer/beans/BeanCard.tsx b/karavan-designer/src/designer/beans/BeanCard.tsx
index e9f1187d..e38ed2c1 100644
--- a/karavan-designer/src/designer/beans/BeanCard.tsx
+++ b/karavan-designer/src/designer/beans/BeanCard.tsx
@@ -21,7 +21,7 @@ import {
import './bean.css';
import {RegistryBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props {
diff --git a/karavan-designer/src/designer/beans/BeanProperties.tsx b/karavan-designer/src/designer/beans/BeanProperties.tsx
index c27ea28c..fdb73d2a 100644
--- a/karavan-designer/src/designer/beans/BeanProperties.tsx
+++ b/karavan-designer/src/designer/beans/BeanProperties.tsx
@@ -39,7 +39,7 @@ import {InfrastructureAPI} from "../utils/InfrastructureAPI";
import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {IntegrationHeader} from "../utils/IntegrationHeader";
diff --git a/karavan-designer/src/designer/beans/BeansDesigner.tsx b/karavan-designer/src/designer/beans/BeansDesigner.tsx
index 8262b7bf..64bac96f 100644
--- a/karavan-designer/src/designer/beans/BeansDesigner.tsx
+++ b/karavan-designer/src/designer/beans/BeansDesigner.tsx
@@ -33,7 +33,7 @@ import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt"
import {BeanProperties} from "./BeanProperties";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {BeanCard} from "./BeanCard";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function BeansDesigner() {
diff --git a/karavan-designer/src/designer/editor/CodeEditor.tsx b/karavan-designer/src/designer/editor/CodeEditor.tsx
index 323bf0cf..cd6a4f36 100644
--- a/karavan-designer/src/designer/editor/CodeEditor.tsx
+++ b/karavan-designer/src/designer/editor/CodeEditor.tsx
@@ -18,7 +18,7 @@ import React, {useEffect, useState} from 'react';
import '../../designer/karavan.css';
import Editor from "@monaco-editor/react";
import {shallow} from "zustand/shallow";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import {EventBus} from "../utils/EventBus";
diff --git a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx b/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
index 3c997173..076aec40 100644
--- a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
+++ b/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
@@ -30,7 +30,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
const PREFIX = 'camel.apache.org/';
diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx b/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
index a478c101..d8933df4 100644
--- a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
+++ b/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
@@ -27,7 +27,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition";
diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx b/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx
index 4c638ee3..009a54ac 100644
--- a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx
+++ b/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx
@@ -28,7 +28,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {KameletDefinitionPropertyCard} from "./KameletDefinitionPropertyCard";
diff --git a/karavan-designer/src/designer/kamelet/KameletDesigner.tsx b/karavan-designer/src/designer/kamelet/KameletDesigner.tsx
index 3c0b5fa8..dd889b92 100644
--- a/karavan-designer/src/designer/kamelet/KameletDesigner.tsx
+++ b/karavan-designer/src/designer/kamelet/KameletDesigner.tsx
@@ -31,7 +31,7 @@ import {CamelUi} from "../utils/CamelUi";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {BeanProperties} from "../beans/BeanProperties";
import {BeanCard} from "../beans/BeanCard";
diff --git a/karavan-designer/src/designer/kamelet/KameletProperties.tsx b/karavan-designer/src/designer/kamelet/KameletProperties.tsx
index 93c696fa..fc8f188f 100644
--- a/karavan-designer/src/designer/kamelet/KameletProperties.tsx
+++ b/karavan-designer/src/designer/kamelet/KameletProperties.tsx
@@ -39,7 +39,7 @@ import {InfrastructureAPI} from "../utils/InfrastructureAPI";
import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {IntegrationHeader} from "../utils/IntegrationHeader";
diff --git a/karavan-designer/src/designer/rest/RestDesigner.tsx b/karavan-designer/src/designer/rest/RestDesigner.tsx
index 4a607cad..51ce51af 100644
--- a/karavan-designer/src/designer/rest/RestDesigner.tsx
+++ b/karavan-designer/src/designer/rest/RestDesigner.tsx
@@ -37,7 +37,7 @@ import {DslMetaModel} from "../utils/DslMetaModel";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {RestConfigurationCard} from "./RestConfigurationCard";
import {v4 as uuidv4} from "uuid";
-import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function RestDesigner() {
diff --git a/karavan-designer/src/designer/rest/RestMethodCard.tsx b/karavan-designer/src/designer/rest/RestMethodCard.tsx
index f27e364c..2af666bf 100644
--- a/karavan-designer/src/designer/rest/RestMethodCard.tsx
+++ b/karavan-designer/src/designer/rest/RestMethodCard.tsx
@@ -19,7 +19,7 @@ import {Button} from '@patternfly/react-core';
import '../karavan.css';
import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props<T extends CamelElement> {
diff --git a/karavan-designer/src/designer/rest/RestMethodSelector.tsx b/karavan-designer/src/designer/rest/RestMethodSelector.tsx
index bbd4cccb..7368c08c 100644
--- a/karavan-designer/src/designer/rest/RestMethodSelector.tsx
+++ b/karavan-designer/src/designer/rest/RestMethodSelector.tsx
@@ -24,7 +24,7 @@ import {
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props {
diff --git a/karavan-designer/src/designer/route/DeleteConfirmation.tsx b/karavan-designer/src/designer/route/DeleteConfirmation.tsx
index 999a4752..b2cb4d4d 100644
--- a/karavan-designer/src/designer/route/DeleteConfirmation.tsx
+++ b/karavan-designer/src/designer/route/DeleteConfirmation.tsx
@@ -20,7 +20,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import {useRouteDesignerHook} from "./useRouteDesignerHook";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function DeleteConfirmation() {
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index f39a1aa8..de6a0060 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -20,7 +20,7 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {DslPosition, EventBus} from "../utils/EventBus";
import {CamelUi} from "../utils/CamelUi";
import {SagaDefinition} from "karavan-core/lib/model/CamelDefinition";
-import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {TopologyUtils} from "karavan-core/lib/api/TopologyUtils";
diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx
index 489c675d..5f2744c5 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -31,7 +31,7 @@ import {EventBus} from "../utils/EventBus";
import {ChildElement, CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
diff --git a/karavan-designer/src/designer/route/DslProperties.tsx b/karavan-designer/src/designer/route/DslProperties.tsx
index ef933585..82fd3dd9 100644
--- a/karavan-designer/src/designer/route/DslProperties.tsx
+++ b/karavan-designer/src/designer/route/DslProperties.tsx
@@ -30,7 +30,7 @@ import {CamelUi} from "../utils/CamelUi";
import {CamelMetadataApi, DataFormats, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
import {IntegrationHeader} from "../utils/IntegrationHeader";
import CloneIcon from "@patternfly/react-icons/dist/esm/icons/clone-icon";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {usePropertiesHook} from "./usePropertiesHook";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx b/karavan-designer/src/designer/route/DslSelector.tsx
index 2e383cb6..8f815536 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -24,7 +24,7 @@ import {
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
-import {useDesignerStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index a78a4eed..7d3b5950 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -30,7 +30,7 @@ import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {DslElement} from "./DslElement";
import {CamelUi} from "../utils/CamelUi";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
-import {useConnectionsStore, useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import useResizeObserver from "./useResizeObserver";
import {Command, EventBus} from "../utils/EventBus";
diff --git a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
index 34c6cadb..23f8228a 100644
--- a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
@@ -49,7 +49,7 @@ import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {usePropertiesHook} from "../usePropertiesHook";
-import {useDesignerStore, useIntegrationStore} from "../../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../../DesignerStore";
import {shallow} from "zustand/shallow";
const prefix = "parameters";
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index 26bbdfd1..b07e8beb 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -66,7 +66,7 @@ import {InfrastructureAPI} from "../../utils/InfrastructureAPI";
import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon";
import {ModalEditor} from "./ModalEditor";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore, useIntegrationStore} from "../../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../../DesignerStore";
import {shallow} from "zustand/shallow";
import {DataFormatDefinition, ExpressionDefinition} from "karavan-core/lib/model/CamelDefinition";
import {TemplateApi} from "karavan-core/lib/api/TemplateApi";
diff --git a/karavan-designer/src/designer/route/usePropertiesHook.tsx b/karavan-designer/src/designer/route/usePropertiesHook.tsx
index 058ae5f2..eba82bf2 100644
--- a/karavan-designer/src/designer/route/usePropertiesHook.tsx
+++ b/karavan-designer/src/designer/route/usePropertiesHook.tsx
@@ -23,7 +23,7 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {RouteToCreate} from "../utils/CamelUi";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function usePropertiesHook (isRouteDesigner: boolean = true) {
diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
index 2a85f9d6..fe61d410 100644
--- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
@@ -25,7 +25,7 @@ import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {Command, EventBus} from "../utils/EventBus";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
import {toPng} from 'html-to-image';
-import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function useRouteDesignerHook () {
diff --git a/karavan-designer/src/designer/utils/IntegrationHeader.tsx b/karavan-designer/src/designer/utils/IntegrationHeader.tsx
index 0725d1e1..9b75fd5e 100644
--- a/karavan-designer/src/designer/utils/IntegrationHeader.tsx
+++ b/karavan-designer/src/designer/utils/IntegrationHeader.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {FormGroup, TextInput, Title} from "@patternfly/react-core";
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function IntegrationHeader () {
diff --git a/karavan-designer/src/knowledgebase/KnowledgebaseStore.ts b/karavan-designer/src/knowledgebase/KnowledgebaseStore.ts
new file mode 100644
index 00000000..32b81787
--- /dev/null
+++ b/karavan-designer/src/knowledgebase/KnowledgebaseStore.ts
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {createWithEqualityFn} from "zustand/traditional";
+import {shallow} from "zustand/shallow";
+import {Component} from "karavan-core/lib/model/ComponentModels";
+import {ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {KameletModel} from "karavan-core/lib/model/KameletModels";
+
+interface KnowledgebaseState {
+ isModalOpen: boolean;
+ setModalOpen: (isModalOpen: boolean) => void;
+ component?: Component;
+ setComponent: (component: Component) => void;
+ element?: ElementMeta;
+ setElement: (element: ElementMeta) => void;
+ kamelet?: KameletModel;
+ setKamelet: (kamelet: KameletModel) => void;
+}
+
+export const useKnowledgebaseStore = createWithEqualityFn<KnowledgebaseState>((set) => ({
+ isModalOpen: false,
+ setModalOpen: (isModalOpen: boolean) => {
+ set((state: KnowledgebaseState) => {
+ return {isModalOpen: isModalOpen};
+ })
+ },
+ setComponent: (component: Component) => {
+ set((state: KnowledgebaseState) => {
+ return {component: component};
+ })
+ },
+ setElement: (element: ElementMeta) => {
+ set((state: KnowledgebaseState) => {
+ return {element: element};
+ })
+ },
+ setKamelet: (kamelet: KameletModel) => {
+ set((state: KnowledgebaseState) => {
+ return {kamelet: kamelet};
+ })
+ }
+}), shallow)
\ No newline at end of file
diff --git a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
index 9226bb52..338dc3b9 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
@@ -21,47 +21,42 @@ import {
import '../../designer/karavan.css';
import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
component: Component,
- onClickCard: any
}
-interface State {
- component: Component,
-}
+export function ComponentCard(props: Props) {
-export class ComponentCard extends React.Component<Props, State> {
+ const [setComponent, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setComponent, s.setModalOpen], shallow)
- public state: State = {
- component: this.props.component
- };
+ const component = props.component;
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.component);
+ function click (event: React.MouseEvent) {
+ setComponent(component)
+ setModalOpen(true);
}
- render() {
- const component = this.state.component;
- return (
- <Card isCompact key={component.component.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader className="header-labels">
- {component.component.supportType === 'Supported' && <Badge isRead className="support-type labels">{component.component.supportType}</Badge>}
- <Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconForComponent(component.component.title, component.component.label)}
- <CardTitle>{component.component.title}</CardTitle>
- </CardHeader>
- <CardBody>{component.component.description}</CardBody>
- <CardFooter className="footer-labels">
- <Badge isRead className="labels">{component.component.label}</Badge>
- <Badge isRead className="version labels">{component.component.version}</Badge>
- </CardFooter>
- </Card>
- );
- }
+ return (
+ <Card isCompact key={component.component.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader className="header-labels">
+ {component.component.supportType === 'Supported' && <Badge isRead className="support-type labels">{component.component.supportType}</Badge>}
+ <Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconForComponent(component.component.title, component.component.label)}
+ <CardTitle>{component.component.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{component.component.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <Badge isRead className="labels">{component.component.label}</Badge>
+ <Badge isRead className="version labels">{component.component.version}</Badge>
+ </CardFooter>
+ </Card>
+ )
}
\ No newline at end of file
diff --git a/karavan-designer/src/knowledgebase/components/ComponentModal.tsx b/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
index fd082fee..da8f1584 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
@@ -24,72 +24,53 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
-import {Component} from "karavan-core/lib/model/ComponentModels";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- component?: Component,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- component?: Component,
-}
+export function ComponentModal() {
-export class ComponentModal extends React.Component<Props, State> {
-
- public state: State = {
- isOpen: this.props.isOpen,
- component: this.props.component,
- };
-
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ const [component, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.component, s.isModalOpen, s.setModalOpen], shallow)
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
+ const props = new Map<string, ComponentProperty>();
+ if (component) {
+ ComponentApi.getComponentProperties(component?.component.name, "consumer").forEach(cp => props.set(cp.name, cp));
+ ComponentApi.getComponentProperties(component?.component.name, "producer").forEach(cp => props.set(cp.name, cp));
}
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={component?.component.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={component?.component.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{
+ actions: <><Badge className="badge"
+ isRead> {component?.component.label}</Badge></>,
+ hasNoOffset: false,
+ className: undefined
+ }}>
+ {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
- render() {
- const component = this.state.component;
- const props = new Map<string, ComponentProperty>();
- if (component){
- ComponentApi.getComponentProperties(component?.component.name, "consumer").forEach(cp => props.set(cp.name, cp));
- ComponentApi.getComponentProperties(component?.component.name, "producer").forEach(cp => props.set(cp.name, cp));
- }
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={component?.component.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={component?.component.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {component?.component.label}</Badge></>, hasNoOffset: false, className: undefined}} >
- {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
-
- </CardHeader>
- <Text className="description">{component?.component.description}</Text>
- {props.size !== 0 &&
+ </CardHeader>
+ <Text className="description">{component?.component.description}</Text>
+ {props.size !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -110,10 +91,13 @@ export class ComponentModal extends React.Component<Props, State> {
<div>{p.name}</div>
</div>
</Td>
- <Td key={`${idx}_desc`}><div>
- <div>{p.description}</div>
- {p.defaultValue && p.defaultValue.toString().length > 0 && <div>{"Default value: " + p.defaultValue}</div>}
- </div></Td>
+ <Td key={`${idx}_desc`}>
+ <div>
+ <div>{p.description}</div>
+ {p.defaultValue && p.defaultValue.toString().length > 0 &&
+ <div>{"Default value: " + p.defaultValue}</div>}
+ </div>
+ </Td>
<Td key={`${idx}_type`}>{p.type}</Td>
<Td key={`${idx}_label`}>{p.label}</Td>
</Tr>
@@ -121,9 +105,8 @@ export class ComponentModal extends React.Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- )
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-designer/src/knowledgebase/components/ComponentsTab.tsx b/karavan-designer/src/knowledgebase/components/ComponentsTab.tsx
index c2a75b7a..708b04bd 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentsTab.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentsTab.tsx
@@ -22,60 +22,37 @@ import {
import '../../designer/karavan.css';
import {ComponentCard} from "./ComponentCard";
import {ComponentModal} from "./ComponentModal";
-import {Component} from "karavan-core/lib/model/ComponentModels";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
+import {shallow} from "zustand/shallow";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
interface Props {
dark: boolean,
filter: string,
- onRefresh?: () => Promise<void>
}
-interface State {
- component?: Component;
- isModalOpen: boolean;
- repository: string,
- path: string,
- components: Component[],
-}
-
-export class ComponentsTab extends React.Component<Props, State> {
-
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- components: [],
- };
+export function ComponentsTab(props: Props) {
- componentDidMount() {
- this.setState({components: ComponentApi.getComponents()})
- }
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- select = (c: Component)=> {
- this.setState({component: c, isModalOpen: true})
- }
- render() {
- const component = this.state.component;
- const {filter} = this.props;
- const components = ComponentApi.getComponents().filter(c => {
- return c.component.name.toLowerCase().includes(filter.toLowerCase())
+ const {filter} = props;
+ const components = ComponentApi.getComponents().filter(c => {
+ return c.component.name.toLowerCase().includes(filter.toLowerCase())
|| c.component.title.toLowerCase().includes(filter.toLowerCase())
|| c.component.description.toLowerCase().includes(filter.toLowerCase())
- }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ;
- return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
- <ComponentModal key={component?.component.name + this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen} component={component}/>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {components.map(c => (
- <ComponentCard key={c.component.name} component={c} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ;
+ return (
+ <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
+ {isModalOpen && <ComponentModal/>}
+ <PageSection isFilled className="kamelets-page" variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {components.map(c => (
+ <ComponentCard key={c.component.name} component={c}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
-};
\ No newline at end of file
+ </PageSection>
+ )
+}
\ No newline at end of file
diff --git a/karavan-designer/src/knowledgebase/eip/EipCard.tsx b/karavan-designer/src/knowledgebase/eip/EipCard.tsx
index db980615..fb47a932 100644
--- a/karavan-designer/src/knowledgebase/eip/EipCard.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipCard.tsx
@@ -21,47 +21,42 @@ import {
import '../../designer/karavan.css';
import {CamelUi} from "../../designer/utils/CamelUi";
import {ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
element: ElementMeta,
- onClickCard: any
}
-interface State {
- element: ElementMeta,
-}
+export function EipCard(props: Props) {
-export class EipCard extends React.Component<Props, State> {
+ const [setElement, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setElement, s.setModalOpen], shallow)
- public state: State = {
- element: this.props.element
- };
+ const element = props.element;
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.element);
+ function click (event: React.MouseEvent) {
+ setElement(element)
+ setModalOpen(true);
}
- render() {
- const component = this.state.element;
- return (
- <Card isCompact key={component.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconForDslName(component.className)}
- <CardTitle>{component.title}</CardTitle>
- </CardHeader>
- <CardBody>{component.description}</CardBody>
- <CardFooter className="footer-labels">
- <div>
- {component.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
+ return (
+ <Card isCompact key={element.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconForDslName(element.className)}
+ <CardTitle>{element.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{element.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <div>
+ {element.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
className="labels">{s}</Badge>)}
- </div>
- </CardFooter>
- </Card>
- )
- }
-};
\ No newline at end of file
+ </div>
+ </CardFooter>
+ </Card>
+ )
+}
\ No newline at end of file
diff --git a/karavan-designer/src/knowledgebase/eip/EipModal.tsx b/karavan-designer/src/knowledgebase/eip/EipModal.tsx
index 4757b953..d2100a25 100644
--- a/karavan-designer/src/knowledgebase/eip/EipModal.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipModal.tsx
@@ -24,65 +24,44 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
-import {ElementMeta, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- element?: ElementMeta,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- element?: ElementMeta,
-}
-export class EipModal extends React.Component<Props, State> {
+export function EipModal() {
- public state: State = {
- isOpen: this.props.isOpen,
- element: this.props.element,
- };
+ const [element, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.element, s.isModalOpen, s.setModalOpen], shallow)
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={element?.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={element?.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {element?.labels}</Badge></>, hasNoOffset: false, className: undefined}} >
+ {element && CamelUi.getIconForDslName(element?.className)}
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
- }
-
- render() {
- const component = this.state.element;
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={component?.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={component?.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {component?.labels}</Badge></>, hasNoOffset: false, className: undefined}} >
- {component && CamelUi.getIconForDslName(component?.className)}
-
- </CardHeader>
- <Text className="description">{component?.description}</Text>
- {component?.properties.length !== 0 &&
+ </CardHeader>
+ <Text className="description">{element?.description}</Text>
+ {element?.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -95,7 +74,7 @@ export class EipModal extends React.Component<Props, State> {
</Tr>
</Thead>
<Tbody>
- {component?.properties.map((p: PropertyMeta, idx: number) => (
+ {element?.properties.map((p: PropertyMeta, idx: number) => (
<Tr key={idx}>
<Td key={`${idx}_name`}>
<div>
@@ -114,9 +93,8 @@ export class EipModal extends React.Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- )
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-designer/src/knowledgebase/eip/EipTab.tsx b/karavan-designer/src/knowledgebase/eip/EipTab.tsx
index c5f552f7..e2757f9d 100644
--- a/karavan-designer/src/knowledgebase/eip/EipTab.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipTab.tsx
@@ -23,49 +23,37 @@ import '../../designer/karavan.css';
import {EipCard} from "./EipCard";
import {EipModal} from "./EipModal";
import {CamelModelMetadata, ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
filter: string,
}
-interface State {
- element?: ElementMeta;
- isModalOpen: boolean;
- repository: string,
- path: string,
- elements: ElementMeta[],
-}
+export function EipTab(props: Props) {
-export class EipTab extends React.Component<Props, State> {
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- elements: CamelModelMetadata.sort((a: ElementMeta,b: ElementMeta) => a.name > b.name ? 1 : -1),
- };
- select = (e: ElementMeta)=> {
- this.setState({element: e, isModalOpen: true})
- }
+ const {filter} = props;
+ const elements = CamelModelMetadata
+ .filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
+ .sort((a: ElementMeta, b: ElementMeta) => a.name > b.name ? 1 : -1);
- render() {
- const element = this.state.element;
- const {filter} = this.props;
- const elements = CamelModelMetadata.filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
- return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
- <EipModal key={element?.name + this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen} element={element}/>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {elements.map(c => (
- <EipCard key={c.name} element={c} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ return (
+ <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}
+ padding={{default: 'noPadding'}} className="kamelet-section">
+ {isModalOpen && <EipModal/>}
+ <PageSection isFilled className="kamelets-page"
+ variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {elements.map(c => (
+ <EipCard key={c.name} element={c}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
+ </PageSection>
+ )
}
\ No newline at end of file
diff --git a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
index 948ffb70..045846e9 100644
--- a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
@@ -22,49 +22,44 @@ import '../../designer/karavan.css';
import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {CamelUi} from "../../designer/utils/CamelUi";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
kamelet: KameletModel,
- onClickCard: any
}
-interface State {
- kamelet: KameletModel,
-}
+export function KameletCard(props: Props) {
-export class KameletCard extends React.Component<Props, State> {
+ const [setKamelet, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setKamelet, s.setModalOpen], shallow)
- public state: State = {
- kamelet: this.props.kamelet
- };
+ const kamelet = props.kamelet;
+ const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.kamelet);
- }
+ function click (event: React.MouseEvent) {
+ setKamelet(kamelet)
+ setModalOpen(true);
- render() {
- const kamelet = this.state.kamelet;
- const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
- return (
- <Card isCompact key={kamelet.metadata.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader className="header-labels">
- {isCustom && <Badge className="custom">custom</Badge>}
- <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconFromSource(kamelet.icon())}
- <CardTitle>{kamelet.spec.definition.title}</CardTitle>
- </CardHeader>
- <CardBody>{kamelet.spec.definition.description}</CardBody>
- <CardFooter className="footer-labels">
- <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
- <Badge isRead className="version labels">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
- {/*</div>*/}
- </CardFooter>
- </Card>
- );
}
+ return (
+ <Card isCompact key={kamelet.metadata.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader className="header-labels">
+ {isCustom && <Badge className="custom">custom</Badge>}
+ <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconFromSource(kamelet.icon())}
+ <CardTitle>{kamelet.spec.definition.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{kamelet.spec.definition.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
+ <Badge isRead className="version labels">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
+ {/*</div>*/}
+ </CardFooter>
+ </Card>
+ )
};
\ No newline at end of file
diff --git a/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx b/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx
index 33801485..d95dbeee 100644
--- a/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx
+++ b/karavan-designer/src/knowledgebase/kamelets/KameletModal.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {Component} from 'react';
+import React from 'react';
import {
Button,
Modal,
@@ -24,70 +24,49 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {KameletModel, Property} from "karavan-core/lib/model/KameletModels";
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Property} from "karavan-core/lib/model/KameletModels";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- kamelet?: KameletModel,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- kamelet?: KameletModel,
-}
+export function KameletModal() {
-export class KameletModal extends Component<Props, State> {
-
- public state: State = {
- isOpen: this.props.isOpen,
- kamelet: this.props.kamelet,
- };
-
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ const [kamelet, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.kamelet, s.isModalOpen, s.setModalOpen], shallow)
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
- }
-
- getKameletProperties = (properties: any): any[] => {
+ function getKameletProperties (properties: any): any[] {
return properties
? Array.from(new Map(Object.entries(properties)), ([name, value]) => (value))
: [];
}
- render() {
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={this.state.kamelet?.spec.definition.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={this.state.kamelet?.metadata.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {this.state.kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge></>, hasNoOffset: false, className: undefined}} >
- {this.state.kamelet && CamelUi.getIconFromSource(this.state.kamelet?.icon())}
-
- </CardHeader>
- <Text className="description">{this.state.kamelet?.spec.definition.description}</Text>
- {this.state.kamelet?.spec.definition.properties && this.state.kamelet?.spec.definition.properties.length !== 0 &&
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={kamelet?.spec.definition.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={kamelet?.metadata.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge></>, hasNoOffset: false, className: undefined}} >
+ {kamelet && CamelUi.getIconFromSource(kamelet?.icon())}
+
+ </CardHeader>
+ <Text className="description">{kamelet?.spec.definition.description}</Text>
+ {kamelet?.spec.definition.properties && kamelet?.spec.definition.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -101,7 +80,7 @@ export class KameletModal extends Component<Props, State> {
</Tr>
</Thead>
<Tbody>
- {this.getKameletProperties(this.state.kamelet?.spec.definition.properties).map((p: Property, idx: number) => (
+ {getKameletProperties(kamelet?.spec.definition.properties).map((p: Property, idx: number) => (
<Tr key={idx}>
<Td key={`${idx}_title`}>{p.title}</Td>
<Td key={`${idx}_type`}>{p.type}</Td>
@@ -113,9 +92,8 @@ export class KameletModal extends Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- );
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-designer/src/knowledgebase/kamelets/KameletsTab.tsx b/karavan-designer/src/knowledgebase/kamelets/KameletsTab.tsx
index 57cc25ba..fb8df6df 100644
--- a/karavan-designer/src/knowledgebase/kamelets/KameletsTab.tsx
+++ b/karavan-designer/src/knowledgebase/kamelets/KameletsTab.tsx
@@ -22,9 +22,10 @@ import {
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {KameletCard} from "./KameletCard";
-import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
import {KameletModal} from "./KameletModal";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
@@ -32,52 +33,32 @@ interface Props {
customOnly: boolean,
}
-interface State {
- kamelet?: KameletModel;
- isModalOpen: boolean;
- repository: string,
- path: string,
- kamelets: KameletModel[],
+interface Props {
+ dark: boolean,
+ filter: string,
}
-export class KameletsTab extends React.Component<Props, State> {
-
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- kamelets: [],
- };
-
- componentDidMount() {
- this.setState({kamelets: KameletApi.getKamelets()})
- }
+export function KameletsTab(props: Props) {
- select = (k: KameletModel) => {
- this.setState({kamelet: k, isModalOpen: true})
- }
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- render() {
- const {dark} = this.props;
- const {kamelets, kamelet, isModalOpen} = this.state;
- const {filter, customOnly} = this.props;
- let kameletList = kamelets.filter(kamelet =>
- kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
- if (customOnly) kameletList = kameletList.filter(k => KameletApi.getCustomKameletNames().includes(k.metadata.name));
- return (
- <PageSection variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}
- padding={{default: 'noPadding'}} className="kamelet-section">
- <KameletModal key={kamelet?.metadata.name + isModalOpen.toString()}
- isOpen={isModalOpen} kamelet={kamelet}/>
- <PageSection isFilled className="kamelets-page"
- variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {kameletList.map(k => (
- <KameletCard key={k.metadata.name} kamelet={k} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ const {filter, customOnly, dark} = props;
+ let kameletList = KameletApi.getKamelets().filter(kamelet =>
+ kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
+ if (customOnly) kameletList = kameletList.filter(k => KameletApi.getCustomKameletNames().includes(k.metadata.name));
+ return (
+ <PageSection variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}
+ padding={{default: 'noPadding'}} className="kamelet-section">
+ {isModalOpen && <KameletModal/>}
+ <PageSection isFilled className="kamelets-page"
+ variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {kameletList.map(k => (
+ <KameletCard key={k.metadata.name} kamelet={k}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
+ </PageSection>
+ )
}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-space/src/designer/DesignerStore.ts
similarity index 100%
copy from karavan-designer/src/designer/KaravanStore.ts
copy to karavan-space/src/designer/DesignerStore.ts
diff --git a/karavan-space/src/designer/KaravanDesigner.tsx b/karavan-space/src/designer/KaravanDesigner.tsx
index cb58a377..71914986 100644
--- a/karavan-space/src/designer/KaravanDesigner.tsx
+++ b/karavan-space/src/designer/KaravanDesigner.tsx
@@ -33,7 +33,7 @@ import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelUi} from "./utils/CamelUi";
-import {useDesignerStore, useIntegrationStore} from "./KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "./DesignerStore";
import {shallow} from "zustand/shallow";
import {getDesignerIcon} from "./utils/KaravanIcons";
import {InfrastructureAPI} from "./utils/InfrastructureAPI";
@@ -42,6 +42,7 @@ import {RestDesigner} from "./rest/RestDesigner";
import {BeansDesigner} from "./beans/BeansDesigner";
import {CodeEditor} from "./editor/CodeEditor";
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import {KameletDesigner} from "./kamelet/KameletDesigner";
interface Props {
onSave: (filename: string, yaml: string, propertyOnly: boolean) => void
@@ -71,7 +72,9 @@ export function KaravanDesigner(props: Props) {
InfrastructureAPI.setOnSave(props.onSave);
setSelectedStep(undefined);
- setIntegration(makeIntegration(props.yaml, props.filename), false);
+ const i = makeIntegration(props.yaml, props.filename);
+ setIntegration(i, false);
+ setTab(i.kind === 'Kamelet' ? 'kamelet' : 'routes')
reset();
setDark(props.dark);
setHideLogDSL(props.hideLogDSL === true);
@@ -84,8 +87,10 @@ export function KaravanDesigner(props: Props) {
function makeIntegration(yaml: string, filename: string): Integration {
try {
- if (yaml && CamelDefinitionYaml.yamlIsIntegration(yaml)) {
- return CamelDefinitionYaml.yamlToIntegration(props.filename, props.yaml)
+ const type = CamelDefinitionYaml.yamlIsIntegration(yaml);
+ if (yaml && type !== 'none') {
+ const i = CamelDefinitionYaml.yamlToIntegration(props.filename, props.yaml)
+ return i;
} else {
return Integration.createNew(filename, 'plain');
}
@@ -126,6 +131,8 @@ export function KaravanDesigner(props: Props) {
)
}
+ const isKamelet = integration.type === 'kamelet';
+
return (
<PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light} className="page"
isFilled padding={{default: 'noPadding'}}>
@@ -137,8 +144,9 @@ export function KaravanDesigner(props: Props) {
setSelectedStep(undefined);
}}
style={{width: "100%"}}>
+ {isKamelet && <Tab eventKey='kamelet' title={getTab("Definitions", "Kamelet Definitions", "kamelet")}></Tab>}
<Tab eventKey='routes' title={getTab("Routes", "Integration flows", "routes")}></Tab>
- <Tab eventKey='rest' title={getTab("REST", "REST services", "rest")}></Tab>
+ {!isKamelet && <Tab eventKey='rest' title={getTab("REST", "REST services", "rest")}></Tab>}
<Tab eventKey='beans' title={getTab("Beans", "Beans Configuration", "beans")}></Tab>
{props.showCodeTab && <Tab eventKey='code' title={getTab("YAML", "YAML Code", "code", true)}></Tab>}
</Tabs>
@@ -156,6 +164,7 @@ export function KaravanDesigner(props: Props) {
{/* />*/}
{/*</Tooltip>}*/}
</div>
+ {tab === 'kamelet' && <KameletDesigner/>}
{tab === 'routes' && <RouteDesigner/>}
{tab === 'rest' && <RestDesigner/>}
{tab === 'beans' && <BeansDesigner/>}
diff --git a/karavan-space/src/designer/beans/BeanCard.tsx b/karavan-space/src/designer/beans/BeanCard.tsx
index e9f1187d..e38ed2c1 100644
--- a/karavan-space/src/designer/beans/BeanCard.tsx
+++ b/karavan-space/src/designer/beans/BeanCard.tsx
@@ -21,7 +21,7 @@ import {
import './bean.css';
import {RegistryBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props {
diff --git a/karavan-space/src/designer/beans/BeanProperties.tsx b/karavan-space/src/designer/beans/BeanProperties.tsx
index 15b8f086..fdb73d2a 100644
--- a/karavan-space/src/designer/beans/BeanProperties.tsx
+++ b/karavan-space/src/designer/beans/BeanProperties.tsx
@@ -39,7 +39,7 @@ import {InfrastructureAPI} from "../utils/InfrastructureAPI";
import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {IntegrationHeader} from "../utils/IntegrationHeader";
@@ -194,7 +194,8 @@ export function BeanProperties (props: Props) {
const icon = InfrastructureAPI.infrastructure === 'kubernetes' ? <KubernetesIcon/> : <DockerIcon/>
return (
<div key={"key-" + i} className="bean-property">
- <TextInput placeholder="Bean Field Name" className="text-field" isRequired type="text" id="key" name="key" value={key}
+ <TextInput placeholder="Bean Field Name" className="text-field" isRequired type="text" id={"key-" + i}
+ name={"key-" + i} value={key}
onChange={(_, beanFieldName) => {
propertyChanged(i, beanFieldName, value, showPassword)
}}/>
@@ -211,8 +212,8 @@ export function BeanProperties (props: Props) {
type={isSecret && !showPassword ? "password" : "text"}
className="text-field"
isRequired
- id="value"
- name="value"
+ id={"value-" + i}
+ name={"value-" + i}
value={value}
onChange={(_, value) => {
propertyChanged(i, key, value, showPassword)
diff --git a/karavan-space/src/designer/beans/BeansDesigner.tsx b/karavan-space/src/designer/beans/BeansDesigner.tsx
index 8262b7bf..64bac96f 100644
--- a/karavan-space/src/designer/beans/BeansDesigner.tsx
+++ b/karavan-space/src/designer/beans/BeansDesigner.tsx
@@ -33,7 +33,7 @@ import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt"
import {BeanProperties} from "./BeanProperties";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {BeanCard} from "./BeanCard";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function BeansDesigner() {
diff --git a/karavan-space/src/designer/editor/CodeEditor.tsx b/karavan-space/src/designer/editor/CodeEditor.tsx
index 323bf0cf..cd6a4f36 100644
--- a/karavan-space/src/designer/editor/CodeEditor.tsx
+++ b/karavan-space/src/designer/editor/CodeEditor.tsx
@@ -18,7 +18,7 @@ import React, {useEffect, useState} from 'react';
import '../../designer/karavan.css';
import Editor from "@monaco-editor/react";
import {shallow} from "zustand/shallow";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import {EventBus} from "../utils/EventBus";
diff --git a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx b/karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx
similarity index 98%
copy from karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
copy to karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx
index 3c997173..076aec40 100644
--- a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
+++ b/karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx
@@ -30,7 +30,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
const PREFIX = 'camel.apache.org/';
diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx b/karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
similarity index 99%
copy from karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
copy to karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
index a478c101..d8933df4 100644
--- a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
+++ b/karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
@@ -27,7 +27,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition";
diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx b/karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx
similarity index 98%
copy from karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx
copy to karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx
index 4c638ee3..009a54ac 100644
--- a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx
+++ b/karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx
@@ -28,7 +28,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {KameletDefinitionPropertyCard} from "./KameletDefinitionPropertyCard";
diff --git a/karavan-designer/src/designer/kamelet/KameletDesigner.tsx b/karavan-space/src/designer/kamelet/KameletDesigner.tsx
similarity index 98%
copy from karavan-designer/src/designer/kamelet/KameletDesigner.tsx
copy to karavan-space/src/designer/kamelet/KameletDesigner.tsx
index 3c0b5fa8..dd889b92 100644
--- a/karavan-designer/src/designer/kamelet/KameletDesigner.tsx
+++ b/karavan-space/src/designer/kamelet/KameletDesigner.tsx
@@ -31,7 +31,7 @@ import {CamelUi} from "../utils/CamelUi";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {BeanProperties} from "../beans/BeanProperties";
import {BeanCard} from "../beans/BeanCard";
diff --git a/karavan-designer/src/designer/kamelet/KameletProperties.tsx b/karavan-space/src/designer/kamelet/KameletProperties.tsx
similarity index 99%
copy from karavan-designer/src/designer/kamelet/KameletProperties.tsx
copy to karavan-space/src/designer/kamelet/KameletProperties.tsx
index 93c696fa..fc8f188f 100644
--- a/karavan-designer/src/designer/kamelet/KameletProperties.tsx
+++ b/karavan-space/src/designer/kamelet/KameletProperties.tsx
@@ -39,7 +39,7 @@ import {InfrastructureAPI} from "../utils/InfrastructureAPI";
import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {IntegrationHeader} from "../utils/IntegrationHeader";
diff --git a/karavan-space/src/designer/kamelet/kamelet.css b/karavan-space/src/designer/kamelet/kamelet.css
new file mode 100644
index 00000000..bbdf28a9
--- /dev/null
+++ b/karavan-space/src/designer/kamelet/kamelet.css
@@ -0,0 +1,47 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.karavan .kamelet-designer {
+ display: block;
+ height: 100vh;
+ width: 100%;
+ overflow-y: auto;
+ padding-bottom: 106px;
+}
+
+.karavan .kamelet-designer .main {
+ background-color: var(--pf-v5-global--BackgroundColor--light-300);
+}
+.karavan .kamelet-designer .icon {
+ height: 20px;
+ width: 20px;
+ border: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.karavan .kamelet-designer .properties {
+ padding: 10px 10px 10px 10px;
+ background: transparent;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
\ No newline at end of file
diff --git a/karavan-space/src/designer/rest/RestDesigner.tsx b/karavan-space/src/designer/rest/RestDesigner.tsx
index 4a607cad..51ce51af 100644
--- a/karavan-space/src/designer/rest/RestDesigner.tsx
+++ b/karavan-space/src/designer/rest/RestDesigner.tsx
@@ -37,7 +37,7 @@ import {DslMetaModel} from "../utils/DslMetaModel";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {RestConfigurationCard} from "./RestConfigurationCard";
import {v4 as uuidv4} from "uuid";
-import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function RestDesigner() {
diff --git a/karavan-space/src/designer/rest/RestMethodCard.tsx b/karavan-space/src/designer/rest/RestMethodCard.tsx
index f27e364c..2af666bf 100644
--- a/karavan-space/src/designer/rest/RestMethodCard.tsx
+++ b/karavan-space/src/designer/rest/RestMethodCard.tsx
@@ -19,7 +19,7 @@ import {Button} from '@patternfly/react-core';
import '../karavan.css';
import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props<T extends CamelElement> {
diff --git a/karavan-space/src/designer/rest/RestMethodSelector.tsx b/karavan-space/src/designer/rest/RestMethodSelector.tsx
index bbd4cccb..7368c08c 100644
--- a/karavan-space/src/designer/rest/RestMethodSelector.tsx
+++ b/karavan-space/src/designer/rest/RestMethodSelector.tsx
@@ -24,7 +24,7 @@ import {
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props {
diff --git a/karavan-space/src/designer/route/DeleteConfirmation.tsx b/karavan-space/src/designer/route/DeleteConfirmation.tsx
index 999a4752..b2cb4d4d 100644
--- a/karavan-space/src/designer/route/DeleteConfirmation.tsx
+++ b/karavan-space/src/designer/route/DeleteConfirmation.tsx
@@ -20,7 +20,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import {useRouteDesignerHook} from "./useRouteDesignerHook";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function DeleteConfirmation() {
diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx
index f39a1aa8..de6a0060 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -20,7 +20,7 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {DslPosition, EventBus} from "../utils/EventBus";
import {CamelUi} from "../utils/CamelUi";
import {SagaDefinition} from "karavan-core/lib/model/CamelDefinition";
-import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {TopologyUtils} from "karavan-core/lib/api/TopologyUtils";
diff --git a/karavan-space/src/designer/route/DslElement.tsx b/karavan-space/src/designer/route/DslElement.tsx
index 489c675d..5f2744c5 100644
--- a/karavan-space/src/designer/route/DslElement.tsx
+++ b/karavan-space/src/designer/route/DslElement.tsx
@@ -31,7 +31,7 @@ import {EventBus} from "../utils/EventBus";
import {ChildElement, CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
diff --git a/karavan-space/src/designer/route/DslProperties.tsx b/karavan-space/src/designer/route/DslProperties.tsx
index 69729121..82fd3dd9 100644
--- a/karavan-space/src/designer/route/DslProperties.tsx
+++ b/karavan-space/src/designer/route/DslProperties.tsx
@@ -30,7 +30,7 @@ import {CamelUi} from "../utils/CamelUi";
import {CamelMetadataApi, DataFormats, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
import {IntegrationHeader} from "../utils/IntegrationHeader";
import CloneIcon from "@patternfly/react-icons/dist/esm/icons/clone-icon";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {usePropertiesHook} from "./usePropertiesHook";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
@@ -46,8 +46,7 @@ export function DslProperties(props: Props) {
const {cloneElement, onDataFormatChange, onPropertyChange, onParametersChange, onExpressionChange} = usePropertiesHook(props.isRouteDesigner);
- const [selectedStep, dark, setSelectedStep, setSelectedUuids] = useDesignerStore((s) =>
- [s.selectedStep, s.dark, s.setSelectedStep, s.setSelectedUuids], shallow)
+ const [selectedStep, dark] = useDesignerStore((s) => [s.selectedStep, s.dark], shallow)
const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState<boolean>(false);
diff --git a/karavan-space/src/designer/route/DslSelector.tsx b/karavan-space/src/designer/route/DslSelector.tsx
index 2e383cb6..8f815536 100644
--- a/karavan-space/src/designer/route/DslSelector.tsx
+++ b/karavan-space/src/designer/route/DslSelector.tsx
@@ -24,7 +24,7 @@ import {
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
-import {useDesignerStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
diff --git a/karavan-space/src/designer/route/RouteDesigner.tsx b/karavan-space/src/designer/route/RouteDesigner.tsx
index a78a4eed..7d3b5950 100644
--- a/karavan-space/src/designer/route/RouteDesigner.tsx
+++ b/karavan-space/src/designer/route/RouteDesigner.tsx
@@ -30,7 +30,7 @@ import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {DslElement} from "./DslElement";
import {CamelUi} from "../utils/CamelUi";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
-import {useConnectionsStore, useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import useResizeObserver from "./useResizeObserver";
import {Command, EventBus} from "../utils/EventBus";
diff --git a/karavan-space/src/designer/route/property/ComponentParameterField.tsx b/karavan-space/src/designer/route/property/ComponentParameterField.tsx
index 34c6cadb..23f8228a 100644
--- a/karavan-space/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-space/src/designer/route/property/ComponentParameterField.tsx
@@ -49,7 +49,7 @@ import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {usePropertiesHook} from "../usePropertiesHook";
-import {useDesignerStore, useIntegrationStore} from "../../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../../DesignerStore";
import {shallow} from "zustand/shallow";
const prefix = "parameters";
diff --git a/karavan-space/src/designer/route/property/DslPropertyField.tsx b/karavan-space/src/designer/route/property/DslPropertyField.tsx
index 26bbdfd1..b07e8beb 100644
--- a/karavan-space/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-space/src/designer/route/property/DslPropertyField.tsx
@@ -66,7 +66,7 @@ import {InfrastructureAPI} from "../../utils/InfrastructureAPI";
import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon";
import {ModalEditor} from "./ModalEditor";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore, useIntegrationStore} from "../../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../../DesignerStore";
import {shallow} from "zustand/shallow";
import {DataFormatDefinition, ExpressionDefinition} from "karavan-core/lib/model/CamelDefinition";
import {TemplateApi} from "karavan-core/lib/api/TemplateApi";
diff --git a/karavan-space/src/designer/route/usePropertiesHook.tsx b/karavan-space/src/designer/route/usePropertiesHook.tsx
index 058ae5f2..eba82bf2 100644
--- a/karavan-space/src/designer/route/usePropertiesHook.tsx
+++ b/karavan-space/src/designer/route/usePropertiesHook.tsx
@@ -23,7 +23,7 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {RouteToCreate} from "../utils/CamelUi";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function usePropertiesHook (isRouteDesigner: boolean = true) {
diff --git a/karavan-space/src/designer/route/useRouteDesignerHook.tsx b/karavan-space/src/designer/route/useRouteDesignerHook.tsx
index 4d814f1a..fe61d410 100644
--- a/karavan-space/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-space/src/designer/route/useRouteDesignerHook.tsx
@@ -25,7 +25,7 @@ import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {Command, EventBus} from "../utils/EventBus";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
import {toPng} from 'html-to-image';
-import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function useRouteDesignerHook () {
@@ -77,15 +77,16 @@ export function useRouteDesignerHook () {
const deleteElement = () => {
EventBus.sendPosition("clean", new CamelElement(""), undefined, new DOMRect(), new DOMRect(), 0);
+ let i = integration;
selectedUuids.forEach(uuidToDelete => {
- const i = CamelDefinitionApiExt.deleteStepFromIntegration(integration, uuidToDelete);
- setIntegration(i, false);
- setShowSelector(false);
- setShowDeleteConfirmation(false);
- setDeleteMessage('');
- setSelectedStep(undefined);
- setSelectedUuids([]);
+ i = CamelDefinitionApiExt.deleteStepFromIntegration(i, uuidToDelete);
});
+ setIntegration(i, false);
+ setShowSelector(false);
+ setShowDeleteConfirmation(false);
+ setDeleteMessage('');
+ setSelectedStep(undefined);
+ setSelectedUuids([]);
}
const selectElement = (element: CamelElement) => {
diff --git a/karavan-space/src/designer/utils/IntegrationHeader.tsx b/karavan-space/src/designer/utils/IntegrationHeader.tsx
index c117d434..9b75fd5e 100644
--- a/karavan-space/src/designer/utils/IntegrationHeader.tsx
+++ b/karavan-space/src/designer/utils/IntegrationHeader.tsx
@@ -16,26 +16,43 @@
*/
import React from 'react';
import {FormGroup, TextInput, Title} from "@patternfly/react-core";
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function IntegrationHeader () {
const [integration] = useIntegrationStore((state) => [state.integration], shallow)
+ const isKamelet = integration.type === 'kamelet';
+
+ function getKameletType(): string {
+ // const labels = integration.metadata.labels;
+ // if (labels && labels.l)
+ // "camel.apache.org/kamelet.type"
+ return '';
+ }
+
return (
<div className="headers">
- <Title headingLevel="h1" size="md">Integration</Title>
+ {/*<Title headingLevel="h1" size="md">Integration</Title>*/}
{/*<FormGroup label="Title" fieldId="title" isRequired>*/}
{/* <TextInput className="text-field" type="text" id="title" name="title" isReadOnly*/}
{/* value={*/}
{/* CamelUi.titleFromName(this.props.integration.metadata.name)*/}
{/* }/>*/}
{/*</FormGroup>*/}
+ <FormGroup label="Kind" fieldId="kind" isRequired>
+ <TextInput className="text-field" type="text" id="kind" name="kind"
+ value={integration.kind} readOnlyVariant="default"/>
+ </FormGroup>
<FormGroup label="Name" fieldId="name" isRequired>
<TextInput className="text-field" type="text" id="name" name="name"
value={integration.metadata.name} readOnlyVariant="default"/>
</FormGroup>
+ {isKamelet && <FormGroup label="Kamelet type" fieldId="type" isRequired>
+ <TextInput className="text-field" type="text" id="type" name="type"
+ value={integration.metadata.labels?.["camel.apache.org/kamelet.type"]} readOnlyVariant="default"/>
+ </FormGroup>}
</div>
)
}
diff --git a/karavan-space/src/designer/utils/KaravanIcons.tsx b/karavan-space/src/designer/utils/KaravanIcons.tsx
index 677945f5..906ba86e 100644
--- a/karavan-space/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-space/src/designer/utils/KaravanIcons.tsx
@@ -263,21 +263,38 @@ export function CamelIcon(props?: (JSX.IntrinsicAttributes & React.SVGProps<SVGS
}
export function getDesignerIcon(icon: string) {
- if (icon === 'code') return (
- <svg
- className="top-icon" id="icon"
- xmlns="http://www.w3.org/2000/svg"
- width="24"
- height="24"
- fill="none"
- viewBox="0 0 24 24"
- >
- <path
- fill="#000000"
- d="M8.502 5.387a.75.75 0 00-1.004-1.115L5.761 5.836c-.737.663-1.347 1.212-1.767 1.71-.44.525-.754 1.088-.754 1.784 0 .695.313 1.258.754 1.782.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 101.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598-.33-.393-.402-.622-.402-.817 0-.196.072-.425.402-.818.344-.409.875-.889 1.663-1.598l1.697-1.527zM14.18 4.275a.75.75 0 01.532.918l-3.987 15a.75.75 0 11-1.45-.386l3.987-15a.75.75 0 01.918-.532zM15.443 10.498a.75.75 0 011.059-.05 [...]
- ></path>
- </svg>
+ if (icon === 'kamelet') return (
+ <svg
+ className="top-icon" id="icon"
+ 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"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
)
+ if (icon === 'code') return (
+ <svg
+
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ fill="none"
+ viewBox="0 0 24 24"
+ >
+ <path
+ fill="#000000"
+ d="M8.502 5.387a.75.75 0 00-1.004-1.115L5.761 5.836c-.737.663-1.347 1.212-1.767 1.71-.44.525-.754 1.088-.754 1.784 0 .695.313 1.258.754 1.782.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 101.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598-.33-.393-.402-.622-.402-.817 0-.196.072-.425.402-.818.344-.409.875-.889 1.663-1.598l1.697-1.527zM14.18 4.275a.75.75 0 01.532.918l-3.987 15a.75.75 0 11-1.45-.386l3.987-15a.75.75 0 01.918-.532zM15.443 10.498a.75.75 0 011.059 [...]
+ ></path>
+ </svg>
+ )
if (icon === 'routes') return (
<svg className="top-icon" width="32px" height="32px" viewBox="0 0 32 32" id="icon">
<defs>
diff --git a/karavan-space/src/knowledgebase/KnowledgebaseStore.ts b/karavan-space/src/knowledgebase/KnowledgebaseStore.ts
new file mode 100644
index 00000000..32b81787
--- /dev/null
+++ b/karavan-space/src/knowledgebase/KnowledgebaseStore.ts
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {createWithEqualityFn} from "zustand/traditional";
+import {shallow} from "zustand/shallow";
+import {Component} from "karavan-core/lib/model/ComponentModels";
+import {ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {KameletModel} from "karavan-core/lib/model/KameletModels";
+
+interface KnowledgebaseState {
+ isModalOpen: boolean;
+ setModalOpen: (isModalOpen: boolean) => void;
+ component?: Component;
+ setComponent: (component: Component) => void;
+ element?: ElementMeta;
+ setElement: (element: ElementMeta) => void;
+ kamelet?: KameletModel;
+ setKamelet: (kamelet: KameletModel) => void;
+}
+
+export const useKnowledgebaseStore = createWithEqualityFn<KnowledgebaseState>((set) => ({
+ isModalOpen: false,
+ setModalOpen: (isModalOpen: boolean) => {
+ set((state: KnowledgebaseState) => {
+ return {isModalOpen: isModalOpen};
+ })
+ },
+ setComponent: (component: Component) => {
+ set((state: KnowledgebaseState) => {
+ return {component: component};
+ })
+ },
+ setElement: (element: ElementMeta) => {
+ set((state: KnowledgebaseState) => {
+ return {element: element};
+ })
+ },
+ setKamelet: (kamelet: KameletModel) => {
+ set((state: KnowledgebaseState) => {
+ return {kamelet: kamelet};
+ })
+ }
+}), shallow)
\ No newline at end of file
diff --git a/karavan-space/src/knowledgebase/components/ComponentCard.tsx b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
index 9226bb52..338dc3b9 100644
--- a/karavan-space/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
@@ -21,47 +21,42 @@ import {
import '../../designer/karavan.css';
import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
component: Component,
- onClickCard: any
}
-interface State {
- component: Component,
-}
+export function ComponentCard(props: Props) {
-export class ComponentCard extends React.Component<Props, State> {
+ const [setComponent, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setComponent, s.setModalOpen], shallow)
- public state: State = {
- component: this.props.component
- };
+ const component = props.component;
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.component);
+ function click (event: React.MouseEvent) {
+ setComponent(component)
+ setModalOpen(true);
}
- render() {
- const component = this.state.component;
- return (
- <Card isCompact key={component.component.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader className="header-labels">
- {component.component.supportType === 'Supported' && <Badge isRead className="support-type labels">{component.component.supportType}</Badge>}
- <Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconForComponent(component.component.title, component.component.label)}
- <CardTitle>{component.component.title}</CardTitle>
- </CardHeader>
- <CardBody>{component.component.description}</CardBody>
- <CardFooter className="footer-labels">
- <Badge isRead className="labels">{component.component.label}</Badge>
- <Badge isRead className="version labels">{component.component.version}</Badge>
- </CardFooter>
- </Card>
- );
- }
+ return (
+ <Card isCompact key={component.component.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader className="header-labels">
+ {component.component.supportType === 'Supported' && <Badge isRead className="support-type labels">{component.component.supportType}</Badge>}
+ <Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconForComponent(component.component.title, component.component.label)}
+ <CardTitle>{component.component.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{component.component.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <Badge isRead className="labels">{component.component.label}</Badge>
+ <Badge isRead className="version labels">{component.component.version}</Badge>
+ </CardFooter>
+ </Card>
+ )
}
\ No newline at end of file
diff --git a/karavan-space/src/knowledgebase/components/ComponentModal.tsx b/karavan-space/src/knowledgebase/components/ComponentModal.tsx
index fd082fee..da8f1584 100644
--- a/karavan-space/src/knowledgebase/components/ComponentModal.tsx
+++ b/karavan-space/src/knowledgebase/components/ComponentModal.tsx
@@ -24,72 +24,53 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
-import {Component} from "karavan-core/lib/model/ComponentModels";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- component?: Component,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- component?: Component,
-}
+export function ComponentModal() {
-export class ComponentModal extends React.Component<Props, State> {
-
- public state: State = {
- isOpen: this.props.isOpen,
- component: this.props.component,
- };
-
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ const [component, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.component, s.isModalOpen, s.setModalOpen], shallow)
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
+ const props = new Map<string, ComponentProperty>();
+ if (component) {
+ ComponentApi.getComponentProperties(component?.component.name, "consumer").forEach(cp => props.set(cp.name, cp));
+ ComponentApi.getComponentProperties(component?.component.name, "producer").forEach(cp => props.set(cp.name, cp));
}
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={component?.component.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={component?.component.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{
+ actions: <><Badge className="badge"
+ isRead> {component?.component.label}</Badge></>,
+ hasNoOffset: false,
+ className: undefined
+ }}>
+ {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
- render() {
- const component = this.state.component;
- const props = new Map<string, ComponentProperty>();
- if (component){
- ComponentApi.getComponentProperties(component?.component.name, "consumer").forEach(cp => props.set(cp.name, cp));
- ComponentApi.getComponentProperties(component?.component.name, "producer").forEach(cp => props.set(cp.name, cp));
- }
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={component?.component.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={component?.component.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {component?.component.label}</Badge></>, hasNoOffset: false, className: undefined}} >
- {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
-
- </CardHeader>
- <Text className="description">{component?.component.description}</Text>
- {props.size !== 0 &&
+ </CardHeader>
+ <Text className="description">{component?.component.description}</Text>
+ {props.size !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -110,10 +91,13 @@ export class ComponentModal extends React.Component<Props, State> {
<div>{p.name}</div>
</div>
</Td>
- <Td key={`${idx}_desc`}><div>
- <div>{p.description}</div>
- {p.defaultValue && p.defaultValue.toString().length > 0 && <div>{"Default value: " + p.defaultValue}</div>}
- </div></Td>
+ <Td key={`${idx}_desc`}>
+ <div>
+ <div>{p.description}</div>
+ {p.defaultValue && p.defaultValue.toString().length > 0 &&
+ <div>{"Default value: " + p.defaultValue}</div>}
+ </div>
+ </Td>
<Td key={`${idx}_type`}>{p.type}</Td>
<Td key={`${idx}_label`}>{p.label}</Td>
</Tr>
@@ -121,9 +105,8 @@ export class ComponentModal extends React.Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- )
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-space/src/knowledgebase/components/ComponentsTab.tsx b/karavan-space/src/knowledgebase/components/ComponentsTab.tsx
index c2a75b7a..708b04bd 100644
--- a/karavan-space/src/knowledgebase/components/ComponentsTab.tsx
+++ b/karavan-space/src/knowledgebase/components/ComponentsTab.tsx
@@ -22,60 +22,37 @@ import {
import '../../designer/karavan.css';
import {ComponentCard} from "./ComponentCard";
import {ComponentModal} from "./ComponentModal";
-import {Component} from "karavan-core/lib/model/ComponentModels";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
+import {shallow} from "zustand/shallow";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
interface Props {
dark: boolean,
filter: string,
- onRefresh?: () => Promise<void>
}
-interface State {
- component?: Component;
- isModalOpen: boolean;
- repository: string,
- path: string,
- components: Component[],
-}
-
-export class ComponentsTab extends React.Component<Props, State> {
-
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- components: [],
- };
+export function ComponentsTab(props: Props) {
- componentDidMount() {
- this.setState({components: ComponentApi.getComponents()})
- }
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- select = (c: Component)=> {
- this.setState({component: c, isModalOpen: true})
- }
- render() {
- const component = this.state.component;
- const {filter} = this.props;
- const components = ComponentApi.getComponents().filter(c => {
- return c.component.name.toLowerCase().includes(filter.toLowerCase())
+ const {filter} = props;
+ const components = ComponentApi.getComponents().filter(c => {
+ return c.component.name.toLowerCase().includes(filter.toLowerCase())
|| c.component.title.toLowerCase().includes(filter.toLowerCase())
|| c.component.description.toLowerCase().includes(filter.toLowerCase())
- }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ;
- return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
- <ComponentModal key={component?.component.name + this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen} component={component}/>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {components.map(c => (
- <ComponentCard key={c.component.name} component={c} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ;
+ return (
+ <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
+ {isModalOpen && <ComponentModal/>}
+ <PageSection isFilled className="kamelets-page" variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {components.map(c => (
+ <ComponentCard key={c.component.name} component={c}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
-};
\ No newline at end of file
+ </PageSection>
+ )
+}
\ No newline at end of file
diff --git a/karavan-space/src/knowledgebase/eip/EipCard.tsx b/karavan-space/src/knowledgebase/eip/EipCard.tsx
index db980615..fb47a932 100644
--- a/karavan-space/src/knowledgebase/eip/EipCard.tsx
+++ b/karavan-space/src/knowledgebase/eip/EipCard.tsx
@@ -21,47 +21,42 @@ import {
import '../../designer/karavan.css';
import {CamelUi} from "../../designer/utils/CamelUi";
import {ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
element: ElementMeta,
- onClickCard: any
}
-interface State {
- element: ElementMeta,
-}
+export function EipCard(props: Props) {
-export class EipCard extends React.Component<Props, State> {
+ const [setElement, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setElement, s.setModalOpen], shallow)
- public state: State = {
- element: this.props.element
- };
+ const element = props.element;
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.element);
+ function click (event: React.MouseEvent) {
+ setElement(element)
+ setModalOpen(true);
}
- render() {
- const component = this.state.element;
- return (
- <Card isCompact key={component.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconForDslName(component.className)}
- <CardTitle>{component.title}</CardTitle>
- </CardHeader>
- <CardBody>{component.description}</CardBody>
- <CardFooter className="footer-labels">
- <div>
- {component.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
+ return (
+ <Card isCompact key={element.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconForDslName(element.className)}
+ <CardTitle>{element.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{element.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <div>
+ {element.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
className="labels">{s}</Badge>)}
- </div>
- </CardFooter>
- </Card>
- )
- }
-};
\ No newline at end of file
+ </div>
+ </CardFooter>
+ </Card>
+ )
+}
\ No newline at end of file
diff --git a/karavan-space/src/knowledgebase/eip/EipModal.tsx b/karavan-space/src/knowledgebase/eip/EipModal.tsx
index 4757b953..d2100a25 100644
--- a/karavan-space/src/knowledgebase/eip/EipModal.tsx
+++ b/karavan-space/src/knowledgebase/eip/EipModal.tsx
@@ -24,65 +24,44 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
-import {ElementMeta, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- element?: ElementMeta,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- element?: ElementMeta,
-}
-export class EipModal extends React.Component<Props, State> {
+export function EipModal() {
- public state: State = {
- isOpen: this.props.isOpen,
- element: this.props.element,
- };
+ const [element, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.element, s.isModalOpen, s.setModalOpen], shallow)
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={element?.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={element?.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {element?.labels}</Badge></>, hasNoOffset: false, className: undefined}} >
+ {element && CamelUi.getIconForDslName(element?.className)}
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
- }
-
- render() {
- const component = this.state.element;
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={component?.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={component?.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {component?.labels}</Badge></>, hasNoOffset: false, className: undefined}} >
- {component && CamelUi.getIconForDslName(component?.className)}
-
- </CardHeader>
- <Text className="description">{component?.description}</Text>
- {component?.properties.length !== 0 &&
+ </CardHeader>
+ <Text className="description">{element?.description}</Text>
+ {element?.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -95,7 +74,7 @@ export class EipModal extends React.Component<Props, State> {
</Tr>
</Thead>
<Tbody>
- {component?.properties.map((p: PropertyMeta, idx: number) => (
+ {element?.properties.map((p: PropertyMeta, idx: number) => (
<Tr key={idx}>
<Td key={`${idx}_name`}>
<div>
@@ -114,9 +93,8 @@ export class EipModal extends React.Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- )
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-space/src/knowledgebase/eip/EipTab.tsx b/karavan-space/src/knowledgebase/eip/EipTab.tsx
index c5f552f7..e2757f9d 100644
--- a/karavan-space/src/knowledgebase/eip/EipTab.tsx
+++ b/karavan-space/src/knowledgebase/eip/EipTab.tsx
@@ -23,49 +23,37 @@ import '../../designer/karavan.css';
import {EipCard} from "./EipCard";
import {EipModal} from "./EipModal";
import {CamelModelMetadata, ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
filter: string,
}
-interface State {
- element?: ElementMeta;
- isModalOpen: boolean;
- repository: string,
- path: string,
- elements: ElementMeta[],
-}
+export function EipTab(props: Props) {
-export class EipTab extends React.Component<Props, State> {
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- elements: CamelModelMetadata.sort((a: ElementMeta,b: ElementMeta) => a.name > b.name ? 1 : -1),
- };
- select = (e: ElementMeta)=> {
- this.setState({element: e, isModalOpen: true})
- }
+ const {filter} = props;
+ const elements = CamelModelMetadata
+ .filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
+ .sort((a: ElementMeta, b: ElementMeta) => a.name > b.name ? 1 : -1);
- render() {
- const element = this.state.element;
- const {filter} = this.props;
- const elements = CamelModelMetadata.filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
- return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
- <EipModal key={element?.name + this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen} element={element}/>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {elements.map(c => (
- <EipCard key={c.name} element={c} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ return (
+ <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}
+ padding={{default: 'noPadding'}} className="kamelet-section">
+ {isModalOpen && <EipModal/>}
+ <PageSection isFilled className="kamelets-page"
+ variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {elements.map(c => (
+ <EipCard key={c.name} element={c}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
+ </PageSection>
+ )
}
\ No newline at end of file
diff --git a/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx b/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
index 948ffb70..045846e9 100644
--- a/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
@@ -22,49 +22,44 @@ import '../../designer/karavan.css';
import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {CamelUi} from "../../designer/utils/CamelUi";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
kamelet: KameletModel,
- onClickCard: any
}
-interface State {
- kamelet: KameletModel,
-}
+export function KameletCard(props: Props) {
-export class KameletCard extends React.Component<Props, State> {
+ const [setKamelet, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setKamelet, s.setModalOpen], shallow)
- public state: State = {
- kamelet: this.props.kamelet
- };
+ const kamelet = props.kamelet;
+ const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.kamelet);
- }
+ function click (event: React.MouseEvent) {
+ setKamelet(kamelet)
+ setModalOpen(true);
- render() {
- const kamelet = this.state.kamelet;
- const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
- return (
- <Card isCompact key={kamelet.metadata.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader className="header-labels">
- {isCustom && <Badge className="custom">custom</Badge>}
- <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconFromSource(kamelet.icon())}
- <CardTitle>{kamelet.spec.definition.title}</CardTitle>
- </CardHeader>
- <CardBody>{kamelet.spec.definition.description}</CardBody>
- <CardFooter className="footer-labels">
- <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
- <Badge isRead className="version labels">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
- {/*</div>*/}
- </CardFooter>
- </Card>
- );
}
+ return (
+ <Card isCompact key={kamelet.metadata.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader className="header-labels">
+ {isCustom && <Badge className="custom">custom</Badge>}
+ <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconFromSource(kamelet.icon())}
+ <CardTitle>{kamelet.spec.definition.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{kamelet.spec.definition.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
+ <Badge isRead className="version labels">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
+ {/*</div>*/}
+ </CardFooter>
+ </Card>
+ )
};
\ No newline at end of file
diff --git a/karavan-space/src/knowledgebase/kamelets/KameletModal.tsx b/karavan-space/src/knowledgebase/kamelets/KameletModal.tsx
index 33801485..d95dbeee 100644
--- a/karavan-space/src/knowledgebase/kamelets/KameletModal.tsx
+++ b/karavan-space/src/knowledgebase/kamelets/KameletModal.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {Component} from 'react';
+import React from 'react';
import {
Button,
Modal,
@@ -24,70 +24,49 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {KameletModel, Property} from "karavan-core/lib/model/KameletModels";
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Property} from "karavan-core/lib/model/KameletModels";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- kamelet?: KameletModel,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- kamelet?: KameletModel,
-}
+export function KameletModal() {
-export class KameletModal extends Component<Props, State> {
-
- public state: State = {
- isOpen: this.props.isOpen,
- kamelet: this.props.kamelet,
- };
-
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ const [kamelet, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.kamelet, s.isModalOpen, s.setModalOpen], shallow)
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
- }
-
- getKameletProperties = (properties: any): any[] => {
+ function getKameletProperties (properties: any): any[] {
return properties
? Array.from(new Map(Object.entries(properties)), ([name, value]) => (value))
: [];
}
- render() {
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={this.state.kamelet?.spec.definition.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={this.state.kamelet?.metadata.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {this.state.kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge></>, hasNoOffset: false, className: undefined}} >
- {this.state.kamelet && CamelUi.getIconFromSource(this.state.kamelet?.icon())}
-
- </CardHeader>
- <Text className="description">{this.state.kamelet?.spec.definition.description}</Text>
- {this.state.kamelet?.spec.definition.properties && this.state.kamelet?.spec.definition.properties.length !== 0 &&
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={kamelet?.spec.definition.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={kamelet?.metadata.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge></>, hasNoOffset: false, className: undefined}} >
+ {kamelet && CamelUi.getIconFromSource(kamelet?.icon())}
+
+ </CardHeader>
+ <Text className="description">{kamelet?.spec.definition.description}</Text>
+ {kamelet?.spec.definition.properties && kamelet?.spec.definition.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -101,7 +80,7 @@ export class KameletModal extends Component<Props, State> {
</Tr>
</Thead>
<Tbody>
- {this.getKameletProperties(this.state.kamelet?.spec.definition.properties).map((p: Property, idx: number) => (
+ {getKameletProperties(kamelet?.spec.definition.properties).map((p: Property, idx: number) => (
<Tr key={idx}>
<Td key={`${idx}_title`}>{p.title}</Td>
<Td key={`${idx}_type`}>{p.type}</Td>
@@ -113,9 +92,8 @@ export class KameletModal extends Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- );
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-space/src/knowledgebase/kamelets/KameletsTab.tsx b/karavan-space/src/knowledgebase/kamelets/KameletsTab.tsx
index 57cc25ba..fb8df6df 100644
--- a/karavan-space/src/knowledgebase/kamelets/KameletsTab.tsx
+++ b/karavan-space/src/knowledgebase/kamelets/KameletsTab.tsx
@@ -22,9 +22,10 @@ import {
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {KameletCard} from "./KameletCard";
-import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
import {KameletModal} from "./KameletModal";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
@@ -32,52 +33,32 @@ interface Props {
customOnly: boolean,
}
-interface State {
- kamelet?: KameletModel;
- isModalOpen: boolean;
- repository: string,
- path: string,
- kamelets: KameletModel[],
+interface Props {
+ dark: boolean,
+ filter: string,
}
-export class KameletsTab extends React.Component<Props, State> {
-
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- kamelets: [],
- };
-
- componentDidMount() {
- this.setState({kamelets: KameletApi.getKamelets()})
- }
+export function KameletsTab(props: Props) {
- select = (k: KameletModel) => {
- this.setState({kamelet: k, isModalOpen: true})
- }
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- render() {
- const {dark} = this.props;
- const {kamelets, kamelet, isModalOpen} = this.state;
- const {filter, customOnly} = this.props;
- let kameletList = kamelets.filter(kamelet =>
- kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
- if (customOnly) kameletList = kameletList.filter(k => KameletApi.getCustomKameletNames().includes(k.metadata.name));
- return (
- <PageSection variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}
- padding={{default: 'noPadding'}} className="kamelet-section">
- <KameletModal key={kamelet?.metadata.name + isModalOpen.toString()}
- isOpen={isModalOpen} kamelet={kamelet}/>
- <PageSection isFilled className="kamelets-page"
- variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {kameletList.map(k => (
- <KameletCard key={k.metadata.name} kamelet={k} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ const {filter, customOnly, dark} = props;
+ let kameletList = KameletApi.getKamelets().filter(kamelet =>
+ kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
+ if (customOnly) kameletList = kameletList.filter(k => KameletApi.getCustomKameletNames().includes(k.metadata.name));
+ return (
+ <PageSection variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}
+ padding={{default: 'noPadding'}} className="kamelet-section">
+ {isModalOpen && <KameletModal/>}
+ <PageSection isFilled className="kamelets-page"
+ variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {kameletList.map(k => (
+ <KameletCard key={k.metadata.name} kamelet={k}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
+ </PageSection>
+ )
}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-web/karavan-app/src/main/webui/src/designer/DesignerStore.ts
similarity index 100%
rename from karavan-designer/src/designer/KaravanStore.ts
rename to karavan-web/karavan-app/src/main/webui/src/designer/DesignerStore.ts
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/KaravanDesigner.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/KaravanDesigner.tsx
index cb58a377..71914986 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/KaravanDesigner.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/KaravanDesigner.tsx
@@ -33,7 +33,7 @@ import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelUi} from "./utils/CamelUi";
-import {useDesignerStore, useIntegrationStore} from "./KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "./DesignerStore";
import {shallow} from "zustand/shallow";
import {getDesignerIcon} from "./utils/KaravanIcons";
import {InfrastructureAPI} from "./utils/InfrastructureAPI";
@@ -42,6 +42,7 @@ import {RestDesigner} from "./rest/RestDesigner";
import {BeansDesigner} from "./beans/BeansDesigner";
import {CodeEditor} from "./editor/CodeEditor";
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import {KameletDesigner} from "./kamelet/KameletDesigner";
interface Props {
onSave: (filename: string, yaml: string, propertyOnly: boolean) => void
@@ -71,7 +72,9 @@ export function KaravanDesigner(props: Props) {
InfrastructureAPI.setOnSave(props.onSave);
setSelectedStep(undefined);
- setIntegration(makeIntegration(props.yaml, props.filename), false);
+ const i = makeIntegration(props.yaml, props.filename);
+ setIntegration(i, false);
+ setTab(i.kind === 'Kamelet' ? 'kamelet' : 'routes')
reset();
setDark(props.dark);
setHideLogDSL(props.hideLogDSL === true);
@@ -84,8 +87,10 @@ export function KaravanDesigner(props: Props) {
function makeIntegration(yaml: string, filename: string): Integration {
try {
- if (yaml && CamelDefinitionYaml.yamlIsIntegration(yaml)) {
- return CamelDefinitionYaml.yamlToIntegration(props.filename, props.yaml)
+ const type = CamelDefinitionYaml.yamlIsIntegration(yaml);
+ if (yaml && type !== 'none') {
+ const i = CamelDefinitionYaml.yamlToIntegration(props.filename, props.yaml)
+ return i;
} else {
return Integration.createNew(filename, 'plain');
}
@@ -126,6 +131,8 @@ export function KaravanDesigner(props: Props) {
)
}
+ const isKamelet = integration.type === 'kamelet';
+
return (
<PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light} className="page"
isFilled padding={{default: 'noPadding'}}>
@@ -137,8 +144,9 @@ export function KaravanDesigner(props: Props) {
setSelectedStep(undefined);
}}
style={{width: "100%"}}>
+ {isKamelet && <Tab eventKey='kamelet' title={getTab("Definitions", "Kamelet Definitions", "kamelet")}></Tab>}
<Tab eventKey='routes' title={getTab("Routes", "Integration flows", "routes")}></Tab>
- <Tab eventKey='rest' title={getTab("REST", "REST services", "rest")}></Tab>
+ {!isKamelet && <Tab eventKey='rest' title={getTab("REST", "REST services", "rest")}></Tab>}
<Tab eventKey='beans' title={getTab("Beans", "Beans Configuration", "beans")}></Tab>
{props.showCodeTab && <Tab eventKey='code' title={getTab("YAML", "YAML Code", "code", true)}></Tab>}
</Tabs>
@@ -156,6 +164,7 @@ export function KaravanDesigner(props: Props) {
{/* />*/}
{/*</Tooltip>}*/}
</div>
+ {tab === 'kamelet' && <KameletDesigner/>}
{tab === 'routes' && <RouteDesigner/>}
{tab === 'rest' && <RestDesigner/>}
{tab === 'beans' && <BeansDesigner/>}
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanCard.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanCard.tsx
index e9f1187d..e38ed2c1 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanCard.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanCard.tsx
@@ -21,7 +21,7 @@ import {
import './bean.css';
import {RegistryBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanProperties.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanProperties.tsx
index 15b8f086..fdb73d2a 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanProperties.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeanProperties.tsx
@@ -39,7 +39,7 @@ import {InfrastructureAPI} from "../utils/InfrastructureAPI";
import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {IntegrationHeader} from "../utils/IntegrationHeader";
@@ -194,7 +194,8 @@ export function BeanProperties (props: Props) {
const icon = InfrastructureAPI.infrastructure === 'kubernetes' ? <KubernetesIcon/> : <DockerIcon/>
return (
<div key={"key-" + i} className="bean-property">
- <TextInput placeholder="Bean Field Name" className="text-field" isRequired type="text" id="key" name="key" value={key}
+ <TextInput placeholder="Bean Field Name" className="text-field" isRequired type="text" id={"key-" + i}
+ name={"key-" + i} value={key}
onChange={(_, beanFieldName) => {
propertyChanged(i, beanFieldName, value, showPassword)
}}/>
@@ -211,8 +212,8 @@ export function BeanProperties (props: Props) {
type={isSecret && !showPassword ? "password" : "text"}
className="text-field"
isRequired
- id="value"
- name="value"
+ id={"value-" + i}
+ name={"value-" + i}
value={value}
onChange={(_, value) => {
propertyChanged(i, key, value, showPassword)
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeansDesigner.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeansDesigner.tsx
index 8262b7bf..64bac96f 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeansDesigner.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/beans/BeansDesigner.tsx
@@ -33,7 +33,7 @@ import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt"
import {BeanProperties} from "./BeanProperties";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {BeanCard} from "./BeanCard";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function BeansDesigner() {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/editor/CodeEditor.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/editor/CodeEditor.tsx
index 323bf0cf..cd6a4f36 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/editor/CodeEditor.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/editor/CodeEditor.tsx
@@ -18,7 +18,7 @@ import React, {useEffect, useState} from 'react';
import '../../designer/karavan.css';
import Editor from "@monaco-editor/react";
import {shallow} from "zustand/shallow";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import {EventBus} from "../utils/EventBus";
diff --git a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx
similarity index 98%
copy from karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
copy to karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx
index 3c997173..076aec40 100644
--- a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx
@@ -30,7 +30,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
const PREFIX = 'camel.apache.org/';
diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
similarity index 99%
copy from karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
copy to karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
index a478c101..d8933df4 100644
--- a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
@@ -27,7 +27,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition";
diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx
similarity index 98%
copy from karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx
copy to karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx
index 4c638ee3..009a54ac 100644
--- a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx
@@ -28,7 +28,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {KameletDefinitionPropertyCard} from "./KameletDefinitionPropertyCard";
diff --git a/karavan-designer/src/designer/kamelet/KameletDesigner.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDesigner.tsx
similarity index 98%
copy from karavan-designer/src/designer/kamelet/KameletDesigner.tsx
copy to karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDesigner.tsx
index 3c0b5fa8..dd889b92 100644
--- a/karavan-designer/src/designer/kamelet/KameletDesigner.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletDesigner.tsx
@@ -31,7 +31,7 @@ import {CamelUi} from "../utils/CamelUi";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {BeanProperties} from "../beans/BeanProperties";
import {BeanCard} from "../beans/BeanCard";
diff --git a/karavan-designer/src/designer/kamelet/KameletProperties.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletProperties.tsx
similarity index 99%
copy from karavan-designer/src/designer/kamelet/KameletProperties.tsx
copy to karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletProperties.tsx
index 93c696fa..fc8f188f 100644
--- a/karavan-designer/src/designer/kamelet/KameletProperties.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/KameletProperties.tsx
@@ -39,7 +39,7 @@ import {InfrastructureAPI} from "../utils/InfrastructureAPI";
import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {IntegrationHeader} from "../utils/IntegrationHeader";
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/kamelet.css b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/kamelet.css
new file mode 100644
index 00000000..bbdf28a9
--- /dev/null
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/kamelet/kamelet.css
@@ -0,0 +1,47 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.karavan .kamelet-designer {
+ display: block;
+ height: 100vh;
+ width: 100%;
+ overflow-y: auto;
+ padding-bottom: 106px;
+}
+
+.karavan .kamelet-designer .main {
+ background-color: var(--pf-v5-global--BackgroundColor--light-300);
+}
+.karavan .kamelet-designer .icon {
+ height: 20px;
+ width: 20px;
+ border: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.karavan .kamelet-designer .properties {
+ padding: 10px 10px 10px 10px;
+ background: transparent;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestDesigner.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestDesigner.tsx
index 4a607cad..51ce51af 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestDesigner.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestDesigner.tsx
@@ -37,7 +37,7 @@ import {DslMetaModel} from "../utils/DslMetaModel";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {RestConfigurationCard} from "./RestConfigurationCard";
import {v4 as uuidv4} from "uuid";
-import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function RestDesigner() {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodCard.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodCard.tsx
index f27e364c..2af666bf 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodCard.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodCard.tsx
@@ -19,7 +19,7 @@ import {Button} from '@patternfly/react-core';
import '../karavan.css';
import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props<T extends CamelElement> {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodSelector.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodSelector.tsx
index bbd4cccb..7368c08c 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodSelector.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/rest/RestMethodSelector.tsx
@@ -24,7 +24,7 @@ import {
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
interface Props {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DeleteConfirmation.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DeleteConfirmation.tsx
index 999a4752..b2cb4d4d 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DeleteConfirmation.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DeleteConfirmation.tsx
@@ -20,7 +20,7 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import {useRouteDesignerHook} from "./useRouteDesignerHook";
-import {useDesignerStore} from "../KaravanStore";
+import {useDesignerStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function DeleteConfirmation() {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
index f39a1aa8..de6a0060 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
@@ -20,7 +20,7 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {DslPosition, EventBus} from "../utils/EventBus";
import {CamelUi} from "../utils/CamelUi";
import {SagaDefinition} from "karavan-core/lib/model/CamelDefinition";
-import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {TopologyUtils} from "karavan-core/lib/api/TopologyUtils";
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx
index 489c675d..5f2744c5 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx
@@ -31,7 +31,7 @@ import {EventBus} from "../utils/EventBus";
import {ChildElement, CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx
index 69729121..82fd3dd9 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx
@@ -30,7 +30,7 @@ import {CamelUi} from "../utils/CamelUi";
import {CamelMetadataApi, DataFormats, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
import {IntegrationHeader} from "../utils/IntegrationHeader";
import CloneIcon from "@patternfly/react-icons/dist/esm/icons/clone-icon";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {usePropertiesHook} from "./usePropertiesHook";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
@@ -46,8 +46,7 @@ export function DslProperties(props: Props) {
const {cloneElement, onDataFormatChange, onPropertyChange, onParametersChange, onExpressionChange} = usePropertiesHook(props.isRouteDesigner);
- const [selectedStep, dark, setSelectedStep, setSelectedUuids] = useDesignerStore((s) =>
- [s.selectedStep, s.dark, s.setSelectedStep, s.setSelectedUuids], shallow)
+ const [selectedStep, dark] = useDesignerStore((s) => [s.selectedStep, s.dark], shallow)
const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState<boolean>(false);
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
index 2e383cb6..8f815536 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
@@ -24,7 +24,7 @@ import {
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
-import {useDesignerStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx
index a78a4eed..7d3b5950 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx
@@ -30,7 +30,7 @@ import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {DslElement} from "./DslElement";
import {CamelUi} from "../utils/CamelUi";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
-import {useConnectionsStore, useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import useResizeObserver from "./useResizeObserver";
import {Command, EventBus} from "../utils/EventBus";
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx
index 34c6cadb..23f8228a 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/ComponentParameterField.tsx
@@ -49,7 +49,7 @@ import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {usePropertiesHook} from "../usePropertiesHook";
-import {useDesignerStore, useIntegrationStore} from "../../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../../DesignerStore";
import {shallow} from "zustand/shallow";
const prefix = "parameters";
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx
index 26bbdfd1..b07e8beb 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx
@@ -66,7 +66,7 @@ import {InfrastructureAPI} from "../../utils/InfrastructureAPI";
import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon";
import {ModalEditor} from "./ModalEditor";
import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
-import {useDesignerStore, useIntegrationStore} from "../../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../../DesignerStore";
import {shallow} from "zustand/shallow";
import {DataFormatDefinition, ExpressionDefinition} from "karavan-core/lib/model/CamelDefinition";
import {TemplateApi} from "karavan-core/lib/api/TemplateApi";
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/usePropertiesHook.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/usePropertiesHook.tsx
index 058ae5f2..eba82bf2 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/usePropertiesHook.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/usePropertiesHook.tsx
@@ -23,7 +23,7 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {RouteToCreate} from "../utils/CamelUi";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function usePropertiesHook (isRouteDesigner: boolean = true) {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx
index 2a85f9d6..fe61d410 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx
@@ -25,7 +25,7 @@ import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {Command, EventBus} from "../utils/EventBus";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
import {toPng} from 'html-to-image';
-import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function useRouteDesignerHook () {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/utils/IntegrationHeader.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/utils/IntegrationHeader.tsx
index c117d434..9b75fd5e 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/utils/IntegrationHeader.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/utils/IntegrationHeader.tsx
@@ -16,26 +16,43 @@
*/
import React from 'react';
import {FormGroup, TextInput, Title} from "@patternfly/react-core";
-import {useIntegrationStore} from "../KaravanStore";
+import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
export function IntegrationHeader () {
const [integration] = useIntegrationStore((state) => [state.integration], shallow)
+ const isKamelet = integration.type === 'kamelet';
+
+ function getKameletType(): string {
+ // const labels = integration.metadata.labels;
+ // if (labels && labels.l)
+ // "camel.apache.org/kamelet.type"
+ return '';
+ }
+
return (
<div className="headers">
- <Title headingLevel="h1" size="md">Integration</Title>
+ {/*<Title headingLevel="h1" size="md">Integration</Title>*/}
{/*<FormGroup label="Title" fieldId="title" isRequired>*/}
{/* <TextInput className="text-field" type="text" id="title" name="title" isReadOnly*/}
{/* value={*/}
{/* CamelUi.titleFromName(this.props.integration.metadata.name)*/}
{/* }/>*/}
{/*</FormGroup>*/}
+ <FormGroup label="Kind" fieldId="kind" isRequired>
+ <TextInput className="text-field" type="text" id="kind" name="kind"
+ value={integration.kind} readOnlyVariant="default"/>
+ </FormGroup>
<FormGroup label="Name" fieldId="name" isRequired>
<TextInput className="text-field" type="text" id="name" name="name"
value={integration.metadata.name} readOnlyVariant="default"/>
</FormGroup>
+ {isKamelet && <FormGroup label="Kamelet type" fieldId="type" isRequired>
+ <TextInput className="text-field" type="text" id="type" name="type"
+ value={integration.metadata.labels?.["camel.apache.org/kamelet.type"]} readOnlyVariant="default"/>
+ </FormGroup>}
</div>
)
}
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx
index 677945f5..906ba86e 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx
@@ -263,21 +263,38 @@ export function CamelIcon(props?: (JSX.IntrinsicAttributes & React.SVGProps<SVGS
}
export function getDesignerIcon(icon: string) {
- if (icon === 'code') return (
- <svg
- className="top-icon" id="icon"
- xmlns="http://www.w3.org/2000/svg"
- width="24"
- height="24"
- fill="none"
- viewBox="0 0 24 24"
- >
- <path
- fill="#000000"
- d="M8.502 5.387a.75.75 0 00-1.004-1.115L5.761 5.836c-.737.663-1.347 1.212-1.767 1.71-.44.525-.754 1.088-.754 1.784 0 .695.313 1.258.754 1.782.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 101.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598-.33-.393-.402-.622-.402-.817 0-.196.072-.425.402-.818.344-.409.875-.889 1.663-1.598l1.697-1.527zM14.18 4.275a.75.75 0 01.532.918l-3.987 15a.75.75 0 11-1.45-.386l3.987-15a.75.75 0 01.918-.532zM15.443 10.498a.75.75 0 011.059-.05 [...]
- ></path>
- </svg>
+ if (icon === 'kamelet') return (
+ <svg
+ className="top-icon" id="icon"
+ 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"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
)
+ if (icon === 'code') return (
+ <svg
+
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ fill="none"
+ viewBox="0 0 24 24"
+ >
+ <path
+ fill="#000000"
+ d="M8.502 5.387a.75.75 0 00-1.004-1.115L5.761 5.836c-.737.663-1.347 1.212-1.767 1.71-.44.525-.754 1.088-.754 1.784 0 .695.313 1.258.754 1.782.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 101.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598-.33-.393-.402-.622-.402-.817 0-.196.072-.425.402-.818.344-.409.875-.889 1.663-1.598l1.697-1.527zM14.18 4.275a.75.75 0 01.532.918l-3.987 15a.75.75 0 11-1.45-.386l3.987-15a.75.75 0 01.918-.532zM15.443 10.498a.75.75 0 011.059 [...]
+ ></path>
+ </svg>
+ )
if (icon === 'routes') return (
<svg className="top-icon" width="32px" height="32px" viewBox="0 0 32 32" id="icon">
<defs>
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseStore.ts b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseStore.ts
new file mode 100644
index 00000000..32b81787
--- /dev/null
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseStore.ts
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {createWithEqualityFn} from "zustand/traditional";
+import {shallow} from "zustand/shallow";
+import {Component} from "karavan-core/lib/model/ComponentModels";
+import {ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {KameletModel} from "karavan-core/lib/model/KameletModels";
+
+interface KnowledgebaseState {
+ isModalOpen: boolean;
+ setModalOpen: (isModalOpen: boolean) => void;
+ component?: Component;
+ setComponent: (component: Component) => void;
+ element?: ElementMeta;
+ setElement: (element: ElementMeta) => void;
+ kamelet?: KameletModel;
+ setKamelet: (kamelet: KameletModel) => void;
+}
+
+export const useKnowledgebaseStore = createWithEqualityFn<KnowledgebaseState>((set) => ({
+ isModalOpen: false,
+ setModalOpen: (isModalOpen: boolean) => {
+ set((state: KnowledgebaseState) => {
+ return {isModalOpen: isModalOpen};
+ })
+ },
+ setComponent: (component: Component) => {
+ set((state: KnowledgebaseState) => {
+ return {component: component};
+ })
+ },
+ setElement: (element: ElementMeta) => {
+ set((state: KnowledgebaseState) => {
+ return {element: element};
+ })
+ },
+ setKamelet: (kamelet: KameletModel) => {
+ set((state: KnowledgebaseState) => {
+ return {kamelet: kamelet};
+ })
+ }
+}), shallow)
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
index 9226bb52..338dc3b9 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
@@ -21,47 +21,42 @@ import {
import '../../designer/karavan.css';
import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
component: Component,
- onClickCard: any
}
-interface State {
- component: Component,
-}
+export function ComponentCard(props: Props) {
-export class ComponentCard extends React.Component<Props, State> {
+ const [setComponent, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setComponent, s.setModalOpen], shallow)
- public state: State = {
- component: this.props.component
- };
+ const component = props.component;
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.component);
+ function click (event: React.MouseEvent) {
+ setComponent(component)
+ setModalOpen(true);
}
- render() {
- const component = this.state.component;
- return (
- <Card isCompact key={component.component.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader className="header-labels">
- {component.component.supportType === 'Supported' && <Badge isRead className="support-type labels">{component.component.supportType}</Badge>}
- <Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconForComponent(component.component.title, component.component.label)}
- <CardTitle>{component.component.title}</CardTitle>
- </CardHeader>
- <CardBody>{component.component.description}</CardBody>
- <CardFooter className="footer-labels">
- <Badge isRead className="labels">{component.component.label}</Badge>
- <Badge isRead className="version labels">{component.component.version}</Badge>
- </CardFooter>
- </Card>
- );
- }
+ return (
+ <Card isCompact key={component.component.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader className="header-labels">
+ {component.component.supportType === 'Supported' && <Badge isRead className="support-type labels">{component.component.supportType}</Badge>}
+ <Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconForComponent(component.component.title, component.component.label)}
+ <CardTitle>{component.component.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{component.component.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <Badge isRead className="labels">{component.component.label}</Badge>
+ <Badge isRead className="version labels">{component.component.version}</Badge>
+ </CardFooter>
+ </Card>
+ )
}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentModal.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentModal.tsx
index fd082fee..da8f1584 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentModal.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentModal.tsx
@@ -24,72 +24,53 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
-import {Component} from "karavan-core/lib/model/ComponentModels";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- component?: Component,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- component?: Component,
-}
+export function ComponentModal() {
-export class ComponentModal extends React.Component<Props, State> {
-
- public state: State = {
- isOpen: this.props.isOpen,
- component: this.props.component,
- };
-
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ const [component, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.component, s.isModalOpen, s.setModalOpen], shallow)
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
+ const props = new Map<string, ComponentProperty>();
+ if (component) {
+ ComponentApi.getComponentProperties(component?.component.name, "consumer").forEach(cp => props.set(cp.name, cp));
+ ComponentApi.getComponentProperties(component?.component.name, "producer").forEach(cp => props.set(cp.name, cp));
}
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={component?.component.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={component?.component.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{
+ actions: <><Badge className="badge"
+ isRead> {component?.component.label}</Badge></>,
+ hasNoOffset: false,
+ className: undefined
+ }}>
+ {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
- render() {
- const component = this.state.component;
- const props = new Map<string, ComponentProperty>();
- if (component){
- ComponentApi.getComponentProperties(component?.component.name, "consumer").forEach(cp => props.set(cp.name, cp));
- ComponentApi.getComponentProperties(component?.component.name, "producer").forEach(cp => props.set(cp.name, cp));
- }
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={component?.component.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={component?.component.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {component?.component.label}</Badge></>, hasNoOffset: false, className: undefined}} >
- {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
-
- </CardHeader>
- <Text className="description">{component?.component.description}</Text>
- {props.size !== 0 &&
+ </CardHeader>
+ <Text className="description">{component?.component.description}</Text>
+ {props.size !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -110,10 +91,13 @@ export class ComponentModal extends React.Component<Props, State> {
<div>{p.name}</div>
</div>
</Td>
- <Td key={`${idx}_desc`}><div>
- <div>{p.description}</div>
- {p.defaultValue && p.defaultValue.toString().length > 0 && <div>{"Default value: " + p.defaultValue}</div>}
- </div></Td>
+ <Td key={`${idx}_desc`}>
+ <div>
+ <div>{p.description}</div>
+ {p.defaultValue && p.defaultValue.toString().length > 0 &&
+ <div>{"Default value: " + p.defaultValue}</div>}
+ </div>
+ </Td>
<Td key={`${idx}_type`}>{p.type}</Td>
<Td key={`${idx}_label`}>{p.label}</Td>
</Tr>
@@ -121,9 +105,8 @@ export class ComponentModal extends React.Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- )
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx
index c2a75b7a..708b04bd 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentsTab.tsx
@@ -22,60 +22,37 @@ import {
import '../../designer/karavan.css';
import {ComponentCard} from "./ComponentCard";
import {ComponentModal} from "./ComponentModal";
-import {Component} from "karavan-core/lib/model/ComponentModels";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
+import {shallow} from "zustand/shallow";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
interface Props {
dark: boolean,
filter: string,
- onRefresh?: () => Promise<void>
}
-interface State {
- component?: Component;
- isModalOpen: boolean;
- repository: string,
- path: string,
- components: Component[],
-}
-
-export class ComponentsTab extends React.Component<Props, State> {
-
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- components: [],
- };
+export function ComponentsTab(props: Props) {
- componentDidMount() {
- this.setState({components: ComponentApi.getComponents()})
- }
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- select = (c: Component)=> {
- this.setState({component: c, isModalOpen: true})
- }
- render() {
- const component = this.state.component;
- const {filter} = this.props;
- const components = ComponentApi.getComponents().filter(c => {
- return c.component.name.toLowerCase().includes(filter.toLowerCase())
+ const {filter} = props;
+ const components = ComponentApi.getComponents().filter(c => {
+ return c.component.name.toLowerCase().includes(filter.toLowerCase())
|| c.component.title.toLowerCase().includes(filter.toLowerCase())
|| c.component.description.toLowerCase().includes(filter.toLowerCase())
- }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ;
- return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
- <ComponentModal key={component?.component.name + this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen} component={component}/>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {components.map(c => (
- <ComponentCard key={c.component.name} component={c} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ }).sort((a, b) => (a.component.title?.toLowerCase() > b.component.title?.toLowerCase() ? 1 : -1)) ;
+ return (
+ <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
+ {isModalOpen && <ComponentModal/>}
+ <PageSection isFilled className="kamelets-page" variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {components.map(c => (
+ <ComponentCard key={c.component.name} component={c}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
-};
\ No newline at end of file
+ </PageSection>
+ )
+}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipCard.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipCard.tsx
index db980615..fb47a932 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipCard.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipCard.tsx
@@ -21,47 +21,42 @@ import {
import '../../designer/karavan.css';
import {CamelUi} from "../../designer/utils/CamelUi";
import {ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
element: ElementMeta,
- onClickCard: any
}
-interface State {
- element: ElementMeta,
-}
+export function EipCard(props: Props) {
-export class EipCard extends React.Component<Props, State> {
+ const [setElement, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setElement, s.setModalOpen], shallow)
- public state: State = {
- element: this.props.element
- };
+ const element = props.element;
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.element);
+ function click (event: React.MouseEvent) {
+ setElement(element)
+ setModalOpen(true);
}
- render() {
- const component = this.state.element;
- return (
- <Card isCompact key={component.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconForDslName(component.className)}
- <CardTitle>{component.title}</CardTitle>
- </CardHeader>
- <CardBody>{component.description}</CardBody>
- <CardFooter className="footer-labels">
- <div>
- {component.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
+ return (
+ <Card isCompact key={element.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconForDslName(element.className)}
+ <CardTitle>{element.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{element.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <div>
+ {element.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
className="labels">{s}</Badge>)}
- </div>
- </CardFooter>
- </Card>
- )
- }
-};
\ No newline at end of file
+ </div>
+ </CardFooter>
+ </Card>
+ )
+}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipModal.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipModal.tsx
index 4757b953..d2100a25 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipModal.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipModal.tsx
@@ -24,65 +24,44 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
-import {ElementMeta, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- element?: ElementMeta,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- element?: ElementMeta,
-}
-export class EipModal extends React.Component<Props, State> {
+export function EipModal() {
- public state: State = {
- isOpen: this.props.isOpen,
- element: this.props.element,
- };
+ const [element, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.element, s.isModalOpen, s.setModalOpen], shallow)
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={element?.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={element?.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {element?.labels}</Badge></>, hasNoOffset: false, className: undefined}} >
+ {element && CamelUi.getIconForDslName(element?.className)}
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
- }
-
- render() {
- const component = this.state.element;
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={component?.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={component?.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {component?.labels}</Badge></>, hasNoOffset: false, className: undefined}} >
- {component && CamelUi.getIconForDslName(component?.className)}
-
- </CardHeader>
- <Text className="description">{component?.description}</Text>
- {component?.properties.length !== 0 &&
+ </CardHeader>
+ <Text className="description">{element?.description}</Text>
+ {element?.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -95,7 +74,7 @@ export class EipModal extends React.Component<Props, State> {
</Tr>
</Thead>
<Tbody>
- {component?.properties.map((p: PropertyMeta, idx: number) => (
+ {element?.properties.map((p: PropertyMeta, idx: number) => (
<Tr key={idx}>
<Td key={`${idx}_name`}>
<div>
@@ -114,9 +93,8 @@ export class EipModal extends React.Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- )
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx
index c5f552f7..e2757f9d 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx
@@ -23,49 +23,37 @@ import '../../designer/karavan.css';
import {EipCard} from "./EipCard";
import {EipModal} from "./EipModal";
import {CamelModelMetadata, ElementMeta} from "karavan-core/lib/model/CamelMetadata";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
filter: string,
}
-interface State {
- element?: ElementMeta;
- isModalOpen: boolean;
- repository: string,
- path: string,
- elements: ElementMeta[],
-}
+export function EipTab(props: Props) {
-export class EipTab extends React.Component<Props, State> {
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- elements: CamelModelMetadata.sort((a: ElementMeta,b: ElementMeta) => a.name > b.name ? 1 : -1),
- };
- select = (e: ElementMeta)=> {
- this.setState({element: e, isModalOpen: true})
- }
+ const {filter} = props;
+ const elements = CamelModelMetadata
+ .filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
+ .sort((a: ElementMeta, b: ElementMeta) => a.name > b.name ? 1 : -1);
- render() {
- const element = this.state.element;
- const {filter} = this.props;
- const elements = CamelModelMetadata.filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
- return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
- <EipModal key={element?.name + this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen} element={element}/>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {elements.map(c => (
- <EipCard key={c.name} element={c} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ return (
+ <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}
+ padding={{default: 'noPadding'}} className="kamelet-section">
+ {isModalOpen && <EipModal/>}
+ <PageSection isFilled className="kamelets-page"
+ variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {elements.map(c => (
+ <EipCard key={c.name} element={c}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
+ </PageSection>
+ )
}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx
index 948ffb70..045846e9 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx
@@ -22,49 +22,44 @@ import '../../designer/karavan.css';
import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {CamelUi} from "../../designer/utils/CamelUi";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
kamelet: KameletModel,
- onClickCard: any
}
-interface State {
- kamelet: KameletModel,
-}
+export function KameletCard(props: Props) {
-export class KameletCard extends React.Component<Props, State> {
+ const [setKamelet, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.setKamelet, s.setModalOpen], shallow)
- public state: State = {
- kamelet: this.props.kamelet
- };
+ const kamelet = props.kamelet;
+ const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
- click = (event: React.MouseEvent) => {
- event.stopPropagation()
- this.props.onClickCard.call(this, this.state.kamelet);
- }
+ function click (event: React.MouseEvent) {
+ setKamelet(kamelet)
+ setModalOpen(true);
- render() {
- const kamelet = this.state.kamelet;
- const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
- return (
- <Card isCompact key={kamelet.metadata.name} className="kamelet-card"
- onClick={event => this.click(event)}
- >
- <CardHeader className="header-labels">
- {isCustom && <Badge className="custom">custom</Badge>}
- <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
- </CardHeader>
- <CardHeader>
- {CamelUi.getIconFromSource(kamelet.icon())}
- <CardTitle>{kamelet.spec.definition.title}</CardTitle>
- </CardHeader>
- <CardBody>{kamelet.spec.definition.description}</CardBody>
- <CardFooter className="footer-labels">
- <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
- <Badge isRead className="version labels">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
- {/*</div>*/}
- </CardFooter>
- </Card>
- );
}
+ return (
+ <Card isCompact key={kamelet.metadata.name} className="kamelet-card"
+ onClick={event => click(event)}
+ >
+ <CardHeader className="header-labels">
+ {isCustom && <Badge className="custom">custom</Badge>}
+ <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+ </CardHeader>
+ <CardHeader>
+ {CamelUi.getIconFromSource(kamelet.icon())}
+ <CardTitle>{kamelet.spec.definition.title}</CardTitle>
+ </CardHeader>
+ <CardBody>{kamelet.spec.definition.description}</CardBody>
+ <CardFooter className="footer-labels">
+ <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
+ <Badge isRead className="version labels">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
+ {/*</div>*/}
+ </CardFooter>
+ </Card>
+ )
};
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletModal.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletModal.tsx
index 33801485..d95dbeee 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletModal.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletModal.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {Component} from 'react';
+import React from 'react';
import {
Button,
Modal,
@@ -24,70 +24,49 @@ import {
Badge, Flex, CardTitle,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {KameletModel, Property} from "karavan-core/lib/model/KameletModels";
-import {Table /* data-codemods */, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
+import {Property} from "karavan-core/lib/model/KameletModels";
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {CamelUi} from "../../designer/utils/CamelUi";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
-interface Props {
- kamelet?: KameletModel,
- isOpen: boolean;
-}
-
-interface State {
- isOpen: boolean;
- kamelet?: KameletModel,
-}
+export function KameletModal() {
-export class KameletModal extends Component<Props, State> {
-
- public state: State = {
- isOpen: this.props.isOpen,
- kamelet: this.props.kamelet,
- };
-
- setModalOpen = (open: boolean) => {
- this.setState({isOpen: false});
- }
+ const [kamelet, isModalOpen, setModalOpen] = useKnowledgebaseStore((s) =>
+ [s.kamelet, s.isModalOpen, s.setModalOpen], shallow)
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.isOpen !== this.props.isOpen) {
- this.setState({isOpen: this.props.isOpen});
- }
- }
-
- getKameletProperties = (properties: any): any[] => {
+ function getKameletProperties (properties: any): any[] {
return properties
? Array.from(new Map(Object.entries(properties)), ([name, value]) => (value))
: [];
}
- render() {
- return (
- <Modal
- aria-label={"Kamelet"}
- width={'fit-content'}
- maxLength={200}
- title={this.state.kamelet?.spec.definition.title}
- isOpen={this.state.isOpen}
- onClose={() => this.setModalOpen(false)}
- actions={[
- <div className="modal-footer">
- <ActionGroup className="deploy-buttons">
- <Button key="cancel" variant="primary"
- onClick={e => this.setModalOpen(false)}>Close</Button>
- </ActionGroup>
- </div>
- ]}
- >
- <Flex direction={{default: 'column'}} key={this.state.kamelet?.metadata.name}
- className="kamelet-modal-card">
- <CardHeader actions={{ actions: <><Badge className="badge"
- isRead> {this.state.kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge></>, hasNoOffset: false, className: undefined}} >
- {this.state.kamelet && CamelUi.getIconFromSource(this.state.kamelet?.icon())}
-
- </CardHeader>
- <Text className="description">{this.state.kamelet?.spec.definition.description}</Text>
- {this.state.kamelet?.spec.definition.properties && this.state.kamelet?.spec.definition.properties.length !== 0 &&
+ return (
+ <Modal
+ aria-label={"Kamelet"}
+ width={'fit-content'}
+ maxLength={200}
+ title={kamelet?.spec.definition.title}
+ isOpen={isModalOpen}
+ onClose={() => setModalOpen(false)}
+ actions={[
+ <div className="modal-footer">
+ <ActionGroup className="deploy-buttons">
+ <Button key="cancel" variant="primary"
+ onClick={e => setModalOpen(false)}>Close</Button>
+ </ActionGroup>
+ </div>
+ ]}
+ >
+ <Flex direction={{default: 'column'}} key={kamelet?.metadata.name}
+ className="kamelet-modal-card">
+ <CardHeader actions={{ actions: <><Badge className="badge"
+ isRead> {kamelet?.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge></>, hasNoOffset: false, className: undefined}} >
+ {kamelet && CamelUi.getIconFromSource(kamelet?.icon())}
+
+ </CardHeader>
+ <Text className="description">{kamelet?.spec.definition.description}</Text>
+ {kamelet?.spec.definition.properties && kamelet?.spec.definition.properties.length !== 0 &&
<div>
<CardTitle>Properties</CardTitle>
<Table aria-label="Simple table" variant='compact'>
@@ -101,7 +80,7 @@ export class KameletModal extends Component<Props, State> {
</Tr>
</Thead>
<Tbody>
- {this.getKameletProperties(this.state.kamelet?.spec.definition.properties).map((p: Property, idx: number) => (
+ {getKameletProperties(kamelet?.spec.definition.properties).map((p: Property, idx: number) => (
<Tr key={idx}>
<Td key={`${idx}_title`}>{p.title}</Td>
<Td key={`${idx}_type`}>{p.type}</Td>
@@ -113,9 +92,8 @@ export class KameletModal extends Component<Props, State> {
</Tbody>
</Table>
</div>
- }
- </Flex>
- </Modal>
- );
- }
+ }
+ </Flex>
+ </Modal>
+ )
}
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx
index 57cc25ba..fb8df6df 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx
@@ -22,9 +22,10 @@ import {
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {KameletCard} from "./KameletCard";
-import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
import {KameletModal} from "./KameletModal";
+import {useKnowledgebaseStore} from "../KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
@@ -32,52 +33,32 @@ interface Props {
customOnly: boolean,
}
-interface State {
- kamelet?: KameletModel;
- isModalOpen: boolean;
- repository: string,
- path: string,
- kamelets: KameletModel[],
+interface Props {
+ dark: boolean,
+ filter: string,
}
-export class KameletsTab extends React.Component<Props, State> {
-
- public state: State = {
- isModalOpen: false,
- repository: '',
- path: '',
- kamelets: [],
- };
-
- componentDidMount() {
- this.setState({kamelets: KameletApi.getKamelets()})
- }
+export function KameletsTab(props: Props) {
- select = (k: KameletModel) => {
- this.setState({kamelet: k, isModalOpen: true})
- }
+ const [isModalOpen] = useKnowledgebaseStore((s) =>
+ [s.isModalOpen], shallow)
- render() {
- const {dark} = this.props;
- const {kamelets, kamelet, isModalOpen} = this.state;
- const {filter, customOnly} = this.props;
- let kameletList = kamelets.filter(kamelet =>
- kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
- if (customOnly) kameletList = kameletList.filter(k => KameletApi.getCustomKameletNames().includes(k.metadata.name));
- return (
- <PageSection variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}
- padding={{default: 'noPadding'}} className="kamelet-section">
- <KameletModal key={kamelet?.metadata.name + isModalOpen.toString()}
- isOpen={isModalOpen} kamelet={kamelet}/>
- <PageSection isFilled className="kamelets-page"
- variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}>
- <Gallery hasGutter>
- {kameletList.map(k => (
- <KameletCard key={k.metadata.name} kamelet={k} onClickCard={this.select}/>
- ))}
- </Gallery>
- </PageSection>
+ const {filter, customOnly, dark} = props;
+ let kameletList = KameletApi.getKamelets().filter(kamelet =>
+ kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
+ if (customOnly) kameletList = kameletList.filter(k => KameletApi.getCustomKameletNames().includes(k.metadata.name));
+ return (
+ <PageSection variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}
+ padding={{default: 'noPadding'}} className="kamelet-section">
+ {isModalOpen && <KameletModal/>}
+ <PageSection isFilled className="kamelets-page"
+ variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <Gallery hasGutter>
+ {kameletList.map(k => (
+ <KameletCard key={k.metadata.name} kamelet={k}/>
+ ))}
+ </Gallery>
</PageSection>
- );
- }
+ </PageSection>
+ )
}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx b/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
index e4e93450..82b5e6f8 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
@@ -43,7 +43,7 @@ export function ImageDownloadToolbar() {
}
function isIntegration(): boolean {
- return isYaml() && file?.code !== undefined && CamelDefinitionYaml.yamlIsIntegration(file.code);
+ return isYaml() && file?.code !== undefined && CamelDefinitionYaml.yamlIsIntegration(file.code) !== 'none';
}
function downloadImage() {