dbeaver/pro#5083 feat: script status message (#3914)

* dbeaver/pro#5083 feat: script status message

* chore: use `TLocalizationToken`

---------

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts

@@ -17,6 +17,7 @@ import { ESqlDataSourceFeatures } from './ESqlDataSourceFeatures.js';
 import type { ISetScriptData, ISqlDataSource, ISqlDataSourceKey, ISqlEditorCursor } from './ISqlDataSource.js';
 import type { ISqlDataSourceHistory } from './SqlDataSourceHistory/ISqlDataSourceHistory.js';
 import { SqlDataSourceHistory } from './SqlDataSourceHistory/SqlDataSourceHistory.js';
+import type { TLocalizationToken } from '@cloudbeaver/core-localization';
 
 const SOURCE_HISTORY = 'history';
 
@@ -25,7 +26,10 @@ export abstract class BaseSqlDataSource<TDataSource extends QueryDataSource = Qu
   static key = 'base';
 
   abstract get name(): string | null;
-  message?: string;
+  get message(): TLocalizationToken | undefined {
+    return undefined;
+  }
+  loadingMessage?: TLocalizationToken;
 
   abstract get script(): string;
   abstract get baseScript(): string;
@@ -93,7 +97,7 @@ export abstract class BaseSqlDataSource<TDataSource extends QueryDataSource = Qu
     this.incomingScript = undefined;
     this.incomingExecutionContext = null;
     this.exception = undefined;
-    this.message = undefined;
+    this.loadingMessage = undefined;
     this.outdated = true;
     this.editing = true;
     this.innerCursorState = { anchor: 0, head: 0 };
@@ -144,7 +148,8 @@ export abstract class BaseSqlDataSource<TDataSource extends QueryDataSource = Qu
       databaseModels: observable.ref,
       exception: observable.ref,
       outdated: observable.ref,
-      message: observable.ref,
+      message: computed,
+      loadingMessage: observable.ref,
       editing: observable.ref,
       innerCursorState: observable.ref,
       incomingScript: observable.ref,

webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts

@@ -13,6 +13,7 @@ import type { IDatabaseDataModel } from '@cloudbeaver/plugin-data-viewer';
 import type { QueryDataSource } from '../QueryDataSource.js';
 import type { ESqlDataSourceFeatures } from './ESqlDataSourceFeatures.js';
 import type { ISqlDataSourceHistory } from './SqlDataSourceHistory/ISqlDataSourceHistory.js';
+import type { TLocalizationToken } from '@cloudbeaver/core-localization';
 
 export interface ISqlDataSourceKey {
   readonly key: string;
@@ -33,7 +34,8 @@ export interface ISqlDataSource<TDataSource extends QueryDataSource = QueryDataS
   readonly name: string | null;
   readonly icon?: string;
   readonly emptyPlaceholder?: string;
-  readonly message?: string;
+  readonly message?: TLocalizationToken;
+  readonly loadingMessage?: TLocalizationToken;
 
   readonly sourceKey: string;
   readonly projectId: string | null;

webapp/packages/plugin-sql-editor/src/SqlEditorStatusBar.module.css

@@ -7,11 +7,14 @@
  */
 
 .loader {
+  padding: 0 8px;
+}
+
+.statusPosition {
   composes: theme-background-surface theme-border-color-background from global;
   position: absolute;
   bottom: 0px;
   border-top: 1px solid;
   width: 100%;
-  padding: 0 8px;
   box-sizing: border-box;
 }

webapp/packages/plugin-sql-editor/src/SqlEditorStatusBar.tsx

@@ -1,13 +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 { observer } from 'mobx-react-lite';
 
-import { Loader, s, useS } from '@cloudbeaver/core-blocks';
+import { Alert, Loader, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
 import type { ISqlDataSource } from './SqlDataSource/ISqlDataSource.js';
 import classes from './SqlEditorStatusBar.module.css';
@@ -18,5 +18,20 @@ interface Props {
 
 export const SqlEditorStatusBar = observer<Props>(function SqlEditorStatusBar({ dataSource }) {
   const styles = useS(classes);
-  return <Loader className={s(styles, { loader: true })} state={dataSource} message={dataSource?.message} inline inlineException />;
+  const t = useTranslate();
+  return (
+    <Loader
+      className={s(styles, { statusPosition: true, loader: true })}
+      state={dataSource}
+      message={dataSource?.loadingMessage}
+      inline
+      inlineException
+    >
+      {dataSource?.message && (
+        <div className={s(styles, { statusPosition: true }, 'tw:p-2')}>
+          <Alert title={t(dataSource.message)} />
+        </div>
+      )}
+    </Loader>
+  );
 });