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 4eec393 Fix reload yaml on activate webView (#313)
4eec393 is described below
commit 4eec3937ee3838cbadc3ba88e8e895e6c78bacd2
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Tue Apr 12 16:28:00 2022 -0400
Fix reload yaml on activate webView (#313)
---
karavan-vscode/src/designerView.ts | 26 ++++++++++-----
karavan-vscode/webview/App.tsx | 67 ++++++++++++++++++++++----------------
2 files changed, 56 insertions(+), 37 deletions(-)
diff --git a/karavan-vscode/src/designerView.ts
b/karavan-vscode/src/designerView.ts
index 12feb95..6468d7e 100644
--- a/karavan-vscode/src/designerView.ts
+++ b/karavan-vscode/src/designerView.ts
@@ -62,7 +62,7 @@ export class DesignerView {
}
}
- createIntegration(crd: boolean, fullPath?: string) {
+ createIntegration(crd: boolean, rootPath?: string) {
vscode.window
.showInputBox({
title: crd ? "Create Camel-K Integration CRD" : "Create Camel
Integration YAML",
@@ -82,9 +82,10 @@ export class DesignerView {
i.crd = crd;
const yaml = CamelDefinitionYaml.integrationToYaml(i);
const filename =
name.toLocaleLowerCase().endsWith('.yaml') ? name : name + '.yaml';
- const relativePath = (this.rootPath ?
fullPath?.replace(this.rootPath, "") : fullPath) + path.sep + filename;
+ const relativePath = (this.rootPath ?
rootPath?.replace(this.rootPath, "") : rootPath) + path.sep + filename;
+ const fullPath = (rootPath ? rootPath : this.rootPath) +
path.sep + filename;
utils.save(relativePath, yaml);
- this.openKaravanWebView(filename, filename, yaml);
+ this.openKaravanWebView(filename, filename, fullPath,
yaml);
vscode.commands.executeCommand('integrations.refresh');
}
});
@@ -116,10 +117,11 @@ export class DesignerView {
message => {
switch (message.command) {
case 'save':
+ console.log("save", message);
utils.save(message.relativePath, message.yaml);
break;
case 'getData':
- this.sendData(panel, filename, relativePath,
fullPath, message.reread === true ? undefined : yaml);
+ this.sendData(panel, filename, relativePath,
fullPath, message.reread === true, yaml);
break;
case 'disableStartHelp':
utils.disableStartHelp();
@@ -137,7 +139,9 @@ export class DesignerView {
// Handle reopen
panel.onDidChangeViewState((e:
vscode.WebviewPanelOnDidChangeViewStateEvent) => {
if (e.webviewPanel.active) {
- e.webviewPanel.webview.postMessage({ command: 'reread' })
+ e.webviewPanel.webview.postMessage({ command: 'activate'
});
+ } else {
+ e.webviewPanel.webview.postMessage({ command: 'deactivate'
});
}
});
@@ -148,7 +152,12 @@ export class DesignerView {
}
}
- sendData(panel: vscode.WebviewPanel, filename: string, relativePath:
string, fullPath: string, yaml?: string) {
+ sendData(panel: vscode.WebviewPanel, filename: string, relativePath:
string, fullPath: string, reread: boolean, yaml?: string) {
+ console.log(filename);
+ console.log(relativePath);
+ console.log(fullPath);
+ console.log(reread);
+ console.log(yaml);
// Read and send Kamelets
panel.webview.postMessage({ command: 'kamelets', kamelets:
utils.readKamelets(this.context) });
@@ -160,13 +169,12 @@ export class DesignerView {
panel.webview.postMessage({ command: 'showStartHelp', showStartHelp:
showStartHelp});
// Read file if required
- if (!yaml || yaml.length === 0){
+ if (reread){
yaml = fs.readFileSync(path.resolve(fullPath)).toString('utf8');
}
-
+ console.log(yaml);
// Send integration
panel.webview.postMessage({ command: 'open', page: "designer",
filename: filename, relativePath: relativePath, yaml: yaml });
-
}
}
\ No newline at end of file
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index 7d070c0..5d468b0 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -40,7 +40,8 @@ interface State {
scheduledYaml: string
hasChanges: boolean
showStartHelp: boolean
- page: "designer" | "kamelets" | "components" | "eip";
+ page: "designer" | "kamelets" | "components" | "eip"
+ active: boolean
}
class App extends React.Component<Props, State> {
@@ -54,11 +55,13 @@ class App extends React.Component<Props, State> {
scheduledYaml: '',
hasChanges: false,
showStartHelp: false,
- page: "designer"
+ page: "designer",
+ active: false
};
saveScheduledChanges = () => {
- if (this.state.hasChanges){
+ console.log("saveScheduledChanges", this.state.active);
+ if (this.state.active && this.state.hasChanges) {
this.save(this.state.relativePath, this.state.scheduledYaml, false);
}
}
@@ -66,7 +69,7 @@ class App extends React.Component<Props, State> {
componentDidMount() {
window.addEventListener('message', this.onMessage, false);
vscode.postMessage({ command: 'getData' });
- this.setState({interval: setInterval(this.saveScheduledChanges, 2000)});
+ this.setState({ interval: setInterval(this.saveScheduledChanges, 2000) });
}
componentWillUnmount() {
@@ -76,6 +79,7 @@ class App extends React.Component<Props, State> {
onMessage = (event) => {
const message = event.data;
+ console.log("message.command", message.command);
switch (message.command) {
case 'kamelets':
KameletApi.saveKamelets(message.kamelets, true);
@@ -84,39 +88,46 @@ class App extends React.Component<Props, State> {
ComponentApi.saveComponents(message.components, true);
break;
case 'showStartHelp':
- this.setState({showStartHelp: message.showStartHelp});
- break;
+ this.setState({ showStartHelp: message.showStartHelp });
+ break;
case 'open':
if (this.state.filename === '' && this.state.key === '') {
- this.setState({
- page: message.page,
- filename: message.filename,
- yaml: message.yaml,
- scheduledYaml: message.yaml,
- relativePath: message.relativePath,
- key: Math.random().toString(),
- loaded: true
+ if (message.page !== "designer" && this.state.interval)
clearInterval(this.state.interval);
+ this.setState({
+ page: message.page,
+ filename: message.filename,
+ yaml: message.yaml,
+ scheduledYaml: message.yaml,
+ relativePath: message.relativePath,
+ key: Math.random().toString(),
+ loaded: true,
+ active: true
});
}
- break;
- case 'reread':
- this.setState({ loaded: false, filename: '', key: '' });
- vscode.postMessage({ command: 'getData', reread: true});
+ break;
+ case 'activate':
+ this.setState({ loaded: false, filename: '', key: '', active: true });
+ vscode.postMessage({ command: 'getData', reread: true });
+ break;
+ case 'deactivate':
+ this.setState({ active: false, hasChanges: false });
break;
}
};
save(filename: string, yaml: string, propertyOnly: boolean) {
- if (!propertyOnly) {
- vscode.postMessage({ command: 'save', filename: filename, relativePath:
this.state.relativePath, yaml: yaml });
- this.setState({scheduledYaml: yaml, hasChanges: false});
- } else {
- this.setState({scheduledYaml: yaml, hasChanges: true});
+ if (this.state.active) {
+ if (!propertyOnly) {
+ vscode.postMessage({ command: 'save', filename: filename,
relativePath: this.state.relativePath, yaml: yaml });
+ this.setState({ scheduledYaml: yaml, hasChanges: false });
+ } else {
+ this.setState({ scheduledYaml: yaml, hasChanges: true });
+ }
}
}
disableStartHelp() {
- vscode.postMessage({ command: 'disableStartHelp'});
+ vscode.postMessage({ command: 'disableStartHelp' });
}
public render() {
@@ -124,7 +135,7 @@ class App extends React.Component<Props, State> {
<Page className="karavan">
{!this.state.loaded &&
<PageSection variant={this.props.dark ? "dark" : "light"}
className="loading-page">
- <Spinner className="progress-stepper" isSVG diameter="80px"
aria-label="Loading..."/>
+ <Spinner className="progress-stepper" isSVG diameter="80px"
aria-label="Loading..." />
</PageSection>
}
{this.state.loaded && this.state.page === "designer" &&
@@ -137,9 +148,9 @@ class App extends React.Component<Props, State> {
onDisableHelp={this.disableStartHelp}
dark={this.props.dark} />
}
- {this.state.loaded && this.state.page === "kamelets" && <KameletsPage
dark={this.props.dark}/>}
- {this.state.loaded && this.state.page === "components" &&
<ComponentsPage dark={this.props.dark}/>}
- {this.state.loaded && this.state.page === "eip" && <EipPage
dark={this.props.dark}/>}
+ {this.state.loaded && this.state.page === "kamelets" && <KameletsPage
dark={this.props.dark} />}
+ {this.state.loaded && this.state.page === "components" &&
<ComponentsPage dark={this.props.dark} />}
+ {this.state.loaded && this.state.page === "eip" && <EipPage
dark={this.props.dark} />}
</Page>
)
}
