Fix #922

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";

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 {

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";
 

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() {

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";
 

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/';

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";
 

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";

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";

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";
 

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() {

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> {

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 {

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() {

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";

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";
 

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";

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";
 

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";

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";

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";

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) {

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 () {

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 () {

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)

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>
+    )
 }