feat: added a new query button

ytsaurus · Dec 20, 2023 · 98abd3e · 98abd3e
1 parent aff1ab9
commit 98abd3e
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 35 deletions.
diff --git a/packages/ui/src/ui/components/WithStickyToolbar/Toolbar/Toolbar.scss b/packages/ui/src/ui/components/WithStickyToolbar/Toolbar/Toolbar.scss
@@ -27,5 +27,9 @@ $TOOLBAR_COMPONENT_HEIGHT: 48px;
         &_shrinkable {
             flex-shrink: 1;
         }
+
+        &_marginRight_half {
+            margin-right: 12px;
+        }
     }
 }
diff --git a/packages/ui/src/ui/components/WithStickyToolbar/Toolbar/Toolbar.tsx b/packages/ui/src/ui/components/WithStickyToolbar/Toolbar/Toolbar.tsx
@@ -12,6 +12,7 @@ const ToolbarItemPropTypes = {
     wrapperClassName: PropTypes.string,
     growable: PropTypes.bool,
     shrinkable: PropTypes.bool,
+    marginRight: PropTypes.string,
 };
 
 interface Props {
@@ -22,6 +23,7 @@ interface Props {
         wrapperClassName?: string;
         growable?: boolean;
         shrinkable?: boolean;
+        marginRight?: 'half';
     }>;
     children?: React.ReactNode;
 }
@@ -44,15 +46,21 @@ export class Toolbar extends React.Component<Props> {
 
     renderItems() {
         const {itemsToWrap = []} = this.props;
-        return itemsToWrap.map(({name, node, growable, shrinkable, wrapperClassName}, index) => {
-            return node ? (
-                <div
-                    key={name || index}
-                    className={block('item', {name, growable, shrinkable}, wrapperClassName)}
-                >
-                    {node}
-                </div>
-            ) : null;
-        });
+        return itemsToWrap.map(
+            ({name, node, growable, shrinkable, wrapperClassName, marginRight}, index) => {
+                return node ? (
+                    <div
+                        key={name || index}
+                        className={block(
+                            'item',
+                            {name, growable, shrinkable, marginRight},
+                            wrapperClassName,
+                        )}
+                    >
+                        {node}
+                    </div>
+                ) : null;
+            },
+        );
     }
 }
diff --git a/packages/ui/src/ui/pages/query-tracker/NewQueryButton/NewQueryButton.tsx b/packages/ui/src/ui/pages/query-tracker/NewQueryButton/NewQueryButton.tsx
@@ -1,19 +1,12 @@
 import * as React from 'react';
-import {useDispatch} from 'react-redux';
 import {Button} from '@gravity-ui/uikit';
 import Icon from '../../../components/Icon/Icon';
