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 2023/09/13 19:30:16 UTC
[camel-karavan] 03/03: UI Consistency for #885
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 c8baca3659b574a25384dd29cc456ef25472e8e4
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Wed Sep 13 15:30:03 2023 -0400
UI Consistency for #885
---
.../src/main/webui/src/designer/MainToolbar.tsx | 10 ++-
.../webui/src/project/ImageDownloadToolbar.tsx | 50 ++++++++++++++
.../src/main/webui/src/project/ProjectPage.tsx | 3 +-
.../src/main/webui/src/project/ProjectToolbar.tsx | 78 ++++++----------------
4 files changed, 78 insertions(+), 63 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/MainToolbar.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/MainToolbar.tsx
index 8923b70c..0b69aeda 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/MainToolbar.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/MainToolbar.tsx
@@ -6,6 +6,7 @@ import '../designer/karavan.css';
interface Props {
title: React.ReactNode;
+ toolsStart?: React.ReactNode;
tools: React.ReactNode;
}
@@ -13,12 +14,15 @@ export function MainToolbar(props: Props) {
return (
<PageSection className="tools-section" variant={PageSectionVariants.light}>
- <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}
+ <Flex className="tools" justifyContent={{default: 'justifyContentFlexStart'}}
alignItems={{default: 'alignItemsCenter'}}>
- <FlexItem>
+ <FlexItem flex={{default: "flexNone"}}>
{props.title}
</FlexItem>
- <FlexItem>
+ <FlexItem align={{default: 'alignLeft'}}>
+ {props.toolsStart}
+ </FlexItem>
+ <FlexItem align={{default: 'alignRight'}}>
{props.tools}
</FlexItem>
</Flex>
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx b/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
new file mode 100644
index 00000000..1939037b
--- /dev/null
+++ b/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
@@ -0,0 +1,50 @@
+import React, {useEffect} from 'react';
+import {
+ Button,
+ FlexItem,
+ Toolbar,
+ ToolbarContent,
+ Tooltip
+} from '@patternfly/react-core';
+import '../designer/karavan.css';
+import DownloadImageIcon from "@patternfly/react-icons/dist/esm/icons/image-icon";
+import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
+import {useFileStore, useProjectStore} from "../api/ProjectStore";
+import {EventBus} from "../designer/utils/EventBus";
+import {shallow} from "zustand/shallow";
+
+export function ImageDownloadToolbar() {
+
+ const [project] = useProjectStore((s) => [s.project], shallow)
+ const [file] = useFileStore((state) => [state.file], shallow)
+
+ useEffect(() => {
+ }, [file]);
+
+ function isYaml(): boolean {
+ return file !== undefined && file.name.endsWith("yaml");
+ }
+
+ function isIntegration(): boolean {
+ return isYaml() && file?.code !== undefined && CamelDefinitionYaml.yamlIsIntegration(file.code);
+ }
+
+ function downloadImage() {
+ EventBus.sendCommand("downloadImage");
+ }
+
+ return (
+ <Toolbar id="toolbar-group-types">
+ <ToolbarContent>
+ {isIntegration() &&
+ <FlexItem>
+ <Tooltip content="Download image" position={"bottom-end"}>
+ <Button size="sm" variant="control" icon={<DownloadImageIcon/>}
+ onClick={e => downloadImage()}/>
+ </Tooltip>
+ </FlexItem>
+ }
+ </ToolbarContent>
+ </Toolbar>
+ )
+}
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx b/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx
index c53cd2ef..c207900a 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx
@@ -17,6 +17,7 @@ import {shallow} from "zustand/shallow";
import {useParams} from "react-router-dom";
import {KaravanApi} from "../api/KaravanApi";
import {ProjectDataPoller} from "./ProjectDataPoller";
+import {ImageDownloadToolbar} from "./ImageDownloadToolbar";
export function ProjectPage() {
@@ -52,7 +53,7 @@ export function ProjectPage() {
return (
<PageSection className="project-page" padding={{default: 'noPadding'}}>
<PageSection className="tools-section" padding={{default: 'noPadding'}}>
- <MainToolbar title={<ProjectTitle/>} tools={<ProjectToolbar/>}/>
+ <MainToolbar title={<ProjectTitle/>} tools={<ProjectToolbar/>} toolsStart={<ImageDownloadToolbar/>}/>
</PageSection>
<PageSection className="tools-section" padding={{default: 'noPadding'}}>
<Flex direction={{default: "column"}} spaceItems={{default: "spaceItemsNone"}}>
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx b/karavan-web/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx
index 7a14f166..24dfa531 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx
@@ -1,35 +1,20 @@
import React, {useEffect} from 'react';
import {
- Button,
- Checkbox, Divider,
Flex,
FlexItem,
- ToggleGroup,
- ToggleGroupItem,
Toolbar,
ToolbarContent,
- Tooltip
} from '@patternfly/react-core';
import '../designer/karavan.css';
-import DownloadImageIcon from "@patternfly/react-icons/dist/esm/icons/image-icon";
-import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
-import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import {DevModeToolbar} from "./DevModeToolbar";
import {useFileStore, useProjectStore} from "../api/ProjectStore";
-import {EventBus} from "../designer/utils/EventBus";
-import {ProjectService} from "../api/ProjectService";
import {shallow} from "zustand/shallow";
-import {ProjectModelApi} from "karavan-core/lib/api/ProjectModelApi";
-import {ProjectModel, ProjectProperty} from "karavan-core/lib/model/ProjectModel";
import {BuildToolbar} from "./BuildToolbar";
+export function ProjectToolbar() {
-export function ProjectToolbar () {
-
- const [project, isPushing, tabIndex] = useProjectStore((s) => [s.project, s.isPushing, s.tabIndex], shallow )
- const [file, editAdvancedProperties, setEditAdvancedProperties, setAddProperty]
- = useFileStore((state) =>
- [state.file, state.editAdvancedProperties, state.setEditAdvancedProperties, state.setAddProperty], shallow )
+ const [project, tabIndex] = useProjectStore((s) => [s.project, s.tabIndex], shallow)
+ const [file] = useFileStore((state) => [state.file], shallow)
useEffect(() => {
}, [project, file]);
@@ -38,42 +23,22 @@ export function ProjectToolbar () {
return file !== undefined;
}
- function isYaml(): boolean {
- return file !== undefined && file.name.endsWith("yaml");
- }
-
- function isIntegration(): boolean {
- return isYaml() && file?.code !== undefined && CamelDefinitionYaml.yamlIsIntegration(file.code);
- }
-
- function isProperties(): boolean {
- return file !== undefined && file.name.endsWith("properties");
- }
-
- function isJava(): boolean {
- return file !== undefined && file.name.endsWith("java");
- }
-
- function downloadImage () {
- EventBus.sendCommand("downloadImage");
- }
-
-
-
function getFileToolbar() {
- return <Toolbar id="toolbar-group-types">
- <ToolbarContent>
- <Flex className="toolbar" direction={{default: "row"}} alignItems={{default: "alignItemsCenter"}}>
- {isRunnable() && <DevModeToolbar reloadOnly={true}/>}
-
- {isIntegration() && <FlexItem>
- <Tooltip content="Download image" position={"bottom-end"}>
- <Button size="sm" variant="control" icon={<DownloadImageIcon/>} onClick={e => downloadImage()}/>
- </Tooltip>
- </FlexItem>}
- </Flex>
- </ToolbarContent>
- </Toolbar>
+ return (
+ <Toolbar id="toolbar-group-types">
+ <ToolbarContent>
+ <Flex className="" direction={{default: "row"}}
+ justifyContent={{default: 'justifyContentSpaceBetween'}}
+ alignItems={{default: "alignItemsCenter"}}>
+ {isRunnable() &&
+ <FlexItem align={{default: 'alignRight'}}>
+ <DevModeToolbar reloadOnly={true}/>
+ </FlexItem>
+ }
+ </Flex>
+ </ToolbarContent>
+ </Toolbar>
+ )
}
function getProjectToolbar() {
@@ -105,10 +70,5 @@ export function ProjectToolbar () {
return !isKameletsProject() && !isTemplatesProject() && !isServicesProject() && ['build', 'container'].includes(tabIndex.toString());
}
- function allowAddFiles(): boolean {
- return !isTemplatesProject() && !isServicesProject();
- }
-
- const isTemplates = isTemplatesProject();
- return isFile() ? getFileToolbar() : getProjectToolbar()
+ return isFile() ? getFileToolbar() : getProjectToolbar()
}