CB-5126 fix: focus init button in SqlEditorOverlay

dbeaver · Jan 15, 2025 · a0ce38f · a0ce38f
1 parent e708c1b
commit a0ce38f
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 74 deletions.
diff --git a/webapp/packages/core-blocks/src/Button.tsx b/webapp/packages/core-blocks/src/Button.tsx
@@ -7,6 +7,7 @@
  */
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
+import { forwardRef } from 'react';
 
 import style from './Button.module.css';
 import { IconOrImage } from './IconOrImage.js';
@@ -33,81 +34,74 @@ export type ButtonProps = (React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAn
   download?: boolean;
 };
 
-export const Button = observer<ButtonProps>(function Button({
-  children,
-  icon,
-  viewBox,
-  mod,
-  tag = 'button',
-  type = 'button',
-  disabled = false,
-  loading,
-  loader,
-  onClick,
-  className,
-  ...rest
-}) {
-  const styles = useS(style);
-  const handlersRef = useObjectRef({ onClick });
-  const state = useObservableRef(
-    () => ({
-      loading: false,
-      click(e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLLinkElement | HTMLDivElement>) {
-        const returnValue = handlersRef.onClick?.(e);
+export const Button = observer<ButtonProps, HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>(
+  forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement, ButtonProps>(function Button(
+    { children, icon, viewBox, mod, tag = 'button', type = 'button', disabled = false, loading, loader, onClick, className, ...rest },
+    ref,
+  ) {
+    const styles = useS(style);
+    const handlersRef = useObjectRef({ onClick });
+    const state = useObservableRef(
+      () => ({
+        loading: false,
+        click(e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLLinkElement | HTMLDivElement>) {
+          const returnValue = handlersRef.onClick?.(e);
 
-        if (returnValue instanceof Promise) {
-          if (loader) {
-            this.loading = true;
-            returnValue.finally(() => {
-              this.loading = false;
-            });
+          if (returnValue instanceof Promise) {
+            if (loader) {
+              this.loading = true;
+              returnValue.finally(() => {
+                this.loading = false;
+              });
+            }
           }
-        }
+        },
+      }),
+      {
+        loading: observable.ref,
       },
-    }),
-    {
-      loading: observable.ref,
-    },
-    false,
-    ['click'],
-  );
+      false,
+      ['click'],
+    );
 
-  loading = state.loading || loading;
+    loading = state.loading || loading;
 
-  if (loading) {
-    disabled = true;
-  }
+    if (loading) {
+      disabled = true;
+    }
 
-  const Button = tag;
-  return (
-    <Button
-      role="button"
-      tabIndex={0}
-      {...rest}
-      type={type}
-      disabled={disabled}
-      className={s(
-        styles,
-        {
-          button: true,
-          raised: mod?.includes('raised'),
-          outlined: mod?.includes('outlined'),
-          secondary: mod?.includes('secondary'),
-          unelevated: mod?.includes('unelevated'),
-          loading,
-        },
-        className,
-      )}
-      onClick={state.click}
-    >
-      <div className={s(styles, { ripple: true })} />
-      {icon && (
-        <div className={s(styles, { buttonIcon: true, disabled })}>
-          <IconOrImage icon={icon} viewBox={viewBox} />
-        </div>
-      )}
-      <span className={s(styles, { buttonLabel: true })}>{children}</span>
-      <Loader className={s(styles, { loader: true })} small />
-    </Button>
-  );
-});
+    const Button = tag;
+    return (
+      <Button
+        ref={ref as React.Ref<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>}
+        role="button"
+        tabIndex={0}
+        {...rest}
+        type={type}
+        disabled={disabled}
+        className={s(
+          styles,
+          {
+            button: true,
+            raised: mod?.includes('raised'),
+            outlined: mod?.includes('outlined'),
+            secondary: mod?.includes('secondary'),
+            unelevated: mod?.includes('unelevated'),
+            loading,
+          },
+          className,
+        )}
+        onClick={state.click}
+      >
+        <div className={s(styles, { ripple: true })} />
+        {icon && (
+          <div className={s(styles, { buttonIcon: true, disabled })}>
+            <IconOrImage icon={icon} viewBox={viewBox} />
+          </div>
+        )}
+        <span className={s(styles, { buttonLabel: true })}>{children}</span>
+        <Loader className={s(styles, { loader: true })} small />
+      </Button>
+    );
+  }),
+);
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.tsx b/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.tsx
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import {
   Button,
@@ -86,11 +86,16 @@ export const SqlEditorOverlay = observer<Props>(function SqlEditorOverlay({ stat
   const dataContainer = getComputed(() =>
     NodeManagerUtils.concatSchemaAndCatalog(dataSource?.executionContext?.defaultCatalog, dataSource?.executionContext?.defaultSchema),
   );
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     if (initExecutionContext && connected) {
       init();
     }
+
+    if (buttonRef.current) {
+      buttonRef.current.focus();
+    }
   }, [connected, initExecutionContext]);
 
   return (
@@ -105,7 +110,7 @@ export const SqlEditorOverlay = observer<Props>(function SqlEditorOverlay({ stat
         <Button type="button" mod={['outlined']} loader onClick={cancelConnection}>
           {translate('ui_processing_cancel')}
         </Button>
-        <Button type="button" mod={['unelevated']} loading={initializingContext} loader onClick={init}>
+        <Button ref={buttonRef} type="button" mod={['unelevated']} loading={initializingContext} loader onClick={init}>
           {translate('sql_editor_restore')}
         </Button>
       </OverlayActions>