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 59b49ec Saas feature35 (#430)
59b49ec is described below
commit 59b49ecc03346faa62a187098e6df81a66ac9b2e
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Wed Jul 27 19:31:45 2022 -0400
Saas feature35 (#430)
* UI improvements
* Fix issue with Salesforce component URI
---
karavan-app/src/main/webapp/src/index.css | 4 ++
karavan-core/package-lock.json | 4 +-
karavan-core/src/core/api/ComponentApi.ts | 21 +++++----
karavan-designer/src/App.tsx | 53 +++++++++++++---------
karavan-designer/src/builder/BuilderPage.tsx | 1 -
karavan-designer/src/components/ComponentCard.tsx | 2 +-
karavan-designer/src/designer/KaravanDesigner.tsx | 11 -----
.../src/designer/beans/BeanProperties.tsx | 1 -
karavan-designer/src/designer/karavan.css | 23 +++++++---
.../src/designer/rest/RestMethodSelector.tsx | 4 +-
.../src/designer/route/DslConnections.tsx | 34 +++++++-------
karavan-designer/src/designer/route/DslElement.tsx | 11 ++---
.../src/designer/route/DslSelector.tsx | 8 +++-
.../src/designer/route/RouteDesigner.tsx | 2 +-
.../designer/route/property/DslPropertyField.tsx | 23 ++++++----
.../route/property/KameletPropertyField.tsx | 2 +-
.../designer/route/property/KubernetesSelector.tsx | 2 -
karavan-designer/src/designer/utils/EventBus.ts | 8 +++-
karavan-vscode/webview/builder/BuilderPage.tsx | 1 -
.../webview/components/ComponentCard.tsx | 2 +-
20 files changed, 122 insertions(+), 95 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/index.css
b/karavan-app/src/main/webapp/src/index.css
index c8c1f77..e01f438 100644
--- a/karavan-app/src/main/webapp/src/index.css
+++ b/karavan-app/src/main/webapp/src/index.css
@@ -189,6 +189,10 @@
margin: 0;
}
+.karavan .project-page .pf-c-label__icon {
+ height: 16px;
+}
+
.karavan .action-cell {
padding: 0;
}
diff --git a/karavan-core/package-lock.json b/karavan-core/package-lock.json
index bc87afc..43fcd08 100644
--- a/karavan-core/package-lock.json
+++ b/karavan-core/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "karavan-core",
- "version": "0.0.16",
+ "version": "3.18.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "karavan-core",
- "version": "0.0.16",
+ "version": "3.18.0",
"license": "Apache-2.0",
"dependencies": {
"@types/js-yaml": "^4.0.5",
diff --git a/karavan-core/src/core/api/ComponentApi.ts
b/karavan-core/src/core/api/ComponentApi.ts
index e656978..da15fb7 100644
--- a/karavan-core/src/core/api/ComponentApi.ts
+++ b/karavan-core/src/core/api/ComponentApi.ts
@@ -76,7 +76,11 @@ export const ComponentApi = {
const syntaxSeparators = ComponentApi.getSyntaxSeparators(syntax +
'');
let newUri = uri === name ? name + syntaxSeparators.join('') : uri;
result.set(name, name);
- if (name === 'cxf') { // workaround for CXF component
+ if (name === 'salesforce') { // workaround for salesforce component
+ const parts = newUri.split(":");
+ if (parts.length === 2) result.set("operationName",
parts.at(1) || '').set("topicName", '')
+ else if (parts.length === 3) result.set("operationName",
parts.at(1) || '').set("topicName", parts.at(2) || '')
+ } else if (name === 'cxf') { // workaround for CXF component
const cxfParts = newUri.split(":");
const firstPart = cxfParts.at(1);
const secondPart = cxfParts.at(2);
@@ -94,7 +98,7 @@ export const ComponentApi = {
result.set("systemName", systemName);
result.set("objectPath", objectPath);
result.set("type", type);
- } else { // workaround for CXF component end
+ } else { // workarounds end
syntaxParts.filter((x, i) => i > 0).forEach((part, index) => {
if (index < syntaxParts.length - 1) {
const startSeparator = syntaxSeparators[index];
@@ -173,20 +177,21 @@ export const ComponentApi = {
buildComponentUri: (uri: string, pathParameter: string,
pathParameterValue: string): string | undefined => {
const name = ComponentApi.getComponentNameFromUri(uri);
if (name) {
- // workaround for CXF component start
- if (name === 'cxf') {
+ if (name === 'cxf') { // workaround for CXF component start
if (pathParameter === 'beanId' && pathParameterValue &&
pathParameterValue.trim().length > 0) return "cxf:" + pathParameterValue;
if (pathParameter === 'address' && pathParameterValue &&
pathParameterValue.trim().length > 0) return "cxf:" + pathParameterValue;
- } else { // workaround for CXF component end
+ } else { // workarounds end
const map = ComponentApi.getUriParts(uri);
map.set(pathParameter, pathParameterValue);
const separators = ComponentApi.getUriSeparators(uri);
const result: string[] = [];
Array.from(map.keys()).forEach((key, index) => {
- const val = map.get(key);
- result.push(val ? val : '');
- result.push(separators[index]);
+ const val = map.get(key) || '';
+ const separator = separators[index];
+ result.push(val);
+ if (separator) result.push(separators[index]);
});
+ if (result.at(result.length -1) === '') return result.slice(0,
-2).join(''); // remove last colon
return result.join('');
}
}
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 2b55658..af4a5a8 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -26,7 +26,6 @@ import {ComponentsPage} from "./components/ComponentsPage";
import {EipPage} from "./eip/EipPage";
import {BuilderPage} from "./builder/BuilderPage";
import {ProjectModel, StepStatus} from "karavan-core/lib/model/ProjectModel";
-import {KubernetesAPI} from "./designer/utils/KubernetesAPI";
interface Props {
page: "designer" | "kamelets" | "components" | "eip" | "builder";
@@ -44,26 +43,37 @@ class App extends React.Component<Props, State> {
name: 'demo.yaml',
key: '',
yaml:
- 'apiVersion: camel.apache.org/v1\n' +
- 'kind: Integration\n' +
- 'metadata:\n' +
- ' name: postman.yaml\n' +
- 'spec:\n' +
- ' flows:\n' +
- ' - route:\n' +
- ' from:\n' +
- ' uri: kamelet:timer-source\n' +
- ' steps:\n' +
- ' - log:\n' +
- ' message: ${body}\n' +
- ' - aggregate: {}\n' +
- ' - choice: {}\n' +
- ' - split:\n' +
- ' expression: {}\n' +
- ' - saga: {}\n' +
- ' parameters:\n' +
- ' period: 2000\n' +
- ' message: Hello World\n' +
+ 'apiVersion: camel.apache.org/v1\n' +
+ 'kind: Integration\n' +
+ 'metadata:\n' +
+ ' name: postman.yaml\n' +
+ 'spec:\n' +
+ ' flows:\n' +
+ ' - route:\n' +
+ ' from:\n' +
+ ' uri: kamelet:timer-source\n' +
+ ' steps:\n' +
+ ' - log:\n' +
+ ' message: ${body}\n' +
+ ' - aggregate: {}\n' +
+ ' - choice: {}\n' +
+ ' - split:\n' +
+ ' expression: {}\n' +
+ ' - saga: {}\n' +
+ ' - to:\n' +
+ ' uri: direct:hello-world\n' +
+ ' - to:\n' +
+ ' uri: salesforce:getSObject\n' +
+ ' parameters:\n' +
+ ' sObjectId: xxx\n' +
+ ' sObjectClass: Account\n' +
+ ' parameters:\n' +
+ ' period: 2000\n' +
+ ' message: Hello World\n' +
+ ' - route:\n' +
+ ' from:\n' +
+ ' uri: direct:hello-world\n' +
+ ' id: hello-world' +
''
};
@@ -102,6 +112,7 @@ class App extends React.Component<Props, State> {
"pg-replication-slot.json",
"rest-api.json",
"rest-openapi.json",
+ "salesforce.json",
"kubernetes-service-accounts.json",
"mvel.json"].forEach(name =>
fetch("components/" + name)
diff --git a/karavan-designer/src/builder/BuilderPage.tsx
b/karavan-designer/src/builder/BuilderPage.tsx
index 605521c..43c27d5 100644
--- a/karavan-designer/src/builder/BuilderPage.tsx
+++ b/karavan-designer/src/builder/BuilderPage.tsx
@@ -181,7 +181,6 @@ export class BuilderPage extends React.Component<Props,
State> {
}
getHeader() {
- const {project} = this.state;
return (
<PageSection className="tools-section" variant={this.props.dark ?
PageSectionVariants.darker : PageSectionVariants.light}>
<Flex className="tools" direction={{default: 'row'}}
justifyContent={{default: 'justifyContentSpaceBetween'}} spaceItems={{default:
'spaceItemsLg'}}>
diff --git a/karavan-designer/src/components/ComponentCard.tsx
b/karavan-designer/src/components/ComponentCard.tsx
index 6d465f3..1fe5269 100644
--- a/karavan-designer/src/components/ComponentCard.tsx
+++ b/karavan-designer/src/components/ComponentCard.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {
- CardHeader, Card, CardTitle, CardBody, CardActions, CardFooter,Badge
+ CardHeader, Card, CardTitle, CardBody, CardFooter,Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {camelIcon, CamelUi} from "../designer/utils/CamelUi";
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx
b/karavan-designer/src/designer/KaravanDesigner.tsx
index 20e9f60..664c86e 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -29,8 +29,6 @@ import {BeansDesigner} from "./beans/BeansDesigner";
import {RestDesigner} from "./rest/RestDesigner";
import {ErrorDesigner} from "./error/ErrorDesigner";
import {ExceptionDesigner} from "./exception/ExceptionDesigner";
-import {DependenciesDesigner} from "./dependencies/DependenciesDesigner";
-import {TraitsDesigner} from "./traits/TraitsDesigner";
import KaravanTour from "./KaravanTour";
import WandIcon from "@patternfly/react-icons/dist/js/icons/magic-icon";
import {getDesignerIcon} from "./utils/KaravanIcons";
@@ -139,11 +137,8 @@ export class KaravanDesigner extends
React.Component<Props, State> {
<Tab data-tour="routes" eventKey='routes'
title={this.getTab("Routes", "Integration flows", "routes")}></Tab>
<Tab eventKey='rest' title={this.getTab("REST", "REST
services", "rest")}></Tab>
<Tab eventKey='beans' title={this.getTab("Beans", "Beans
Configuration", "beans")}></Tab>
- {/*<Tab eventKey='dependencies'
title={this.getTab("Dependencies", "Dependencies", "dependencies")}></Tab>*/}
- {/*<Tab eventKey='traits' title={this.getTab("Traits",
"traits configuration", "traits")}></Tab>*/}
<Tab eventKey='error' title={this.getTab("Error", "Error
Handler", "error")}></Tab>
<Tab eventKey='exception' title={this.getTab("Exceptions",
"Exception Clauses per type", "exception")}></Tab>
- {/*<Tab eventKey='code' title={this.getTab("Code", "Code",
"code")}></Tab>*/}
</Tabs>
{tab === 'routes' && <RouteDesigner
integration={this.state.integration}
showTour={this.state.showTour}
@@ -155,18 +150,12 @@ export class KaravanDesigner extends
React.Component<Props, State> {
{tab === 'beans' && <BeansDesigner
integration={this.state.integration}
onSave={(integration,
propertyOnly) => this.save(integration, propertyOnly)}
dark={this.props.dark}/>}
- {/*{tab === 'dependencies' && <DependenciesDesigner
integration={this.state.integration}*/}
- {/*
onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)}*/}
- {/*
dark={this.props.dark}/>}*/}
{tab === 'error' && <ErrorDesigner
integration={this.state.integration}
onSave={(integration,
propertyOnly) => this.save(integration, propertyOnly)}
dark={this.props.dark}/>}
{tab === 'exception' && <ExceptionDesigner
integration={this.state.integration}
onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)}
dark={this.props.dark}/>}
- {/*{tab === 'traits' && <TraitsDesigner
integration={this.state.integration}*/}
- {/*
onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)}*/}
- {/*
dark={this.props.dark}/>}*/}
{this.getHelpWindow()}
</PageSection>
)
diff --git a/karavan-designer/src/designer/beans/BeanProperties.tsx
b/karavan-designer/src/designer/beans/BeanProperties.tsx
index 87bfbbf..8f197bb 100644
--- a/karavan-designer/src/designer/beans/BeanProperties.tsx
+++ b/karavan-designer/src/designer/beans/BeanProperties.tsx
@@ -32,7 +32,6 @@ import DeleteIcon from
"@patternfly/react-icons/dist/js/icons/times-icon";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {IntegrationHeader} from "../utils/KaravanComponents";
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon'
-import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
interface Props {
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index edad6d2..f831c3b 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -360,7 +360,7 @@
}
.karavan .properties .pf-c-select__menu-item-description {
- overflow-wrap: anywhere;
+ overflow-wrap: anywhere;
}
.karavan .properties .number {
@@ -516,9 +516,9 @@
}
.karavan .dsl-page .graph .connections .path {
- stroke: var(--pf-global--Color--200);
- stroke-width: 1;
- fill: transparent;
+ stroke: var(--pf-global--Color--200);
+ stroke-width: 1;
+ fill: transparent;
}
.karavan .dsl-page .graph .connections .circle-outgoing,
@@ -533,14 +533,23 @@
-webkit-animation: dashdraw .5s linear infinite;
animation: dashdraw .5s linear infinite;
stroke: var(--pf-global--Color--200);
- strokeWidth: 1;
+ stroke-width: 1;
fill: transparent;
}
.karavan .dsl-page .graph .connections .path-direct {
stroke-dasharray: 0;
stroke: var(--pf-global--Color--200);
- strokeWidth: 1;
+ stroke-width: 0.7;
+ stroke-opacity: 0.7;
+ fill: transparent;
+}
+
+.karavan .dsl-page .graph .connections .path-direct-selected {
+ stroke-dasharray: 0;
+ stroke: var(--pf-global--active-color--100);
+ stroke-width: 1;
+ stroke-opacity: 1;
fill: transparent;
}
@@ -549,7 +558,7 @@
stroke: var(--pf-global--Color--200);
-webkit-animation: dashdraw .5s linear infinite;
animation: dashdraw .5s linear infinite;
- strokeWidth: 1;
+ stroke-width: 1;
fill: transparent;
}
diff --git a/karavan-designer/src/designer/rest/RestMethodSelector.tsx
b/karavan-designer/src/designer/rest/RestMethodSelector.tsx
index 5e6baf5..316145c 100644
--- a/karavan-designer/src/designer/rest/RestMethodSelector.tsx
+++ b/karavan-designer/src/designer/rest/RestMethodSelector.tsx
@@ -17,9 +17,9 @@
import React from 'react';
import {
Badge,
- Card, CardBody, CardFooter, CardHeader, Form, FormGroup, Gallery,
PageSection,
+ Card, CardBody, CardFooter, CardHeader, Gallery, PageSection,
Tab, Tabs, TabTitleText,
- Text, TextInput,
+ Text
} from '@patternfly/react-core';
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx
b/karavan-designer/src/designer/route/DslConnections.tsx
index 27361fc..25d3a2f 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -179,19 +179,19 @@ export class DslConnections extends
React.Component<Props, State> {
}
}
- getIntegrals(): [string, number][] {
- let outs: [string, number][] = Array.from(this.state.steps.values())
+ getInternals(): [string, number, boolean][] {
+ let outs: [string, number, boolean][] =
Array.from(this.state.steps.values())
.filter(pos => outgoingDefinitions.includes(pos.step.dslName) &&
CamelUi.hasInternalUri(pos.step))
.sort((pos1: DslPosition, pos2: DslPosition) => {
const y1 = pos1.headerRect.y + pos1.headerRect.height / 2;
const y2 = pos2.headerRect.y + pos2.headerRect.height / 2;
return y1 > y2 ? 1 : -1
})
- .map(pos => [pos.step.uuid, pos.headerRect.y - this.props.top]);
+ .map(pos => [pos.step.uuid, pos.headerRect.y - this.props.top,
pos.isSelected]);
return outs;
}
- getInternalLines(data: [string, number]) {
+ getInternalLines(data: [string, number, boolean]) {
const pos = this.state.steps.get(data[0]);
const uri = (pos?.step as any).uri;
if (uri && uri.length && pos) {
@@ -199,8 +199,8 @@ export class DslConnections extends React.Component<Props,
State> {
const fromX = pos.headerRect.x + pos.headerRect.width / 2 -
this.props.left;
const fromY = pos.headerRect.y + pos.headerRect.height / 2 -
this.props.top;
const r = pos.headerRect.height / 2;
- const className = CamelUi.hasDirectUri(pos.step) ? "path-direct" :
"path-seda";
- return this.getInternalLine(uri, key, className, fromX, fromY, r);
+ const className = (CamelUi.hasDirectUri(pos.step) ? "path-direct"
: "path-seda") + (data[2] ? "-selected" : "");
+ return this.getInternalLine(uri, key, className, fromX, fromY, r,
data[1]);
} else if (pos?.step.dslName === 'SagaDefinition'){
const saga = (pos?.step as SagaDefinition);
const fromX = pos.headerRect.x + pos.headerRect.width / 2 -
this.props.left;
@@ -210,18 +210,18 @@ export class DslConnections extends
React.Component<Props, State> {
if (saga.completion && (saga.completion.startsWith("direct") ||
saga.completion.startsWith("seda"))){
const key = pos.step.uuid + "-completion"
const className = saga.completion.startsWith("direct") ?
"path-direct" : "path-seda";
- result.push(this.getInternalLine(saga.completion, key,
className, fromX, fromY, r));
+ result.push(this.getInternalLine(saga.completion, key,
className, fromX, fromY, r, data[1]));
}
if (saga.compensation && (saga.compensation.startsWith("direct")
|| saga.compensation.startsWith("seda"))){
const key = pos.step.uuid + "-compensation"
const className = saga.compensation.startsWith("direct") ?
"path-direct" : "path-seda";
- result.push(this.getInternalLine(saga.compensation, key,
className, fromX, fromY, r));
+ result.push(this.getInternalLine(saga.compensation, key,
className, fromX, fromY, r, data[1]));
}
return result;
}
}
- getInternalLine(uri: string, key: string, className: string, fromX:
number, fromY: number, r: number) {
+ getInternalLine(uri: string, key: string, className: string, fromX:
number, fromY: number, r: number, i: number) {
const target = Array.from(this.state.steps.values())
.filter(s => s.step.dslName === 'FromDefinition')
.filter(s => (s.step as any).uri && (s.step as any).uri ===
uri)[0];
@@ -229,6 +229,7 @@ export class DslConnections extends React.Component<Props,
State> {
const targetX = target.headerRect.x + target.headerRect.width / 2
- this.props.left;
const targetY = target.headerRect.y + target.headerRect.height / 2
- this.props.top;
const gap = 100;
+ const add = 0.2;
// right
if (targetX - fromX >= gap) {
@@ -237,7 +238,7 @@ export class DslConnections extends React.Component<Props,
State> {
const endX = targetX - r * 2 + 4;
const endY = targetY;
- const coefX = 24;
+ const coefX = 24 + (i * add);
const coefY = (targetY > fromY) ? 24 : -24;
const pointX1 = startX + coefX;
@@ -260,7 +261,7 @@ export class DslConnections extends React.Component<Props,
State> {
const endX = targetX - r * 2 + 4;
const endY = targetY;
- const coefX = -24;
+ const coefX = -24 - (i * add);
const coefY = (targetY > fromY) ? 24 : -24;
const pointX1 = startX + coefX;
@@ -283,7 +284,7 @@ export class DslConnections extends React.Component<Props,
State> {
const endX = targetX + r * 2 - 4;
const endY = targetY;
- const coefX = 24;
+ const coefX = 24 + (i * add);
const coefY = (targetY > fromY) ? 24 : -24;
const pointX1 = startX + coefX;
@@ -306,7 +307,7 @@ export class DslConnections extends React.Component<Props,
State> {
const endX = targetX + r * 2 - 4;
const endY = targetY;
- const coefX = -24;
+ const coefX = -24 - (i * add);
const coefY = (targetY > fromY) ? 24 : -24;
const pointX1 = startX + coefX;
@@ -327,7 +328,8 @@ export class DslConnections extends React.Component<Props,
State> {
}
}
- getInternalPath(key: string, className: string, startX: number, startY:
number, pointX1: number, pointY1: number, pointX2: number, pointY2: number,
pointLX: number, pointLY: number, pointX3: number, pointY3: number, pointX4:
number, pointY4: number, endX: number, endY: number) {
+ getInternalPath(key: string, className: string, startX: number, startY:
number, pointX1: number, pointY1: number, pointX2: number, pointY2: number,
pointLX: number, pointLY: number,
+ pointX3: number, pointY3: number, pointX4: number,
pointY4: number, endX: number, endY: number) {
return (
<g key={key}>
<path d={`M ${startX} ${startY}
@@ -367,7 +369,7 @@ export class DslConnections extends React.Component<Props,
State> {
if (parent) {
const startX = parent.headerRect.x + parent.headerRect.width /
2 - this.props.left;
const startY = parent.headerRect.y + parent.headerRect.height
- this.props.top;
- if (!pos.inSteps || (pos.inSteps && pos.position === 0) &&
parent.step.dslName !== 'MulticastDefinition') {
+ if ((!pos.inSteps || (pos.inSteps && pos.position === 0)) &&
parent.step.dslName !== 'MulticastDefinition') {
return (
<path d={`M ${startX},${startY} C ${startX},${endY}
${endX},${startY} ${endX},${endY}`}
className="path" key={pos.step.uuid}
markerEnd="url(#arrowhead)"/>
@@ -417,7 +419,7 @@ export class DslConnections extends React.Component<Props,
State> {
{steps.map(pos => this.getArrow(pos))}
{this.getIncomings().map(p => this.getIncoming(p))}
{this.getOutgoings().map(p => this.getOutgoing(p))}
- {this.getIntegrals().map(p => this.getInternalLines(p)).flat()}
+ {this.getInternals().map((p) =>
this.getInternalLines(p)).flat()}
</svg>
)
}
diff --git a/karavan-designer/src/designer/route/DslElement.tsx
b/karavan-designer/src/designer/route/DslElement.tsx
index d4f7f5d..9176a31 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -171,7 +171,7 @@ export class DslElement extends React.Component<Props,
State> {
return style;
}
- sendPosition = (el: HTMLDivElement | null) => {
+ sendPosition = (el: HTMLDivElement | null, isSelected: boolean) => {
const node = ReactDOM.findDOMNode(this);
if (node && el) {
const header = Array.from(node.childNodes.values()).filter((n:
any) => n.classList.contains("header"))[0];
@@ -179,7 +179,7 @@ export class DslElement extends React.Component<Props,
State> {
const headerIcon: any =
Array.from(header.childNodes.values()).filter((n: any) =>
n.classList.contains("header-icon"))[0];
const headerRect = headerIcon.getBoundingClientRect();
const rect = el.getBoundingClientRect();
- EventBus.sendPosition("add", this.state.step,
this.props.parent, rect, headerRect, this.props.position, this.props.inSteps);
+ EventBus.sendPosition("add", this.state.step,
this.props.parent, rect, headerRect, this.props.position, this.props.inSteps,
isSelected);
}
}
}
@@ -194,7 +194,7 @@ export class DslElement extends React.Component<Props,
State> {
return (
<div className={headerClasses} style={this.getHeaderStyle()}
data-tour={step.dslName}>
{this.state.step.dslName !== 'RouteDefinition' &&
- <div ref={el => this.sendPosition(el)}
+ <div ref={el => this.sendPosition(el, this.isSelected())}
data-tour={step.dslName + "-icon"}
className={"header-icon"}
style={this.isWide() ? {width: ""} : {}}>
@@ -214,7 +214,7 @@ export class DslElement extends React.Component<Props,
State> {
getHeaderTextWithTooltip = (step: CamelElement) => {
const checkRequired = CamelUtil.checkRequired(step);
- const title = CamelUi.getElementTitle(this.state.step);
+ const title = (step as any).description ? (step as any).description :
CamelUi.getElementTitle(this.state.step);
let className = this.hasWideChildrenElement() ? "text text-right" :
"text text-bottom";
if (!checkRequired[0]) className = className + " header-text-required";
if (checkRequired[0]) return <Text className={className}>{title}</Text>
@@ -326,7 +326,6 @@ export class DslElement extends React.Component<Props,
State> {
}
getAddStepButton() {
- const tourClass = this.props.showTour ? "add-button-tour" : "";
return (
<Tooltip position={"bottom"}
content={<div>{"Add step to " +
CamelUi.getTitle(this.state.step)}</div>}>
@@ -378,7 +377,7 @@ export class DslElement extends React.Component<Props,
State> {
<div key={"root" + element.uuid}
data-tour={this.props.parent ? "" : "route-created"}
className={this.isSelected() ? "step-element
step-element-selected" : "step-element"}
- ref={el => this.sendPosition(el)}
+ ref={el => this.sendPosition(el, this.isSelected())}
style={{
borderStyle: this.hasBorder() ? "dotted" : "none",
borderColor: this.isSelected() ?
"var(--step-border-color-selected)" : "var(--step-border-color)",
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx
b/karavan-designer/src/designer/route/DslSelector.tsx
index 73b5c35..46af447 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -45,8 +45,14 @@ interface State {
export class DslSelector extends React.Component<Props, State> {
+ getDefaultTabIndex = () => {
+ const x = CamelUi.getSelectorModelTypes(this.props.parentDsl,
this.props.showSteps);
+ if (x.length > 0) return x[0][0]
+ else return '';
+ }
+
public state: State = {
- tabIndex: this.props.tabIndex ? this.props.tabIndex :
CamelUi.getSelectorModelTypes(this.props.parentDsl, this.props.showSteps)[0][0],
+ tabIndex: this.props.tabIndex ? this.props.tabIndex :
this.getDefaultTabIndex(),
}
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx
b/karavan-designer/src/designer/route/RouteDesigner.tsx
index bae6794..51fa188 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -21,7 +21,7 @@ import {
DrawerContent,
DrawerContentBody,
Button, Modal,
- PageSection, Flex, FlexItem, Text
+ PageSection
} from '@patternfly/react-core';
import '../karavan.css';
import {DslSelector} from "./DslSelector";
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index fb74c51..25f6f94 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -152,7 +152,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
selectKubernetes = (value: string) => {
const propertyName = this.state.kubernetesSelectorProperty;
- if (propertyName){
+ if (propertyName) {
if (value.startsWith("config") || value.startsWith("secret"))
value = "{{" + value + "}}";
this.propertyChanged(propertyName, value);
this.setState({showKubernetesSelector: false,
kubernetesSelectorProperty: undefined})
@@ -242,7 +242,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
}
getSwitch = (property: PropertyMeta, value: any) => {
- const isChecked = value != undefined ? Boolean(value) :
Boolean(property.defaultValue != undefined && property.defaultValue === 'true');
+ const isChecked = value !== undefined ? Boolean(value) :
Boolean(property.defaultValue !== undefined && property.defaultValue ===
'true');
return (
<Switch
id={property.name} name={property.name}
@@ -476,15 +476,18 @@ export class DslPropertyField extends
React.Component<Props, State> {
getMainComponentParameters = (properties: ComponentProperty[]) => {
return (
<div className="parameters">
- {properties.map(kp =>
- <ComponentParameterField
+ {properties.map(kp => {
+ // console.log(kp);
+ //
console.log(CamelDefinitionApiExt.getParametersValue(this.props.element,
kp.name, kp.kind === 'path'));
+ return (<ComponentParameterField
key={kp.name}
property={kp}
element={this.props.element}
integration={this.props.integration}
value={CamelDefinitionApiExt.getParametersValue(this.props.element, kp.name,
kp.kind === 'path')}
onParameterChange={this.props.onParameterChange}
- />)}
+ />)
+ })}
</div>
)
}
@@ -524,7 +527,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
bodyContent={property.description}
footerContent={
<div>
- {property.defaultValue !== undefined &&
property.defaultValue.toString().trim().length >0 && <div>{"Default: " +
property.defaultValue}</div>}
+ {property.defaultValue !== undefined &&
property.defaultValue.toString().trim().length > 0 && <div>{"Default: " +
property.defaultValue}</div>}
{property.required && <b>Required</b>}
</div>
}>
@@ -544,7 +547,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
return ['string'].includes(property.type) && property.name !==
'expression' && property.isArray && !property.enumVals;
}
- getComponentParameters (property: PropertyMeta) {
+ getComponentParameters(property: PropertyMeta) {
const properties =
CamelUtil.getComponentProperties(this.props.element);
const propertiesMain = properties.filter(p =>
!p.label.includes("advanced") && !p.label.includes("security") &&
!p.label.includes("scheduler"));
const propertiesAdvanced = properties.filter(p =>
p.label.includes("advanced"));
@@ -553,11 +556,11 @@ export class DslPropertyField extends
React.Component<Props, State> {
return (
<>
{property.name === 'parameters' &&
this.getMainComponentParameters(propertiesMain)}
- {property.name === 'parameters' && this.props.element &&
propertiesScheduler.length >0
+ {property.name === 'parameters' && this.props.element &&
propertiesScheduler.length > 0
&&
this.getExpandableComponentParameters(propertiesScheduler, "Scheduler
parameters")}
- {property.name === 'parameters' && this.props.element &&
propertiesSecurity.length >0
+ {property.name === 'parameters' && this.props.element &&
propertiesSecurity.length > 0
&&
this.getExpandableComponentParameters(propertiesSecurity, "Security
parameters")}
- {property.name === 'parameters' && this.props.element &&
propertiesAdvanced.length >0
+ {property.name === 'parameters' && this.props.element &&
propertiesAdvanced.length > 0
&&
this.getExpandableComponentParameters(propertiesAdvanced, "Advanced
parameters")}
</>
)
diff --git
a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
index eb2be0a..4bee8ce 100644
--- a/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/KameletPropertyField.tsx
@@ -19,7 +19,7 @@ import {
FormGroup,
TextInput,
Popover,
- Switch, InputGroup, Button, TextArea, Text, Tooltip, Modal,
+ Switch, InputGroup, Button, TextArea, Tooltip
} from '@patternfly/react-core';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
diff --git
a/karavan-designer/src/designer/route/property/KubernetesSelector.tsx
b/karavan-designer/src/designer/route/property/KubernetesSelector.tsx
index 99ee3ba..9791af2 100644
--- a/karavan-designer/src/designer/route/property/KubernetesSelector.tsx
+++ b/karavan-designer/src/designer/route/property/KubernetesSelector.tsx
@@ -24,8 +24,6 @@ import {
import '../../karavan.css';
import {TableComposable, Tbody, Td, Th, Thead, Tr} from
"@patternfly/react-table";
import {KubernetesAPI} from "../../utils/KubernetesAPI";
-import {CamelUi} from "../../utils/CamelUi";
-import {CamelUtil} from
"../../../../../../../../karavan-core/lib/api/CamelUtil";
interface Props {
onSelect: (value: string) => void,
diff --git a/karavan-designer/src/designer/utils/EventBus.ts
b/karavan-designer/src/designer/utils/EventBus.ts
index 285eb75..c0781e2 100644
--- a/karavan-designer/src/designer/utils/EventBus.ts
+++ b/karavan-designer/src/designer/utils/EventBus.ts
@@ -24,6 +24,7 @@ export class DslPosition {
step: CamelElement = new CamelElement("");
parent: CamelElement | undefined;
inSteps: boolean = false;
+ isSelected: boolean = false;
position: number = 0;
rect: DOMRect = new DOMRect();
headerRect: DOMRect = new DOMRect();
@@ -35,7 +36,8 @@ export class DslPosition {
rect: DOMRect,
headerRect:DOMRect,
position: number,
- inSteps: boolean = false) {
+ inSteps: boolean = false,
+ isSelected: boolean = false) {
this.command = command;
this.step = step;
this.parent = parent;
@@ -43,6 +45,7 @@ export class DslPosition {
this.headerRect = headerRect;
this.inSteps = inSteps;
this.position = position;
+ this.isSelected = isSelected;
}
}
@@ -68,7 +71,8 @@ export const EventBus = {
rect: DOMRect,
headerRect: DOMRect,
position: number,
- inSteps: boolean = false) => positions.next(new
DslPosition(command, step, parent, rect, headerRect, position, inSteps)),
+ inSteps: boolean = false,
+ isSelected: boolean = false) => positions.next(new
DslPosition(command, step, parent, rect, headerRect, position, inSteps,
isSelected)),
onPosition: () => positions.asObservable(),
diff --git a/karavan-vscode/webview/builder/BuilderPage.tsx
b/karavan-vscode/webview/builder/BuilderPage.tsx
index 605521c..43c27d5 100644
--- a/karavan-vscode/webview/builder/BuilderPage.tsx
+++ b/karavan-vscode/webview/builder/BuilderPage.tsx
@@ -181,7 +181,6 @@ export class BuilderPage extends React.Component<Props,
State> {
}
getHeader() {
- const {project} = this.state;
return (
<PageSection className="tools-section" variant={this.props.dark ?
PageSectionVariants.darker : PageSectionVariants.light}>
<Flex className="tools" direction={{default: 'row'}}
justifyContent={{default: 'justifyContentSpaceBetween'}} spaceItems={{default:
'spaceItemsLg'}}>
diff --git a/karavan-vscode/webview/components/ComponentCard.tsx
b/karavan-vscode/webview/components/ComponentCard.tsx
index 6d465f3..1fe5269 100644
--- a/karavan-vscode/webview/components/ComponentCard.tsx
+++ b/karavan-vscode/webview/components/ComponentCard.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {
- CardHeader, Card, CardTitle, CardBody, CardActions, CardFooter,Badge
+ CardHeader, Card, CardTitle, CardBody, CardFooter,Badge
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {camelIcon, CamelUi} from "../designer/utils/CamelUi";
