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/02/13 16:50:22 UTC

[camel-karavan] branch main updated: Fix #657

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 b2f74733 Fix #657
b2f74733 is described below

commit b2f74733ac05a6b4999f5ef43c86fc384322f2e6
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Mon Feb 13 10:37:34 2023 -0500

    Fix #657
---
 .../src/main/webui/src/projects/ProjectInfo.tsx    | 10 ++----
 .../src/main/webui/src/projects/ProjectPage.tsx    | 37 +++++++++++++---------
 .../main/webui/src/projects/ProjectPageToolbar.tsx | 13 +++++---
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx b/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
index ecb89a07..658278f3 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
@@ -22,6 +22,7 @@ import DeleteIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon
 interface Props {
     project: Project,
     config: any,
+    needCommit: boolean,
     files: ProjectFile[],
     showLog: (type: 'container' | 'pipeline', name: string, environment: string) => void
     deleteEntity: (type: 'pod' | 'deployment', name: string, environment: string) => void
@@ -175,14 +176,9 @@ export class ProjectInfo extends React.Component<Props, State> {
         }
     }
 
-    needCommit() :boolean {
-        const {project, files} = this.props;
-        return files.filter(f => f.lastUpdate > project.lastCommitTimestamp).length > 0;
-    }
-
     getLastUpdatePanel() {
-        const {project} = this.props;
-        const color = this.needCommit() ? "grey" : "green";
+        const {project, needCommit} = this.props;
+        const color = needCommit ? "grey" : "green";
         return (
             <Flex direction={{default:"row"}} justifyContent={{default: "justifyContentFlexStart"}}>
                 {project?.lastCommitTimestamp && project?.lastCommitTimestamp > 0 &&
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
index d316e440..2278cabb 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
@@ -78,25 +78,30 @@ export class ProjectPage extends React.Component<Props, State> {
         this.onRefresh();
     }
 
+    needCommit(): boolean {
+        const {project, files} = this.state;
+        return project ? files.filter(f => f.lastUpdate > project.lastCommitTimestamp).length > 0 : false;
+    }
+
     onRefresh = () => {
         if (this.props.project) {
             KaravanApi.getProject(this.props.project.projectId, (project: Project) => {
-                this.setState({project: project});
+                this.setState({project: project, key: Math.random().toString()});
                 KaravanApi.getTemplatesFiles((files: ProjectFile[]) => {
                     files.filter(f => f.name.endsWith("java"))
                         .filter(f => f.name.startsWith(project.runtime))
                         .forEach(f => {
-                            const name = f.name.replace(project.runtime+"-", '').replace(".java", '');
+                            const name = f.name.replace(project.runtime + "-", '').replace(".java", '');
                             TemplateApi.saveTemplate(name, f.code);
                         })
                 });
             });
             KaravanApi.getFiles(this.props.project.projectId, (files: []) => {
-                this.setState({files: files})
+                this.setState({files: files, key: Math.random().toString()})
             });
 
             KubernetesAPI.inKubernetes = true;
-            if (!this.isBuildIn()){
+            if (!this.isBuildIn()) {
                 KaravanApi.getConfigMaps(this.state.environment, (any: []) => {
                     KubernetesAPI.setConfigMaps(any);
                 });
@@ -110,15 +115,15 @@ export class ProjectPage extends React.Component<Props, State> {
         }
     }
 
-    isBuildIn():boolean {
+    isBuildIn(): boolean {
         return ['kamelets', 'templates'].includes(this.props.project.projectId);
     }
 
-    isKameletsProject():boolean {
+    isKameletsProject(): boolean {
         return this.props.project.projectId === 'kamelets';
     }
 
-    isTemplatesProject():boolean {
+    isTemplatesProject(): boolean {
         return this.props.project.projectId === 'templates';
     }
 
@@ -178,8 +183,9 @@ export class ProjectPage extends React.Component<Props, State> {
     }
 
     tools = () => {
-        return <ProjectPageToolbar
+        return <ProjectPageToolbar key={this.state.key}
             project={this.props.project}
+            needCommit={this.needCommit()}
             file={this.state.file}
             mode={this.state.mode}
             isTemplates={this.isTemplatesProject()}
@@ -196,7 +202,7 @@ export class ProjectPage extends React.Component<Props, State> {
             onRefresh={this.onRefresh}
         />
     }
-    
+
 
     title = () => {
         const {project} = this.props;
@@ -212,7 +218,7 @@ export class ProjectPage extends React.Component<Props, State> {
                             this.setState({file: undefined})
                             this.onRefresh();
                         }}>
-                            <Flex direction={{default:"row"}}>
+                            <Flex direction={{default: "row"}}>
                                 <FlexItem>{"Project: " + project?.projectId}</FlexItem>
                                 <FlexItem><Badge>{getProjectFileType(file)}</Badge></FlexItem>
                             </Flex>
@@ -269,7 +275,7 @@ export class ProjectPage extends React.Component<Props, State> {
                 filename={file.name}
                 yaml={file.code}
                 onSave={(name, yaml) => this.save(name, yaml)}
-                onSaveCustomCode={(name, code) => this.post(new ProjectFile(name+".java", project.projectId, code, Date.now()))}
+                onSaveCustomCode={(name, code) => this.post(new ProjectFile(name + ".java", project.projectId, code, Date.now()))}
                 onGetCustomCode={(name, javaType) => {
                     return new Promise<string | undefined>(resolve => resolve(files.filter(f => f.name === name + ".java")?.at(0)?.code))
                 }}
@@ -406,10 +412,11 @@ export class ProjectPage extends React.Component<Props, State> {
                 {!isBuildIn &&
                     <PageSection padding={{default: "padding"}}>
                         {tab === 'development' && project && <ProjectInfo project={project}
-                                                               files={files}
-                                                               config={this.props.config}
-                                                               deleteEntity={this.deleteEntity}
-                                                               showLog={this.showLogs}/>}
+                                                                          needCommit={this.needCommit()}
+                                                                          files={files}
+                                                                          config={this.props.config}
+                                                                          deleteEntity={this.deleteEntity}
+                                                                          showLog={this.showLogs}/>}
                         {tab === 'development' && <ProjectFilesTable files={files}
                                                                      onOpenDeleteConfirmation={this.openDeleteConfirmation}
                                                                      onSelect={this.select}/>}
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
index 3b6db2d3..e4acc565 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
@@ -21,6 +21,7 @@ import {KaravanApi} from "../api/KaravanApi";
 
 interface Props {
     project: Project,
+    needCommit: boolean,
     isTemplates: boolean,
     isKamelets: boolean,
     config: any,
@@ -61,7 +62,7 @@ export class ProjectPageToolbar extends React.Component<Props> {
     }
 
     getTemplatesToolbar() {
-        const {file, editAdvancedProperties} = this.props;
+        const {file, editAdvancedProperties, needCommit} = this.props;
         const {isPushing} = this.state;
         const isProperties = file !== undefined && file.name.endsWith("properties");
         return <Toolbar id="toolbar-group-types">
@@ -78,7 +79,9 @@ export class ProjectPageToolbar extends React.Component<Props> {
                         </FlexItem>}
                         <FlexItem>
                             <Tooltip content="Commit and push to git" position={"bottom"}>
-                                <Button isLoading={isPushing ? true : undefined} isSmall variant="secondary"
+                                <Button isLoading={isPushing ? true : undefined}
+                                        isSmall
+                                        variant={needCommit ? "primary" : "secondary"}
                                         className="project-button"
                                         icon={!isPushing ? <PushIcon/> : <div></div>}
                                         onClick={e => this.push()}>
@@ -94,7 +97,7 @@ export class ProjectPageToolbar extends React.Component<Props> {
 
     getProjectToolbar() {
         const {isPushing} = this.state;
-        const {file, mode, editAdvancedProperties, addProperty, setEditAdvancedProperties, download, downloadImage, setCreateModalOpen, setUploadModalOpen} = this.props;
+        const {file, needCommit, mode, editAdvancedProperties, addProperty, setEditAdvancedProperties, download, downloadImage, setCreateModalOpen, setUploadModalOpen} = this.props;
         const isFile = file !== undefined;
         const isYaml = file !== undefined && file.name.endsWith("yaml");
         const isIntegration = isYaml && file?.code && CamelDefinitionYaml.yamlIsIntegration(file.code);
@@ -143,7 +146,9 @@ export class ProjectPageToolbar extends React.Component<Props> {
                         </FlexItem>}
                         {!isFile && <FlexItem>
                             <Tooltip content="Commit and push to git" position={"bottom-end"}>
-                                <Button isLoading={isPushing ? true : undefined} isSmall variant="secondary"
+                                <Button isLoading={isPushing ? true : undefined}
+                                        isSmall
+                                        variant={needCommit ? "primary" : "secondary"}
                                         className="project-button"
                                         icon={!isPushing ? <PushIcon/> : <div></div>}
                                         onClick={e => this.push()}>