This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit c507f94332ac366d888b037c1b9260cb17638752
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Feb 19 16:38:43 2024 -0500
Configurable show Kamelet/Component blocker checkbox
---
karavan-designer/src/App.tsx | 4 ++--
karavan-designer/src/knowledgebase/KnowledgebasePage.tsx | 9 +++++++++
karavan-designer/src/knowledgebase/KnowledgebaseStore.ts | 8 ++++++++
.../src/knowledgebase/components/ComponentCard.tsx | 7 ++++---
karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx | 7 ++++---
karavan-space/src/App.tsx | 8 --------
karavan-space/src/designer/karavan.css | 4 ----
karavan-space/src/index.tsx | 12 ++++++++----
karavan-space/src/knowledgebase/KnowledgebasePage.tsx | 9 +++++++++
karavan-space/src/knowledgebase/KnowledgebaseStore.ts | 8 ++++++++
karavan-space/src/knowledgebase/components/ComponentCard.tsx | 7 ++++---
karavan-space/src/knowledgebase/kamelets/KameletCard.tsx | 7 ++++---
12 files changed, 60 insertions(+), 30 deletions(-)
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index e2d9803c..331aa343 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -71,8 +71,8 @@ export function App() {
fetch("snippets/org.apache.camel.AggregationStrategy"),
fetch("snippets/org.apache.camel.Processor"),
fetch("example/demo.camel.yaml"),
- fetch("components/blocked-components.properties"),
- fetch("kamelets/blocked-kamelets.properties")
+ // fetch("components/blocked-components.properties"),
+ // fetch("kamelets/blocked-kamelets.properties")
// fetch("example/aws-cloudwatch-sink.kamelet.yaml")
// fetch("example/aws-s3-cdc-source.kamelet.yaml")
//fetch("components/supported-components.json"),
diff --git a/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
b/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
index 66eae532..86b777e5 100644
--- a/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
@@ -21,18 +21,27 @@ import {MainToolbar} from "../designer/MainToolbar";
import {KameletsTab} from "./kamelets/KameletsTab";
import {EipTab} from "./eip/EipTab";
import {ComponentsTab} from "./components/ComponentsTab";
+import {useKnowledgebaseStore} from "./KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
changeBlockList: (type: string, name: string, checked: boolean) => void,
+ showBlockCheckbox?: boolean,
}
export const KnowledgebasePage = (props: Props) => {
+ const [setShowBlockCheckbox] = useKnowledgebaseStore((s) =>
[s.setShowBlockCheckbox], shallow)
const [tab, setTab] = useState<string | number>("eip");
const [filter, setFilter] = useState<string>("");
const [customOnly, setCustomOnly] = useState<boolean>(false);
+
+ React.useEffect(() => {
+ setShowBlockCheckbox(props.showBlockCheckbox === true)
+ }, []);
+
function title() {
return <TextContent>
<Text component="h2">Knowledgebase</Text>
diff --git a/karavan-designer/src/knowledgebase/KnowledgebaseStore.ts
b/karavan-designer/src/knowledgebase/KnowledgebaseStore.ts
index 32b81787..cb7e3b44 100644
--- a/karavan-designer/src/knowledgebase/KnowledgebaseStore.ts
+++ b/karavan-designer/src/knowledgebase/KnowledgebaseStore.ts
@@ -24,6 +24,8 @@ import {KameletModel} from
"karavan-core/lib/model/KameletModels";
interface KnowledgebaseState {
isModalOpen: boolean;
setModalOpen: (isModalOpen: boolean) => void;
+ showBlockCheckbox: boolean;
+ setShowBlockCheckbox: (showBlockCheckbox: boolean) => void;
component?: Component;
setComponent: (component: Component) => void;
element?: ElementMeta;
@@ -39,6 +41,12 @@ export const useKnowledgebaseStore =
createWithEqualityFn<KnowledgebaseState>((s
return {isModalOpen: isModalOpen};
})
},
+ showBlockCheckbox: false,
+ setShowBlockCheckbox: (showBlockCheckbox: boolean) => {
+ set((state: KnowledgebaseState) => {
+ return {showBlockCheckbox: showBlockCheckbox};
+ })
+ },
setComponent: (component: Component) => {
set((state: KnowledgebaseState) => {
return {component: component};
diff --git a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
index f99d8136..91ec2595 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
@@ -32,8 +32,8 @@ interface Props {
export function ComponentCard(props: Props) {
- const [setComponent, setModalOpen] = useKnowledgebaseStore((s) =>
- [s.setComponent, s.setModalOpen], shallow)
+ const [setComponent, setModalOpen, showBlockCheckbox] =
useKnowledgebaseStore((s) =>
+ [s.setComponent, s.setModalOpen, s.showBlockCheckbox], shallow)
const component = props.component;
const [blockedComponents, setBlockedComponents] = useState<string[]>();
useEffect(() => {
@@ -60,7 +60,8 @@ export function ComponentCard(props: Props) {
<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>
- <Checkbox id={component.component.name}
className="block-checkbox labels" isChecked={!isBlockedComponent} onChange={(_,
checked) => selectComponent(_, checked)} />
+ {showBlockCheckbox && <Checkbox id={component.component.name}
className="block-checkbox labels"
+ isChecked={!isBlockedComponent} onChange={(_,
checked) => selectComponent(_, checked)}/>}
</CardHeader>
<CardHeader>
{CamelUi.getIconForComponent(component.component.title,
component.component.label)}
diff --git a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
index 1dff9f2c..c773035c 100644
--- a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
@@ -32,8 +32,8 @@ interface Props {
export function KameletCard(props: Props) {
- const [setKamelet, setModalOpen] = useKnowledgebaseStore((s) =>
- [s.setKamelet, s.setModalOpen], shallow)
+ const [setKamelet, setModalOpen, showBlockCheckbox] =
useKnowledgebaseStore((s) =>
+ [s.setKamelet, s.setModalOpen, s.showBlockCheckbox], shallow)
const [blockedKamelets, setBlockedKamelets] = useState<string[]>();
useEffect(() => {
setBlockedKamelets(KameletApi.getBlockedKameletNames());
@@ -62,7 +62,8 @@ export function KameletCard(props: Props) {
<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>
- <Checkbox id={kamelet.metadata.name} className="block-checkbox
labels" isChecked={!isblockedKamelet} onChange={(_, checked) =>
selectKamelet(_, checked)} />
+ {showBlockCheckbox && <Checkbox id={kamelet.metadata.name}
className="block-checkbox labels" isChecked={!isblockedKamelet}
+ onChange={(_, checked) => selectKamelet(_,
checked)}/>}
</CardHeader>
<CardHeader>
{CamelUi.getIconFromSource(kamelet.icon())}
diff --git a/karavan-space/src/App.tsx b/karavan-space/src/App.tsx
index 5a723404..5bddc2a6 100644
--- a/karavan-space/src/App.tsx
+++ b/karavan-space/src/App.tsx
@@ -75,8 +75,6 @@ class App extends React.Component<Props, State> {
fetch("components/components.json"),
fetch("snippets/org.apache.camel.AggregationStrategy"),
fetch("snippets/org.apache.camel.Processor"),
- fetch("components/blocked-components.properties"),
- fetch("kamelets/blocked-kamelets.properties")
]).then(responses =>
Promise.all(responses.map(response => response.text()))
).then(data => {
@@ -93,12 +91,6 @@ class App extends React.Component<Props, State> {
TemplateApi.saveTemplate("org.apache.camel.AggregationStrategy",
data[2]);
TemplateApi.saveTemplate("org.apache.camel.Processor", data[3]);
- if (data[4]) {
- ComponentApi.saveBlockedComponentNames(data[4].split('\r\n'));
- }
- if (data[5]) {
- KameletApi.saveBlockedKameletNames(data[5].split('\n'));
- }
}).catch(err =>
EventBus.sendAlert("Error", err.text, 'danger')
);
diff --git a/karavan-space/src/designer/karavan.css
b/karavan-space/src/designer/karavan.css
index 82f75a51..78b2a135 100644
--- a/karavan-space/src/designer/karavan.css
+++ b/karavan-space/src/designer/karavan.css
@@ -819,7 +819,3 @@
.karavan .knowledbase-eip-section .pf-v5-c-toggle-group{
margin:16px;
}
-.karavan .kamelet-section .kamelet-card .block-checkbox input{
- width:18px;
- height:18px
-}
\ No newline at end of file
diff --git a/karavan-space/src/index.tsx b/karavan-space/src/index.tsx
index 98fd0600..0912a986 100644
--- a/karavan-space/src/index.tsx
+++ b/karavan-space/src/index.tsx
@@ -14,13 +14,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React from 'react';
+import React, {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import "./index.css";
import "@patternfly/patternfly/patternfly.css";
import App from "./App";
+import {createRoot} from "react-dom/client";
-ReactDOM.render(
- <App/>,
- document.getElementById('root')
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+ <StrictMode>
+ <App />
+ </StrictMode>
);
\ No newline at end of file
diff --git a/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
b/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
index 66eae532..86b777e5 100644
--- a/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
@@ -21,18 +21,27 @@ import {MainToolbar} from "../designer/MainToolbar";
import {KameletsTab} from "./kamelets/KameletsTab";
import {EipTab} from "./eip/EipTab";
import {ComponentsTab} from "./components/ComponentsTab";
+import {useKnowledgebaseStore} from "./KnowledgebaseStore";
+import {shallow} from "zustand/shallow";
interface Props {
dark: boolean,
changeBlockList: (type: string, name: string, checked: boolean) => void,
+ showBlockCheckbox?: boolean,
}
export const KnowledgebasePage = (props: Props) => {
+ const [setShowBlockCheckbox] = useKnowledgebaseStore((s) =>
[s.setShowBlockCheckbox], shallow)
const [tab, setTab] = useState<string | number>("eip");
const [filter, setFilter] = useState<string>("");
const [customOnly, setCustomOnly] = useState<boolean>(false);
+
+ React.useEffect(() => {
+ setShowBlockCheckbox(props.showBlockCheckbox === true)
+ }, []);
+
function title() {
return <TextContent>
<Text component="h2">Knowledgebase</Text>
diff --git a/karavan-space/src/knowledgebase/KnowledgebaseStore.ts
b/karavan-space/src/knowledgebase/KnowledgebaseStore.ts
index 32b81787..cb7e3b44 100644
--- a/karavan-space/src/knowledgebase/KnowledgebaseStore.ts
+++ b/karavan-space/src/knowledgebase/KnowledgebaseStore.ts
@@ -24,6 +24,8 @@ import {KameletModel} from
"karavan-core/lib/model/KameletModels";
interface KnowledgebaseState {
isModalOpen: boolean;
setModalOpen: (isModalOpen: boolean) => void;
+ showBlockCheckbox: boolean;
+ setShowBlockCheckbox: (showBlockCheckbox: boolean) => void;
component?: Component;
setComponent: (component: Component) => void;
element?: ElementMeta;
@@ -39,6 +41,12 @@ export const useKnowledgebaseStore =
createWithEqualityFn<KnowledgebaseState>((s
return {isModalOpen: isModalOpen};
})
},
+ showBlockCheckbox: false,
+ setShowBlockCheckbox: (showBlockCheckbox: boolean) => {
+ set((state: KnowledgebaseState) => {
+ return {showBlockCheckbox: showBlockCheckbox};
+ })
+ },
setComponent: (component: Component) => {
set((state: KnowledgebaseState) => {
return {component: component};
diff --git a/karavan-space/src/knowledgebase/components/ComponentCard.tsx
b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
index f99d8136..91ec2595 100644
--- a/karavan-space/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
@@ -32,8 +32,8 @@ interface Props {
export function ComponentCard(props: Props) {
- const [setComponent, setModalOpen] = useKnowledgebaseStore((s) =>
- [s.setComponent, s.setModalOpen], shallow)
+ const [setComponent, setModalOpen, showBlockCheckbox] =
useKnowledgebaseStore((s) =>
+ [s.setComponent, s.setModalOpen, s.showBlockCheckbox], shallow)
const component = props.component;
const [blockedComponents, setBlockedComponents] = useState<string[]>();
useEffect(() => {
@@ -60,7 +60,8 @@ export function ComponentCard(props: Props) {
<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>
- <Checkbox id={component.component.name}
className="block-checkbox labels" isChecked={!isBlockedComponent} onChange={(_,
checked) => selectComponent(_, checked)} />
+ {showBlockCheckbox && <Checkbox id={component.component.name}
className="block-checkbox labels"
+ isChecked={!isBlockedComponent} onChange={(_,
checked) => selectComponent(_, checked)}/>}
</CardHeader>
<CardHeader>
{CamelUi.getIconForComponent(component.component.title,
component.component.label)}
diff --git a/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
b/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
index 1dff9f2c..c773035c 100644
--- a/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
@@ -32,8 +32,8 @@ interface Props {
export function KameletCard(props: Props) {
- const [setKamelet, setModalOpen] = useKnowledgebaseStore((s) =>
- [s.setKamelet, s.setModalOpen], shallow)
+ const [setKamelet, setModalOpen, showBlockCheckbox] =
useKnowledgebaseStore((s) =>
+ [s.setKamelet, s.setModalOpen, s.showBlockCheckbox], shallow)
const [blockedKamelets, setBlockedKamelets] = useState<string[]>();
useEffect(() => {
setBlockedKamelets(KameletApi.getBlockedKameletNames());
@@ -62,7 +62,8 @@ export function KameletCard(props: Props) {
<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>
- <Checkbox id={kamelet.metadata.name} className="block-checkbox
labels" isChecked={!isblockedKamelet} onChange={(_, checked) =>
selectKamelet(_, checked)} />
+ {showBlockCheckbox && <Checkbox id={kamelet.metadata.name}
className="block-checkbox labels" isChecked={!isblockedKamelet}
+ onChange={(_, checked) => selectKamelet(_,
checked)}/>}
</CardHeader>
<CardHeader>
{CamelUi.getIconFromSource(kamelet.icon())}
