You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2021/12/07 03:23:58 UTC
[camel-karavan] branch main updated: Fixed #134 (#146)
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 ce85e3b Fixed #134 (#146)
ce85e3b is described below
commit ce85e3bd91aa6d60bac2e41cbeae8d86aa5673ef
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Mon Dec 6 22:23:53 2021 -0500
Fixed #134 (#146)
---
karavan-designer/src/App.tsx | 2 +-
karavan-designer/src/designer/ui/DslProperties.tsx | 30 +++++++++++-
.../src/designer/ui/field/DataFormatField.tsx | 53 +++++++++++++---------
.../src/designer/ui/field/DslPropertyField.tsx | 2 +
4 files changed, 64 insertions(+), 23 deletions(-)
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 2e78822..fb38fd4 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -46,7 +46,7 @@ class App extends React.Component<Props, State> {
' steps:\n' +
' - unmarshal:\n' +
' json:\n' +
- ' library: Gson\n' +
+ ' library: gson\n' +
' - set-body:\n' +
' expression: \n' +
' constant: "Hello Yaml !!!"\n' +
diff --git a/karavan-designer/src/designer/ui/DslProperties.tsx b/karavan-designer/src/designer/ui/DslProperties.tsx
index b1a9d24..056dc04 100644
--- a/karavan-designer/src/designer/ui/DslProperties.tsx
+++ b/karavan-designer/src/designer/ui/DslProperties.tsx
@@ -34,6 +34,7 @@ import {CamelUi} from "../api/CamelUi";
import {ComponentApi} from "../api/ComponentApi";
import {DataFormatField} from "./field/DataFormatField";
import {DslPropertyField} from "./field/DslPropertyField";
+import {DataFormat} from "../model/CamelDataFormat";
interface Props {
integration: Integration,
@@ -74,6 +75,28 @@ export class DslProperties extends React.Component<Props, State> {
}
}
+ dataFormatChanged = (dataFormat: string, value?: DataFormat) => {
+ if (this.state.step && this.state.element){
+ if (this.state.element?.dslName === 'unmarshal') {
+ const e:any = {unmarshal: {}};
+ e.unmarshal[dataFormat] = value ? value : {};
+ const unmarshal = CamelApi.createUnmarshal(e);
+ unmarshal.uuid = this.state.step.uuid;
+ unmarshal.unmarshal.uuid = this.state.element.uuid;
+ this.setStep(unmarshal);
+ this.props.onPropertyUpdate?.call(this, unmarshal, this.state.step.uuid);
+ } else {
+ const e:any = {marshal: {}};
+ e.marshal[dataFormat] = value ? value : {};
+ const marshal = CamelApi.createMarshal(e);
+ marshal.uuid = this.state.step.uuid;
+ marshal.marshal.uuid = this.state.element.uuid;
+ this.setStep(marshal);
+ this.props.onPropertyUpdate?.call(this, marshal, this.state.step.uuid);
+ }
+ }
+ }
+
expressionChanged = (language: string, value: string | undefined) => {
if (this.state.step && this.state.element) {
const clone = (CamelYaml.cloneStep(this.state.step));
@@ -165,9 +188,14 @@ export class DslProperties extends React.Component<Props, State> {
value={this.state.element ? (this.state.element as any)[property.name] : undefined}
onExpressionChange={this.expressionChanged}
onParameterChange={this.parametersChanged}
+ onDataFormatChange={this.dataFormatChanged}
onChange={this.propertyChanged} />
)}
- {this.state.element && ['marshal', 'unmarshal'].includes(this.state.element.dslName) && <DataFormatField element={this.state.element}/>}
+ {this.state.element && ['marshal', 'unmarshal'].includes(this.state.element.dslName) &&
+ <DataFormatField
+ element={this.state.element}
+ onDataFormatChange={this.dataFormatChanged} />
+ }
</Form>
</div>
)
diff --git a/karavan-designer/src/designer/ui/field/DataFormatField.tsx b/karavan-designer/src/designer/ui/field/DataFormatField.tsx
index a4168f2..7613a4a 100644
--- a/karavan-designer/src/designer/ui/field/DataFormatField.tsx
+++ b/karavan-designer/src/designer/ui/field/DataFormatField.tsx
@@ -30,44 +30,57 @@ import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
import {CamelElement} from "../../model/CamelModel";
import {CamelApiExt} from "../../api/CamelApiExt";
import {CamelMetadataApi, DataFormats, PropertyMeta} from "../../api/CamelMetadata";
+import {DataFormat} from "../../model/CamelDataFormat";
+import {DslPropertyField} from "./DslPropertyField";
interface Props {
element: CamelElement,
+ onDataFormatChange?: (dataFormat: string, value?: DataFormat) => void
}
interface State {
- property: PropertyMeta,
- element?: CamelElement,
selectStatus: Map<string, boolean>
}
export class DataFormatField extends React.Component<Props, State> {
public state: State = {
- property: new PropertyMeta('id', 'Id', "The id of this node", 'string', '', '', false, false, false, false),
selectStatus: new Map<string, boolean>(),
- element: this.props.element,
}
setDataFormat = (dataFormat: string, props: any) => {
- console.log(dataFormat);
- console.log(props);
+ const oldDataFormat = CamelApiExt.getDataFormat(this.props.element);
+ if (oldDataFormat && oldDataFormat[0] === dataFormat){
+ this.props.onDataFormatChange?.call(this, dataFormat, props);
+ } else {
+ this.props.onDataFormatChange?.call(this, dataFormat, undefined);
+ }
+ this.setState({selectStatus: new Map<string, boolean>([[dataFormat, false]])});
}
- openSelect = (propertyName: string) => {
- this.setState({selectStatus: new Map<string, boolean>([[propertyName, true]])});
+ openSelect = (dataFormat: string) => {
+ this.setState({selectStatus: new Map<string, boolean>([[dataFormat, true]])});
}
- isSelectOpen = (propertyName: string): boolean => {
- return this.state.selectStatus.has(propertyName) && this.state.selectStatus.get(propertyName) === true;
+ isSelectOpen = (dataFormat: string): boolean => {
+ return this.state.selectStatus.has(dataFormat) && this.state.selectStatus.get(dataFormat) === true;
+ }
+
+ propertyChanged = (fieldId: string, fieldValue: string | number | boolean | any) => {
+ const dataFormat = CamelApiExt.getDataFormat(this.props.element);
+ const dataFormatName = dataFormat ? dataFormat[0] : '';
+ const value = dataFormat ? dataFormat[1] : undefined;
+ (value as any)[fieldId] = fieldValue;
+ this.setDataFormat(dataFormatName, value);
}
render() {
const fieldId = "dataFormat";
- const dataFormat = CamelApiExt.getDataFormat(this.state.element)
+ const dataFormat = CamelApiExt.getDataFormat(this.props.element);
const dataFormatName = dataFormat ? dataFormat[0] : '';
- const value = dataFormat ? CamelApiExt.getExpressionValue(this.state.element) : undefined;
- const properties = CamelMetadataApi.getCamelDataFormatMetadata(dataFormatName)?.properties;
+ const value = dataFormat ? dataFormat[1] : undefined;
+ const properties = CamelMetadataApi.getCamelDataFormatMetadata(dataFormatName)?.properties
+ .sort((a, b) => a.name === 'library' ? -1: 1);
const selectOptions: JSX.Element[] = []
DataFormats.forEach((df: [string, string, string]) => {
const s = <SelectOption key={df[0]} value={df[0]} description={df[2]}/>;
@@ -108,14 +121,12 @@ export class DataFormatField extends React.Component<Props, State> {
>
{selectOptions}
</Select>
- <TextArea
- autoResize
- className="text-field" isRequired
- type={"text"}
- id={fieldId+"text"} name={fieldId+"text"}
- height={"100px"}
- value={value?.toString()}
- onChange={e => this.setDataFormat(dataFormatName, e)}/>
+ {properties && properties.map((property: PropertyMeta) =>
+ <DslPropertyField property={property}
+ value={value ? (value as any)[property.name] : undefined}
+ onChange={this.propertyChanged}
+ />
+ )}
</div>
</FormGroup>
</div>
diff --git a/karavan-designer/src/designer/ui/field/DslPropertyField.tsx b/karavan-designer/src/designer/ui/field/DslPropertyField.tsx
index 4808396..56c3073 100644
--- a/karavan-designer/src/designer/ui/field/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/ui/field/DslPropertyField.tsx
@@ -36,12 +36,14 @@ import {CamelUi} from "../../api/CamelUi";
import {ComponentParameterField} from "./ComponentParameterField";
import {CamelElement} from "../../model/CamelModel";
import {KameletPropertyField} from "./KameletPropertyField";
+import {DataFormat} from "../../model/CamelDataFormat";
interface Props {
property: PropertyMeta,
value: any,
onChange?: (fieldId: string, value: string | number | boolean | any) => void,
onExpressionChange?: (language: string, value: string | undefined) => void,
+ onDataFormatChange?: (dataFormat: string, value: DataFormat) => void,
onParameterChange?: (parameter: string, value: string | number | boolean | any, pathParameter?: boolean) => void,
element?: CamelElement
}