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 5fbb92cf180528073421852b3331c11b11abb4f3
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Feb 19 16:49:57 2024 -0500
Configurable show Kamelet/Component blocker checkbox
---
.../src/main/webui/src/designer/karavan.css | 4 ----
.../webui/src/knowledgebase/KnowledgebasePage.tsx | 9 ++++++++
.../webui/src/knowledgebase/KnowledgebaseStore.ts | 8 +++++++
.../src/knowledgebase/components/ComponentCard.tsx | 7 +++---
.../src/knowledgebase/kamelets/KameletCard.tsx | 7 +++---
.../KnowledgebaseWrapper.tsx} | 26 +++++++++++++++++++---
.../src/main/webui/src/main/MainRoutes.tsx | 4 ++--
7 files changed, 50 insertions(+), 15 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/karavan.css
b/karavan-web/karavan-app/src/main/webui/src/designer/karavan.css
index 82f75a51..78b2a135 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-web/karavan-app/src/main/webui/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-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
index 66eae532..86b777e5 100644
---
a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
+++
b/karavan-web/karavan-app/src/main/webui/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-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseStore.ts
b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseStore.ts
index 32b81787..cb7e3b44 100644
---
a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseStore.ts
+++
b/karavan-web/karavan-app/src/main/webui/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-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 f99d8136..91ec2595 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
@@ -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-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 1dff9f2c..c773035c 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
@@ -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-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseHome.tsx
b/karavan-web/karavan-app/src/main/webui/src/main/KnowledgebaseWrapper.tsx
similarity index 53%
rename from
karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseHome.tsx
rename to
karavan-web/karavan-app/src/main/webui/src/main/KnowledgebaseWrapper.tsx
index d9a50a9a..59dda14a 100644
---
a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebaseHome.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/KnowledgebaseWrapper.tsx
@@ -1,5 +1,22 @@
+/*
+ * 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 { KameletApi } from "karavan-core/lib/api/KameletApi";
-import { KnowledgebasePage } from "./KnowledgebasePage"
+import { KnowledgebasePage } from "../knowledgebase/KnowledgebasePage"
import { ComponentApi } from "karavan-core/lib/api/ComponentApi";
import { KaravanApi } from "../api/KaravanApi";
import { useState, useEffect } from "react";
@@ -8,7 +25,7 @@ import { ProjectService } from "../api/ProjectService";
interface Props {
dark: boolean,
}
-export const KnowledgebaseHome = (props: Props) => {
+export const KnowledgebaseWrapper = (props: Props) => {
const [blockList, setBlockList] = useState<ProjectFile[]>();
@@ -36,6 +53,9 @@ export const KnowledgebaseHome = (props: Props) => {
}
return (
- <KnowledgebasePage dark={props.dark} changeBlockList={(type: string,
name: string, checked: boolean) => onChangeBlockedList(type, name, checked)} />
+ <KnowledgebasePage
+ dark={props.dark}
+ showBlockCheckbox={true}
+ changeBlockList={(type: string, name: string, checked: boolean) =>
onChangeBlockedList(type, name, checked)} />
);
}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/MainRoutes.tsx
b/karavan-web/karavan-app/src/main/webui/src/main/MainRoutes.tsx
index 91956b2c..761bf382 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/MainRoutes.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/MainRoutes.tsx
@@ -23,7 +23,7 @@ import {ServicesPage} from "../services/ServicesPage";
import {ContainersPage} from "../containers/ContainersPage";
import {TemplatesPage} from "../templates/TemplatesPage";
import {ConfigurationPage} from "../config/ConfigurationPage";
-import { KnowledgebaseHome } from '../knowledgebase/KnowledgebaseHome';
+import { KnowledgebaseWrapper } from './KnowledgebaseWrapper';
export function MainRoutes() {
@@ -34,7 +34,7 @@ export function MainRoutes() {
<Route path="/templates" element={<TemplatesPage
key={'templates'}/>}/>
<Route path="/services" element={<ServicesPage key="services"/>}/>
<Route path="/containers" element={<ContainersPage
key="services"/>}/>
- <Route path="/knowledgebase" element={<KnowledgebaseHome
dark={false}/>}/>
+ <Route path="/knowledgebase" element={<KnowledgebaseWrapper
dark={false}/>}/>
<Route path="/configuration" element={<ConfigurationPage
dark={false}/>}/>
<Route path="*" element={<Navigate to="/projects" replace/>}/>
</Routes>
