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 2024/08/09 19:37:16 UTC
(camel-karavan) 03/04: Designer improvements
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 97225edf02e02c26058aa50de31245d26fac6fa4
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Fri Aug 9 15:35:20 2024 -0400
Designer improvements
---
.../webui/src/designer/route/DslConnections.tsx | 90 ++++++++++----------
.../src/knowledgebase/components/ComponentCard.tsx | 25 ++++--
.../src/designer/route/DslConnections.tsx | 97 ++++++++++++----------
.../src/knowledgebase/components/ComponentCard.tsx | 25 ++++--
.../src/designer/route/DslConnections.tsx | 97 ++++++++++++----------
.../src/knowledgebase/components/ComponentCard.tsx | 25 ++++--
6 files changed, 197 insertions(+), 162 deletions(-)
diff --git a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
index 03a29129..b5a779dc 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
@@ -156,29 +156,29 @@ export function DslConnections() {
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
return (!isInternal
- ? <div key={pos.step.uuid + "-icon"}
- style={{display: "block", position: "absolute", top: imageY, left: imageX}}
- >
- {CamelUi.getConnectionIcon(pos.step)}
- {routes.map((routeId, index) =>
- <Tooltip key={`${routeId}:${index}`} content={`Go to route:${routeId}`} position={"right"}>
- <Button style={{
- position: 'absolute',
- left: 27,
- top: (index * 16) + (12),
- whiteSpace: 'nowrap',
- zIndex: 300,
- padding: 0
- }}
- variant={'link'}
- aria-label="Goto"
- onClick={_ => InfrastructureAPI.onInternalConsumerClick(undefined, undefined, routeId)}>
- {routeId}
- </Button>
- </Tooltip>
- )}
- </div>
- : <></>
+ ? <div key={pos.step.uuid + "-icon"}
+ style={{display: "block", position: "absolute", top: imageY, left: imageX}}
+ >
+ {CamelUi.getConnectionIcon(pos.step)}
+ {routes.map((routeId, index) =>
+ <Tooltip key={`${routeId}:${index}`} content={`Go to route:${routeId}`} position={"right"}>
+ <Button style={{
+ position: 'absolute',
+ left: 27,
+ top: (index * 16) + (12),
+ whiteSpace: 'nowrap',
+ zIndex: 300,
+ padding: 0
+ }}
+ variant={'link'}
+ aria-label="Goto"
+ onClick={_ => InfrastructureAPI.onInternalConsumerClick(undefined, undefined, routeId)}>
+ {routeId}
+ </Button>
+ </Tooltip>
+ )}
+ </div>
+ : <></>
)
}
}
@@ -240,13 +240,13 @@ export function DslConnections() {
const isInternal = data[2] === 'internal';
const isNav = data[2] === 'nav';
return (!isInternal
- ? <g key={pos.step.uuid + "-outgoing"}>
- <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
- <path
- d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
- className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/>
- </g>
- : <></>
+ ? <g key={pos.step.uuid + "-outgoing"}>
+ <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
+ <path
+ d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
+ className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/>
+ </g>
+ : <></>
)
}
}
@@ -266,21 +266,21 @@ export function DslConnections() {
const imageX = outgoingX - r + 6;
const imageY = outgoingY - r + 6;
return (!isInternal
- ? <div key={pos.step.uuid + "-icon"}
- style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
- {CamelUi.getConnectionIcon(pos.step)}
- {name !== undefined &&
- <Tooltip content={`Go to ${uri}:${name}`} position={"left"}>
- <Button style={{position: 'absolute', right: 27, top: -12, whiteSpace: 'nowrap', zIndex: 300, padding: 0}}
- variant={'link'}
- aria-label="Goto"
- onClick={_ => InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
- {name}
- </Button>
- </Tooltip>
- }
- </div>
- : <></>
+ ? <div key={pos.step.uuid + "-icon"}
+ style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ {name !== undefined &&
+ <Tooltip content={`Go to ${uri}:${name}`} position={"left"}>
+ <Button style={{position: 'absolute', right: 27, top: -12, whiteSpace: 'nowrap', zIndex: 300, padding: 0}}
+ variant={'link'}
+ aria-label="Goto"
+ onClick={_ => InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
+ {name}
+ </Button>
+ </Tooltip>
+ }
+ </div>
+ : <></>
)
}
}
diff --git a/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx b/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
index 8794ef1e..c9f39d04 100644
--- a/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
import {
CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox, Flex
} from '@patternfly/react-core';
@@ -23,7 +23,7 @@ import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
import {useKnowledgebaseStore} from "../KnowledgebaseStore";
import {shallow} from "zustand/shallow";
-import { ComponentApi } from 'karavan-core/lib/api/ComponentApi';
+import {ComponentApi} from 'karavan-core/lib/api/ComponentApi';
interface Props {
component: Component,
@@ -39,32 +39,39 @@ export function ComponentCard(props: Props) {
useEffect(() => {
setBlockedComponents(ComponentApi.getBlockedComponentNames());
}, []);
-
+
function click(event: React.MouseEvent) {
- const { target } = event;
+ const {target} = event;
if (!(target as HTMLElement).parentElement?.className.includes("block-checkbox")) {
setComponent(component)
setModalOpen(true);
}
}
+
function selectComponent(event: React.FormEvent, checked: boolean) {
props.onChange(component.component.name, checked);
- setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
+ setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
}
+
const isBlockedComponent = blockedComponents ? blockedComponents.findIndex(r => r === component.component.name) > -1 : false;
- const isRemote = component.component.remote;
+ const isRemote = component.component.remote;
return (
<Card isCompact key={component.component.name} className="kamelet-card"
onClick={event => click(event)}
>
<CardHeader className="header-labels">
- <Flex style={{width:'100%'}} gap={{default:'gapSm'}} justifyContent={{default: 'justifyContentSpaceBetween'}}>
+ <Flex style={{width: '100%'}} gap={{default: 'gapSm'}} justifyContent={{default: 'justifyContentSpaceBetween'}}>
<Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
<Badge isRead className="version labels">{component.component.version}</Badge>
</Flex>
- {showBlockCheckbox && <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/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index 03a29129..8c96ff4e 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -156,29 +156,29 @@ export function DslConnections() {
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
return (!isInternal
- ? <div key={pos.step.uuid + "-icon"}
- style={{display: "block", position: "absolute", top: imageY, left: imageX}}
- >
- {CamelUi.getConnectionIcon(pos.step)}
- {routes.map((routeId, index) =>
- <Tooltip key={`${routeId}:${index}`} content={`Go to route:${routeId}`} position={"right"}>
- <Button style={{
- position: 'absolute',
- left: 27,
- top: (index * 16) + (12),
- whiteSpace: 'nowrap',
- zIndex: 300,
- padding: 0
- }}
- variant={'link'}
- aria-label="Goto"
- onClick={_ => InfrastructureAPI.onInternalConsumerClick(undefined, undefined, routeId)}>
- {routeId}
- </Button>
- </Tooltip>
- )}
- </div>
- : <></>
+ ? <div key={pos.step.uuid + "-icon"}
+ style={{display: "block", position: "absolute", top: imageY, left: imageX}}
+ >
+ {CamelUi.getConnectionIcon(pos.step)}
+ {routes.map((routeId, index) =>
+ <Tooltip key={`${routeId}:${index}`} content={`Go to route:${routeId}`} position={"right"}>
+ <Button style={{
+ position: 'absolute',
+ left: 27,
+ top: (index * 16) + (12),
+ whiteSpace: 'nowrap',
+ zIndex: 300,
+ padding: 0
+ }}
+ variant={'link'}
+ aria-label="Goto"
+ onClick={_ => InfrastructureAPI.onInternalConsumerClick(undefined, undefined, routeId)}>
+ {routeId}
+ </Button>
+ </Tooltip>
+ )}
+ </div>
+ : <></>
)
}
}
@@ -240,13 +240,13 @@ export function DslConnections() {
const isInternal = data[2] === 'internal';
const isNav = data[2] === 'nav';
return (!isInternal
- ? <g key={pos.step.uuid + "-outgoing"}>
- <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
- <path
- d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
- className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/>
- </g>
- : <></>
+ ? <g key={pos.step.uuid + "-outgoing"}>
+ <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
+ <path
+ d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
+ className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/>
+ </g>
+ : <></>
)
}
}
@@ -266,21 +266,28 @@ export function DslConnections() {
const imageX = outgoingX - r + 6;
const imageY = outgoingY - r + 6;
return (!isInternal
- ? <div key={pos.step.uuid + "-icon"}
- style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
- {CamelUi.getConnectionIcon(pos.step)}
- {name !== undefined &&
- <Tooltip content={`Go to ${uri}:${name}`} position={"left"}>
- <Button style={{position: 'absolute', right: 27, top: -12, whiteSpace: 'nowrap', zIndex: 300, padding: 0}}
- variant={'link'}
- aria-label="Goto"
- onClick={_ => InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
- {name}
- </Button>
- </Tooltip>
- }
- </div>
- : <></>
+ ? <div key={pos.step.uuid + "-icon"}
+ style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ {name !== undefined &&
+ <Tooltip content={`Go to ${uri}:${name}`} position={"left"}>
+ <Button style={{
+ position: 'absolute',
+ right: 27,
+ top: -12,
+ whiteSpace: 'nowrap',
+ zIndex: 300,
+ padding: 0
+ }}
+ variant={'link'}
+ aria-label="Goto"
+ onClick={_ => InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
+ {name}
+ </Button>
+ </Tooltip>
+ }
+ </div>
+ : <></>
)
}
}
diff --git a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
index 8794ef1e..c9f39d04 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
import {
CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox, Flex
} from '@patternfly/react-core';
@@ -23,7 +23,7 @@ import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
import {useKnowledgebaseStore} from "../KnowledgebaseStore";
import {shallow} from "zustand/shallow";
-import { ComponentApi } from 'karavan-core/lib/api/ComponentApi';
+import {ComponentApi} from 'karavan-core/lib/api/ComponentApi';
interface Props {
component: Component,
@@ -39,32 +39,39 @@ export function ComponentCard(props: Props) {
useEffect(() => {
setBlockedComponents(ComponentApi.getBlockedComponentNames());
}, []);
-
+
function click(event: React.MouseEvent) {
- const { target } = event;
+ const {target} = event;
if (!(target as HTMLElement).parentElement?.className.includes("block-checkbox")) {
setComponent(component)
setModalOpen(true);
}
}
+
function selectComponent(event: React.FormEvent, checked: boolean) {
props.onChange(component.component.name, checked);
- setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
+ setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
}
+
const isBlockedComponent = blockedComponents ? blockedComponents.findIndex(r => r === component.component.name) > -1 : false;
- const isRemote = component.component.remote;
+ const isRemote = component.component.remote;
return (
<Card isCompact key={component.component.name} className="kamelet-card"
onClick={event => click(event)}
>
<CardHeader className="header-labels">
- <Flex style={{width:'100%'}} gap={{default:'gapSm'}} justifyContent={{default: 'justifyContentSpaceBetween'}}>
+ <Flex style={{width: '100%'}} gap={{default: 'gapSm'}} justifyContent={{default: 'justifyContentSpaceBetween'}}>
<Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
<Badge isRead className="version labels">{component.component.version}</Badge>
</Flex>
- {showBlockCheckbox && <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/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx
index 03a29129..8c96ff4e 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -156,29 +156,29 @@ export function DslConnections() {
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
return (!isInternal
- ? <div key={pos.step.uuid + "-icon"}
- style={{display: "block", position: "absolute", top: imageY, left: imageX}}
- >
- {CamelUi.getConnectionIcon(pos.step)}
- {routes.map((routeId, index) =>
- <Tooltip key={`${routeId}:${index}`} content={`Go to route:${routeId}`} position={"right"}>
- <Button style={{
- position: 'absolute',
- left: 27,
- top: (index * 16) + (12),
- whiteSpace: 'nowrap',
- zIndex: 300,
- padding: 0
- }}
- variant={'link'}
- aria-label="Goto"
- onClick={_ => InfrastructureAPI.onInternalConsumerClick(undefined, undefined, routeId)}>
- {routeId}
- </Button>
- </Tooltip>
- )}
- </div>
- : <></>
+ ? <div key={pos.step.uuid + "-icon"}
+ style={{display: "block", position: "absolute", top: imageY, left: imageX}}
+ >
+ {CamelUi.getConnectionIcon(pos.step)}
+ {routes.map((routeId, index) =>
+ <Tooltip key={`${routeId}:${index}`} content={`Go to route:${routeId}`} position={"right"}>
+ <Button style={{
+ position: 'absolute',
+ left: 27,
+ top: (index * 16) + (12),
+ whiteSpace: 'nowrap',
+ zIndex: 300,
+ padding: 0
+ }}
+ variant={'link'}
+ aria-label="Goto"
+ onClick={_ => InfrastructureAPI.onInternalConsumerClick(undefined, undefined, routeId)}>
+ {routeId}
+ </Button>
+ </Tooltip>
+ )}
+ </div>
+ : <></>
)
}
}
@@ -240,13 +240,13 @@ export function DslConnections() {
const isInternal = data[2] === 'internal';
const isNav = data[2] === 'nav';
return (!isInternal
- ? <g key={pos.step.uuid + "-outgoing"}>
- <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
- <path
- d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
- className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/>
- </g>
- : <></>
+ ? <g key={pos.step.uuid + "-outgoing"}>
+ <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
+ <path
+ d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
+ className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerEnd="url(#arrowhead)"/>
+ </g>
+ : <></>
)
}
}
@@ -266,21 +266,28 @@ export function DslConnections() {
const imageX = outgoingX - r + 6;
const imageY = outgoingY - r + 6;
return (!isInternal
- ? <div key={pos.step.uuid + "-icon"}
- style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
- {CamelUi.getConnectionIcon(pos.step)}
- {name !== undefined &&
- <Tooltip content={`Go to ${uri}:${name}`} position={"left"}>
- <Button style={{position: 'absolute', right: 27, top: -12, whiteSpace: 'nowrap', zIndex: 300, padding: 0}}
- variant={'link'}
- aria-label="Goto"
- onClick={_ => InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
- {name}
- </Button>
- </Tooltip>
- }
- </div>
- : <></>
+ ? <div key={pos.step.uuid + "-icon"}
+ style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ {name !== undefined &&
+ <Tooltip content={`Go to ${uri}:${name}`} position={"left"}>
+ <Button style={{
+ position: 'absolute',
+ right: 27,
+ top: -12,
+ whiteSpace: 'nowrap',
+ zIndex: 300,
+ padding: 0
+ }}
+ variant={'link'}
+ aria-label="Goto"
+ onClick={_ => InfrastructureAPI.onInternalConsumerClick(uri, name, undefined)}>
+ {name}
+ </Button>
+ </Tooltip>
+ }
+ </div>
+ : <></>
)
}
}
diff --git a/karavan-space/src/knowledgebase/components/ComponentCard.tsx b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
index 8794ef1e..c9f39d04 100644
--- a/karavan-space/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
import {
CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox, Flex
} from '@patternfly/react-core';
@@ -23,7 +23,7 @@ import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
import {useKnowledgebaseStore} from "../KnowledgebaseStore";
import {shallow} from "zustand/shallow";
-import { ComponentApi } from 'karavan-core/lib/api/ComponentApi';
+import {ComponentApi} from 'karavan-core/lib/api/ComponentApi';
interface Props {
component: Component,
@@ -39,32 +39,39 @@ export function ComponentCard(props: Props) {
useEffect(() => {
setBlockedComponents(ComponentApi.getBlockedComponentNames());
}, []);
-
+
function click(event: React.MouseEvent) {
- const { target } = event;
+ const {target} = event;
if (!(target as HTMLElement).parentElement?.className.includes("block-checkbox")) {
setComponent(component)
setModalOpen(true);
}
}
+
function selectComponent(event: React.FormEvent, checked: boolean) {
props.onChange(component.component.name, checked);
- setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
+ setBlockedComponents([...ComponentApi.getBlockedComponentNames()]);
}
+
const isBlockedComponent = blockedComponents ? blockedComponents.findIndex(r => r === component.component.name) > -1 : false;
- const isRemote = component.component.remote;
+ const isRemote = component.component.remote;
return (
<Card isCompact key={component.component.name} className="kamelet-card"
onClick={event => click(event)}
>
<CardHeader className="header-labels">
- <Flex style={{width:'100%'}} gap={{default:'gapSm'}} justifyContent={{default: 'justifyContentSpaceBetween'}}>
+ <Flex style={{width: '100%'}} gap={{default: 'gapSm'}} justifyContent={{default: 'justifyContentSpaceBetween'}}>
<Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
<Badge isRead className="version labels">{component.component.version}</Badge>
</Flex>
- {showBlockCheckbox && <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)}