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 30d6dca Edit advanced properties (#409)
30d6dca is described below
commit 30d6dcadc4eeb732418f7d46e435cb00de417fab
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Mon Jul 11 11:03:54 2022 -0400
Edit advanced properties (#409)
---
karavan-app/pom.xml | 2 +-
karavan-app/src/main/webapp/src/index.css | 10 ++++++
.../src/main/webapp/src/projects/ProjectPage.tsx | 42 +++++++++++++++++++---
.../main/webapp/src/projects/PropertiesEditor.tsx | 4 ++-
.../main/webapp/src/projects/PropertiesTable.tsx | 39 +++++---------------
5 files changed, 59 insertions(+), 38 deletions(-)
diff --git a/karavan-app/pom.xml b/karavan-app/pom.xml
index 64b0c30..a405d30 100644
--- a/karavan-app/pom.xml
+++ b/karavan-app/pom.xml
@@ -73,7 +73,7 @@
<dependency>
<groupId>io.quarkiverse.jgit</groupId>
<artifactId>quarkus-jgit</artifactId>
- <version>2.0.0</version>
+ <version>2.1.0</version>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
diff --git a/karavan-app/src/main/webapp/src/index.css
b/karavan-app/src/main/webapp/src/index.css
index 1378930..c8c1f77 100644
--- a/karavan-app/src/main/webapp/src/index.css
+++ b/karavan-app/src/main/webapp/src/index.css
@@ -179,6 +179,16 @@
display: none;
}
+.karavan .project-page .project-properties .delete-cell {
+ padding: 0;
+ margin: 0;
+ min-width: 0;
+}
+.karavan .project-page .project-properties .delete-button {
+ padding: 0 0 0 6px;
+ margin: 0;
+}
+
.karavan .action-cell {
padding: 0;
}
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
index 3c9e0c2..faf732c 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
@@ -21,7 +21,7 @@ import {
ToggleGroup,
ToggleGroupItem,
CodeBlockCode,
- CodeBlock, Skeleton
+ CodeBlock, Skeleton, Switch, Checkbox
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {MainToolbar} from "../MainToolbar";
@@ -40,6 +40,8 @@ import PlusIcon from
"@patternfly/react-icons/dist/esm/icons/plus-icon";
import {CreateFileModal} from "./CreateFileModal";
import {PropertiesEditor} from "./PropertiesEditor";
import {ProjectHeader} from "./ProjectHeader";
+import {ProjectModel, ProjectProperty} from
"karavan-core/lib/model/ProjectModel";
+import {ProjectModelApi} from "karavan-core/lib/api/ProjectModelApi";
interface Props {
project: Project,
@@ -55,7 +57,9 @@ interface State {
isDeleteModalOpen: boolean,
isCreateModalOpen: boolean,
fileToDelete?: ProjectFile,
- mode: "design" | "code";
+ mode: "design" | "code",
+ editAdvancedProperties: boolean
+ key: string
}
export class ProjectPage extends React.Component<Props, State> {
@@ -66,7 +70,9 @@ export class ProjectPage extends React.Component<Props,
State> {
isCreateModalOpen: false,
isDeleteModalOpen: false,
files: [],
- mode: "design"
+ mode: "design",
+ editAdvancedProperties: false,
+ key: ''
};
componentDidMount() {
@@ -120,19 +126,44 @@ export class ProjectPage extends React.Component<Props,
State> {
}
}
+ addProperty() {
+ const file = this.state.file;
+ if (file){
+ const project = file ?
ProjectModelApi.propertiesToProject(file?.code) : ProjectModel.createNew();
+ const props = project.properties;
+ props.push(ProjectProperty.createNew("", ""))
+ this.save(file.name, ProjectModelApi.propertiesToString(props));
+ this.setState({key: Math.random().toString()});
+ }
+ }
+
tools = () => {
const {file, mode} = this.state;
const isFile = file !== undefined;
const isYaml = file !== undefined && file.name.endsWith("yaml");
+ const isProperties = file !== undefined &&
file.name.endsWith("properties");
return <Toolbar id="toolbar-group-types">
<ToolbarContent>
- <Flex className="toolbar" direction={{default: "row"}}>
+ <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>
<Button variant="secondary" icon={<DownloadIcon/>}
onClick={e => this.download()}>Download</Button>
</FlexItem>}
@@ -363,7 +394,8 @@ export class ProjectPage extends React.Component<Props,
State> {
const file = this.state.file;
return (
file !== undefined &&
- <PropertiesEditor
+ <PropertiesEditor key={this.state.key}
+ editAdvanced={this.state.editAdvancedProperties}
file={file}
onSave={(name, code) => this.save(name, code)}
/>
diff --git a/karavan-app/src/main/webapp/src/projects/PropertiesEditor.tsx
b/karavan-app/src/main/webapp/src/projects/PropertiesEditor.tsx
index 592350c..4b6ceec 100644
--- a/karavan-app/src/main/webapp/src/projects/PropertiesEditor.tsx
+++ b/karavan-app/src/main/webapp/src/projects/PropertiesEditor.tsx
@@ -3,13 +3,14 @@ import {
PageSection,
} from '@patternfly/react-core';
import '../designer/karavan.css';
-import {Project, ProjectFile, ProjectFileTypes} from "../models/ProjectModels";
+import {ProjectFile} from "../models/ProjectModels";
import {PropertiesTable} from "./PropertiesTable";
import {ProjectModel} from "karavan-core/lib/model/ProjectModel";
import {ProjectModelApi} from "karavan-core/lib/api/ProjectModelApi";
interface Props {
file: ProjectFile,
+ editAdvanced: boolean,
onSave?: (filename: string, code: string) => void
}
@@ -31,6 +32,7 @@ export class PropertiesEditor extends React.Component<Props,
State> {
return (
<PageSection isFilled className="kamelets-page" padding={{default:
file !== undefined ? 'noPadding' : 'padding'}}>
<PropertiesTable
+ editAdvanced={this.props.editAdvanced}
properties={project.properties}
onChange={properties => this.props.onSave?.call(this,
file.name, ProjectModelApi.propertiesToString(properties))}
/>
diff --git a/karavan-app/src/main/webapp/src/projects/PropertiesTable.tsx
b/karavan-app/src/main/webapp/src/projects/PropertiesTable.tsx
index eaa5b23..6f83381 100644
--- a/karavan-app/src/main/webapp/src/projects/PropertiesTable.tsx
+++ b/karavan-app/src/main/webapp/src/projects/PropertiesTable.tsx
@@ -16,23 +16,20 @@
*/
import React from 'react';
import {
- Button, Flex, FlexItem,
+ Button,
Modal,
PageSection,
- Panel,
- PanelMain,
- PanelMainBody,
TextInput
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {TableComposable, Tbody, Td, Th, Thead, Tr} from
"@patternfly/react-table";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-icon";
-import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {ProjectProperty} from "karavan-core/lib/model/ProjectModel";
interface Props {
properties: ProjectProperty[]
onChange?: (properties: ProjectProperty[]) => void
+ editAdvanced: boolean
}
interface State {
@@ -46,7 +43,7 @@ export class PropertiesTable extends React.Component<Props,
State> {
public state: State = {
properties: this.props.properties,
showDeleteConfirmation: false,
- };
+ }
sendUpdate = (props: ProjectProperty[]) => {
this.props.onChange?.call(this, props);
@@ -71,13 +68,6 @@ export class PropertiesTable extends React.Component<Props,
State> {
this.sendUpdate(props);
}
- addProperty() {
- const props = [...this.state.properties];
- props.push(ProjectProperty.createNew("", ""))
- this.setState({properties: props, showDeleteConfirmation: false,
deleteId: undefined});
- this.sendUpdate(props);
- }
-
getDeleteConfirmation() {
return (<Modal
className="modal-delete"
@@ -111,17 +101,17 @@ export class PropertiesTable extends
React.Component<Props, State> {
<Tr>
<Th key='name'>Name</Th>
<Th key='value'>Value</Th>
- <Td></Td>
+ <Th></Th>
</Tr>
</Thead>
<Tbody>
{properties.map((property, idx: number) => {
- const readOnly = false;//
property.key.startsWith("camel.jbang");
+ const readOnly =
property.key.startsWith("camel.jbang") && !this.props.editAdvanced;
return (
<Tr key={property.id}>
- <Td noPadding width={20}
dataLabel="key">{this.getTextInputField(property, "key", readOnly)}</Td>
- <Td noPadding width={10}
dataLabel="value">{this.getTextInputField(property, "value", readOnly)}</Td>
- <Td noPadding isActionCell
dataLabel="delete">
+ <Td noPadding width={10}
dataLabel="key">{this.getTextInputField(property, "key", readOnly)}</Td>
+ <Td noPadding width={20}
dataLabel="value">{this.getTextInputField(property, "value", readOnly)}</Td>
+ <Td noPadding isActionCell
dataLabel="delete" className="delete-cell">
{!readOnly && <Button
variant={"plain"} icon={<DeleteIcon/>} className={"delete-button"}
onClick={event => this.startDelete(property.id)}/>}
</Td>
@@ -130,19 +120,6 @@ export class PropertiesTable extends
React.Component<Props, State> {
</Tbody>
</TableComposable>}
{this.state.showDeleteConfirmation &&
this.getDeleteConfirmation()}
- <Panel>
- <PanelMain>
- <PanelMainBody>
- <Flex direction={{default:"row"}} >
- <FlexItem align={{ default: 'alignRight' }}>
- <Button isInline variant={"primary"}
icon={<PlusIcon/>}
- className={"add-button"}
- onClick={event =>
this.addProperty()}>Add property</Button>
- </FlexItem>
- </Flex>
- </PanelMainBody>
- </PanelMain>
- </Panel>
</PageSection>
)
}
