[camel-karavan] branch main updated: UI issues (#144)

[ma...@apache.org]

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 fcb58de  UI issues (#144)
fcb58de is described below

commit fcb58dece0a11c716056e61217c477fa203b2f35
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Mon Dec 6 19:44:35 2021 -0500

    UI issues (#144)
---
 karavan-designer/src/designer/ui/DslProperties.tsx | 51 +---------------------
 .../src/designer/ui/field/DslPropertyField.tsx     |  1 +
 2 files changed, 2 insertions(+), 50 deletions(-)

diff --git a/karavan-designer/src/designer/ui/DslProperties.tsx b/karavan-designer/src/designer/ui/DslProperties.tsx
index c06f74a..b1a9d24 100644
--- a/karavan-designer/src/designer/ui/DslProperties.tsx
+++ b/karavan-designer/src/designer/ui/DslProperties.tsx
@@ -21,14 +21,10 @@ import {
     TextInput,
     Text,
     Title,
-    Popover,
-    Switch,
     TextVariants,
 } from '@patternfly/react-core';
 import '../karavan.css';
 import "@patternfly/patternfly/patternfly.css";
-import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
-import {Property} from "../model/KameletModels";
 import {CamelElement, Expression, Integration} from "../model/CamelModel";
 import {CamelApi} from "../api/CamelApi";
 import {CamelApiExt} from "../api/CamelApiExt";
@@ -36,8 +32,8 @@ import {CamelMetadataApi, PropertyMeta} from "../api/CamelMetadata";
 import {CamelYaml} from "../api/CamelYaml";
 import {CamelUi} from "../api/CamelUi";
 import {ComponentApi} from "../api/ComponentApi";
-import {DslPropertyField} from "./field/DslPropertyField";
 import {DataFormatField} from "./field/DataFormatField";
+import {DslPropertyField} from "./field/DslPropertyField";
 
 interface Props {
     integration: Integration,
@@ -157,51 +153,6 @@ export class DslProperties extends React.Component<Props, State> {
         )
     }
 
-    createKameletProperty = (property: Property): JSX.Element => {
-        const prefix = "parameters";
-        const id = prefix + "-" + property.id;
-        const value = CamelApiExt.getParametersValue(this.state.element, property.id);
-        return (
-            <FormGroup
-                key={id}
-                label={property.title}
-                fieldId={id}
-                labelIcon={
-                    <Popover
-                        position={"left"}
-                        headerContent={property.title}
-                        bodyContent={property.description}
-                        footerContent={
-                            <div>
-                                {property.default !== undefined &&
-                                <div>Default: {property.default.toString()}</div>}
-                                {property.example !== undefined && <div>Example: {property.example}</div>}
-                            </div>
-                        }>
-                        <button type="button" aria-label="More info" onClick={e => e.preventDefault()}
-                                className="pf-c-form__group-label-help">
-                            <HelpIcon noVerticalAlign/>
-                        </button>
-                    </Popover>
-                }>
-                {['string', 'integer', 'int', 'number'].includes(property.type) && <TextInput
-                    className="text-field" isRequired
-                    type={['integer', 'int', 'number'].includes(property.type) ? 'number' : (property.format ? "password" : "text")}
-                    id={id} name={id}
-                    value={value}
-                    onChange={e => this.parametersChanged(property.id, ['integer', 'int', 'number'].includes(property.type) ? Number(e) : e)}/>
-                }
-                {property.type === 'boolean' && <Switch
-                    id={id} name={id}
-                    value={value?.toString()}
-                    aria-label={id}
-                    isChecked={Boolean(value) === true}
-                    onChange={e => this.parametersChanged(property.id, !Boolean(value))}/>
-                }
-            </FormGroup>
-        )
-    }
-
     render() {
         return (
             <div key={this.state.step ? this.state.step.uuid : 'integration'} className='properties'>
diff --git a/karavan-designer/src/designer/ui/field/DslPropertyField.tsx b/karavan-designer/src/designer/ui/field/DslPropertyField.tsx
index 073907d..4808396 100644
--- a/karavan-designer/src/designer/ui/field/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/ui/field/DslPropertyField.tsx
@@ -68,6 +68,7 @@ export class DslPropertyField extends React.Component<Props, State> {
 
     propertyChanged = (fieldId: string, value: string | number | boolean | any) => {
         this.props.onChange?.call(this, fieldId, value);
+        this.setState({selectStatus: new Map<string, boolean>([[fieldId, false]])});
     }
 
     render() {