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 2022/05/10 11:35:03 UTC

[camel-karavan] branch main updated: Fix local postman (#339)

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 d33189c  Fix local postman (#339)
d33189c is described below

commit d33189cbf449be1019180797bc26f609d99d23aa
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Tue May 10 07:34:59 2022 -0400

    Fix local postman (#339)
---
 karavan-demo/postman/README.md                     |  4 +-
 karavan-demo/postman/artemis/prepare-docker.sh     |  2 +-
 karavan-designer/src/App.tsx                       |  5 ++-
 .../route/property/ComponentParameterField.tsx     | 49 +++++++++++++++++----
 .../route/property/KameletPropertyField.tsx        | 51 ++++++++++++++++++----
 karavan-vscode/webview/builder/BuilderPage.tsx     |  2 +-
 karavan-vscode/webview/index.css                   | 18 ++++++++
 7 files changed, 110 insertions(+), 21 deletions(-)

diff --git a/karavan-demo/postman/README.md b/karavan-demo/postman/README.md
index f393b73..8ae9880 100644
--- a/karavan-demo/postman/README.md
+++ b/karavan-demo/postman/README.md
@@ -11,8 +11,8 @@
 5. Build Apache Artemis Docker Image
 ```
 cd artemis
-./prepare-docker.sh --from-release --artemis-version 2.20.0
-cd _TMP_/artemis/2.20.0
+./prepare-docker.sh --from-release --artemis-version 2.22.0
+cd _TMP_/artemis/2.22.0
 docker build -f ./docker/Dockerfile-adoptopenjdk-11 -t artemis-adoptopenjdk-11 .
 cd ../../../../
 ```
diff --git a/karavan-demo/postman/artemis/prepare-docker.sh b/karavan-demo/postman/artemis/prepare-docker.sh
index 017c1f5..f14717c 100755
--- a/karavan-demo/postman/artemis/prepare-docker.sh
+++ b/karavan-demo/postman/artemis/prepare-docker.sh
@@ -73,7 +73,7 @@ tag names for the purpose of this guide
 For more info read the readme.md
 
 HERE
-  exit 1
+  exit 0
 }
 
 while [ "$#" -ge 1 ]
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 1a83bcd..505d754 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -78,7 +78,10 @@ class App extends React.Component<Props, State> {
             "kafka-not-secured-sink.kamelet.yaml",
             "kafka-not-secured-source.kamelet.yaml",
             "kafka-sink.kamelet.yaml",
-            "kafka-source.kamelet.yaml"].forEach(name =>
+            "kafka-source.kamelet.yaml",
+            "postgresql-sink.kamelet.yaml",
+            "postgresql-source.kamelet.yaml"
+        ].forEach(name =>
             fetch("kamelets/" + name)
                 .then((r) => r.text())
                 .then(value => KameletApi.saveKamelet(value)));
diff --git a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
index 0b59bb0..53f9640 100644
--- a/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-designer/src/designer/route/property/ComponentParameterField.tsx
@@ -23,7 +23,7 @@ import {
     Select,
     SelectVariant,
     SelectDirection,
-    SelectOption,
+    SelectOption, InputGroup, TextArea, Tooltip, Button,
 } from '@patternfly/react-core';
 import '../../karavan.css';
 import "@patternfly/patternfly/patternfly.css";
@@ -32,6 +32,8 @@ import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
 import {CamelUi, RouteToCreate} from "../../utils/CamelUi";
 import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
 import {ToDefinition} from "karavan-core/lib/model/CamelDefinition";
+import CompressIcon from "@patternfly/react-icons/dist/js/icons/compress-icon";
+import ExpandIcon from "@patternfly/react-icons/dist/js/icons/expand-icon";
 
 const prefix = "parameters";
 const beanPrefix = "#bean:";
@@ -46,12 +48,14 @@ interface Props {
 
 interface State {
     selectStatus: Map<string, boolean>
+    showEditor: boolean
 }
 
 export class ComponentParameterField extends React.Component<Props, State> {
 
     public state: State = {
         selectStatus: new Map<string, boolean>(),
+        showEditor: false
     }
 
     parametersChanged = (parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => {
@@ -94,7 +98,7 @@ export class ComponentParameterField extends React.Component<Props, State> {
 
     canBeInternalUri = (property: ComponentProperty): boolean => {
         if (this.props.element && this.props.element.dslName === 'ToDefinition' && property.name === 'name') {
-            const uri:string = (this.props.element as ToDefinition).uri || '';
+            const uri: string = (this.props.element as ToDefinition).uri || '';
             return uri.startsWith("direct") || uri.startsWith("seda");
         } else {
             return false;
@@ -103,7 +107,7 @@ export class ComponentParameterField extends React.Component<Props, State> {
 
     getInternalComponentName = (property: ComponentProperty): string => {
         if (this.props.element && this.props.element.dslName === 'ToDefinition' && property.name === 'name') {
-            const uri:string = (this.props.element as ToDefinition).uri || '';
+            const uri: string = (this.props.element as ToDefinition).uri || '';
             if (uri.startsWith("direct")) return "direct";
             if (uri.startsWith("seda")) return "seda";
             return '';
@@ -144,6 +148,33 @@ export class ComponentParameterField extends React.Component<Props, State> {
         )
     }
 
+    getStringInput(property: ComponentProperty, value: any) {
+        const showEditor = this.state.showEditor;
+        const id = prefix + "-" + property.name;
+        return <InputGroup>
+            {(!showEditor || property.secret) &&
+                <TextInput className="text-field" isRequired
+                           type={property.secret ? "password" : "text"}
+                           id={id} name={id}
+                           value={value !== undefined ? value : property.defaultValue}
+                           onChange={e => this.parametersChanged(property.name, e, property.kind === 'path')}/>}
+            {showEditor && !property.secret &&
+                <TextArea autoResize={true}
+                          className="text-field" isRequired
+                          type="text"
+                          id={id} name={id}
+                          value={value !== undefined ? value : property.defaultValue}
+                          onChange={e => this.parametersChanged(property.name, e, property.kind === 'path')}/>}
+            {!property.secret &&
+                <Tooltip position="bottom-end" content={showEditor ? "Change to TextField" : "Change to Text Area"}>
+                    <Button variant="control" onClick={e => this.setState({showEditor: !showEditor})}>
+                        {showEditor ? <CompressIcon/> : <ExpandIcon/>}
+                    </Button>
+                </Tooltip>
+            }
+        </InputGroup>
+    }
+
     getTextInput = (property: ComponentProperty, value: any) => {
         const id = prefix + "-" + property.name;
         return (
@@ -208,10 +239,10 @@ export class ComponentParameterField extends React.Component<Props, State> {
                         headerContent={property.displayName}
                         bodyContent={property.description}
                         footerContent={
-                        <div>
-                            {property.defaultValue !== undefined && <div>{"Default: " + property.defaultValue}</div>}
-                            {property.required === true && <div>{property.displayName + " is required"}</div>}
-                        </div>
+                            <div>
+                                {property.defaultValue !== undefined && <div>{"Default: " + property.defaultValue}</div>}
+                                {property.required === true && <div>{property.displayName + " is required"}</div>}
+                            </div>
                         }>
                         <button type="button" aria-label="More info" onClick={e => e.preventDefault()}
                                 className="pf-c-form__group-label-help">
@@ -220,7 +251,9 @@ export class ComponentParameterField extends React.Component<Props, State> {
                     </Popover>
                 }>
                 {this.canBeInternalUri(property) && this.getInternalUriSelect(property, value)}
-                {['string', 'duration', 'integer', 'int', 'number'].includes(property.type) && property.enum === undefined && !this.canBeInternalUri(property)
+                {property.type === 'string' && property.enum === undefined && !this.canBeInternalUri(property)
+                    && this.getStringInput(property, value)}
+                {['duration', 'integer', 'int', 'number'].includes(property.type) && property.enum === undefined && !this.canBeInternalUri(property)
                     && this.getTextInput(property, value)}
                 {['object'].includes(property.type) && !property.enum
                     && this.getSelectBean(property, value)}
diff --git a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
index 101321c..39ff5d8 100644
--- a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
@@ -19,11 +19,13 @@ import {
     FormGroup,
     TextInput,
     Popover,
-    Switch,
+    Switch, InputGroup, Button, TextArea, Text, Tooltip,
 } from '@patternfly/react-core';
 import '../../karavan.css';
 import "@patternfly/patternfly/patternfly.css";
 import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
+import ExpandIcon from "@patternfly/react-icons/dist/js/icons/expand-icon";
+import CompressIcon from "@patternfly/react-icons/dist/js/icons/compress-icon";
 import {Property} from "karavan-core/lib/model/KameletModels";
 
 interface Props {
@@ -34,12 +36,14 @@ interface Props {
 
 interface State {
     selectIsOpen: boolean
+    showEditor: boolean
 }
 
 export class KameletPropertyField extends React.Component<Props, State> {
 
     public state: State = {
         selectIsOpen: false,
+        showEditor: false,
     }
 
     openSelect = () => {
@@ -51,6 +55,37 @@ export class KameletPropertyField extends React.Component<Props, State> {
         this.setState({selectIsOpen: false});
     }
 
+    getStringInput() {
+        const showEditor = this.state.showEditor;
+        const property = this.props.property;
+        const value = this.props.value;
+        const prefix = "parameters";
+        const id = prefix + "-" + property.id;
+        return <InputGroup>
+            {(!showEditor || property.format === "password") &&
+                <TextInput
+                    className="text-field" isRequired
+                    type={property.format ? "password" : "text"}
+                    id={id} name={id}
+                    value={value}
+                    onChange={e => this.parametersChanged(property.id, e)}/>}
+            {showEditor && property.format !== "password" &&
+                <TextArea autoResize={true}
+                          className="text-field" isRequired
+                          type="text"
+                          id={id} name={id}
+                          value={value}
+                          onChange={e => this.parametersChanged(property.id, e)}/>}
+            {property.format !== "password" &&
+                <Tooltip position="bottom-end" content={showEditor ? "Change to TextField" : "Change to Text Area"}>
+                    <Button variant="control" onClick={e => this.setState({showEditor: !showEditor})}>
+                        {showEditor ? <CompressIcon/> : <ExpandIcon/>}
+                    </Button>
+                </Tooltip>
+            }
+        </InputGroup>
+    }
+
     render() {
         const property = this.props.property;
         const value = this.props.value;
@@ -70,7 +105,7 @@ export class KameletPropertyField extends React.Component<Props, State> {
                         footerContent={
                             <div>
                                 {property.default !== undefined &&
-                                <div>Default: {property.default.toString()}</div>}
+                                    <div>Default: {property.default.toString()}</div>}
                                 {property.example !== undefined && <div>Example: {property.example}</div>}
                             </div>
                         }>
@@ -80,12 +115,12 @@ export class KameletPropertyField extends React.Component<Props, State> {
                         </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 === 'string' && this.getStringInput()
+                }
+                {['integer', 'int', 'number'].includes(property.type) &&
+                    <TextInput className="text-field" isRequired type='number' id={id} name={id} value={value}
+                               onChange={e => this.parametersChanged(property.id, Number(e))}
+                    />
                 }
                 {property.type === 'boolean' && <Switch
                     id={id} name={id}
diff --git a/karavan-vscode/webview/builder/BuilderPage.tsx b/karavan-vscode/webview/builder/BuilderPage.tsx
index 903b909..6b33006 100644
--- a/karavan-vscode/webview/builder/BuilderPage.tsx
+++ b/karavan-vscode/webview/builder/BuilderPage.tsx
@@ -177,7 +177,7 @@ export class BuilderPage extends React.Component<Props, State> {
                     {target !== 'openshift' && this.getField("from", "Base Image", "text", from, "Base Image", val => this.setState({from: val}), true, build)}
                     {target === 'openshift' && this.getField("sourceImage", "Source tag", "text", sourceImage, "Source image name (for OpenShift BuildConfig)", val => this.setState({sourceImage: val}), true, build)}
                     {target === 'openshift' && this.getField("server", "Server", "text", server, "Master URL", val => this.setState({server: val}), true, build)}
-                    {target === 'openshift' && this.getField("token", "Token", "password", token, "Authentication Token", val => this.setState({token: val}), true, build)}
+                    {target === 'openshift' && this.getField("token", "Token", "password", token, "Authentication Token (Token will not be saved)", val => this.setState({token: val}), true, build)}
                 </Form>
             </CardBody>
         </Card>
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index 8fde82f..7b884f2 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -224,6 +224,7 @@ body, :root, #root, .karavan {
   color: var(--vscode-input-foreground);
 }
 
+.vscode-dark .karavan .properties .pf-c-input-group, 
 .vscode-dark .karavan .properties .pf-c-text-input-group {
   background-color: var(--vscode-input-background);
   border-color: var(--vscode-input-foreground);;
@@ -232,6 +233,23 @@ body, :root, #root, .karavan {
   --pf-c-text-input-group__text--after--BorderBottomColor: transparent;
 }
 
+.vscode-dark .karavan .properties .pf-c-input-group .pf-m-control {
+  background-color: transparent;
+  color: var(--vscode-input-foreground);
+}
+
+.vscode-dark .karavan .properties .pf-c-input-group .pf-c-button.pf-m-control::after {
+  border-radius: initial;
+  border-right: none;
+  border-top: none;
+  border-left-color: var(--vscode-tab-inactiveBackground);
+  border-bottom-color: transparent;
+}
+
+.vscode-dark .karavan .properties .pf-c-input-group .pf-c-button.pf-m-control:hover::after {
+  border-bottom-color: var(--vscode-focusBorder);
+}
+
 .vscode-dark .karavan .properties .input-group .pf-c-chip-group .pf-c-chip {
   --pf-c-chip--BackgroundColor: transparent;
   --pf-c-chip__text--Color: var(--vscode-input-foreground);