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 738132f Fix tour2 (#298)
738132f is described below
commit 738132f229b25222a5e267702c52d1022dec14b9
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Fri Apr 8 23:47:54 2022 -0400
Fix tour2 (#298)
* Fix packages
* fix tour issues
---
karavan-designer/src/designer/KaravanDesigner.tsx | 19 +++++-----
karavan-designer/src/designer/KaravanTour.tsx | 45 ++++++++++++-----------
2 files changed, 33 insertions(+), 31 deletions(-)
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx
b/karavan-designer/src/designer/KaravanDesigner.tsx
index c3840df..3a906b5 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -52,7 +52,6 @@ interface State {
showTour: boolean
showStartHelp: boolean
cancelTour: boolean
- write: boolean
}
export class KaravanDesigner extends React.Component<Props, State> {
@@ -67,17 +66,16 @@ export class KaravanDesigner extends React.Component<Props,
State> {
showTour: false,
showStartHelp: this.props.showStartHelp,
cancelTour: false,
- write: true
};
componentDidUpdate = (prevProps: Readonly<Props>, prevState:
Readonly<State>, snapshot?: any) => {
- if (prevState.key !== this.state.key && this.state.write === true) {
+ if (prevState.key !== this.state.key) {
this.props.onSave?.call(this, this.props.filename,
this.getCode(this.state.integration), this.state.propertyOnly);
}
}
- save = (integration: Integration, propertyOnly: boolean, write: boolean =
true): void => {
- this.setState({key: Math.random().toString(), integration:
integration, propertyOnly: propertyOnly, write: write});
+ save = (integration: Integration, propertyOnly: boolean): void => {
+ this.setState({key: Math.random().toString(), integration:
integration, propertyOnly: propertyOnly});
}
getCode = (integration: Integration): string => {
@@ -110,16 +108,17 @@ export class KaravanDesigner extends
React.Component<Props, State> {
getHelpWindow() {
const show = this.state.showStartHelp &&
this.state.integration.spec.flows?.filter(f => f.dslName ===
'RouteDefinition').length === 0;
return (<Modal
+ aria-label="Welcome"
className="modal-help"
title="Welcome to Karavan!"
- header={<div style={{display:"flex"}}><WandIcon
style={{marginTop:"auto", marginBottom:"auto", marginRight:"10px"}}/><Title
headingLevel={"h2"}>Welcome to Karavan!</Title></div>}
+ header={<div style={{display:"flex"}}><WandIcon
style={{marginTop:"auto", marginBottom:"auto", marginRight:"10px"}}/><Title
headingLevel={"h2"}>Welcome to Karavan!</Title></div>}
variant={ModalVariant.small}
isOpen={show}
onClose={() => this.closeHelpWindow(false)}
actions={[
- <Checkbox className="dont-show" label="Don't show again"
isChecked={this.state.cancelTour} onChange={checked =>
this.setState({cancelTour: checked})} aria-label="Don't show again"
id="dont-show"/>,
- <Button variant={"secondary"} isSmall onClick={e =>
this.closeHelpWindow(false)}>Skip tour</Button>,
- <Button autoFocus={true} variant={"primary"} isSmall
onClick={e => this.closeHelpWindow(true)}>Get started</Button>
+ <Checkbox key="check" className="dont-show" label="Don't show
again" isChecked={this.state.cancelTour} onChange={checked =>
this.setState({cancelTour: checked})} aria-label="Don't show again"
id="dont-show"/>,
+ <Button key="skip" variant={"secondary"} isSmall onClick={e =>
this.closeHelpWindow(false)}>Skip tour</Button>,
+ <Button key="tour" autoFocus={true} variant={"primary"}
isSmall onClick={e => this.closeHelpWindow(true)}>Get started</Button>
]}
onEscapePress={e => this.closeHelpWindow(false)}>
Get started with a tour of the key areas that can help you
complete integration and be more productive.
@@ -132,7 +131,7 @@ export class KaravanDesigner extends React.Component<Props,
State> {
<PageSection variant={this.props.dark ? PageSectionVariants.darker
: PageSectionVariants.light} className="page" isFilled padding={{default:
'noPadding'}}>
{this.state.showTour && <KaravanTour tab="routes"
integration={this.state.integration}
- onSave={(integration,
propertyOnly, write) => this.save(integration, propertyOnly, write)}
+ onSave={(integration,
propertyOnly) => this.save(integration, propertyOnly)}
showTour={this.state.showTour}
onClose={() =>
this.setState({showTour: false})} />}
<Tabs className="main-tabs" activeKey={tab} onSelect={(event,
tabIndex) => this.setState({tab: tabIndex.toString()})} style={{width: "100%"}}>
diff --git a/karavan-designer/src/designer/KaravanTour.tsx
b/karavan-designer/src/designer/KaravanTour.tsx
index 49eec35..715c89d 100644
--- a/karavan-designer/src/designer/KaravanTour.tsx
+++ b/karavan-designer/src/designer/KaravanTour.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import Tour from "@reactour/tour";
+import React, {Component} from "react";
+import Tour, {StepType, TourProvider, useTour, withTour} from "@reactour/tour";
import {EventBus} from "./utils/EventBus";
-import {TextContent, TextVariants, Title, Text} from "@patternfly/react-core";
+import {TextContent, TextVariants, Title, Text, Button} from
"@patternfly/react-core";
import ArrowIcon from "@patternfly/react-icons/dist/js/icons/arrow-right-icon";
import CloseIcon from "@patternfly/react-icons/dist/js/icons/times-icon";
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
@@ -78,7 +78,7 @@ const STEPS: Map<string, any[]> = new Map([
interface Props {
- onSave?: (integration: Integration, propertyOnly: boolean, write: boolean)
=> void
+ onSave?: (integration: Integration, propertyOnly: boolean) => void
integration: Integration
showTour: boolean
tab: string
@@ -105,7 +105,7 @@ export class KaravanTour extends React.Component<Props,
State> {
case "routes":
this.routeSteps(step);
}
- this.setState({currentStep: step})
+ setTimeout(() => { this.setState({ currentStep: step }); }, 0);
}
}
@@ -118,7 +118,7 @@ export class KaravanTour extends React.Component<Props,
State> {
const route = CamelDefinitionApi.createRouteDefinition({from:
new FromDefinition({uri: "kamelet:mqtt-source"})});
const i =
CamelDefinitionApiExt.addStepToIntegration(this.props.integration, route, '');
const clone = CamelUtil.cloneIntegration(i);
- this.props.onSave?.call(this, clone, true, false);
+ this.props.onSave?.call(this, clone, true);
EventBus.sendTourEvent("routes", "closeSelector");
break;
case 6:
@@ -131,7 +131,7 @@ export class KaravanTour extends React.Component<Props,
State> {
mqtt.parameters.topic = "topic1";
const i2 =
CamelDefinitionApiExt.updateIntegrationRouteElement(this.props.integration,
mqtt);
const clone2 = CamelUtil.cloneIntegration(i2);
- this.props.onSave?.call(this, clone2, true, false);
+ this.props.onSave?.call(this, clone2, true);
break;
case 9:
EventBus.sendTourEvent("routes", "openSelector", "routing");
@@ -139,9 +139,9 @@ export class KaravanTour extends React.Component<Props,
State> {
case 11:
const filter = CamelDefinitionApi.createFilterDefinition({});
const from3 = this.props.integration.spec.flows?.[0].from;
- const clone3 =
CamelUtil.cloneIntegration(this.props.integration);
- const i3 = CamelDefinitionApiExt.addStepToIntegration(clone3,
filter, from3.uuid);
- this.props.onSave?.call(this, i3, true, false);
+ const i3 =
CamelDefinitionApiExt.addStepToIntegration(this.props.integration, filter,
from3.uuid);
+ const clone3 = CamelUtil.cloneIntegration(i3);
+ this.props.onSave?.call(this, clone3, true);
EventBus.sendTourEvent("routes", "closeSelector", undefined,
filter);
break;
case 12:
@@ -151,9 +151,9 @@ export class KaravanTour extends React.Component<Props,
State> {
case 13:
const filter1 =
this.props.integration.spec.flows?.[0].from.steps[0];
filter1.expression =
CamelDefinitionApi.createExpressionDefinition({simple:
CamelDefinitionApi.createSimpleExpression({expression: "${header.approved} !=
'true'"})});
- const clone4 =
CamelUtil.cloneIntegration(this.props.integration);
- const i4 =
CamelDefinitionApiExt.updateIntegrationRouteElement(clone4, filter1);
- this.props.onSave?.call(this, i4, true, false);
+ const i4 =
CamelDefinitionApiExt.updateIntegrationRouteElement(this.props.integration,
filter1);
+ const clone4 = CamelUtil.cloneIntegration(i4);
+ this.props.onSave?.call(this, clone4, true);
break;
case 15:
EventBus.sendTourEvent("routes", "openSelector", "kamelet");
@@ -161,9 +161,9 @@ export class KaravanTour extends React.Component<Props,
State> {
case 17:
const kafka = CamelDefinitionApi.createToDefinition({uri:
"kamelet:kafka-not-secured-sink"});
const filter2 =
this.props.integration.spec.flows?.[0].from.steps[0];
- const clone5 =
CamelUtil.cloneIntegration(this.props.integration);
- const i5 = CamelDefinitionApiExt.addStepToIntegration(clone5,
kafka, filter2.uuid);
- this.props.onSave?.call(this, i5, true, false);
+ const i5 =
CamelDefinitionApiExt.addStepToIntegration(this.props.integration, kafka,
filter2.uuid);
+ const clone5 = CamelUtil.cloneIntegration(i5);
+ this.props.onSave?.call(this, clone5, true);
EventBus.sendTourEvent("routes", "closeSelector", undefined,
kafka);
EventBus.sendTourEvent("routes", "selectElement", undefined,
kafka);
break;
@@ -171,12 +171,13 @@ export class KaravanTour extends React.Component<Props,
State> {
const kafka1 =
this.props.integration.spec.flows?.[0].from.steps[0].steps[0];
kafka1.parameters.bootstrapServers = "localhost:9092"
kafka1.parameters.topic = "topic1"
- const clone6 =
CamelUtil.cloneIntegration(this.props.integration);
- const i6 =
CamelDefinitionApiExt.updateIntegrationRouteElement(clone6, kafka1);
- this.props.onSave?.call(this, i6, true, false);
+ const i6 =
CamelDefinitionApiExt.updateIntegrationRouteElement(this.props.integration,
kafka1);
+ const clone6 = CamelUtil.cloneIntegration(i6);
+ this.props.onSave?.call(this, clone6, true);
+ EventBus.sendTourEvent("routes", "selectElement", undefined,
kafka1);
break;
case 21:
- this.props.onSave?.call(this, this.props.integration, true,
true );
+ this.props.onSave?.call(this, this.props.integration, true);
this.close();
break;
}
@@ -201,7 +202,9 @@ export class KaravanTour extends React.Component<Props,
State> {
badgeContent={b => `${b.currentStep + 1}/${b.totalSteps}`}
onClickHighlighted={e => e.stopPropagation()}
disableInteraction
- disableDotsNavigation
+ // disableKeyboardNavigation
+ // disableDotsNavigation
+ // disableFocusLock
onClickClose={clickProps => this.close()}
prevButton={props => props.setIsOpen(false)}
>
