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
commit 1aa22eb80171065500015fd8e3757ba0b8c0a80c
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Sep 18 17:47:11 2023 -0400
Create integration in Topology for #893
---
.../webui/src/project/files/CreateFileModal.tsx | 13 +++++++---
.../src/main/webui/src/project/files/FilesTab.tsx | 6 ++---
.../main/webui/src/project/files/FilesToolbar.tsx | 12 ++++-----
.../webui/src/project/topology/TopologyTab.tsx | 7 +++--
.../webui/src/project/topology/TopologyToolbar.tsx | 30 ++++++++++++++++++++++
.../main/webui/src/project/topology/topology.css | 15 ++++++++---
6 files changed, 63 insertions(+), 20 deletions(-)
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
index 9b9a6791..b263a761 100644
---
a/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
@@ -14,6 +14,7 @@ import {useFileStore, useProjectStore} from
"../../api/ProjectStore";
import {ProjectFile, ProjectFileTypes} from "../../api/ProjectModels";
import {CamelUi} from "../../designer/utils/CamelUi";
import {ProjectService} from "../../api/ProjectService";
+import {shallow} from "zustand/shallow";
interface Props {
types: string[]
@@ -21,8 +22,8 @@ interface Props {
export function CreateFileModal (props: Props) {
- const {operation} = useFileStore();
- const {project, setProject} = useProjectStore();
+ const [project] = useProjectStore((s) => [s.project], shallow);
+ const [operation, setFile] = useFileStore((s) => [s.operation, s.setFile],
shallow);
const [name, setName] = useState<string>( '');
const [fileType, setFileType] = useState<string>(props.types.at(0) ||
'INTEGRATION');
@@ -32,7 +33,7 @@ export function CreateFileModal (props: Props) {
}
function closeModal () {
- useFileStore.setState({operation: "none"});
+ setFile("none");
cleanValues();
}
@@ -45,8 +46,12 @@ export function CreateFileModal (props: Props) {
if (filename && extension) {
const file = new ProjectFile(filename + '.' + extension,
project.projectId, code, Date.now());
ProjectService.createFile(file);
- useFileStore.setState({operation: "none"});
cleanValues();
+ if (code) {
+ setFile('select', file);
+ } else {
+ setFile("none");
+ }
}
}
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/files/FilesTab.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/files/FilesTab.tsx
index 11b6d965..864eed87 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/files/FilesTab.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/files/FilesTab.tsx
@@ -35,7 +35,7 @@ export function FilesTab () {
const [files] = useFilesStore((s) => [s.files], shallow);
const [project] = useProjectStore((s) => [s.project], shallow);
- const [operation, setFile] = useFileStore((s) => [s.operation, s.setFile],
shallow);
+ const [setFile] = useFileStore((s) => [s.setFile], shallow);
function getDate(lastUpdate: number): string {
if (lastUpdate) {
@@ -119,7 +119,7 @@ export function FilesTab () {
<Button style={{padding: '0'}}
variant={"plain"}
isDisabled={['application.properties',
'docker-compose.yaml'].includes(file.name)}
onClick={e =>
-
useFileStore.setState({file: file, operation: "delete"})
+ setFile('delete', file)
}>
<DeleteIcon/>
</Button>
@@ -144,8 +144,8 @@ export function FilesTab () {
</Tbody>
</Table>
</div>
- <CreateFileModal types={types}/>
<UploadFileModal projectId={project.projectId}/>
+ <CreateFileModal types={types}/>
<DeleteFileModal />
</PageSection>
)
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx
index 61d2f350..e73a5ace 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx
@@ -34,8 +34,8 @@ export function FileToolbar () {
const [commitMessage, setCommitMessage] = useState('');
const [project, isPushing] = useProjectStore((state) => [state.project,
state.isPushing], shallow )
const {files} = useFilesStore();
- const [file, editAdvancedProperties, setEditAdvancedProperties,
setAddProperty] = useFileStore((state) =>
- [state.file, state.editAdvancedProperties,
state.setEditAdvancedProperties, state.setAddProperty], shallow )
+ const [file, editAdvancedProperties, setEditAdvancedProperties,
setAddProperty, setFile] = useFileStore((s) =>
+ [s.file, s.editAdvancedProperties, s.setEditAdvancedProperties,
s.setAddProperty, s.setFile], shallow )
useEffect(() => {
@@ -114,7 +114,7 @@ export function FileToolbar () {
<Tooltip content="Commit and push to git" position={"bottom-end"}>
<Button isLoading={isPushing ? true : undefined}
size="sm"
- variant={needCommit() ? "primary" : "secondary"}
+ variant={"secondary"}
className="project-button"
icon={!isPushing ? <PushIcon/> : <div></div>}
onClick={() => {
@@ -126,12 +126,12 @@ export function FileToolbar () {
</Tooltip>
</FlexItem>
{canAddFiles() && <FlexItem>
- <Button size="sm" variant={"secondary"} icon={<PlusIcon/>}
- onClick={e => useFileStore.setState({operation:
"create"})}>Create</Button>
+ <Button size="sm" variant={"primary"} icon={<PlusIcon/>}
+ onClick={e => setFile("create")}>Create</Button>
</FlexItem>}
{canAddFiles() && <FlexItem>
<Button size="sm" variant="secondary" icon={<UploadIcon/>}
- onClick={e => useFileStore.setState({operation:
"upload"})}>Upload</Button>
+ onClick={e => setFile("upload")}>Upload</Button>
</FlexItem>}
{getCommitModal()}
</Flex>
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/topology/TopologyTab.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/topology/TopologyTab.tsx
index cfd79092..2d0186bc 100644
---
a/karavan-web/karavan-app/src/main/webui/src/project/topology/TopologyTab.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/project/topology/TopologyTab.tsx
@@ -1,7 +1,4 @@
import * as React from 'react';
-import {
- ToolbarItem
-} from '@patternfly/react-core';
import {
action,
createTopologyControlButtons,
@@ -21,6 +18,7 @@ import {shallow} from "zustand/shallow";
import {useTopologyStore} from "./TopologyStore";
import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {useDesignerStore} from "../../designer/KaravanStore";
+import {TopologyToolbar} from "./TopologyToolbar";
export const TopologyTab: React.FC = () => {
@@ -72,7 +70,8 @@ export const TopologyTab: React.FC = () => {
return (
<TopologyView
- viewToolbar={<ToolbarItem>{}</ToolbarItem>}
+ className="topology-panel"
+ contextToolbar={<TopologyToolbar/>}
sideBar={<TopologyPropertiesPanel/>}
controlBar={
<TopologyControlBar
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/topology/TopologyToolbar.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/topology/TopologyToolbar.tsx
new file mode 100644
index 00000000..47df92e7
--- /dev/null
+++
b/karavan-web/karavan-app/src/main/webui/src/project/topology/TopologyToolbar.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {
+ Button,
+ ToolbarItem
+} from '@patternfly/react-core';
+import { useFileStore} from "../../api/ProjectStore";
+import {shallow} from "zustand/shallow";
+import {useTopologyStore} from "./TopologyStore";
+import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
+import {CreateFileModal} from "../files/CreateFileModal";
+
+export const TopologyToolbar: React.FC = () => {
+
+ const [setFile] = useFileStore((s) => [s.setFile], shallow);
+ const [selectedIds, setSelectedIds, setFileName] = useTopologyStore((s) =>
+ [s.selectedIds, s.setSelectedIds, s.setFileName], shallow);
+
+ return (
+ <ToolbarItem align={{default: "alignRight"}}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => setFile("create")}
+ >
+ Create
+ </Button>
+ <CreateFileModal types={['INTEGRATION']}/>
+ </ToolbarItem>
+ )
+}
\ No newline at end of file
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/topology/topology.css
b/karavan-web/karavan-app/src/main/webui/src/project/topology/topology.css
index 3e4ec7be..bcff9fa1 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/topology/topology.css
+++ b/karavan-web/karavan-app/src/main/webui/src/project/topology/topology.css
@@ -1,12 +1,16 @@
-.karavan .pf-v5-c-toolbar {
+.karavan .topology-panel .pf-v5-c-toolbar {
padding-bottom: 0;
}
-.karavan .properties-header {
+.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__group{
+ width: 100%
+}
+
+.karavan .topology-panel .properties-header {
padding: 10px;
}
-.karavan .common-node .icon {
+.karavan .topology-panel .common-node .icon {
height: 32px;
width: 32px;
}
@@ -14,6 +18,11 @@
.karavan .topology-sidebar .pf-topology-side-bar__header {
margin-right: 0;
}
+
+.karavan .topology-toolbar {
+ padding: 0;
+}
+
.karavan .topology-sidebar {
overflow: hidden;
}
