CB-5760 add title to driver manager form

webapp/packages/core-app/src/AppScreen/RightArea.tsx

@@ -40,8 +40,12 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
 
   const toolsDisabled = appScreenService.rightAreaBottom.getDisplayed({}).length === 0;
 
+  function close() {
+    optionsPanelService.close();
+  }
+
   return (
-    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true }, className)}>
+    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true }, className)} onClose={close}>
       <SlideElement>
         <Loader className={s(styles, { loader: true })} suspense>
           <OptionsPanel />
@@ -61,7 +65,7 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
             </Loader>
           </Pane>
         </Split>
-        <SlideOverlay onClick={() => optionsPanelService.close()} />
+        <SlideOverlay onClick={close} />
       </SlideElement>
     </SlideBox>
   );

webapp/packages/core-blocks/src/Slide/SlideBox.tsx

@@ -8,7 +8,9 @@
 import { observer } from 'mobx-react-lite';
 import { useEffect, useRef } from 'react';
 
-import { s, useS } from '../index.js';
+import { useHotkeys } from '@cloudbeaver/core-utils';
+
+import { s, useMergeRefs, useS } from '../index.js';
 import SlideBoxStyles from './SlideBox.module.css';
 import SlideBoxElementStyles from './SlideElement.module.css';
 import SlideBoxOverlayStyles from './SlideOverlay.module.css';
@@ -17,13 +19,17 @@ interface Props {
   className?: string;
   children?: React.ReactNode;
   open?: boolean;
+  onClose?: () => void;
 }
 
-export const SlideBox = observer<Props>(function SlideBox({ children, open, className }) {
+export const SlideBox = observer<Props>(function SlideBox({ children, open, className, onClose }) {
   const slideBoxStyles = useS(SlideBoxStyles);
   const slideBoxElementStyles = useS(SlideBoxElementStyles);
   const slideBoxOverlayStyles = useS(SlideBoxOverlayStyles);
+
   const divRef = useRef<HTMLDivElement>(null);
+  const ref = useHotkeys('escape', () => onClose?.(), { enabled: open });
+  const mergedRefs = useMergeRefs(ref, divRef);
 
   useEffect(() => {
     const div = divRef.current;
@@ -48,7 +54,7 @@ export const SlideBox = observer<Props>(function SlideBox({ children, open, clas
 
   return (
     <div
-      ref={divRef}
+      ref={mergedRefs}
       className={s(slideBoxStyles, { slideBox: true }, s(slideBoxElementStyles, { open }), s(slideBoxOverlayStyles, { open }), className)}
     >
       {children}

webapp/packages/core-blocks/src/Slide/SlideElement.module.css

@@ -11,11 +11,11 @@
   display: inline-block;
   vertical-align: top;
   white-space: normal;
-  transition: transform ease-in-out 0.4s;
+  transition: transform ease-in-out 0.3s;
   transform: translateX(-100%);
 
   &:first-child {
-    transition: width ease-in-out 0.4s;
+    transition: width ease-in-out 0.3s;
     width: 100%;
   }
 }

webapp/packages/core-blocks/src/Slide/SlideOverlay.module.css

@@ -16,7 +16,7 @@
   top: 0;
   left: 0;
   background: rgb(0 0 0 / 0%);
-  transition: background cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+  transition: background ease-in-out 0.3s;
 }
 
 .iconBtn {

webapp/packages/core-utils/package.json

@@ -30,7 +30,8 @@
     "whatwg-mimetype": "^4",
     "zod": "^3",
     "zod-i18n-map": "^2",
-    "zod-validation-error": "^3"
+    "zod-validation-error": "^3",
+    "react-hotkeys-hook": "^4"
   },
   "peerDependencies": {},
   "devDependencies": {

webapp/packages/core-utils/src/index.ts

@@ -5,6 +5,8 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+export { useHotkeys } from 'react-hotkeys-hook';
+
 export * from './Promises/CancellablePromise.js';
 export * from './Promises/cancellableTimeout.js';
 export * from './Promises/Deferred.js';

webapp/packages/core-view/package.json

@@ -26,8 +26,7 @@
     "@cloudbeaver/core-utils": "^0",
     "mobx": "^6",
     "mobx-react-lite": "^4",
-    "react": "^18",
-    "react-hotkeys-hook": "^4"
+    "react": "^18"
   },
   "peerDependencies": {},
   "devDependencies": {

webapp/packages/core-view/src/View/CaptureView.tsx

@@ -7,11 +7,10 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 
 import { s, useFocus, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
-import { isObjectsEqual } from '@cloudbeaver/core-utils';
+import { isObjectsEqual, useHotkeys } from '@cloudbeaver/core-utils';
 
 import { ActionService } from '../Action/ActionService.js';
 import type { IActionItem } from '../Action/IActionItem.js';

webapp/packages/plugin-administration/src/Administration/Administration.tsx

@@ -100,6 +100,10 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
     contentRef.current?.scrollTo({ top: 0, left: 0 });
   }, [activeScreen?.item]);
 
+  function close() {
+    optionsPanelService.close();
+  }
+
   return (
     <CaptureView view={administrationViewService} className={s(styles, { captureView: true })}>
       <AdministrationCaptureViewContext />
@@ -120,7 +124,7 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
         <div ref={contentRef} className={s(styles, { contentContainer: true })}>
           {children}
           <SContext registry={adminPageRegistry}>
-            <SlideBox className={s(styles, { slideBox: true })} open={optionsPanelService.active}>
+            <SlideBox className={s(styles, { slideBox: true })} open={optionsPanelService.active} onClose={close}>
               <SlideElement className={s(styles, { slideElement: true })}>
                 <Loader className={s(styles, { loader: true })} suspense>
                   <div className={s(styles, { content: true })}>
@@ -132,7 +136,7 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
                 <div className={s(styles, { content: true })}>
                   <ItemContent activeScreen={activeScreen} configurationWizard={configurationWizard} />
                 </div>
-                <SlideOverlay onClick={() => optionsPanelService.close()} />
+                <SlideOverlay onClick={close} />
               </SlideElement>
             </SlideBox>
           </SContext>