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 56451cf Resize props (#243)
56451cf is described below
commit 56451cf52c8cb5b7312fbdbf32fba0fb6491c2f3
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Mon Mar 28 20:08:52 2022 -0400
Resize props (#243)
* Properties panel resize
* Rest properties resize
* Bean properties resize
* Dependency properties resize
---
karavan-designer/src/App.tsx | 2 +-
.../src/designer/beans/BeansDesigner.tsx | 62 ++++++++++-------
.../designer/dependencies/DependenciesDesigner.tsx | 66 ++++++++++--------
karavan-designer/src/designer/karavan.css | 19 ++++--
.../src/designer/rest/RestDesigner.tsx | 78 +++++++++++++---------
.../src/designer/route/RouteDesigner.tsx | 44 ++++++++++--
karavan-vscode/CHANGELOG.md | 4 ++
karavan-vscode/webview/index.css | 9 +++
8 files changed, 189 insertions(+), 95 deletions(-)
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index a000717..04d400b 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -97,7 +97,7 @@ class App extends React.Component<Props, State> {
save(filename: string, yaml: string) {
// console.log(filename);
- console.log(yaml);
+ // console.log(yaml);
}
public render() {
diff --git a/karavan-designer/src/designer/beans/BeansDesigner.tsx
b/karavan-designer/src/designer/beans/BeansDesigner.tsx
index 08eb58d..9709737 100644
--- a/karavan-designer/src/designer/beans/BeansDesigner.tsx
+++ b/karavan-designer/src/designer/beans/BeansDesigner.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {
- Button, Modal, PageSection
+ Button, Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent,
Modal, PageSection
} from '@patternfly/react-core';
import '../karavan.css';
import {NamedBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
@@ -27,6 +27,7 @@ import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt"
import {BeanProperties} from "./BeanProperties";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {BeanCard} from "./BeanCard";
+import {DslProperties} from "../route/DslProperties";
interface Props {
onSave?: (integration: Integration) => void
@@ -114,36 +115,49 @@ export class BeansDesigner extends React.Component<Props,
State> {
this.changeBean(new NamedBeanDefinition());
}
+ getPropertiesPanel() {
+ return (
+ <DrawerPanelContent isResizable hasNoBorder defaultSize={'400px'}
maxSize={'800px'} minSize={'300px'}>
+ <BeanProperties integration={this.props.integration}
+ bean={this.state.selectedBean}
+ dark={this.props.dark}
+ onChange={this.changeBean}/>
+ </DrawerPanelContent>
+ )
+ }
+
render() {
const beans = CamelUi.getBeans(this.state.integration);
return (
<PageSection className="rest-page" isFilled padding={{default:
'noPadding'}}>
<div className="rest-page-columns">
- <div className="graph" data-click="REST" onClick={event
=> this.unselectBean(event)}>
- <div className="flows">
- {beans?.map(bean => <BeanCard key={bean.uuid +
this.state.key}
-
selectedStep={this.state.selectedBean}
- bean={bean}
-
integration={this.props.integration}
-
selectElement={this.selectBean}
-
deleteElement={this.showDeleteConfirmation}/>)}
- <div className="add-rest">
- <Button
- variant={beans?.length === 0 ? "primary" :
"secondary"}
- data-click="ADD_REST"
- icon={<PlusIcon/>}
- onClick={e => this.createBean()}>Create
new bean
- </Button>
- </div>
- </div>
- </div>
- <BeanProperties integration={this.props.integration}
- bean={this.state.selectedBean}
- dark={this.props.dark}
- onChange={this.changeBean}/>
+ <Drawer isExpanded isInline>
+ <DrawerContent
panelContent={this.getPropertiesPanel()}>
+ <DrawerContentBody>
+ <div className="graph" data-click="REST"
onClick={event => this.unselectBean(event)}>
+ <div className="flows">
+ {beans?.map(bean => <BeanCard
key={bean.uuid + this.state.key}
+
selectedStep={this.state.selectedBean}
+
bean={bean}
+
integration={this.props.integration}
+
selectElement={this.selectBean}
+
deleteElement={this.showDeleteConfirmation}/>)}
+ <div className="add-rest">
+ <Button
+ variant={beans?.length === 0 ?
"primary" : "secondary"}
+ data-click="ADD_REST"
+ icon={<PlusIcon/>}
+ onClick={e =>
this.createBean()}>Create new bean
+ </Button>
+ </div>
+ </div>
+ </div>
+ </DrawerContentBody>
+ </DrawerContent>
+ </Drawer>
</div>
{this.getDeleteConfirmation()}
</PageSection>
- );
+ )
}
}
diff --git
a/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
b/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
index 0de7e5b..96723cd 100644
--- a/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
+++ b/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {
- Button, Modal, PageSection
+ Button, Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent,
Modal, PageSection
} from '@patternfly/react-core';
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
@@ -26,6 +26,8 @@ import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {Integration, Dependency} from
"karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt";
import {DependencyCard} from "./DependencyCard";
+import {BeanProperties} from "../beans/BeanProperties";
+import {BeanCard} from "../beans/BeanCard";
interface Props {
onSave?: (integration: Integration) => void
@@ -117,38 +119,50 @@ export class DependenciesDesigner extends
React.Component<Props, State> {
this.changeDep(new Dependency());
}
+ getPropertiesPanel() {
+ return (
+ <DrawerPanelContent isResizable hasNoBorder defaultSize={'400px'}
maxSize={'800px'} minSize={'300px'}>
+ <DependencyProperties integration={this.props.integration}
+ dependency={this.state.selectedDep}
+ dark={this.props.dark}
+ onChange={this.changeDep}/>
+ </DrawerPanelContent>
+ )
+ }
+
render() {
const deps = CamelUi.getDependencies(this.state.integration).sort((a,
b) => a.getFullName() > b.getFullName() ? 1 : -1 );
return (
<PageSection className="rest-page" isFilled padding={{default:
'noPadding'}}>
<div className="rest-page-columns">
- <div className="graph" data-click="REST" onClick={event
=> this.unselectDep(event)}>
- <div className="flows">
- {deps?.map(dep => <DependencyCard key={dep.uuid +
this.state.key}
-
selectedDep={this.state.selectedDep}
- dep={dep}
-
integration={this.props.integration}
-
selectElement={this.selectDep}
-
deleteElement={this.showDeleteConfirmation}/>)
- }
- <div className="add-rest">
- <Button
- variant={deps?.length === 0 ? "primary" :
"secondary"}
- data-click="ADD_DEPENDENCY"
- icon={<PlusIcon/>}
- onClick={e => this.createDep()}>Create new
dependency
- </Button>
- </div>
- </div>
- </div>
- <DependencyProperties integration={this.props.integration}
- dependency={this.state.selectedDep}
- dark={this.props.dark}
- onChange={this.changeDep}/>
+ <Drawer isExpanded isInline>
+ <DrawerContent
panelContent={this.getPropertiesPanel()}>
+ <DrawerContentBody>
+ <div className="graph" data-click="REST"
onClick={event => this.unselectDep(event)}>
+ <div className="flows">
+ {deps?.map(dep => <DependencyCard
key={dep.uuid + this.state.key}
+
selectedDep={this.state.selectedDep}
+
dep={dep}
+
integration={this.props.integration}
+
selectElement={this.selectDep}
+
deleteElement={this.showDeleteConfirmation}/>)
+ }
+ <div className="add-rest">
+ <Button
+ variant={deps?.length === 0 ?
"primary" : "secondary"}
+ data-click="ADD_DEPENDENCY"
+ icon={<PlusIcon/>}
+ onClick={e =>
this.createDep()}>Create new dependency
+ </Button>
+ </div>
+ </div>
+ </div>
+ </DrawerContentBody>
+ </DrawerContent>
+ </Drawer>
</div>
{this.getDeleteConfirmation()}
</PageSection>
-
- );
+ )
}
}
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 5c0eb03..99beb52 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -182,8 +182,7 @@
}
.karavan .dsl-page .dsl-page-columns {
- display: flex;
- flex-direction: row;
+ display: block;
height: 100%;
background: #fafafa;
}
@@ -225,7 +224,7 @@
padding: 10px 10px 10px 10px;
font-size: 14px;
background: #fcfcfc;
- width: 450px;
+ width: 100%;
height: 100%;
overflow: auto;
display: flex;
@@ -233,6 +232,15 @@
justify-content: space-between;
}
+.karavan .pf-c-drawer__splitter {
+ width: 2px;
+ background-color: #fcfcfc;
+}
+
+.karavan .pf-c-drawer__splitter-handle {
+ display: none;
+}
+
.karavan .properties .headers {
grid-row-gap: 10px;
row-gap: 10px;
@@ -332,7 +340,7 @@
}
.karavan .properties .pf-c-select__menu-item {
- width: 280px;
+ /*width: 280px;*/
}
.karavan .properties .pf-c-select__menu-item-description {
@@ -830,8 +838,7 @@
}
.karavan .rest-page .rest-page-columns {
- display: flex;
- flex-direction: row;
+ display: block;
height: 100%;
background: #fafafa;
}
diff --git a/karavan-designer/src/designer/rest/RestDesigner.tsx
b/karavan-designer/src/designer/rest/RestDesigner.tsx
index d83739a..e2a1753 100644
--- a/karavan-designer/src/designer/rest/RestDesigner.tsx
+++ b/karavan-designer/src/designer/rest/RestDesigner.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {
- Button, Modal,
+ Button, Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent,
Modal,
PageSection
} from '@patternfly/react-core';
import '../karavan.css';
@@ -205,6 +205,22 @@ export class RestDesigner extends React.Component<Props,
State> {
</>)
}
+
+ getPropertiesPanel() {
+ return (
+ <DrawerPanelContent isResizable hasNoBorder defaultSize={'400px'}
maxSize={'800px'} minSize={'300px'}>
+ <DslProperties
+ integration={this.props.integration}
+ step={this.state.selectedStep}
+ onIntegrationUpdate={this.onIntegrationUpdate}
+ onPropertyUpdate={this.onPropertyUpdate}
+ clipboardStep={undefined}
+ onSaveClipboardStep={element => {}}
+ />
+ </DrawerPanelContent>
+ )
+ }
+
render() {
const data = this.props.integration.spec.flows?.filter(f => f.dslName
=== 'RestDefinition');
const configData = this.props.integration.spec.flows?.filter(f =>
f.dslName === 'RestConfigurationDefinition');
@@ -212,40 +228,38 @@ export class RestDesigner extends React.Component<Props,
State> {
return (
<PageSection className="rest-page" isFilled padding={{default:
'noPadding'}}>
<div className="rest-page-columns">
- <div className="graph" data-click="REST" onClick={event =>
this.unselectElement(event)}>
- <div className="flows">
- {config && this.getRestConfigurationCard(config)}
- {data && this.getRestCards(data)}
- <div className="add-rest">
- {config === undefined &&
- <Button
- variant="primary"
- data-click="ADD_REST_REST_CONFIG"
- icon={<PlusIcon/>}
- onClick={e =>
this.createRestConfiguration()}>Create REST Configuration
- </Button>
- }
- <Button
- variant={data?.length === 0 ? "primary" :
"secondary"}
- data-click="ADD_REST"
- icon={<PlusIcon/>}
- onClick={e => this.createRest()}>Create
REST Service
- </Button>
- </div>
- </div>
- </div>
- <DslProperties
- integration={this.props.integration}
- step={this.state.selectedStep}
- onIntegrationUpdate={this.onIntegrationUpdate}
- onPropertyUpdate={this.onPropertyUpdate}
- clipboardStep={undefined}
- onSaveClipboardStep={element => {}}
- />
+ <Drawer isExpanded isInline>
+ <DrawerContent
panelContent={this.getPropertiesPanel()}>
+ <DrawerContentBody>
+ <div className="graph" data-click="REST"
onClick={event => this.unselectElement(event)}>
+ <div className="flows">
+ {config &&
this.getRestConfigurationCard(config)}
+ {data && this.getRestCards(data)}
+ <div className="add-rest">
+ {config === undefined &&
+ <Button
+ variant="primary"
+
data-click="ADD_REST_REST_CONFIG"
+ icon={<PlusIcon/>}
+ onClick={e =>
this.createRestConfiguration()}>Create REST Configuration
+ </Button>
+ }
+ <Button
+ variant={data?.length === 0 ?
"primary" : "secondary"}
+ data-click="ADD_REST"
+ icon={<PlusIcon/>}
+ onClick={e =>
this.createRest()}>Create REST Service
+ </Button>
+ </div>
+ </div>
+ </div>
+ </DrawerContentBody>
+ </DrawerContent>
+ </Drawer>
</div>
{this.getSelectorModal()}
{this.getDeleteConfirmation()}
</PageSection>
- );
+ )
}
}
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx
b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 5ed7335..19bc630 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -16,6 +16,13 @@
*/
import React from 'react';
import {
+ Drawer,
+ DrawerPanelContent,
+ DrawerContent,
+ DrawerContentBody,
+ DrawerHead,
+ DrawerActions,
+ DrawerCloseButton,
Button, Modal,
PageSection
} from '@patternfly/react-core';
@@ -33,6 +40,7 @@ import PlusIcon from
"@patternfly/react-icons/dist/esm/icons/plus-icon";
import {DslElement} from "./DslElement";
import {EventBus} from "../utils/EventBus";
import {CamelUi, RouteToCreate} from "../utils/CamelUi";
+import {findDOMNode} from "react-dom";
interface Props {
onSave?: (integration: Integration) => void
@@ -55,6 +63,7 @@ interface State {
top: number
left: number
clipboardStep?: CamelElement
+ ref?: any
}
export class RouteDesigner extends React.Component<Props, State> {
@@ -71,17 +80,29 @@ export class RouteDesigner extends React.Component<Props,
State> {
height: 1000,
top: 0,
left: 0,
+ ref: React.createRef()
};
componentDidMount() {
window.addEventListener('resize', this.handleResize);
+ const element =
findDOMNode(this.state.ref.current)?.parentElement?.parentElement;
+ const checkResize = (mutations: any) => {
+ const el = mutations[0].target;
+ const w = el.clientWidth;
+ const isChange = mutations.map((m: any) =>
`${m.oldValue}`).some((prev: any) => prev.indexOf(`width: ${w}px`) === -1);
+ if (isChange) this.setState({key: Math.random().toString()});
+ }
+ if (element) {
+ const observer = new MutationObserver(checkResize);
+ observer.observe(element, {attributes: true, attributeOldValue:
true, attributeFilter: ['style']});
+ }
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
- handleResize = () => {
+ handleResize = (event: any) => {
this.setState({key: Math.random().toString()});
}
@@ -283,12 +304,10 @@ export class RouteDesigner extends React.Component<Props,
State> {
</div>)
}
- render() {
+ getPropertiesPanel() {
return (
- <PageSection className="dsl-page" isFilled padding={{default:
'noPadding'}}>
- <div className="dsl-page-columns">
- {this.getGraph()}
- <DslProperties
+ <DrawerPanelContent isResizable hasNoBorder defaultSize={'400px'}
maxSize={'800px'} minSize={'300px'}>
+ <DslProperties ref={this.state.ref}
integration={this.state.integration}
step={this.state.selectedStep}
onIntegrationUpdate={this.onIntegrationUpdate}
@@ -296,6 +315,19 @@ export class RouteDesigner extends React.Component<Props,
State> {
clipboardStep={this.state.clipboardStep}
onSaveClipboardStep={this.saveToClipboard}
/>
+ </DrawerPanelContent>
+ )
+ }
+
+ render() {
+ return (
+ <PageSection className="dsl-page" isFilled padding={{default:
'noPadding'}}>
+ <div className="dsl-page-columns">
+ <Drawer isExpanded isInline>
+ <DrawerContent
panelContent={this.getPropertiesPanel()}>
+
<DrawerContentBody>{this.getGraph()}</DrawerContentBody>
+ </DrawerContent>
+ </Drawer>
</div>
{this.getSelectorModal()}
{this.getDeleteConfirmation()}
diff --git a/karavan-vscode/CHANGELOG.md b/karavan-vscode/CHANGELOG.md
index f154b45..c3ffede 100644
--- a/karavan-vscode/CHANGELOG.md
+++ b/karavan-vscode/CHANGELOG.md
@@ -5,6 +5,10 @@ Requires Camel 3.16.0 and later
1. REST DSL
2. Beans
3. Dependencies
+4. Support Camel 3.16.0 DSL
+5. New theme
+6. Resizable properties panel
+7. New Karavan views in VS Code
## 0.0.11
1. Hot fix: Set Camel Jbang alias as `camel@apache/camel`
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index b85266d..2bf02f6 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -161,6 +161,15 @@ body, :root, #root, .karavan {
color: var(--vscode-input-foreground);
}
+.vscode-dark .karavan .pf-c-drawer__splitter {
+ background: var(--vscode-tab-inactiveBackground);
+}
+
+.vscode-dark .karavan .pf-c-drawer__splitter::after {
+ border: var(--vscode-tab-inactiveBackground) solid;
+ border-width: 2px;
+}
+
.vscode-dark .karavan .pf-c-switch {
--pf-c-switch__input--checked__toggle--BackgroundColor:
var(--vscode-focusBorder);
}
