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 0e6c02b Copy - paste (#236) 0e6c02b is described below commit 0e6c02ba0bc69f87fa7e538c0ab9b24f6e8b45ad Author: Marat Gubaidullin <marat.gubaidul...@gmail.com> AuthorDate: Sun Mar 27 23:18:40 2022 -0400 Copy - paste (#236) --- karavan-designer/src/designer/KaravanDesigner.tsx | 5 ++--- karavan-designer/src/designer/karavan.css | 12 ++++++++++ .../src/designer/rest/RestDesigner.tsx | 2 ++ .../src/designer/route/DslProperties.tsx | 26 ++++++++++++++++++++-- .../src/designer/route/RouteDesigner.tsx | 7 ++++++ 5 files changed, 47 insertions(+), 5 deletions(-) diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx index 59b3153..6388480 100644 --- a/karavan-designer/src/designer/KaravanDesigner.tsx +++ b/karavan-designer/src/designer/KaravanDesigner.tsx @@ -22,7 +22,7 @@ import { import './karavan.css'; import {RouteDesigner} from "./route/RouteDesigner"; import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml"; -import {Integration} from "karavan-core/lib/model/IntegrationDefinition"; +import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import {CamelUi} from "./utils/CamelUi"; import {BeansDesigner} from "./beans/BeansDesigner"; @@ -31,7 +31,6 @@ import {ErrorDesigner} from "./error/ErrorDesigner"; import {TemplatesDesigner} from "./templates/TemplatesDesigner"; import {ExceptionDesigner} from "./exception/ExceptionDesigner"; import {DependenciesDesigner} from "./dependencies/DependenciesDesigner"; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; interface Props { onSave?: (filename: string, yaml: string) => void @@ -45,7 +44,7 @@ interface Props { interface State { tab: string, integration: Integration, - key: string, + key: string } export class KaravanDesigner extends React.Component<Props, State> { diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css index 2032dbd..217c17e 100644 --- a/karavan-designer/src/designer/karavan.css +++ b/karavan-designer/src/designer/karavan.css @@ -242,6 +242,18 @@ display: contents; } +.karavan .properties .headers .top { + width: 100%; + display: flex; + flex-direction: row; +} + +.karavan .properties .headers .top h1{ + width: 100%; + margin-top: auto; + margin-bottom: auto; +} + .karavan .properties .footer { height: 100%; display: contents; diff --git a/karavan-designer/src/designer/rest/RestDesigner.tsx b/karavan-designer/src/designer/rest/RestDesigner.tsx index a59b994..253dfd4 100644 --- a/karavan-designer/src/designer/rest/RestDesigner.tsx +++ b/karavan-designer/src/designer/rest/RestDesigner.tsx @@ -241,6 +241,8 @@ export class RestDesigner extends React.Component<Props, State> { step={this.state.selectedStep} onIntegrationUpdate={this.onIntegrationUpdate} onPropertyUpdate={this.onPropertyUpdate} + clipboardStep={undefined} + onSaveClipboardStep={element => {}} /> </div> {this.getSelectorModal()} diff --git a/karavan-designer/src/designer/route/DslProperties.tsx b/karavan-designer/src/designer/route/DslProperties.tsx index 97bf2ec..2fb5018 100644 --- a/karavan-designer/src/designer/route/DslProperties.tsx +++ b/karavan-designer/src/designer/route/DslProperties.tsx @@ -19,7 +19,7 @@ import { Form, Text, Title, - TextVariants, ExpandableSection, + TextVariants, ExpandableSection, Button, Tooltip, } from '@patternfly/react-core'; import '../karavan.css'; import "@patternfly/patternfly/patternfly.css"; @@ -36,12 +36,16 @@ import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import {CamelUi, RouteToCreate} from "../utils/CamelUi"; import {CamelMetadataApi, PropertyMeta} from "karavan-core/lib/model/CamelMetadata"; import {IntegrationHeader} from "../utils/KaravanComponents"; +import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon' +import PasteIcon from '@patternfly/react-icons/dist/esm/icons/paste-icon' interface Props { integration: Integration, step?: CamelElement, onIntegrationUpdate?: any, onPropertyUpdate?: (element: CamelElement, updatedUuid: string, newRoute?: RouteToCreate) => void + clipboardStep?: CamelElement + onSaveClipboardStep: (element?: CamelElement) => void } interface State { @@ -67,6 +71,15 @@ export class DslProperties extends React.Component<Props, State> { } } + pasteClipboardStep = () => { + if (this.props.clipboardStep && this.state.step) { + const clone = CamelUtil.cloneStep(this.props.clipboardStep); + clone.uuid = this.state.step.uuid; + this.setStep(clone) + this.props.onPropertyUpdate?.call(this, clone, this.state.step.uuid); + } + } + dataFormatChanged = (value: DataFormatDefinition) => { value.uuid = this.state.step?.uuid ? this.state.step?.uuid : value.uuid; this.setStep(value); @@ -119,8 +132,17 @@ export class DslProperties extends React.Component<Props, State> { : this.state.step?.dslName ? CamelMetadataApi.getCamelModelMetadataByClassName(this.state.step?.dslName)?.description : title; return ( <div className="headers"> - <Title headingLevel="h1" size="md">{title}</Title> + <div className="top"> + <Title headingLevel="h1" size="md">{title}</Title> + <Tooltip content="Copy step" position="bottom"> + <Button variant="link" onClick={() => this.props.onSaveClipboardStep?.call(this, this.state.step)} icon={<CopyIcon />}/> + </Tooltip> + <Tooltip content="Paste step" position="bottom"> + <Button variant="link" onClick={() => this.pasteClipboardStep()} icon={<PasteIcon />}/> + </Tooltip> + </div> <Text component={TextVariants.p}>{description}</Text> + </div> ) } diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx index 31d2914..64d9005 100644 --- a/karavan-designer/src/designer/route/RouteDesigner.tsx +++ b/karavan-designer/src/designer/route/RouteDesigner.tsx @@ -56,6 +56,7 @@ interface State { height: number top: number left: number + clipboardStep?: CamelElement } export class RouteDesigner extends React.Component<Props, State> { @@ -92,6 +93,10 @@ export class RouteDesigner extends React.Component<Props, State> { } } + saveToClipboard = (step?: CamelElement): void => { + this.setState({clipboardStep: step, key: Math.random().toString()}); + } + unselectElement = (evt: React.MouseEvent<HTMLDivElement, MouseEvent>) => { if ((evt.target as any).dataset.click === 'FLOWS') { evt.stopPropagation() @@ -292,6 +297,8 @@ export class RouteDesigner extends React.Component<Props, State> { step={this.state.selectedStep} onIntegrationUpdate={this.onIntegrationUpdate} onPropertyUpdate={this.onPropertyUpdate} + clipboardStep={this.state.clipboardStep} + onSaveClipboardStep={this.saveToClipboard} /> </div> {this.getSelectorModal()}