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 2022/11/13 22:17:01 UTC
[camel-karavan] 01/07: ProjectPageToolbar class externalized
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 1f163f777ef2eb440a9c1ffb7b2c600db3058421
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Fri Nov 11 13:19:28 2022 -0500
ProjectPageToolbar class externalized
---
karavan-app/src/main/webapp/src/Main.tsx | 4 +-
karavan-app/src/main/webapp/src/index.css | 4 +-
.../src/main/webapp/src/projects/ProjectPage.tsx | 90 +++-------------
.../webapp/src/projects/ProjectPageToolbar.tsx | 115 +++++++++++++++++++++
.../src/main/webapp/src/projects/ProjectsPage.tsx | 7 +-
5 files changed, 138 insertions(+), 82 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/Main.tsx b/karavan-app/src/main/webapp/src/Main.tsx
index f3dcdc3..b37908d 100644
--- a/karavan-app/src/main/webapp/src/Main.tsx
+++ b/karavan-app/src/main/webapp/src/Main.tsx
@@ -28,7 +28,7 @@ import KameletsIcon from "@patternfly/react-icons/dist/js/icons/registry-icon";
import DashboardIcon from "@patternfly/react-icons/dist/js/icons/tachometer-alt-icon";
import EipIcon from "@patternfly/react-icons/dist/js/icons/topology-icon";
import ComponentsIcon from "@patternfly/react-icons/dist/js/icons/module-icon";
-import TemplatesIcon from "@patternfly/react-icons/dist/js/icons/cogs-icon";
+import { PficonTemplateIcon } from '@patternfly/react-icons';
import {MainLogin} from "./MainLogin";
import {DashboardPage} from "./dashboard/DashboardPage";
@@ -165,7 +165,7 @@ export class Main extends React.Component<Props, State> {
new MenuItem("eip", "Enterprise Integration Patterns", <EipIcon/>),
new MenuItem("kamelets", "Kamelets", <KameletsIcon/>),
new MenuItem("components", "Components", <ComponentsIcon/>),
- new MenuItem("templates", "Templates", <TemplatesIcon/>)
+ new MenuItem("templates", "Templates", <PficonTemplateIcon/>)
]
return (<Flex className="nav-buttons" direction={{default: "column"}} style={{height: "100%"}}
spaceItems={{default: "spaceItemsNone"}}>
diff --git a/karavan-app/src/main/webapp/src/index.css b/karavan-app/src/main/webapp/src/index.css
index 43ae76f..b19e0f5 100644
--- a/karavan-app/src/main/webapp/src/index.css
+++ b/karavan-app/src/main/webapp/src/index.css
@@ -118,10 +118,10 @@
}
.karavan .projects-page .runtime-badge {
- min-width: 18px;
+ min-width: 27px;
font-size: 14px;
font-weight: 400;
- padding: 2px 7px 2px 7px;
+ padding: 2px 8px 2px 8px;
}
.karavan .projects-page .pf-m-link {
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
index 9150d7b..0b12716 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
@@ -47,8 +47,8 @@ import {UploadModal} from "./UploadModal";
import {ProjectInfo} from "./ProjectInfo";
import {ProjectOperations} from "./ProjectOperations";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
-import RefreshIcon from "@patternfly/react-icons/dist/esm/icons/sync-alt-icon";
import PushIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
+import {ProjectPageToolbar} from "./ProjectPageToolbar";
interface Props {
project: Project,
@@ -168,79 +168,21 @@ export class ProjectPage extends React.Component<Props, State> {
}
tools = () => {
- const {isTemplates, project} = this.props;
- const {file, mode} = this.state;
- const isFile = file !== undefined;
- const isYaml = file !== undefined && file.name.endsWith("yaml");
- const isIntegration = isYaml && file?.code && CamelDefinitionYaml.yamlIsIntegration(file.code);
- const isProperties = file !== undefined && file.name.endsWith("properties");
- return <Toolbar id="toolbar-group-types">
- <ToolbarContent>
- {isTemplates &&
- <ToolbarItem>
- <Flex justifyContent={{default: "justifyContentSpaceBetween"}} alignItems={{default: "alignItemsCenter"}}>
- <FlexItem>
- <Tooltip content={project?.lastCommit} position={"right"}>
- <Badge>{project?.lastCommit ? project?.lastCommit?.substr(0, 7) : "-"}</Badge>
- </Tooltip>
- </FlexItem>
- <FlexItem>
- <Button variant="primary" icon={<PushIcon/>} onClick={e => {
- KaravanApi.push(this.props.project, res => {
- console.log(res)
- if (res.status === 200 || res.status === 201) {
- this.onRefresh();
- } else {
- // Todo notification
- }
- });
- }}>Commit</Button>
- </FlexItem>
- </Flex>
- </ToolbarItem>
- }
- {!isTemplates &&
- <Flex className="toolbar" direction={{default: "row"}} alignItems={{default:"alignItemsCenter"}}>
- {isYaml && <FlexItem>
- <ToggleGroup>
- <ToggleGroupItem text="Design" buttonId="design" isSelected={mode === "design"} onChange={s => this.setState({mode:"design"})} />
- <ToggleGroupItem text="Code" buttonId="code" isSelected={mode === "code"} onChange={s => this.setState({mode:"code"})} />
- </ToggleGroup>
- </FlexItem>}
-
- {isProperties && <FlexItem>
- <Checkbox
- id="advanced"
- label="Edit advanced"
- isChecked={this.state.editAdvancedProperties}
- onChange={checked => this.setState({editAdvancedProperties: checked})}
- />
- </FlexItem>}
- {isProperties && <FlexItem>
- <Button variant="primary" icon={<PlusIcon/>} onClick={e => this.addProperty()}>Add property</Button>
- </FlexItem>}
-
- {isFile && <FlexItem>
- <Tooltip content="Download source" position={"bottom-end"}>
- <Button variant="control" icon={<DownloadIcon/>} onClick={e => this.download()}/>
- </Tooltip>
- </FlexItem>}
- {isIntegration && <FlexItem>
- <Tooltip content="Download image" position={"bottom-end"}>
- <Button variant="control" icon={<DownloadImageIcon/>} onClick={e => this.downloadImage()}/>
- </Tooltip>
- </FlexItem>}
- {!isFile && <FlexItem>
- <Button variant={"primary"} icon={<PlusIcon/>}
- onClick={e => this.setState({isCreateModalOpen: true})}>Create</Button>
- </FlexItem>}
- {!isFile && <FlexItem>
- <Button variant="secondary" icon={<UploadIcon/>}
- onClick={e => this.setState({isUploadModalOpen: true})}>Upload</Button>
- </FlexItem>}
- </Flex>}
- </ToolbarContent>
- </Toolbar>
+ return <ProjectPageToolbar
+ project={this.props.project}
+ file={this.state.file}
+ mode={this.state.mode}
+ isTemplates={this.props.isTemplates}
+ config={this.props.config}
+ addProperty={() => this.addProperty()}
+ download={() => this.download()}
+ downloadImage={() => this.downloadImage()}
+ editAdvancedProperties={this.state.editAdvancedProperties}
+ setEditAdvancedProperties={checked => this.setState({editAdvancedProperties: checked})}
+ setMode={mode => this.setState({mode: mode})}
+ setCreateModalOpen={() => this.setState({isCreateModalOpen: true})}
+ setUploadModalOpen={() => this.setState({isUploadModalOpen: true})}
+ />
}
getType = (file: ProjectFile) => {
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectPageToolbar.tsx b/karavan-app/src/main/webapp/src/projects/ProjectPageToolbar.tsx
new file mode 100644
index 0000000..325127a
--- /dev/null
+++ b/karavan-app/src/main/webapp/src/projects/ProjectPageToolbar.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+ Badge,
+ Button,
+ Toolbar,
+ ToolbarContent,
+ Flex,
+ FlexItem,
+ ToggleGroup,
+ ToggleGroupItem,
+ Checkbox, Tooltip, ToolbarItem
+} from '@patternfly/react-core';
+import '../designer/karavan.css';
+import {Project, ProjectFile} from "./ProjectModels";
+import UploadIcon from "@patternfly/react-icons/dist/esm/icons/upload-icon";
+import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
+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 PushIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
+
+interface Props {
+ project: Project,
+ isTemplates?: boolean,
+ config: any,
+ file?: ProjectFile,
+ mode: "design" | "code",
+ editAdvancedProperties: boolean,
+ addProperty: () => void,
+ download: () => void,
+ downloadImage: () => void,
+ setCreateModalOpen: () => void,
+ setUploadModalOpen: () => void,
+ setEditAdvancedProperties: (checked: boolean) => void,
+ setMode: (mode: "design" | "code") => void,
+}
+
+export class ProjectPageToolbar extends React.Component<Props> {
+
+ render() {
+ const {isTemplates, project, file, mode, editAdvancedProperties} = this.props;
+ const isFile = file !== undefined;
+ const isYaml = file !== undefined && file.name.endsWith("yaml");
+ const isIntegration = isYaml && file?.code && CamelDefinitionYaml.yamlIsIntegration(file.code);
+ const isProperties = file !== undefined && file.name.endsWith("properties");
+ return <Toolbar id="toolbar-group-types">
+ <ToolbarContent>
+ {isTemplates &&
+ <ToolbarItem>
+ <Flex justifyContent={{default: "justifyContentSpaceBetween"}} alignItems={{default: "alignItemsCenter"}}>
+ {isProperties && <FlexItem>
+ <Checkbox
+ id="advanced"
+ label="Edit advanced"
+ isChecked={editAdvancedProperties}
+ onChange={checked => this.props.setEditAdvancedProperties.call(this, checked)}
+ />
+ </FlexItem>}
+ <FlexItem>
+ <Tooltip content={project?.lastCommit} position={"right"}>
+ <Badge>{project?.lastCommit ? project?.lastCommit?.substr(0, 7) : "-"}</Badge>
+ </Tooltip>
+ </FlexItem>
+ <FlexItem>
+ <Button variant="primary" icon={<PushIcon/>} onClick={e => {}}>Commit</Button>
+ </FlexItem>
+ </Flex>
+ </ToolbarItem>
+ }
+ {!isTemplates &&
+ <Flex className="toolbar" direction={{default: "row"}} alignItems={{default:"alignItemsCenter"}}>
+ {isYaml && <FlexItem>
+ <ToggleGroup>
+ <ToggleGroupItem text="Design" buttonId="design" isSelected={mode === "design"}
+ onChange={s => this.props.setMode.call(this, "design")} />
+ <ToggleGroupItem text="Code" buttonId="code" isSelected={mode === "code"}
+ onChange={s => this.props.setMode.call(this, "code")} />
+ </ToggleGroup>
+ </FlexItem>}
+
+ {isProperties && <FlexItem>
+ <Checkbox
+ id="advanced"
+ label="Edit advanced"
+ isChecked={editAdvancedProperties}
+ onChange={checked => this.props.setEditAdvancedProperties.call(this, checked)}
+ />
+ </FlexItem>}
+ {isProperties && <FlexItem>
+ <Button variant="primary" icon={<PlusIcon/>} onClick={e => this.props.addProperty.call(this)}>Add property</Button>
+ </FlexItem>}
+
+ {isFile && <FlexItem>
+ <Tooltip content="Download source" position={"bottom-end"}>
+ <Button variant="control" icon={<DownloadIcon/>} onClick={e => this.props.download.call(this)}/>
+ </Tooltip>
+ </FlexItem>}
+ {isIntegration && <FlexItem>
+ <Tooltip content="Download image" position={"bottom-end"}>
+ <Button variant="control" icon={<DownloadImageIcon/>} onClick={e => this.props.downloadImage.call(this)}/>
+ </Tooltip>
+ </FlexItem>}
+ {!isFile && <FlexItem>
+ <Button variant={"primary"} icon={<PlusIcon/>}
+ onClick={e => this.props.setCreateModalOpen.call(this)}>Create</Button>
+ </FlexItem>}
+ {!isFile && <FlexItem>
+ <Button variant="secondary" icon={<UploadIcon/>}
+ onClick={e => this.props.setUploadModalOpen.call(this)}>Upload</Button>
+ </FlexItem>}
+ </Flex>}
+ </ToolbarContent>
+ </Toolbar>
+ }
+}
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx b/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx
index 08bb7c7..32a7a4d 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx
@@ -144,7 +144,7 @@ export class ProjectsPage extends React.Component<Props, State> {
</TextContent>);
closeModal = () => {
- this.setState({isCreateModalOpen: false, isCopy: false, name: this.props.config.groupId, description: '', projectId: ''});
+ this.setState({isCreateModalOpen: false, isCopy: false, name: this.props.config.groupId, description: '', projectId: '', runtime: this.props.config.runtime });
this.onGetProjects();
}
@@ -246,7 +246,6 @@ export class ProjectsPage extends React.Component<Props, State> {
}
render() {
- const runtime = this.props.config?.runtime ? this.props.config.runtime : "QUARKUS";
const projects = this.state.projects.filter(p => p.name.toLowerCase().includes(this.state.filter) || p.description.toLowerCase().includes(this.state.filter));
return (
<PageSection className="kamelet-section projects-page" padding={{default: 'noPadding'}}>
@@ -270,8 +269,8 @@ export class ProjectsPage extends React.Component<Props, State> {
{projects.map(project => (
<Tr key={project.projectId}>
<Td modifier={"fitContent"}>
- <Tooltip content={runtime} position={"left"}>
- <Badge className="runtime-badge">{runtime.substring(0, 1)}</Badge>
+ <Tooltip content={project.runtime} position={"left"}>
+ <Badge className="runtime-badge">{project.runtime.substring(0, 1).toUpperCase()}</Badge>
</Tooltip>
</Td>
<Td>