fix(plugin-resource-manager): CB-2019 1925 add autosave

webapp/packages/plugin-sql-editor-navigation-tab-resource/src/SqlEditorTabResourceService.ts

@@ -16,10 +16,11 @@ import { ResourceKey, ResourceKeyUtils } from '@cloudbeaver/core-sdk';
 import { LocalStorageSaveService } from '@cloudbeaver/core-settings';
 import { throttleAsync } from '@cloudbeaver/core-utils';
 import { NavResourceNodeService } from '@cloudbeaver/plugin-resource-manager';
-import { ISqlEditorTabState, SqlEditorService } from '@cloudbeaver/plugin-sql-editor';
+import { IQueryChangeData, ISqlEditorTabState, SqlEditorService } from '@cloudbeaver/plugin-sql-editor';
 import { isSQLEditorTab, SqlEditorTabService } from '@cloudbeaver/plugin-sql-editor-navigation-tab';
 
 const SYNC_DELAY = 5 * 1000;
+const VALUE_SYNC_DELAY = 0.5 * 1000;
 const RESOURCE_TAB_STATE = 'sql_editor_resource_tab_state';
 
 interface IResourceTabData {
@@ -49,11 +50,13 @@ export class SqlEditorTabResourceService {
     this.onTabSelectHandler = this.onTabSelectHandler.bind(this);
     this.onTabCloseHandler = this.onTabCloseHandler.bind(this);
     this.onFocusChangeHandler = this.onFocusChangeHandler.bind(this);
+    this.onTabResourceValueChangeHandler = this.onTabResourceValueChangeHandler.bind(this);
 
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
 
     this.syncTab = throttleAsync(this.syncTab, SYNC_DELAY);
+    this.syncTabResourceValue = throttleAsync(this.syncTabResourceValue, VALUE_SYNC_DELAY);
 
     makeObservable(this, {
       state: observable,
@@ -67,12 +70,15 @@ export class SqlEditorTabResourceService {
     this.navigationTabsService.onTabSelect.addHandler(this.onTabSelectHandler);
     this.navigationTabsService.onTabClose.addHandler(this.onTabCloseHandler);
     this.windowEventsService.onFocusChange.addHandler(this.onFocusChangeHandler);
+    this.sqlEditorService.onQueryChange.addHandler(this.onTabResourceValueChangeHandler);
   }
 
   stop() {
     this.navTreeResource.onItemDelete.removeHandler(this.onNodeDeleteHandler);
     this.navigationTabsService.onTabSelect.removeHandler(this.onTabSelectHandler);
+    this.navigationTabsService.onTabClose.removeHandler(this.onTabCloseHandler);
     this.windowEventsService.onFocusChange.removeHandler(this.onFocusChangeHandler);
+    this.sqlEditorService.onQueryChange.removeHandler(this.onTabResourceValueChangeHandler);
   }
 
   linkTab(tabId: string, nodeId: string) {
@@ -105,6 +111,19 @@ export class SqlEditorTabResourceService {
     return;
   }
 
+  private onTabResourceValueChangeHandler(data: IQueryChangeData) {
+    this.syncTabResourceValue(data.query);
+  }
+
+  private async syncTabResourceValue(value: string) {
+    const currentTab = this.navigationTabsService.currentTab;
+
+    if (currentTab && this.state.has(currentTab.id)) {
+      const state = this.state.get(currentTab.id)!;
+      await this.navResourceNodeService.write(state.nodeId, value);
+    }
+  }
+
   private onFocusChangeHandler(focused: boolean) {
     if (focused) {
       this.syncCurrentTab();

webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts

@@ -66,7 +66,7 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
     },
 
     get activeSegmentMode(): ISQLEditorMode {
-      const contexts =  this.onMode.execute(this);
+      const contexts = this.onMode.execute(this);
       const mode = contexts.getContext(SQLEditorModeContext);
 
       return mode;
@@ -300,7 +300,7 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
     },
 
     setQuery(query: string): void {
-      this.state.query = query;
+      this.sqlEditorService.setQuery(query, this.state);
       this.parser.setScript(query);
       this.onUpdate.execute();
     },

webapp/packages/plugin-sql-editor/src/SqlEditorService.ts

@@ -9,13 +9,21 @@
 import { ConnectionExecutionContextResource, ConnectionExecutionContextService, ConnectionsManagerService, IConnectionExecutionContext, IConnectionExecutionContextInfo } from '@cloudbeaver/core-connections';
 import { injectable } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
+import { Executor } from '@cloudbeaver/core-executor';
 import { GraphQLService, SqlCompletionProposal, SqlScriptInfoFragment } from '@cloudbeaver/core-sdk';
 import type { ISqlEditorTabState } from '@cloudbeaver/plugin-sql-editor';
 
 export type SQLProposal = SqlCompletionProposal;
 
+export interface IQueryChangeData {
+  query: string;
+  state: ISqlEditorTabState;
+}
+
 @injectable()
 export class SqlEditorService {
+  readonly onQueryChange: Executor<IQueryChangeData>;
+
   constructor(
     private readonly gql: GraphQLService,
     private readonly connectionsManagerService: ConnectionsManagerService,
@@ -23,6 +31,7 @@ export class SqlEditorService {
     private readonly connectionExecutionContextService: ConnectionExecutionContextService,
     private readonly connectionExecutionContextResource: ConnectionExecutionContextResource
   ) {
+    this.onQueryChange = new Executor();
   }
 
   getState(
@@ -101,6 +110,7 @@ export class SqlEditorService {
 
   setQuery(query: string, state: ISqlEditorTabState) {
     state.query = query;
+    this.onQueryChange.execute({ query, state });
   }
 
   async resetExecutionContext(state: ISqlEditorTabState) {