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 <marat.gubaidul...@gmail.com> 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