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 266bd141 #1152
266bd141 is described below
commit 266bd141e0b5468295b5fb52ee4ebfcb2c207f47
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Fri Mar 1 09:28:46 2024 -0500
#1152
---
.../main/webui/src/designer/route/DslSelector.tsx | 45 ++++++++++++++++++----
.../src/designer/route/DslSelector.tsx | 45 ++++++++++++++++++----
karavan-space/src/designer/route/DslSelector.tsx | 45 ++++++++++++++++++----
3 files changed, 111 insertions(+), 24 deletions(-)
diff --git a/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
b/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
index 68e62e22..c7dde3e7 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
@@ -17,9 +17,28 @@
import React, {useEffect, useState} from 'react';
import {
Badge,
- Card, CardBody, CardFooter, CardHeader, Flex, FlexItem, Form, FormGroup,
Gallery, Modal, PageSection,
- Tab, Tabs, TabTitleText,
- Text, TextInput, ToggleGroup, ToggleGroupItem,Switch
+ Card,
+ CardBody,
+ CardFooter,
+ CardHeader,
+ Flex,
+ FlexItem,
+ Form,
+ FormGroup,
+ Gallery,
+ Modal,
+ PageSection,
+ Tab,
+ Tabs,
+ TabTitleText,
+ Text,
+ ToggleGroup,
+ ToggleGroupItem,
+ Switch,
+ TextInputGroup,
+ TextInputGroupMain,
+ TextInputGroupUtilities,
+ Button
} from '@patternfly/react-core';
import './DslSelector.css';
import {CamelUi} from "../utils/CamelUi";
@@ -29,6 +48,7 @@ import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
import { ComponentApi } from 'karavan-core/lib/api/ComponentApi';
import { KameletApi } from 'karavan-core/lib/api/KameletApi';
+import TimesIcon from "@patternfly/react-icons/dist/esm/icons/times-icon";
interface Props {
tabIndex?: string | number
@@ -77,9 +97,16 @@ export function DslSelector (props: Props) {
/>
</FlexItem>}
<FlexItem>
- <TextInput className="text-field" type="text" id="search"
name="search" autoComplete={"off"}
+ <TextInputGroup>
+ <TextInputGroupMain className="text-field" type="text"
autoComplete={"off"}
value={filter}
onChange={(_, value) => setFilter(value)}/>
+ <TextInputGroupUtilities>
+ <Button variant="plain" onClick={_ =>
setFilter('')}>
+ <TimesIcon />
+ </Button>
+ </TextInputGroupUtilities>
+ </TextInputGroup>
</FlexItem>
</Flex>
)
@@ -141,11 +168,11 @@ export function DslSelector (props: Props) {
}
const isEip = selectorTabIndex === 'eip';
+ const isRouteConfig = parentDsl === 'RouteConfigurationDefinition';
const title = parentDsl === undefined ? "Select source" : "Select step";
const navigation: string = selectorTabIndex ? selectorTabIndex.toString()
: '';
const blockedComponents = ComponentApi.getBlockedComponentNames();
const blockedKamelets = KameletApi.getBlockedKameletNames();
- const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
navigation, showSteps);
const eipElements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
'eip', showSteps);
const componentElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'component', showSteps)
@@ -165,6 +192,8 @@ export function DslSelector (props: Props) {
? filteredComponentElements
: (navigation === 'kamelet' ? filteredKameletElements :
filteredEipElements);
+ console.log(parentDsl)
+
return (
<Modal
aria-label={title}
@@ -181,18 +210,18 @@ export function DslSelector (props: Props) {
<FlexItem>
<Tabs style={{overflow: 'hidden'}}
activeKey={selectorTabIndex}
onSelect={selectTab}>
- {parentDsl !== undefined &&
filteredEipElements?.length > 0 &&
+ {parentDsl !== undefined &&
<Tab eventKey={"eip"} key={"tab-eip"}
title={<TabTitleText>{`Integration
Patterns (${filteredEipElements?.length})`}</TabTitleText>}>
</Tab>
}
- {filteredKameletElements?.length > 0 &&
+ {!isRouteConfig &&
<Tab eventKey={'kamelet'} key={"tab-kamelet"}
title={
<TabTitleText>{`Kamelets
(${filteredKameletElements?.length})`}</TabTitleText>}>
</Tab>
}
- {filteredComponentElements?.length > 0 &&
+ {!isRouteConfig &&
<Tab eventKey={'component'}
key={'tab-component'}
title={
<TabTitleText>{`Components
(${filteredComponentElements?.length})`}</TabTitleText>}>
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx
b/karavan-designer/src/designer/route/DslSelector.tsx
index 68e62e22..c7dde3e7 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -17,9 +17,28 @@
import React, {useEffect, useState} from 'react';
import {
Badge,
- Card, CardBody, CardFooter, CardHeader, Flex, FlexItem, Form, FormGroup,
Gallery, Modal, PageSection,
- Tab, Tabs, TabTitleText,
- Text, TextInput, ToggleGroup, ToggleGroupItem,Switch
+ Card,
+ CardBody,
+ CardFooter,
+ CardHeader,
+ Flex,
+ FlexItem,
+ Form,
+ FormGroup,
+ Gallery,
+ Modal,
+ PageSection,
+ Tab,
+ Tabs,
+ TabTitleText,
+ Text,
+ ToggleGroup,
+ ToggleGroupItem,
+ Switch,
+ TextInputGroup,
+ TextInputGroupMain,
+ TextInputGroupUtilities,
+ Button
} from '@patternfly/react-core';
import './DslSelector.css';
import {CamelUi} from "../utils/CamelUi";
@@ -29,6 +48,7 @@ import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
import { ComponentApi } from 'karavan-core/lib/api/ComponentApi';
import { KameletApi } from 'karavan-core/lib/api/KameletApi';
+import TimesIcon from "@patternfly/react-icons/dist/esm/icons/times-icon";
interface Props {
tabIndex?: string | number
@@ -77,9 +97,16 @@ export function DslSelector (props: Props) {
/>
</FlexItem>}
<FlexItem>
- <TextInput className="text-field" type="text" id="search"
name="search" autoComplete={"off"}
+ <TextInputGroup>
+ <TextInputGroupMain className="text-field" type="text"
autoComplete={"off"}
value={filter}
onChange={(_, value) => setFilter(value)}/>
+ <TextInputGroupUtilities>
+ <Button variant="plain" onClick={_ =>
setFilter('')}>
+ <TimesIcon />
+ </Button>
+ </TextInputGroupUtilities>
+ </TextInputGroup>
</FlexItem>
</Flex>
)
@@ -141,11 +168,11 @@ export function DslSelector (props: Props) {
}
const isEip = selectorTabIndex === 'eip';
+ const isRouteConfig = parentDsl === 'RouteConfigurationDefinition';
const title = parentDsl === undefined ? "Select source" : "Select step";
const navigation: string = selectorTabIndex ? selectorTabIndex.toString()
: '';
const blockedComponents = ComponentApi.getBlockedComponentNames();
const blockedKamelets = KameletApi.getBlockedKameletNames();
- const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
navigation, showSteps);
const eipElements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
'eip', showSteps);
const componentElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'component', showSteps)
@@ -165,6 +192,8 @@ export function DslSelector (props: Props) {
? filteredComponentElements
: (navigation === 'kamelet' ? filteredKameletElements :
filteredEipElements);
+ console.log(parentDsl)
+
return (
<Modal
aria-label={title}
@@ -181,18 +210,18 @@ export function DslSelector (props: Props) {
<FlexItem>
<Tabs style={{overflow: 'hidden'}}
activeKey={selectorTabIndex}
onSelect={selectTab}>
- {parentDsl !== undefined &&
filteredEipElements?.length > 0 &&
+ {parentDsl !== undefined &&
<Tab eventKey={"eip"} key={"tab-eip"}
title={<TabTitleText>{`Integration
Patterns (${filteredEipElements?.length})`}</TabTitleText>}>
</Tab>
}
- {filteredKameletElements?.length > 0 &&
+ {!isRouteConfig &&
<Tab eventKey={'kamelet'} key={"tab-kamelet"}
title={
<TabTitleText>{`Kamelets
(${filteredKameletElements?.length})`}</TabTitleText>}>
</Tab>
}
- {filteredComponentElements?.length > 0 &&
+ {!isRouteConfig &&
<Tab eventKey={'component'}
key={'tab-component'}
title={
<TabTitleText>{`Components
(${filteredComponentElements?.length})`}</TabTitleText>}>
diff --git a/karavan-space/src/designer/route/DslSelector.tsx
b/karavan-space/src/designer/route/DslSelector.tsx
index 68e62e22..c7dde3e7 100644
--- a/karavan-space/src/designer/route/DslSelector.tsx
+++ b/karavan-space/src/designer/route/DslSelector.tsx
@@ -17,9 +17,28 @@
import React, {useEffect, useState} from 'react';
import {
Badge,
- Card, CardBody, CardFooter, CardHeader, Flex, FlexItem, Form, FormGroup,
Gallery, Modal, PageSection,
- Tab, Tabs, TabTitleText,
- Text, TextInput, ToggleGroup, ToggleGroupItem,Switch
+ Card,
+ CardBody,
+ CardFooter,
+ CardHeader,
+ Flex,
+ FlexItem,
+ Form,
+ FormGroup,
+ Gallery,
+ Modal,
+ PageSection,
+ Tab,
+ Tabs,
+ TabTitleText,
+ Text,
+ ToggleGroup,
+ ToggleGroupItem,
+ Switch,
+ TextInputGroup,
+ TextInputGroupMain,
+ TextInputGroupUtilities,
+ Button
} from '@patternfly/react-core';
import './DslSelector.css';
import {CamelUi} from "../utils/CamelUi";
@@ -29,6 +48,7 @@ import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
import { ComponentApi } from 'karavan-core/lib/api/ComponentApi';
import { KameletApi } from 'karavan-core/lib/api/KameletApi';
+import TimesIcon from "@patternfly/react-icons/dist/esm/icons/times-icon";
interface Props {
tabIndex?: string | number
@@ -77,9 +97,16 @@ export function DslSelector (props: Props) {
/>
</FlexItem>}
<FlexItem>
- <TextInput className="text-field" type="text" id="search"
name="search" autoComplete={"off"}
+ <TextInputGroup>
+ <TextInputGroupMain className="text-field" type="text"
autoComplete={"off"}
value={filter}
onChange={(_, value) => setFilter(value)}/>
+ <TextInputGroupUtilities>
+ <Button variant="plain" onClick={_ =>
setFilter('')}>
+ <TimesIcon />
+ </Button>
+ </TextInputGroupUtilities>
+ </TextInputGroup>
</FlexItem>
</Flex>
)
@@ -141,11 +168,11 @@ export function DslSelector (props: Props) {
}
const isEip = selectorTabIndex === 'eip';
+ const isRouteConfig = parentDsl === 'RouteConfigurationDefinition';
const title = parentDsl === undefined ? "Select source" : "Select step";
const navigation: string = selectorTabIndex ? selectorTabIndex.toString()
: '';
const blockedComponents = ComponentApi.getBlockedComponentNames();
const blockedKamelets = KameletApi.getBlockedKameletNames();
- const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
navigation, showSteps);
const eipElements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
'eip', showSteps);
const componentElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'component', showSteps)
@@ -165,6 +192,8 @@ export function DslSelector (props: Props) {
? filteredComponentElements
: (navigation === 'kamelet' ? filteredKameletElements :
filteredEipElements);
+ console.log(parentDsl)
+
return (
<Modal
aria-label={title}
@@ -181,18 +210,18 @@ export function DslSelector (props: Props) {
<FlexItem>
<Tabs style={{overflow: 'hidden'}}
activeKey={selectorTabIndex}
onSelect={selectTab}>
- {parentDsl !== undefined &&
filteredEipElements?.length > 0 &&
+ {parentDsl !== undefined &&
<Tab eventKey={"eip"} key={"tab-eip"}
title={<TabTitleText>{`Integration
Patterns (${filteredEipElements?.length})`}</TabTitleText>}>
</Tab>
}
- {filteredKameletElements?.length > 0 &&
+ {!isRouteConfig &&
<Tab eventKey={'kamelet'} key={"tab-kamelet"}
title={
<TabTitleText>{`Kamelets
(${filteredKameletElements?.length})`}</TabTitleText>}>
</Tab>
}
- {filteredComponentElements?.length > 0 &&
+ {!isRouteConfig &&
<Tab eventKey={'component'}
key={'tab-component'}
title={
<TabTitleText>{`Components
(${filteredComponentElements?.length})`}</TabTitleText>}>
