refactor: remove old code, add todo about problem

Author: Wroud

webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/SQLCodeEditorLoader.tsx

@@ -1,23 +1,10 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2025 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { observer } from 'mobx-react-lite';
-import { forwardRef } from 'react';
+import { importLazyComponent } from '@cloudbeaver/core-blocks';
 
-import { ComplexLoader, createComplexLoader } from '@cloudbeaver/core-blocks';
-import type { IDefaultExtensions, IEditorProps, IEditorRef } from '@cloudbeaver/plugin-codemirror6';
-
-const loader = createComplexLoader(async function loader() {
-  const { SQLCodeEditor } = await import('./SQLCodeEditor.js');
-  return { SQLCodeEditor };
-});
-
-export const SQLCodeEditorLoader = observer<IEditorProps & IDefaultExtensions, IEditorRef>(
-  forwardRef(function SQLCodeEditorLoader(props, ref) {
-    return <ComplexLoader loader={loader}>{({ SQLCodeEditor }) => <SQLCodeEditor {...props} ref={ref} />}</ComplexLoader>;
-  }),
-);
+export const SQLCodeEditorLoader = importLazyComponent(() => import('./SQLCodeEditor.js').then(m => m.SQLCodeEditor));

webapp/packages/plugin-sql-editor-new/src/SQLEditor/useSqlDialectExtension.ts

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2025 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -28,6 +28,7 @@ const codemirrorComplexLoader = createComplexLoader(() => import('@cloudbeaver/p
 const SQL_EDITOR_COMPARTMENT = new Compartment();
 
 export function useSqlDialectExtension(dialectInfo: SqlDialectInfo | undefined): [Compartment, Extension] {
+  //TODO: probably we need to refactor it to lazy approach without triggering suspense
   const { SQLDialect, SQL_EDITOR } = useComplexLoader(codemirrorComplexLoader);
   const loader = getDialectLoader(dialectInfo?.name);
   const dialect = useComplexLoader(loader);

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

@@ -1,14 +1,13 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2025 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { ConnectionDialectResource, type IConnectionExecutionContextInfo, type IConnectionInfoParams } from '@cloudbeaver/core-connections';
+import { ConnectionDialectResource, type IConnectionExecutionContextInfo } from '@cloudbeaver/core-connections';
 import { injectable } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
-import type { SqlDialectInfo } from '@cloudbeaver/core-sdk';
 
 @injectable(() => [ConnectionDialectResource, NotificationService])
 export class SqlDialectInfoService {
@@ -25,20 +24,4 @@ export class SqlDialectInfoService {
     }
     return query;
   }
-
-  getDialectInfo(key: IConnectionInfoParams): SqlDialectInfo | undefined {
-    return this.connectionDialectResource.get(key);
-  }
-
-  async loadSqlDialectInfo(key: IConnectionInfoParams): Promise<SqlDialectInfo | undefined> {
-    if (!this.connectionDialectResource.has(key)) {
-      try {
-        return this.connectionDialectResource.load(key);
-      } catch (error: any) {
-        this.notificationService.logException(error, 'Failed to load SqlDialectInfo');
-      }
-    }
-
-    return this.getDialectInfo(key);
-  }
 }

webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditorLoader.tsx

@@ -1,21 +1,11 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2025 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { observer } from 'mobx-react-lite';
 
-import { ComplexLoader, createComplexLoader } from '@cloudbeaver/core-blocks';
+import { importLazyComponent } from '@cloudbeaver/core-blocks';
 
-import type { ISqlEditorProps } from './ISqlEditorProps.js';
-
-const loader = createComplexLoader(async function loader() {
-  const { SqlEditor } = await import('./SqlEditor.js');
-  return { SqlEditor };
-});
-
-export const SqlEditorLoader = observer<ISqlEditorProps>(function SqlEditorLoader(props) {
-  return <ComplexLoader loader={loader}>{({ SqlEditor }) => <SqlEditor {...props} />}</ComplexLoader>;
-});
+export const SqlEditorLoader = importLazyComponent(() => import('./SqlEditor.js').then(m => m.SqlEditor));

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

@@ -13,7 +13,7 @@ import { useService } from '@cloudbeaver/core-di';
 import { CommonDialogService, DialogueStateResult } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { SyncExecutor } from '@cloudbeaver/core-executor';
-import type { SqlCompletionProposal, SqlDialectInfo, SqlScriptInfoFragment } from '@cloudbeaver/core-sdk';
+import type { SqlCompletionProposal, SqlScriptInfoFragment } from '@cloudbeaver/core-sdk';
 import { createLastPromiseGetter, type LastPromiseGetter, throttleAsync } from '@cloudbeaver/core-utils';
 
 import type { ISqlEditorTabState } from '../ISqlEditorTabState.js';
@@ -29,7 +29,6 @@ import { SqlResultTabsService } from '../SqlResultTabs/SqlResultTabsService.js';
 import type { ISQLEditorData } from './ISQLEditorData.js';
 import { SqlEditorSettingsService } from '../SqlEditorSettingsService.js';
 import { SqlEditorModelService } from '../SqlEditorModel/SqlEditorModelService.js';
-import type { ISqlEditorModel } from '../SqlEditorModel/ISqlEditorModel.js';
 
 interface ISQLEditorDataPrivate extends ISQLEditorData {
   readonly sqlDialectInfoService: SqlDialectInfoService;
@@ -66,20 +65,22 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
   const sqlEditorSettingsService = useService(SqlEditorSettingsService);
   const sqlEditorModelService = useService(SqlEditorModelService);
 
-  const data = useObservableRef<ISQLEditorDataPrivate>(
-    () => ({
-      get model(): ISqlEditorModel {
-        return sqlEditorModelService.getOrCreate(this.state);
-      },
-      get dialect(): SqlDialectInfo | undefined {
-        const executionContext = this.model.dataSource?.executionContext;
-        if (!executionContext) {
-          return undefined;
-        }
+  const model = sqlEditorModelService.getOrCreate(state);
 
-        return this.sqlDialectInfoService.getDialectInfo(createConnectionParam(executionContext.projectId, executionContext.connectionId));
-      },
+  const key = getComputed(() => {
+    const executionContext = model.dataSource?.executionContext;
+    if (executionContext) {
+      const context = connectionExecutionContextService.get(executionContext.id)?.context;
+      if (context) {
+        return createConnectionParam(context.projectId, context.connectionId);
+      }
+    }
+    return null;
+  });
+  const connectionDialectLoader = useResource(useSqlEditor, ConnectionDialectResource, key);
 
+  const data = useObservableRef<ISQLEditorDataPrivate>(
+    () => ({
       get readonly(): boolean {
         return this.executingScript || this.readonlyState || !!this.model.dataSource?.isReadonly() || !this.editing;
       },
@@ -331,17 +332,21 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
       executeQueryNewTab: action.bound,
       showExecutionPlan: action.bound,
       executeScript: action.bound,
-      dialect: computed,
       isDisabled: computed,
       value: computed,
       readonly: computed,
+      state: observable.ref,
+      model: observable.ref,
+      dialect: observable.ref,
       hintsLimitIsMet: observable.ref,
       readonlyState: observable,
       executingScript: observable,
       sqlEditorSettingsService: observable.ref,
     },
     {
       state,
+      model,
+      dialect: connectionDialectLoader.tryGetData,
       connectionExecutionContextService,
       sqlQueryService,
       sqlDialectInfoService,
@@ -354,27 +359,14 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
     },
   );
 
-  const key = getComputed(() => {
-    const executionContext = data.model.dataSource?.executionContext;
-    if (executionContext) {
-      const context = data.connectionExecutionContextService.get(executionContext.id)?.context;
-      if (context) {
-        return createConnectionParam(context.projectId, context.connectionId);
-      }
-    }
-    return null;
-  });
-
   useExecutor({
-    executor: data.model.dataSource?.onDatabaseModelUpdate,
+    executor: model.dataSource?.onDatabaseModelUpdate,
     handlers: [
       function updateDatabaseModels() {
         data.loadDatabaseDataModels();
       },
     ],
   });
 
-  useResource(useSqlEditor, ConnectionDialectResource, key);
-
   return data;
 }

webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx

@@ -5,7 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { computed, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 
@@ -21,15 +21,15 @@ import {
   useClipboard,
   useErrorDetails,
   useObservableRef,
+  useResource,
   useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
-import { ConnectionInfoResource, createConnectionParam } from '@cloudbeaver/core-connections';
+import { ConnectionDialectResource, ConnectionInfoResource, createConnectionParam } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import type { DialogComponentProps } from '@cloudbeaver/core-dialogs';
-import { GQLErrorCatcher, type SqlDialectInfo } from '@cloudbeaver/core-sdk';
+import { GQLErrorCatcher } from '@cloudbeaver/core-sdk';
 import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
-import { SqlDialectInfoService } from '@cloudbeaver/plugin-sql-editor';
 import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
 
 import style from './GeneratedSqlDialog.module.css';
@@ -45,7 +45,6 @@ export const GeneratedSqlDialog = observer<DialogComponentProps<Payload>>(functi
   const copy = useClipboard();
   const styles = useS(style);
 
-  const sqlDialectInfoService = useService(SqlDialectInfoService);
   const sqlGeneratorsResource = useService(SqlGeneratorsResource);
   const connectionInfoResource = useService(ConnectionInfoResource);
   const connection = connectionInfoResource.getConnectionForNode(payload.pathId);
@@ -55,13 +54,6 @@ export const GeneratedSqlDialog = observer<DialogComponentProps<Payload>>(functi
       query: '',
       loading: true,
       error: new GQLErrorCatcher(),
-      get dialect(): SqlDialectInfo | undefined {
-        if (!this.connection?.connected) {
-          return;
-        }
-
-        return this.sqlDialectInfoService.getDialectInfo(createConnectionParam(this.connection));
-      },
       async load() {
         this.error.clear();
 
@@ -78,12 +70,12 @@ export const GeneratedSqlDialog = observer<DialogComponentProps<Payload>>(functi
       query: observable.ref,
       loading: observable.ref,
       connection: observable.ref,
-      dialect: computed,
     },
-    { connection, sqlDialectInfoService },
+    { connection },
   );
+  const connectionDialectResource = useResource(GeneratedSqlDialog, ConnectionDialectResource, connection ? createConnectionParam(connection) : null);
+  const sqlDialect = useSqlDialectExtension(connectionDialectResource.data);
 
-  const sqlDialect = useSqlDialectExtension(state.dialect);
   const extensions = useCodemirrorExtensions();
   extensions.set(...sqlDialect);
   const error = useErrorDetails(state.error.exception);
@@ -92,17 +84,6 @@ export const GeneratedSqlDialog = observer<DialogComponentProps<Payload>>(functi
     state.load();
   }, []);
 
-  useEffect(() => {
-    if (!connection) {
-      return;
-    }
-
-    sqlDialectInfoService.loadSqlDialectInfo(createConnectionParam(connection)).catch(exception => {
-      console.error(exception);
-      console.warn(`Can't get dialect for connection: '${connection.id}'. Default dialect will be used`);
-    });
-  });
-
   return (
     <CommonDialogWrapper size="large">
       <CommonDialogHeader title="app_shared_sql_generators_dialog_title" icon="sql-script" onReject={rejectDialog} />