dbeaver/pro#5232 [CB] Trap Focus In the Right Panel

webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx

@@ -50,7 +50,6 @@ export const CommonDialogWrapper = observer<CommonDialogWrapperProps, HTMLDivEle
         data-size={size}
         className={s(computedStyles, { dialog: true, fixedSize, fixedWidth, freeHeight }, className)}
         autoFocusOnHide={autoFocusOnHide}
-        backdrop
         onClose={handleClose}
       >
         <Loader className={s(computedStyles, { loader: true })} suspense>

webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.module.css

@@ -5,11 +5,34 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-.loader {
-  height: 100%;
-}
-
 .error {
   composes: theme-background-surface theme-text-on-surface theme-elevation-z10 from global;
   border-radius: 0.25rem;
 }
+
+.backdrop {
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.48);
+  /*backdrop-filter: blur(4px);
+    background-color: rgba(221, 221, 221, 0.25);*/
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 999;
+  display: flex;
+  overflow: auto;
+}
+
+.innerBox {
+  display: flex;
+  margin: auto;
+  padding: 24px;
+  flex-direction: column;
+  align-items: center;
+
+  & > :not(:last-child) {
+    display: none;
+  }
+}

webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.tsx

@@ -12,7 +12,6 @@ import { useService } from '@cloudbeaver/core-di';
 import { CommonDialogService, type DialogInternal } from '@cloudbeaver/core-dialogs';
 
 import { ErrorBoundary } from '../ErrorBoundary.js';
-import { Loader } from '../Loader/Loader.js';
 import { s } from '../s.js';
 import { useObjectRef } from '../useObjectRef.js';
 import { useS } from '../useS.js';
@@ -53,11 +52,13 @@ export const DialogsPortal = observer(function DialogsPortal() {
   }
 
   return (
-    <Loader className={s(styles, { loader: true })} suspense>
-      {commonDialogService.dialogs.map((dialog, i, arr) => (
-        <NestedDialog key={dialog.id} visible={i === arr.length - 1} dialog={dialog} resolveDialog={state.resolve} rejectDialog={state.reject} />
-      ))}
-    </Loader>
+    <div className={s(styles, { backdrop: true })}>
+      <div className={s(styles, { innerBox: true })}>
+        {commonDialogService.dialogs.map((dialog, i, arr) => (
+          <NestedDialog key={dialog.id} visible={i === arr.length - 1} dialog={dialog} resolveDialog={state.resolve} rejectDialog={state.reject} />
+        ))}
+      </div>
+    </div>
   );
 });
 

webapp/packages/core-blocks/src/ErrorBoundary.tsx

@@ -14,6 +14,7 @@ import { DisplayError } from './DisplayError.js';
 import style from './ErrorBoundary.module.css';
 import { ErrorContext, type IExceptionContext } from './ErrorContext.js';
 import { ExceptionMessage } from './ExceptionMessage.js';
+import { Spinner } from '@dbeaver/ui-kit';
 
 interface Props {
   simple?: boolean;
@@ -144,7 +145,7 @@ export class ErrorBoundary extends React.Component<React.PropsWithChildren<Props
 
     return (
       <ErrorContext.Provider value={this}>
-        <Suspense fallback={<>Loading...</>}>{children}</Suspense>
+        <Suspense fallback={<Spinner size="large" />}>{children}</Suspense>
       </ErrorContext.Provider>
     );
   }