-import {resetQueryTracker} from '../module/query/actions';
-
-export const NewQueryButton = () => {
-    const dispatch = useDispatch();
-
-    const handleClick = () => {
-        dispatch(resetQueryTracker());
-    };
 
+export const NewQueryButton = ({onClick}: {onClick: () => void}) => {
     return (
-        <Button qa="new-query-btn" view="outlined" size="l" title="New query" onClick={handleClick}>
-            <Icon awesome="plus" size={16} />
+        <Button qa="new-query-btn" view="outlined" size="l" title="New query" onClick={onClick}>
+            <Icon awesome="file" size={16} />
+            New
         </Button>
     );
 };
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/QueryMetaForm.tsx b/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/QueryMetaForm.tsx
@@ -1,28 +1,30 @@
 import React, {useCallback} from 'react';
 import cn from 'bem-cn-lite';
 import {Text} from '@gravity-ui/uikit';
-import {EditableAsText} from '../../../../components/EditableAsText/EditableAsText';
 import {useDispatch, useSelector} from 'react-redux';
+import {EditableAsText} from '../../../../components/EditableAsText/EditableAsText';
+import {Toolbar} from '../../../../components/WithStickyToolbar/Toolbar/Toolbar';
 import {getQuery, getQueryDraft} from '../../module/query/selectors';
 import {QuerySettingsButton} from '../../QuerySettingsButton';
 import {QueryFilesButton} from '../../QueryFilesButton';
 import {updateQueryDraft} from '../../module/query/actions';
+import {QueryFile} from '../../module/api';
+import {NewQueryButton} from '../../NewQueryButton/NewQueryButton';
 import {QueryEngineSelector} from './QueryEngineSelector/QueryEngineSelector';
 
 import './QueryMetaForm.scss';
-import {QueryFile} from '../../module/api';
-import {NewQueryButton} from '../../NewQueryButton/NewQueryButton';
-import {Toolbar} from '../../../../components/WithStickyToolbar/Toolbar/Toolbar';
 
 const block = cn('query-tracker-meta-form');
 export function QueryMetaForm({
+    onClickOnNewQueryButton,
     className,
     cluster,
     path,
 }: {
     className: string;
     cluster?: string;
     path?: string;
+    onClickOnNewQueryButton: () => void;
 }) {
     const dispatch = useDispatch();
     const draft = useSelector(getQueryDraft);
@@ -46,12 +48,14 @@ export function QueryMetaForm({
     );
 
     const queryName = draft.annotations?.title;
+
     return (
         <div className={block(null, className)}>
             <Toolbar
                 itemsToWrap={[
                     {
-                        name: queryName,
+                        name: 'query-name',
+                        marginRight: 'half',
                         node: (
                             <EditableAsText
                                 withControls
@@ -74,10 +78,12 @@ export function QueryMetaForm({
                     },
                     {
                         name: 'Engine',
+                        marginRight: 'half',
                         node: <QueryEngineSelector cluster={cluster} path={path} />,
                     },
                     {
                         name: 'Settings',
+                        marginRight: 'half',
                         node: (
                             <QuerySettingsButton
                                 settings={draft.settings}
@@ -87,6 +93,7 @@ export function QueryMetaForm({
                     },
                     {
                         name: 'Files',
+                        marginRight: 'half',
                         node: (
                             <QueryFilesButton
                                 files={draft.files}
@@ -97,7 +104,8 @@ export function QueryMetaForm({
                     },
                     {
                         name: 'NewQuery',
-                        node: <NewQueryButton />,
+                        marginRight: 'half',
+                        node: <NewQueryButton onClick={onClickOnNewQueryButton} />,
                     },
                 ]}
             />

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/index.tsx
@@ -1,22 +1,29 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {RowWithName} from '../../../containers/AppNavigation/TopRowContent/SectionName';
 import {Page} from '../../../../shared/constants/settings';
 import {QueryMetaForm} from './QueryMetaForm/QueryMetaForm';
+import {getQueryGetParams} from '../module/query/selectors';
+import {resetQueryTracker} from '../module/query/actions';
 
 import './index.scss';
-import {getQueryGetParams} from '../module/query/selectors';
 
 const block = cn('query-tracker-top-row-content');
 
 export function QueryHeader() {
+    const dispatch = useDispatch();
     const routeParams = useSelector(getQueryGetParams);
 
+    const handleClickOnNewQueryButton = () => {
+        dispatch(resetQueryTracker());
+    };
+
     return (
         <div className={block()}>
             <div className={block('meta')}>
                 <QueryMetaForm
+                    onClickOnNewQueryButton={handleClickOnNewQueryButton}
                     className={block('meta-form')}
                     cluster={routeParams.cluster}
                     path={routeParams.path}

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.scss b/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.scss
@@ -33,6 +33,10 @@
         justify-content: flex-end;
     }
 
+    &__meta-form {
+        margin-right: 12px;
+    }
+
     .flex-split__pane:nth-child(1) {
         overflow: visible;
     }

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.tsx
@@ -1,28 +1,42 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
-import QueryEditor from '../QueryEditor/QueryEditor';
-import {QueryMetaForm} from '../QueryTrackerTopRow/QueryMetaForm/QueryMetaForm';
+import {Button} from '@gravity-ui/uikit';
+import {useDispatch, useSelector} from 'react-redux';
 import Icon from '../../../components/Icon/Icon';
-import {useSelector} from 'react-redux';
 import {getCluster} from '../../../store/selectors/global';
-import {Button} from '@gravity-ui/uikit';
-import {QueryTrackerOpenButton} from '../QueryTrackerOpenButton/QueryTrackerOpenButton';
 import {getPath} from '../../../store/selectors/navigation';
+import {QueryEngine} from '../module/api';
+import QueryEditor from '../QueryEditor/QueryEditor';
+import {QueryMetaForm} from '../QueryTrackerTopRow/QueryMetaForm/QueryMetaForm';
+import {QueryTrackerOpenButton} from '../QueryTrackerOpenButton/QueryTrackerOpenButton';
 import {QueriesPooling} from '../hooks/QueriesPooling/context';
+import {createQueryFromTablePath} from '../module/query/actions';
+
 import './index.scss';
 
 const block = cn('query-widget');
 
 export type QueryWidgetProps = {onClose: () => void};
 
 export default function QueryWidget({onClose}: QueryWidgetProps) {
+    const dispatch = useDispatch();
     const cluster = useSelector(getCluster);
     const path = useSelector(getPath);
+
+    const handleClickOnNewQueryButton = () => {
+        dispatch(createQueryFromTablePath(QueryEngine.YQL, cluster, path));
+    };
+
     return (
         <div className={block()}>
             <QueriesPooling>
                 <div className={block('header')}>
-                    <QueryMetaForm className={block('meta-form')} cluster={cluster} path={path} />
+                    <QueryMetaForm
+                        onClickOnNewQueryButton={handleClickOnNewQueryButton}
+                        className={block('meta-form')}
+                        cluster={cluster}
+                        path={path}
+                    />
                     <div className={block('header-controls')}>
                         <div className={block('header-control-left')}>
                             <QueryTrackerOpenButton