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 2d2b393e Kamelet properties for #731 2d2b393e is described below commit 2d2b393e7b99b491d4aa18bcfe7998ab60e8e3bd Author: Marat Gubaidullin <ma...@talismancloud.io> AuthorDate: Fri Mar 1 13:17:56 2024 -0500 Kamelet properties for #731 --- .../designer/kamelet/KameletAnnotationsPanel.tsx | 8 +- .../kamelet/KameletDefinitionPropertyCard.tsx | 1 - .../designer/kamelet/KameletDefinitionsPanel.tsx | 3 - .../webui/src/designer/kamelet/KameletInput.tsx | 85 +++++++++++--- .../webui/src/designer/selector/DslSelector.tsx | 2 - .../designer/kamelet/KameletAnnotationsPanel.tsx | 62 ++-------- .../kamelet/KameletDefinitionPropertyCard.tsx | 12 +- .../designer/kamelet/KameletDefinitionsPanel.tsx | 28 +---- .../src/designer/kamelet/KameletInput.tsx | 128 +++++++++++++++++++++ .../src/designer/selector/DslSelector.tsx | 2 - .../designer/kamelet/KameletAnnotationsPanel.tsx | 62 ++-------- .../kamelet/KameletDefinitionPropertyCard.tsx | 12 +- .../designer/kamelet/KameletDefinitionsPanel.tsx | 28 +---- .../src/designer/kamelet/KameletInput.tsx | 128 +++++++++++++++++++++ .../src/designer/selector/DslSelector.tsx | 2 - 15 files changed, 357 insertions(+), 206 deletions(-) diff --git a/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx b/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx index 47f08a29..c7fb2374 100644 --- a/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx +++ b/karavan-app/src/main/webui/src/designer/kamelet/KameletAnnotationsPanel.tsx @@ -17,16 +17,10 @@ import React from 'react'; import { - capitalize, Card, CardBody, CardTitle, - Form, - FormGroup, Grid, GridItem, - InputGroup, - InputGroupItem, - InputGroupText, - TextInput, ToggleGroup, ToggleGroupItem, + Form, Grid, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; diff --git a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx index 0c0115e4..95369040 100644 --- a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx +++ b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionPropertyCard.tsx @@ -31,7 +31,6 @@ import { LabelGroup, Modal, Switch, - TextInput, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; diff --git a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx index 4dd057bb..3ce24da5 100644 --- a/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx +++ b/karavan-app/src/main/webui/src/designer/kamelet/KameletDefinitionsPanel.tsx @@ -23,10 +23,7 @@ import { Flex, FlexItem, Form, - FormGroup, Grid, - GridItem, TextArea, - TextInput, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; diff --git a/karavan-app/src/main/webui/src/designer/kamelet/KameletInput.tsx b/karavan-app/src/main/webui/src/designer/kamelet/KameletInput.tsx index a9dc794f..f1ee50f3 100644 --- a/karavan-app/src/main/webui/src/designer/kamelet/KameletInput.tsx +++ b/karavan-app/src/main/webui/src/designer/kamelet/KameletInput.tsx @@ -1,10 +1,62 @@ -import { GridItem, FormGroup, InputGroup, InputGroupItem, TextInput, InputGroupText, ToggleGroup, ToggleGroupItem, capitalize, TextArea } from "@patternfly/react-core"; -import { useState } from "react"; +/* + * 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 { + GridItem, + FormGroup, + InputGroup, + InputGroupItem, + TextInput, + InputGroupText, + ToggleGroup, + ToggleGroupItem, + capitalize, + TextArea +} from "@patternfly/react-core"; +import {useEffect, useState} from "react"; import '../karavan.css'; import './kamelet.css'; -export function KameletInput(props: any) { +interface Props { + label: string; + type: string; + span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 + elementKey: string; + value: any; + isRequired: boolean; + options?: string[]; + setValue: (value: string) => void; +} + +export function KameletInput(props: Props) { + const [inputValue, setInputValue] = useState(props.value) + + useEffect(()=> { + const interval = setInterval(() => { + if (props.value !== inputValue) { + saveValue(inputValue); + } + }, 3000); + return () => { + clearInterval(interval) + } + }, [inputValue]) + function saveValue(value?: string) { props.setValue(value ? value : inputValue); } @@ -14,9 +66,9 @@ export function KameletInput(props: any) { <InputGroup> <InputGroupItem isFill> <TextInput className="text-field" type="text" id={props.elementKey} name={props.elementKey} - onChange={(_, value) => setInputValue(value)} - onBlur={() => saveValue()} - value={inputValue} /> + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/> </InputGroupItem> </InputGroup> ) @@ -25,36 +77,39 @@ export function KameletInput(props: any) { function getTextArea() { return (<InputGroup> <InputGroupItem isFill> <TextArea type="text" id={props.elementKey} name={props.elementKey} autoResize - onChange={(_, value) => setInputValue(value)} - onBlur={() => saveValue()} - value={inputValue} /></InputGroupItem></InputGroup>) + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/></InputGroupItem></InputGroup>) } function getIcon() { return (<InputGroup> <InputGroupText id="username"> <svg className="icon"> - <image href={props.value} className="icon" /> + <image href={props.value} className="icon"/> </svg> </InputGroupText> <InputGroupItem isFill> <TextInput className="text-field" type="text" id={props.elementKey} name={props.elementKey} - onChange={(_, value) => setInputValue(value)} - onBlur={() => saveValue()} - value={inputValue} /> + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/> </InputGroupItem> </InputGroup>); } function getToggleGroup() { return (<ToggleGroup aria-label={props.elementKey} id={props.elementKey} name={props.elementKey}> - {props.options.map((option: string) => + {props.options?.map((option: string) => <ToggleGroupItem key={option} text={capitalize(option)} buttonId="toggle-group-single-1" isSelected={inputValue === option} - onChange={(_, selected) => { setInputValue(option); saveValue(option) }} + onChange={(_, selected) => { + setInputValue(option); + saveValue(option) + }} /> )} </ToggleGroup>) diff --git a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx index fac2a6c6..9e366515 100644 --- a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx +++ b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx @@ -219,8 +219,6 @@ export function DslSelector (props: Props) { ? filteredComponentElements : (navigation === 'kamelets' ? filteredKameletElements : filteredEipElements); - console.log(parentDsl) - return ( <Modal aria-label={title} diff --git a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx b/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx index b1a6b324..c7fb2374 100644 --- a/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx +++ b/karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx @@ -17,21 +17,16 @@ import React from 'react'; import { - capitalize, Card, CardBody, CardTitle, - Form, - FormGroup, Grid, GridItem, - InputGroup, - InputGroupItem, - InputGroupText, - TextInput, ToggleGroup, ToggleGroupItem, + Form, Grid, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; import {useIntegrationStore} from "../DesignerStore"; import {shallow} from "zustand/shallow"; +import { KameletInput } from './KameletInput'; const PREFIX = 'camel.apache.org/'; @@ -56,60 +51,17 @@ export function KameletAnnotationsPanel() { } function getElement(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <InputGroup> - <InputGroupItem isFill> - <TextInput className="text-field" type="text" id={key} name={key} - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </InputGroupItem> - </InputGroup> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='text' isRequired={true}/>); } function getElementToggleGroup(key: string, label: string, values: string[], span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <ToggleGroup aria-label={key} id={key} name={key}> - {values.map(value => - <ToggleGroupItem - key={value} - text={capitalize(value)} - buttonId="toggle-group-single-1" - isSelected={getValue(key) === value} - onChange={(_, selected) => setValue(key, value) } - /> - )} - </ToggleGroup> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='toggle' options={values} isRequired={true}/>); + } function getElementIcon(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <InputGroup> - <InputGroupText id="username"> - <svg className="icon"> - <image href={getValue(key)} className="icon"/> - </svg> - </InputGroupText> - <InputGroupItem isFill> - <TextInput className="text-field" type="text" id={key} name={key} - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </InputGroupItem> - </InputGroup> - </FormGroup> - </GridItem> - ) + + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='icon' isRequired={true}/>); } return ( diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx b/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx index cf42ef6c..95369040 100644 --- a/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx +++ b/karavan-designer/src/designer/kamelet/KameletDefinitionPropertyCard.tsx @@ -31,7 +31,6 @@ import { LabelGroup, Modal, Switch, - TextInput, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; @@ -40,6 +39,7 @@ import {shallow} from "zustand/shallow"; import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon"; +import { KameletInput } from './KameletInput'; interface Props { index: number @@ -72,15 +72,7 @@ export function KameletDefinitionPropertyCard(props: Props) { function getPropertyField(field: string, label: string, isRequired: boolean, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key + field} isRequired={isRequired}> - <TextInput className="text-field" type="text" id={key + field} name={key + field} - onChange={(_, value) => setPropertyValue(field, value)} - value={getPropertyValue(field)}/> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key + field} label={label} span={span} value={getPropertyValue(field)} setValue={(value: string) => setPropertyValue(field, value)} type='text' isRequired={isRequired}/>); } function getPropertyTypeField(field: string, label: string, isRequired: boolean, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { diff --git a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx b/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx index 0d3f04a4..3ce24da5 100644 --- a/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx +++ b/karavan-designer/src/designer/kamelet/KameletDefinitionsPanel.tsx @@ -23,10 +23,7 @@ import { Flex, FlexItem, Form, - FormGroup, Grid, - GridItem, TextArea, - TextInput, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; @@ -36,7 +33,8 @@ import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon"; import {KameletDefinitionPropertyCard} from "./KameletDefinitionPropertyCard"; import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition"; -import {KameletDependenciesCard} from "./KameletDependenciesCard"; +import { KameletDependenciesCard } from "./KameletDependenciesCard"; +import { KameletInput } from './KameletInput'; export function KameletDefinitionsPanel() { @@ -59,27 +57,13 @@ export function KameletDefinitionsPanel() { } function getElementTextInput(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <TextInput className="text-field" type="text" id={key} name={key} - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='text' isRequired={true}/>); + } function getElementTextArea(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <TextArea type="text" id={key} name={key} autoResize - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='textArea' isRequired={true}/>); + } const properties = integration.spec.definition?.properties ? Object.keys(integration.spec.definition?.properties) : []; diff --git a/karavan-designer/src/designer/kamelet/KameletInput.tsx b/karavan-designer/src/designer/kamelet/KameletInput.tsx new file mode 100644 index 00000000..f1ee50f3 --- /dev/null +++ b/karavan-designer/src/designer/kamelet/KameletInput.tsx @@ -0,0 +1,128 @@ +/* + * 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 { + GridItem, + FormGroup, + InputGroup, + InputGroupItem, + TextInput, + InputGroupText, + ToggleGroup, + ToggleGroupItem, + capitalize, + TextArea +} from "@patternfly/react-core"; +import {useEffect, useState} from "react"; +import '../karavan.css'; +import './kamelet.css'; + +interface Props { + label: string; + type: string; + span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 + elementKey: string; + value: any; + isRequired: boolean; + options?: string[]; + setValue: (value: string) => void; +} + +export function KameletInput(props: Props) { + + const [inputValue, setInputValue] = useState(props.value) + + useEffect(()=> { + const interval = setInterval(() => { + if (props.value !== inputValue) { + saveValue(inputValue); + } + }, 3000); + return () => { + clearInterval(interval) + } + }, [inputValue]) + + function saveValue(value?: string) { + props.setValue(value ? value : inputValue); + } + + function getTextField() { + return ( + <InputGroup> + <InputGroupItem isFill> + <TextInput className="text-field" type="text" id={props.elementKey} name={props.elementKey} + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/> + </InputGroupItem> + </InputGroup> + ) + } + + function getTextArea() { + return (<InputGroup> + <InputGroupItem isFill> <TextArea type="text" id={props.elementKey} name={props.elementKey} autoResize + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/></InputGroupItem></InputGroup>) + } + + function getIcon() { + return (<InputGroup> + <InputGroupText id="username"> + <svg className="icon"> + <image href={props.value} className="icon"/> + </svg> + </InputGroupText> + <InputGroupItem isFill> + <TextInput className="text-field" type="text" id={props.elementKey} name={props.elementKey} + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/> + </InputGroupItem> + </InputGroup>); + } + + function getToggleGroup() { + return (<ToggleGroup aria-label={props.elementKey} id={props.elementKey} name={props.elementKey}> + {props.options?.map((option: string) => + <ToggleGroupItem + key={option} + text={capitalize(option)} + buttonId="toggle-group-single-1" + isSelected={inputValue === option} + onChange={(_, selected) => { + setInputValue(option); + saveValue(option) + }} + /> + )} + </ToggleGroup>) + } + + return ( + <GridItem span={props.span}> + <FormGroup label={props.label} fieldId={props.elementKey} isRequired={props.isRequired}> + {props.type === 'text' && getTextField()} + {props.type === 'icon' && getIcon()} + {props.type === 'toggle' && getToggleGroup()} + {props.type === 'textArea' && getTextArea()} + </FormGroup> + </GridItem> + ) +} \ No newline at end of file diff --git a/karavan-designer/src/designer/selector/DslSelector.tsx b/karavan-designer/src/designer/selector/DslSelector.tsx index fac2a6c6..9e366515 100644 --- a/karavan-designer/src/designer/selector/DslSelector.tsx +++ b/karavan-designer/src/designer/selector/DslSelector.tsx @@ -219,8 +219,6 @@ export function DslSelector (props: Props) { ? filteredComponentElements : (navigation === 'kamelets' ? filteredKameletElements : filteredEipElements); - console.log(parentDsl) - return ( <Modal aria-label={title} diff --git a/karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx b/karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx index b1a6b324..c7fb2374 100644 --- a/karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx +++ b/karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx @@ -17,21 +17,16 @@ import React from 'react'; import { - capitalize, Card, CardBody, CardTitle, - Form, - FormGroup, Grid, GridItem, - InputGroup, - InputGroupItem, - InputGroupText, - TextInput, ToggleGroup, ToggleGroupItem, + Form, Grid, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; import {useIntegrationStore} from "../DesignerStore"; import {shallow} from "zustand/shallow"; +import { KameletInput } from './KameletInput'; const PREFIX = 'camel.apache.org/'; @@ -56,60 +51,17 @@ export function KameletAnnotationsPanel() { } function getElement(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <InputGroup> - <InputGroupItem isFill> - <TextInput className="text-field" type="text" id={key} name={key} - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </InputGroupItem> - </InputGroup> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='text' isRequired={true}/>); } function getElementToggleGroup(key: string, label: string, values: string[], span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <ToggleGroup aria-label={key} id={key} name={key}> - {values.map(value => - <ToggleGroupItem - key={value} - text={capitalize(value)} - buttonId="toggle-group-single-1" - isSelected={getValue(key) === value} - onChange={(_, selected) => setValue(key, value) } - /> - )} - </ToggleGroup> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='toggle' options={values} isRequired={true}/>); + } function getElementIcon(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <InputGroup> - <InputGroupText id="username"> - <svg className="icon"> - <image href={getValue(key)} className="icon"/> - </svg> - </InputGroupText> - <InputGroupItem isFill> - <TextInput className="text-field" type="text" id={key} name={key} - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </InputGroupItem> - </InputGroup> - </FormGroup> - </GridItem> - ) + + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='icon' isRequired={true}/>); } return ( diff --git a/karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx b/karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx index cf42ef6c..95369040 100644 --- a/karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx +++ b/karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx @@ -31,7 +31,6 @@ import { LabelGroup, Modal, Switch, - TextInput, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; @@ -40,6 +39,7 @@ import {shallow} from "zustand/shallow"; import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon"; +import { KameletInput } from './KameletInput'; interface Props { index: number @@ -72,15 +72,7 @@ export function KameletDefinitionPropertyCard(props: Props) { function getPropertyField(field: string, label: string, isRequired: boolean, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key + field} isRequired={isRequired}> - <TextInput className="text-field" type="text" id={key + field} name={key + field} - onChange={(_, value) => setPropertyValue(field, value)} - value={getPropertyValue(field)}/> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key + field} label={label} span={span} value={getPropertyValue(field)} setValue={(value: string) => setPropertyValue(field, value)} type='text' isRequired={isRequired}/>); } function getPropertyTypeField(field: string, label: string, isRequired: boolean, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { diff --git a/karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx b/karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx index 0d3f04a4..3ce24da5 100644 --- a/karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx +++ b/karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx @@ -23,10 +23,7 @@ import { Flex, FlexItem, Form, - FormGroup, Grid, - GridItem, TextArea, - TextInput, } from '@patternfly/react-core'; import '../karavan.css'; import './kamelet.css'; @@ -36,7 +33,8 @@ import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon"; import {KameletDefinitionPropertyCard} from "./KameletDefinitionPropertyCard"; import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition"; -import {KameletDependenciesCard} from "./KameletDependenciesCard"; +import { KameletDependenciesCard } from "./KameletDependenciesCard"; +import { KameletInput } from './KameletInput'; export function KameletDefinitionsPanel() { @@ -59,27 +57,13 @@ export function KameletDefinitionsPanel() { } function getElementTextInput(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <TextInput className="text-field" type="text" id={key} name={key} - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='text' isRequired={true}/>); + } function getElementTextArea(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) { - return ( - <GridItem span={span}> - <FormGroup label={label} fieldId={key} isRequired> - <TextArea type="text" id={key} name={key} autoResize - onChange={(_, value) => setValue(key, value)} - value={getValue(key)}/> - </FormGroup> - </GridItem> - ) + return (<KameletInput elementKey={key} label={label} span={span} value={getValue(key)} setValue={(value: string) => setValue(key, value)} type='textArea' isRequired={true}/>); + } const properties = integration.spec.definition?.properties ? Object.keys(integration.spec.definition?.properties) : []; diff --git a/karavan-space/src/designer/kamelet/KameletInput.tsx b/karavan-space/src/designer/kamelet/KameletInput.tsx new file mode 100644 index 00000000..f1ee50f3 --- /dev/null +++ b/karavan-space/src/designer/kamelet/KameletInput.tsx @@ -0,0 +1,128 @@ +/* + * 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 { + GridItem, + FormGroup, + InputGroup, + InputGroupItem, + TextInput, + InputGroupText, + ToggleGroup, + ToggleGroupItem, + capitalize, + TextArea +} from "@patternfly/react-core"; +import {useEffect, useState} from "react"; +import '../karavan.css'; +import './kamelet.css'; + +interface Props { + label: string; + type: string; + span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 + elementKey: string; + value: any; + isRequired: boolean; + options?: string[]; + setValue: (value: string) => void; +} + +export function KameletInput(props: Props) { + + const [inputValue, setInputValue] = useState(props.value) + + useEffect(()=> { + const interval = setInterval(() => { + if (props.value !== inputValue) { + saveValue(inputValue); + } + }, 3000); + return () => { + clearInterval(interval) + } + }, [inputValue]) + + function saveValue(value?: string) { + props.setValue(value ? value : inputValue); + } + + function getTextField() { + return ( + <InputGroup> + <InputGroupItem isFill> + <TextInput className="text-field" type="text" id={props.elementKey} name={props.elementKey} + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/> + </InputGroupItem> + </InputGroup> + ) + } + + function getTextArea() { + return (<InputGroup> + <InputGroupItem isFill> <TextArea type="text" id={props.elementKey} name={props.elementKey} autoResize + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/></InputGroupItem></InputGroup>) + } + + function getIcon() { + return (<InputGroup> + <InputGroupText id="username"> + <svg className="icon"> + <image href={props.value} className="icon"/> + </svg> + </InputGroupText> + <InputGroupItem isFill> + <TextInput className="text-field" type="text" id={props.elementKey} name={props.elementKey} + onChange={(_, value) => setInputValue(value)} + onBlur={() => saveValue()} + value={inputValue}/> + </InputGroupItem> + </InputGroup>); + } + + function getToggleGroup() { + return (<ToggleGroup aria-label={props.elementKey} id={props.elementKey} name={props.elementKey}> + {props.options?.map((option: string) => + <ToggleGroupItem + key={option} + text={capitalize(option)} + buttonId="toggle-group-single-1" + isSelected={inputValue === option} + onChange={(_, selected) => { + setInputValue(option); + saveValue(option) + }} + /> + )} + </ToggleGroup>) + } + + return ( + <GridItem span={props.span}> + <FormGroup label={props.label} fieldId={props.elementKey} isRequired={props.isRequired}> + {props.type === 'text' && getTextField()} + {props.type === 'icon' && getIcon()} + {props.type === 'toggle' && getToggleGroup()} + {props.type === 'textArea' && getTextArea()} + </FormGroup> + </GridItem> + ) +} \ No newline at end of file diff --git a/karavan-space/src/designer/selector/DslSelector.tsx b/karavan-space/src/designer/selector/DslSelector.tsx index fac2a6c6..9e366515 100644 --- a/karavan-space/src/designer/selector/DslSelector.tsx +++ b/karavan-space/src/designer/selector/DslSelector.tsx @@ -219,8 +219,6 @@ export function DslSelector (props: Props) { ? filteredComponentElements : (navigation === 'kamelets' ? filteredKameletElements : filteredEipElements); - console.log(parentDsl) - return ( <Modal aria-label={title}