chore(ChytCliqueActions): use side-panel for SQL [YTFRONT-3683]

ytsaurus · Dec 15, 2023 · 9d6d00f · 9d6d00f
1 parent fc77a27
commit 9d6d00f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 42 deletions.
diff --git a/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx b/packages/ui/src/ui/pages/chyt/ChytCliqueActions/ChytCliqueActions.tsx
@@ -1,12 +1,9 @@
 import React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
 import cn from 'bem-cn-lite';
 
 import {Button, DropdownMenu, DropdownMenuItem} from '@gravity-ui/uikit';
 
-import {Page} from '../../../../shared/constants/settings';
-
 import Icon from '../../../components/Icon/Icon';
 import {getCluster, isQueryTrackerAllowed} from '../../../store/selectors/global';
 import {updateQueryDraft} from '../../../pages/query-tracker/module/query/actions';
@@ -19,23 +16,47 @@ import './ChytCliqueActions.scss';
 
 const block = cn('chyt-clique-actions');
 
+export function useCliqueOnSqlAction(openWidget: () => void) {
+    const cluster = useSelector(getCluster);
+    const allowQueryTracker = useSelector(isQueryTrackerAllowed);
+    const dispatch = useDispatch();
+
+    return React.useCallback(
+        (alias: string) => {
+            if (allowQueryTracker) {
+                setTimeout(() => {
+                    dispatch(
+                        updateQueryDraft({
+                            engine: QueryEngine.CHYT,
+                            query: `SELECT 1;`,
+                            settings: {cluster, clique: alias},
+                        }),
+                    );
+                }, 500);
+                openWidget();
+            } else {
+                UIFactory.onChytAliasSqlClick({alias, cluster});
+            }
+        },
+        [cluster, openWidget, allowQueryTracker, dispatch],
+    );
+}
+
 export function ChytCliqueActions({
     alias,
     pool,
     showAllButtons,
     allButtonsClassName,
     onAction,
+    onSqlClick,
 }: {
     showAllButtons?: boolean;
     allButtonsClassName?: string;
     alias: string;
     pool?: string;
+    onSqlClick: (alias: string) => void;
     onAction?: (action: 'remove' | 'start' | 'stop') => void;
 }) {
-    const dispatch = useDispatch();
-    const history = useHistory();
-    const allowQueryTracker = useSelector(isQueryTrackerAllowed);
-
     const [visibleConfirmation, setVisibleConirmation] = React.useState<
         undefined | 'remove' | 'start' | 'stop'
     >();
@@ -64,28 +85,8 @@ export function ChytCliqueActions({
 
     const menuItems: Array<Array<DropdownMenuItem>> = [[start, stop], [remove]];
 
-    const cluster = useSelector(getCluster);
-
     const sqlButton = (
-        <Button
-            view="flat"
-            onClick={() => {
-                if (allowQueryTracker) {
-                    history.push(`/${cluster}/${Page.QUERIES}`);
-                    setTimeout(() => {
-                        dispatch(
-                            updateQueryDraft({
-                                engine: QueryEngine.CHYT,
-                                query: `SELECT 1;`,
-                                settings: {cluster, clique: alias},
-                            }),
-                        );
-                    }, 500);
-                } else {
-                    UIFactory.onChytAliasSqlClick({alias, cluster});
-                }
-            }}
-        >
+        <Button view="flat" onClick={() => onSqlClick(alias)}>
             <Icon awesome="sql" />
         </Button>
     );

diff --git a/packages/ui/src/ui/pages/chyt/ChytPageClique/ChytPageClique.tsx b/packages/ui/src/ui/pages/chyt/ChytPageClique/ChytPageClique.tsx
@@ -17,6 +17,8 @@ import {OperationId} from '../../../components/OperationId/OperationId';
 import StatusLabel from '../../../components/StatusLabel/StatusLabel';
 import {UserCard} from '../../../components/UserLink/UserLink';
 
+import {useQueryWidgetSidePanel} from '../../../pages/query-tracker/QueryWidget/side-panel';
+
 import {chytCliqueLoad, chytResetCurrentClique} from '../../../store/actions/chyt/clique';
 import {
     getChytCliqueData,
@@ -28,7 +30,7 @@ import {getCluster} from '../../../store/selectors/global';
 import {Page} from '../../../../shared/constants/settings';
 
 import {CliqueState} from '../components/CliqueState';
-import {ChytCliqueActions} from '../ChytCliqueActions/ChytCliqueActions';
+import {ChytCliqueActions, useCliqueOnSqlAction} from '../ChytCliqueActions/ChytCliqueActions';
 import {ChytPageCliqueTabs} from './ChytPageCliqueTabs';
 import {ChytSpecletEditButton} from './ChytPageCliqueSpeclet';
 import cn from 'bem-cn-lite';
@@ -58,6 +60,9 @@ export function ChytPageClique(props: RouteComponentProps<{alias: string}>) {
 
     useUpdater(update);
 
+    const {openWidget, widgetContent} = useQueryWidgetSidePanel();
+    const onSqlClick = useCliqueOnSqlAction(openWidget);
+
     return (
         <div className={block()}>
             <div className={block('header')}>
@@ -80,6 +85,7 @@ export function ChytPageClique(props: RouteComponentProps<{alias: string}>) {
                             update();
                         }
                     }}
+                    onSqlClick={onSqlClick}
                 />
                 <span className={block('edit')}>
                     <ChytSpecletEditButton compact />
@@ -88,6 +94,7 @@ export function ChytPageClique(props: RouteComponentProps<{alias: string}>) {
             <ChytCliqueErrors />
             <ChytCliqueMetaTable />
             <ChytPageCliqueTabs className={block('tabs')} />
+            {widgetContent}
         </div>
     );
 }

diff --git a/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx b/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx
@@ -30,15 +30,16 @@ import {ChytInfo} from '../../../store/reducers/chyt/list';
 import {Page} from '../../../../shared/constants/settings';
 import {CHYT_TABLE_TITLES} from '../../../constants/chyt-page';
 import {OperationPool} from '../../../components/OperationPool/OperationPool';
+import {useQueryWidgetSidePanel} from '../../../pages/query-tracker/QueryWidget/side-panel';
 
 import {CliqueState} from '../components/CliqueState';
 
-import {ChytCliqueActions} from '../ChytCliqueActions/ChytCliqueActions';
+import {ChytCliqueActions, useCliqueOnSqlAction} from '../ChytCliqueActions/ChytCliqueActions';
 import './ChytPageListTable.scss';
 
 const block = cn('chyt-page-list-table');
 
-function useChytListColumns(cluster: string) {
+function useChytListColumns(cluster: string, onSqlClick: (alias: string) => void) {
     const checkedColumns = useSelector(getChytListVisibleColumns);
 
     const columns: Array<Column<ChytInfo>> = React.useMemo(() => {
@@ -237,15 +238,19 @@ function useChytListColumns(cluster: string) {
                 render({row}) {
                     return (
                         <span className={block('one-row-cell')}>
-                            <ChytCliqueActions alias={row.alias} pool={row.pool} />
+                            <ChytCliqueActions
+                                alias={row.alias}
+                                pool={row.pool}
+                                onSqlClick={onSqlClick}
+                            />
                         </span>
                     );
                 },
                 align: 'center',
                 width: 60,
             } as Column<ChytInfo>,
         ];
-    }, [cluster, checkedColumns]);
+    }, [cluster, checkedColumns, onSqlClick]);
 
     return columns;
 }
@@ -299,16 +304,22 @@ function ChytPageListTable() {
     const items = useSelector(getChytListTableItems);
     const cluster = useSelector(getCluster);
 
-    const columns = useChytListColumns(cluster);
+    const {openWidget, widgetContent} = useQueryWidgetSidePanel();
+    const onSqlClick = useCliqueOnSqlAction(openWidget);
+
+    const columns = useChytListColumns(cluster, onSqlClick);
 
     return (
-        <DataTableYT
-            className={block()}
-            settings={DATA_TABLE_YT_SETTINGS_UNDER_TOOLBAR}
-            useThemeYT
-            columns={columns}
-            data={items}
-        />
+        <React.Fragment>
+            <DataTableYT
+                className={block()}
+                settings={DATA_TABLE_YT_SETTINGS_UNDER_TOOLBAR}
+                useThemeYT
+                columns={columns}
+                data={items}
+            />
+            {widgetContent}
+        </React.Fragment>
     );
 }
 

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
@@ -11,7 +11,7 @@ import Loader from '../../../components/Loader/Loader';
 export const QueryWidgetLazy = React.lazy(() => import('./index'));
 
 export const QueryWidgetPortal = withSplit(
-    withLazyLoading<QueryWidgetProps>(QueryWidgetLazy, <Loader />),
+    withLazyLoading<QueryWidgetProps>(QueryWidgetLazy, <Loader visible centered size="l" />),
 );
 
 export function useQueryWidgetSidePanel() {