From fc77a27843c1fa0edc4d0d7a8c2e174c47b4e51d Mon Sep 17 00:00:00 2001
From: Maksim Efremov <ma-efremoff@yandex-team.ru>
Date: Thu, 14 Dec 2023 19:59:59 +0300
Subject: [PATCH] chore: extract useQueryWidgetSidePanel

---
 .../TableOverview/CreateQueryFromTable.tsx    | 38 +++++--------------
 .../query-tracker/QueryWidget/side-panel.tsx  | 37 ++++++++++++++++++
 2 files changed, 47 insertions(+), 28 deletions(-)
 create mode 100644 packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx

diff --git a/packages/ui/src/ui/pages/navigation/content/Table/TableOverview/CreateQueryFromTable.tsx b/packages/ui/src/ui/pages/navigation/content/Table/TableOverview/CreateQueryFromTable.tsx
index 1df2d52215..405c583d2c 100644
--- a/packages/ui/src/ui/pages/navigation/content/Table/TableOverview/CreateQueryFromTable.tsx
+++ b/packages/ui/src/ui/pages/navigation/content/Table/TableOverview/CreateQueryFromTable.tsx
@@ -1,51 +1,36 @@
-import React, {ReactElement, useCallback, useState} from 'react';
+import React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {Button, Loader} from '@gravity-ui/uikit';
+import {Button} from '@gravity-ui/uikit';
 import {QueryEngine} from '../../../../query-tracker/module/engines';
 import {getPath} from '../../../../../store/selectors/navigation';
 import {getCluster} from '../../../../../store/selectors/global';
-import type {QueryWidgetProps} from '../../../../query-tracker/QueryWidget';
-import withLazyLoading from '../../../../../hocs/withLazyLoading';
 import {createQueryFromTablePath} from '../../../../query-tracker/module/query/actions';
 import Icon from '../../../../../components/Icon/Icon';
 import {createNewQueryUrl} from '../../../../query-tracker/utils/navigation';
-import withSplit from '../../../../../hocs/withSplit';
-import {mergeScreen, splitScreen} from '../../../../../store/actions/global';
-import {SPLIT_TYPE} from '../../../../../constants/components/nodes/nodes';
+import {useQueryWidgetSidePanel} from '../../../../query-tracker/QueryWidget/side-panel';
 import './CreateQueryFromTable.scss';
 
 const b = cn('create-query-btn');
 
-const QueryWidgetLazy = React.lazy(() => import('../../../../query-tracker/QueryWidget'));
-
-export const QueryWidgetPortal = withSplit(
-    withLazyLoading<QueryWidgetProps>(QueryWidgetLazy, <Loader className={b('loader')} />),
-) as unknown as ReactElement<QueryWidgetProps>;
-
 export function CreateQueryFromTable({className}: {className: string}) {
-    const [widgetOpened, setWidgetOpened] = useState(false);
+    const {openWidget, widgetOpened, widgetContent} = useQueryWidgetSidePanel();
+
     const dispatch = useDispatch();
 
     const cluster = useSelector(getCluster);
     const path = useSelector(getPath);
 
-    const openWidget = useCallback(() => {
+    const handleOpen = React.useCallback(() => {
         dispatch(createQueryFromTablePath(QueryEngine.YQL, cluster, path));
-        dispatch(splitScreen(SPLIT_TYPE));
-        setWidgetOpened(true);
-    }, [setWidgetOpened, dispatch, path, cluster]);
-
-    const onClose = useCallback(() => {
-        setWidgetOpened(false);
-        dispatch(mergeScreen());
-    }, [setWidgetOpened, dispatch]);
+        openWidget();
+    }, [path, cluster, openWidget, dispatch]);
 
     return (
         <>
             <div className={b(null, className)}>
                 <Button
-                    onClick={openWidget}
+                    onClick={handleOpen}
                     pin="round-clear"
                     view="action"
                     className={b('btn')}
@@ -65,10 +50,7 @@ export function CreateQueryFromTable({className}: {className: string}) {
                     <Icon awesome="table" />
                 </Button>
             </div>
-            {widgetOpened && (
-                // @ts-ignore
-                <QueryWidgetPortal onClose={onClose} />
-            )}
+            {widgetContent}
         </>
     );
 }
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx b/packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx
new file mode 100644
index 0000000000..d9c5420d7a
--- /dev/null
+++ b/packages/ui/src/ui/pages/query-tracker/QueryWidget/side-panel.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {useDispatch} from 'react-redux';
+
+import withSplit from '../../../hocs/withSplit';
+import withLazyLoading from '../../../hocs/withLazyLoading';
+import type {QueryWidgetProps} from './index';
+import {mergeScreen, splitScreen} from '../../../store/actions/global';
+import {SPLIT_TYPE} from '../../../constants/components/nodes/nodes';
+import Loader from '../../../components/Loader/Loader';
+
+export const QueryWidgetLazy = React.lazy(() => import('./index'));
+
+export const QueryWidgetPortal = withSplit(
+    withLazyLoading<QueryWidgetProps>(QueryWidgetLazy, <Loader />),
+);
+
+export function useQueryWidgetSidePanel() {
+    const [widgetOpened, setWidgetOpened] = React.useState(false);
+    const dispatch = useDispatch();
+
+    const openWidget = React.useCallback(() => {
+        dispatch(splitScreen(SPLIT_TYPE));
+        setWidgetOpened(true);
+    }, [setWidgetOpened, dispatch]);
+
+    const onClose = React.useCallback(() => {
+        setWidgetOpened(false);
+        dispatch(mergeScreen());
+    }, [setWidgetOpened, dispatch]);
+
+    return {
+        closeWidget: onClose,
+        openWidget,
+        widgetOpened,
+        widgetContent: widgetOpened ? <QueryWidgetPortal onClose={onClose} /> : null,
+    };
+}