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 401ca4a9 Kamelet for project
401ca4a9 is described below
commit 401ca4a91bbdea6ccfa05e45a8961387e3ab72fc
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Fri Apr 19 16:46:39 2024 -0400
Kamelet for project
---
karavan-vscode/webview/App.tsx | 1 +
.../webview/expression/ExpressionModalEditor.css | 9 +++++++-
.../webview/expression/ExpressionModalEditor.tsx | 25 ++++++++++++++++------
karavan-vscode/webview/topology/TopologyTab.tsx | 2 ++
.../webview/topology/TopologyToolbar.tsx | 16 ++++++++++++--
5 files changed, 43 insertions(+), 10 deletions(-)
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index 6062553b..9b0b4d21 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -276,6 +276,7 @@ class App extends React.Component<Props, State> {
onClickAddRoute={() => vscode.postMessage({ command:
'createIntegration' })}
onClickAddREST={() => vscode.postMessage({ command:
'createIntegration' })}
onClickAddBean={() => vscode.postMessage({ command:
'createIntegration' })}
+ onClickAddKamelet={() => vscode.postMessage({ command:
'createIntegration' })}
onSetFile={(fileName) => vscode.postMessage({ command: 'openFile',
fileName: fileName })}
/>
}
diff --git a/karavan-vscode/webview/expression/ExpressionModalEditor.css
b/karavan-vscode/webview/expression/ExpressionModalEditor.css
index 732d3abd..c06a3a60 100644
--- a/karavan-vscode/webview/expression/ExpressionModalEditor.css
+++ b/karavan-vscode/webview/expression/ExpressionModalEditor.css
@@ -22,7 +22,6 @@
height: 100%;
display: flex;
flex-direction: column;
- gap: 16px;
justify-content: space-between;
align-items: stretch;
}
@@ -36,11 +35,19 @@
.panel-middle {
/*height: 64px;*/
}
+@keyframes smooth-appear {
+ to {
+ bottom: 20px;
+ opacity:1;
+ }
+}
.panel-bottom {
flex: 1;
height: 100%;
overflow-y: auto;
+ opacity:0;
+ animation: smooth-appear 1s ease forwards;
}
.context {
diff --git a/karavan-vscode/webview/expression/ExpressionModalEditor.tsx
b/karavan-vscode/webview/expression/ExpressionModalEditor.tsx
index 3a96ce7a..127cbda9 100644
--- a/karavan-vscode/webview/expression/ExpressionModalEditor.tsx
+++ b/karavan-vscode/webview/expression/ExpressionModalEditor.tsx
@@ -16,12 +16,14 @@
*/
import React, {useEffect, useState} from 'react';
import {
- Button, Modal, Title, TitleSizes
+ Button, Modal, Switch, Title, TitleSizes
} from '@patternfly/react-core';
import Editor from "@monaco-editor/react";
import {ExpressionBottomPanel} from "./ExpressionBottomPanel";
import './ExpressionModalEditor.css'
-import {Context, ExpressionFunctions, ExpressionVariables} from
"./ExpressionContextModel";
+import {ExpressionFunctions, ExpressionVariables} from
"./ExpressionContextModel";
+import ArrowDown from "@patternfly/react-icons/dist/esm/icons/angle-down-icon";
+import ArrowUp from "@patternfly/react-icons/dist/esm/icons/angle-up-icon";
interface Props {
name: string,
@@ -37,9 +39,10 @@ interface Props {
export function ExpressionModalEditor(props: Props) {
const [customCode, setCustomCode] = useState<string | undefined>();
+ const [showVariables, setShowVariables] = useState<boolean>(true);
+ const [key, setKey] = useState<string>('');
useEffect(() => {
- console.log(title, dslLanguage)
setCustomCode(props.customCode)
},[]);
@@ -80,7 +83,8 @@ export function ExpressionModalEditor(props: Props) {
<div className='container'>
<div className='panel-top'>
<Editor
- height="50%"
+ key={key}
+ height={"100%"}
width="100%"
defaultLanguage={'java'}
language={'java'}
@@ -98,9 +102,16 @@ export function ExpressionModalEditor(props: Props) {
onChange={(value, _) => setCustomCode(value)}
/>
</div>
- {show && <div className='panel-bottom'>
- {dslLanguage && <ExpressionBottomPanel
dslLanguage={dslLanguage}/>}
- </div>}
+ <Button style={{padding:"0"}} variant="link"
icon={showVariables ? <ArrowDown/> : <ArrowUp/>} onClick={e => {
+ setShowVariables(!showVariables);
+ setKey(Math.random().toString());
+ }}
+ />
+ {show && showVariables &&
+ <div className='panel-bottom'>
+ {dslLanguage && <ExpressionBottomPanel
dslLanguage={dslLanguage}/>}
+ </div>
+ }
</div>
</Modal>
)
diff --git a/karavan-vscode/webview/topology/TopologyTab.tsx
b/karavan-vscode/webview/topology/TopologyTab.tsx
index 35f8629f..474899fc 100644
--- a/karavan-vscode/webview/topology/TopologyTab.tsx
+++ b/karavan-vscode/webview/topology/TopologyTab.tsx
@@ -43,6 +43,7 @@ interface Props {
hideToolbar: boolean
onClickAddRoute: () => void
onClickAddREST: () => void
+ onClickAddKamelet: () => void
onClickAddBean: () => void
}
@@ -144,6 +145,7 @@ export function TopologyTab(props: Props) {
contextToolbar={!props.hideToolbar
? <TopologyToolbar onClickAddRoute={props.onClickAddRoute}
onClickAddBean={props.onClickAddBean}
+ onClickAddKamelet={props.onClickAddKamelet}
onClickAddREST={props.onClickAddREST}/>
: undefined}
sideBar={<TopologyPropertiesPanel onSetFile={props.onSetFile}/>}
diff --git a/karavan-vscode/webview/topology/TopologyToolbar.tsx
b/karavan-vscode/webview/topology/TopologyToolbar.tsx
index 667cf8f5..5dbe4949 100644
--- a/karavan-vscode/webview/topology/TopologyToolbar.tsx
+++ b/karavan-vscode/webview/topology/TopologyToolbar.tsx
@@ -25,6 +25,7 @@ import PlusIcon from
"@patternfly/react-icons/dist/esm/icons/plus-icon";
interface Props {
onClickAddRoute: () => void
onClickAddREST: () => void
+ onClickAddKamelet: () => void
onClickAddBean: () => void
}
@@ -46,7 +47,7 @@ export function TopologyToolbar (props: Props) {
<ToolbarItem align={{default:"alignRight"}}>
<Tooltip content={"Add REST API"} position={"bottom"}>
<Button className="dev-action-button" size="sm"
- variant={"primary"}
+ variant={"secondary"}
icon={<PlusIcon/>}
onClick={e => props.onClickAddREST()}
>
@@ -54,10 +55,21 @@ export function TopologyToolbar (props: Props) {
</Button>
</Tooltip>
</ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Kamelet"} position={"bottom"}>
+ <Button className="dev-action-button" size="sm"
+ variant={"secondary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddKamelet()}
+ >
+ Kamelet
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
<ToolbarItem align={{default:"alignRight"}}>
<Tooltip content={"Add Bean"} position={"bottom"}>
<Button className="dev-action-button" size="sm"
- variant={"primary"}
+ variant={"secondary"}
icon={<PlusIcon/>}
onClick={e => props.onClickAddBean()}
>
