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/07/02 21:22:01 UTC
[camel-karavan] 01/03: Refactoring for file upload #809
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 bba1c1dee7f29edcec3bf14d80cc26459b7ae0fa
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Sun Jul 2 14:19:04 2023 -0400
Refactoring for file upload #809
---
.../src/main/webui/src/project/ProjectPage.tsx | 6 +-----
.../src/project/{ => files}/CreateFileModal.tsx | 10 +++++-----
.../src/project/{ => files}/DeleteFileModal.tsx | 6 +++---
.../src/main/webui/src/project/files/FilesTab.tsx | 21 +++++++++++++++++++-
.../files/{UploadModal.tsx => UploadFileModal.tsx} | 23 +++++++++++-----------
5 files changed, 41 insertions(+), 25 deletions(-)
diff --git a/karavan-app/src/main/webui/src/project/ProjectPage.tsx b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
index 9e87c5a0..2f2ac1c4 100644
--- a/karavan-app/src/main/webui/src/project/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
@@ -8,10 +8,8 @@ import FileSaver from "file-saver";
import {ProjectToolbar} from "./ProjectToolbar";
import {ProjectLogPanel} from "./log/ProjectLogPanel";
import {ProjectFile, ProjectFileTypes} from "../api/ProjectModels";
-import {useFileStore, useProjectStore, useRunnerStore} from "../api/ProjectStore";
+import {useFileStore, useProjectStore} from "../api/ProjectStore";
import {MainToolbar} from "../common/MainToolbar";
-import {CreateFileModal} from "./CreateFileModal";
-import {DeleteFileModal} from "./DeleteFileModal";
import {ProjectTitle} from "./ProjectTitle";
import {ProjectPanel} from "./ProjectPanel";
import {FileEditor} from "./file/FileEditor";
@@ -99,8 +97,6 @@ export const ProjectPage = () => {
</PageSection>
{file === undefined && operation !== 'select' && <ProjectPanel/>}
{file !== undefined && operation === 'select' && <FileEditor/>}
- <CreateFileModal types={types}/>
- <DeleteFileModal />
<ProjectLogPanel/>
</PageSection>
)
diff --git a/karavan-app/src/main/webui/src/project/CreateFileModal.tsx b/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
similarity index 92%
rename from karavan-app/src/main/webui/src/project/CreateFileModal.tsx
rename to karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
index c13ede3e..90d1d682 100644
--- a/karavan-app/src/main/webui/src/project/CreateFileModal.tsx
+++ b/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
@@ -7,13 +7,13 @@ import {
Form,
ToggleGroupItem, ToggleGroup, FormHelperText, HelperText, HelperTextItem, TextInput
} from '@patternfly/react-core';
-import '../designer/karavan.css';
+import '../../designer/karavan.css';
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
-import {useFileStore, useProjectStore} from "../api/ProjectStore";
-import {ProjectFile, ProjectFileTypes} from "../api/ProjectModels";
-import {CamelUi} from "../designer/utils/CamelUi";
-import {ProjectService} from "../api/ProjectService";
+import {useFileStore, useProjectStore} from "../../api/ProjectStore";
+import {ProjectFile, ProjectFileTypes} from "../../api/ProjectModels";
+import {CamelUi} from "../../designer/utils/CamelUi";
+import {ProjectService} from "../../api/ProjectService";
interface Props {
types: string[]
diff --git a/karavan-app/src/main/webui/src/project/DeleteFileModal.tsx b/karavan-app/src/main/webui/src/project/files/DeleteFileModal.tsx
similarity index 88%
rename from karavan-app/src/main/webui/src/project/DeleteFileModal.tsx
rename to karavan-app/src/main/webui/src/project/files/DeleteFileModal.tsx
index 4ed433ea..5995c6c9 100644
--- a/karavan-app/src/main/webui/src/project/DeleteFileModal.tsx
+++ b/karavan-app/src/main/webui/src/project/files/DeleteFileModal.tsx
@@ -4,9 +4,9 @@ import {
Modal,
ModalVariant,
} from '@patternfly/react-core';
-import '../designer/karavan.css';
-import {useFileStore} from "../api/ProjectStore";
-import {ProjectService} from "../api/ProjectService";
+import '../../designer/karavan.css';
+import {useFileStore} from "../../api/ProjectStore";
+import {ProjectService} from "../../api/ProjectService";
export const DeleteFileModal = () => {
diff --git a/karavan-app/src/main/webui/src/project/files/FilesTab.tsx b/karavan-app/src/main/webui/src/project/files/FilesTab.tsx
index 28e25c10..b6767a64 100644
--- a/karavan-app/src/main/webui/src/project/files/FilesTab.tsx
+++ b/karavan-app/src/main/webui/src/project/files/FilesTab.tsx
@@ -13,15 +13,19 @@ import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-icon";
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import {useFilesStore, useFileStore, useProjectStore} from "../../api/ProjectStore";
-import {getProjectFileType, ProjectFile} from "../../api/ProjectModels";
+import {getProjectFileType, ProjectFile, ProjectFileTypes} from "../../api/ProjectModels";
import {FileToolbar} from "./FilesToolbar";
import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
import FileSaver from "file-saver";
+import {CreateFileModal} from "./CreateFileModal";
+import {DeleteFileModal} from "./DeleteFileModal";
+import {UploadFileModal} from "./UploadFileModal";
export const FilesTab = () => {
const {files} = useFilesStore();
const {project} = useProjectStore();
+ const {operation} = useFileStore();
function getDate(lastUpdate: number): string {
if (lastUpdate) {
@@ -44,6 +48,18 @@ export const FilesTab = () => {
}
}
+ function isBuildIn(): boolean {
+ return ['kamelets', 'templates'].includes(project.projectId);
+ }
+
+ function isKameletsProject(): boolean {
+ return project.projectId === 'kamelets';
+ }
+
+ const types = isBuildIn()
+ ? (isKameletsProject() ? ['KAMELET'] : ['CODE', 'PROPERTIES'])
+ : ProjectFileTypes.filter(p => !['PROPERTIES', 'LOG', 'KAMELET'].includes(p.name)).map(p => p.name);
+
return (
<PageSection className="project-tab-panel" padding={{default: "padding"}}>
<Panel>
@@ -115,6 +131,9 @@ export const FilesTab = () => {
}
</Tbody>
</TableComposable>
+ <CreateFileModal types={types}/>
+ <UploadFileModal projectId={project.projectId} isOpen={operation === 'upload'} />
+ <DeleteFileModal />
</PageSection>
)
}
diff --git a/karavan-app/src/main/webui/src/project/files/UploadModal.tsx b/karavan-app/src/main/webui/src/project/files/UploadFileModal.tsx
similarity index 91%
rename from karavan-app/src/main/webui/src/project/files/UploadModal.tsx
rename to karavan-app/src/main/webui/src/project/files/UploadFileModal.tsx
index d0d73e65..d4a067d3 100644
--- a/karavan-app/src/main/webui/src/project/files/UploadModal.tsx
+++ b/karavan-app/src/main/webui/src/project/files/UploadFileModal.tsx
@@ -19,14 +19,15 @@ import {
TextInput,
Button, Modal, FormGroup, ModalVariant, Switch, Form, FileUpload, Radio
} from '@patternfly/react-core';
-import '../designer/karavan.css';
-import {ProjectFile} from "../../api/ProjectModels";
+import '../../designer/karavan.css';
+import {ProjectFile, ToastMessage} from "../../api/ProjectModels";
import {KaravanApi} from "../../api/KaravanApi";
+import {useFileStore} from "../../api/ProjectStore";
+import {ProjectEventBus} from "../../api/ProjectEventBus";
interface Props {
projectId: string,
isOpen: boolean,
- onClose: any
}
interface State {
@@ -40,7 +41,7 @@ interface State {
generateRoutes: boolean
}
-export class UploadModal extends React.Component<Props, State> {
+export class UploadFileModal extends React.Component<Props, State> {
public state: State = {
type: 'integration',
@@ -54,7 +55,7 @@ export class UploadModal extends React.Component<Props, State> {
};
closeModal = () => {
- this.props.onClose?.call(this);
+ useFileStore.setState({operation:"none", file: undefined});
}
saveAndCloseModal = () => {
@@ -64,20 +65,20 @@ export class UploadModal extends React.Component<Props, State> {
KaravanApi.postProjectFile(file, res => {
if (res.status === 200) {
//TODO show notification
- this.props.onClose?.call(this);
+ this.closeModal();
} else {
- // TODO show notification
- this.props.onClose?.call(this);
+ this.closeModal();
+ ProjectEventBus.sendAlert(new ToastMessage("Error", res.statusText, "warning"))
}
})
} else {
KaravanApi.postOpenApi(file, state.generateRest, state.generateRoutes, state.integrationName, res => {
if (res.status === 200) {
console.log(res) //TODO show notification
- this.props.onClose?.call(this);
+ this.closeModal();
} else {
- console.log(res) //TODO show notification
- this.props.onClose?.call(this);
+ this.closeModal();
+ ProjectEventBus.sendAlert(new ToastMessage("Error", res.statusText, "warning"))
}
})
}