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 <[email protected]>
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}
