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 c85d20a Fix #18 (#30)
c85d20a is described below
commit c85d20a202563b9324ac4ea5513256f50e9164e2
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Sat Oct 16 15:31:55 2021 -0400
Fix #18 (#30)
---
karavan-designer/src/designer/karavan.css | 22 +++++++
karavan-designer/src/designer/ui/DslSelector.tsx | 83 +++++++++++++++---------
karavan-vscode/webview/index.css | 6 ++
3 files changed, 82 insertions(+), 29 deletions(-)
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 3f281b0..2332ec9 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -567,6 +567,28 @@
user-select: none;
}
+.dsl-modal .search {
+ width: 300px;
+ position: absolute;
+ top: 24px;
+ right: 72px;
+}
+
+
+.dsl-modal .search .pf-c-form__group-label{
+ padding: 0;
+ margin: auto;
+}
+
+.dsl-modal .search .text-field {
+ font-size: 13px;
+ height: auto;
+}
+
+.dsl-modal .pf-c-form.pf-m-horizontal .pf-c-form__group {
+ display: contents;
+}
+
.yaml-code {
overflow: auto;
height: 100%;
diff --git a/karavan-designer/src/designer/ui/DslSelector.tsx
b/karavan-designer/src/designer/ui/DslSelector.tsx
index 9b6da27..030b4c1 100644
--- a/karavan-designer/src/designer/ui/DslSelector.tsx
+++ b/karavan-designer/src/designer/ui/DslSelector.tsx
@@ -16,12 +16,13 @@
*/
import React from 'react';
import {
- Card, CardBody, CardHeader, Gallery, Modal, PageSection,
+ Card, CardBody, CardHeader, Form, FormGroup, Gallery, Modal, PageSection,
Tab, Tabs, TabTitleText,
- Text,
+ Text, TextInput,
} from '@patternfly/react-core';
import '../karavan.css';
import {CamelUi} from "../api/CamelUi";
+import {DslMetaModel} from "../model/DslMetaModel";
interface Props {
show: boolean,
@@ -35,6 +36,7 @@ interface Props {
interface State {
show: boolean
tabIndex: string | number
+ filter?: string
}
export class DslSelector extends React.Component<Props, State> {
@@ -44,8 +46,6 @@ export class DslSelector extends React.Component<Props,
State> {
tabIndex: CamelUi.getSelectorLabels(this.props.parentType)[0][0],
};
- componentDidMount() {
- }
selectTab = (evt: React.MouseEvent<HTMLElement, MouseEvent>, eventKey:
string | number) => {
this.setState({tabIndex: eventKey})
@@ -53,7 +53,7 @@ export class DslSelector extends React.Component<Props,
State> {
componentDidUpdate = (prevProps: Readonly<Props>, prevState:
Readonly<State>, snapshot?: any) => {
if (prevState.show !== this.props.show) {
- this.setState({show: this.props.show});
+ this.setState({show: this.props.show, filter:''});
}
if (prevProps.parentType !== this.props.parentType) {
this.setState({tabIndex:
CamelUi.getSelectorLabels(this.props.parentType)[0][0]});
@@ -66,6 +66,27 @@ export class DslSelector extends React.Component<Props,
State> {
this.props.onDslSelect.call(this, dsl, this.props.parentId);
}
+ checkFilter = (dsl: DslMetaModel): boolean => {
+ if (this.state.filter != undefined){
+ return
dsl.title.toLowerCase().includes(this.state.filter.toLowerCase())
+ ||
dsl.description.toLowerCase().includes(this.state.filter.toLowerCase());
+ } else {
+ return true;
+ }
+ }
+
+ searchInput = () => {
+ return (
+ <Form isHorizontal className="search" autoComplete="off">
+ <FormGroup fieldId="search">
+ <TextInput className="text-field" type="text" id="search"
name="search" iconVariant='search'
+ value={this.state.filter}
+ onChange={e => this.setState({filter: e})}/>
+ </FormGroup>
+ </Form>
+ )
+ }
+
render() {
return (
<Modal
@@ -76,30 +97,34 @@ export class DslSelector extends React.Component<Props,
State> {
onClose={() => this.props.onClose.call(this)}
actions={{}}>
<PageSection variant={this.props.dark ? "darker" : "light"}>
- <Tabs style={{overflow: 'hidden'}}
activeKey={this.state.tabIndex} onSelect={this.selectTab}>
-
{CamelUi.getSelectorLabels(this.props.parentType).map((label, index) => (
- <Tab eventKey={label[0]} key={"tab-" + label[0]}
-
title={<TabTitleText>{CamelUi.capitalizeName(label[0])}</TabTitleText>}
translate={undefined} onAuxClick={undefined} onAuxClickCapture={undefined}>
- <Gallery key={"gallery-" + label[0]} hasGutter
className="dsl-gallery">
-
{CamelUi.sortSelectorModels(CamelUi.getSelectorModels(label[0], label[1],
this.props.parentType)).map((dsl, index) => (
- <Card key={dsl.name + index} isHoverable
isCompact className="dsl-card"
- onClick={event =>
this.selectDsl(event, dsl)}>
- <CardHeader>
- <img draggable={false}
- src={dsl.uri &&
dsl.uri.startsWith("kamelet") ? CamelUi.getKameletIcon(dsl.uri) :
CamelUi.getIconForName(dsl.name)}
- style={dsl.name === 'choice'
? {height: "18px"} : {}} // find better icon
- className="icon"
alt="icon"></img>
- <Text>{dsl.title}</Text>
- </CardHeader>
- <CardBody>
- <Text>{dsl.description}</Text>
- </CardBody>
- </Card>
- ))}
- </Gallery>
- </Tab>
- ))}
- </Tabs>
+ {this.searchInput()}
+ <Tabs style={{overflow: 'hidden'}}
activeKey={this.state.tabIndex} onSelect={this.selectTab}>
+
{CamelUi.getSelectorLabels(this.props.parentType).map((label, index) => (
+ <Tab eventKey={label[0]} key={"tab-" + label[0]}
+
title={<TabTitleText>{CamelUi.capitalizeName(label[0])}</TabTitleText>}
+ translate={undefined} onAuxClick={undefined}
onAuxClickCapture={undefined}>
+ <Gallery key={"gallery-" + label[0]} hasGutter
className="dsl-gallery">
+
{CamelUi.sortSelectorModels(CamelUi.getSelectorModels(label[0], label[1],
this.props.parentType))
+ .filter(dsl =>this.checkFilter(dsl))
+ .map((dsl, index) => (
+ <Card key={dsl.name + index}
isHoverable isCompact className="dsl-card"
+ onClick={event =>
this.selectDsl(event, dsl)}>
+ <CardHeader>
+ <img draggable={false}
+ src={dsl.uri &&
dsl.uri.startsWith("kamelet") ? CamelUi.getKameletIcon(dsl.uri) :
CamelUi.getIconForName(dsl.name)}
+ style={dsl.name ===
'choice' ? {height: "18px"} : {}} // find better icon
+ className="icon"
alt="icon"></img>
+ <Text>{dsl.title}</Text>
+ </CardHeader>
+ <CardBody>
+
<Text>{dsl.description}</Text>
+ </CardBody>
+ </Card>
+ ))}
+ </Gallery>
+ </Tab>
+ ))}
+ </Tabs>
</PageSection>
</Modal>
);
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index e9ed60d..5ddefc3 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -123,4 +123,10 @@ body,
.vscode-dark .step-element .add-button {
background: #252526;
+}
+
+.vscode-dark .dsl-modal .search .text-field {
+ background-color: #3B3B3B;
+ border-color: #3B3B3B;
+ color: #CCCCCC;
}
\ No newline at end of file
