chore(Document/YqlView): use autoOpen for yql-view [YTFRONT-4463]

packages/ui/src/ui/UIFactory/index.tsx

@@ -126,6 +126,14 @@ export type QueryResultChartTab = {
     renderContent: (params: {query: QueryItem}) => React.ReactNode;
 };
 
+export type YQLButtonProps = {
+    className?: string;
+    disabled?: boolean;
+    opened?: boolean;
+    onOpen(): void;
+    onClose(): void;
+};
+
 export interface UIFactory {
     getClusterAppearance(cluster?: string): undefined | ClusterAppearance;
 
@@ -404,8 +412,8 @@ export interface UIFactory {
     renderUserSuggest(props: UserSuggestProps): React.ReactNode;
 
     yqlWidgetSetup?: {
-        renderButton(props: {className?: string; isSplit?: string}): React.ReactNode;
-        renderWidget(props?: {cluster: string; path: string; attributes: unknown}): React.ReactNode;
+        renderButton(props: YQLButtonProps): React.ReactNode;
+        renderWidget(props?: {visible?: boolean; onClose: () => void}): React.ReactNode;
         renderYqlOperationLink(yqlOperationId: string): React.ReactNode;
     };
 

packages/ui/src/ui/containers/OpenQueryButtons/OpenQueryButtons.scss

@@ -1,9 +1,14 @@
 .yt-open-query-buttons {
-    display: inline-flex;
+    display: flex;
     flex-wrap: nowrap;
 
-    &__query:not(:last-child) {
-        margin-right: 10px;
+    &__query {
+        display: flex;
+        flex-wrap: nowrap;
+
+        &:not(:last-child) {
+            margin-right: 10px;
+        }
     }
 
     &__btn + &__btn {

packages/ui/src/ui/containers/OpenQueryButtons/OpenQueryButtons.tsx

@@ -5,11 +5,13 @@ import {useDispatch, useSelector} from 'react-redux';
 
 import Icon from '../../components/Icon/Icon';
 import {YQLKitButton} from '../../containers/YQLKitButton/YQLKitButton';
-import {useQueryWidgetSidePanel} from '../../pages/query-tracker/QueryWidget/side-panel';
+import {QueryWidgetLazy} from '../../pages/query-tracker/QueryWidget/side-panel';
 import {QueryEngine} from '../../pages/query-tracker/module/engines';
 import {createQueryFromTablePath} from '../../pages/query-tracker/module/query/actions';
 import {createNewQueryUrl} from '../../pages/query-tracker/utils/navigation';
 import {getNavigationSqlService} from '../../store/selectors/settings/navigation';
+import UIFactory from '../../UIFactory';
+import {useSidePanel} from '../../hooks/use-side-panel';
 
 import './OpenQueryButtons.scss';
 
@@ -19,45 +21,87 @@ export type OpenQueryButtonProps = {
     className?: string;
     path: string;
     cluster: string;
+
+    autoOpen?: boolean;
 };
 
-export function OpenQueryButtons({className, path, cluster}: OpenQueryButtonProps) {
+export function OpenQueryButtons({className, path, cluster, autoOpen}: OpenQueryButtonProps) {
     const dispatch = useDispatch();
-    const {openWidget, widgetOpened, widgetContent} = useQueryWidgetSidePanel();
+    const [panelMode, setPanelMode] = React.useState<'qt' | 'yqlkit' | undefined>();
+
+    const onOpenYqlKit = React.useCallback(() => setPanelMode('yqlkit'), []);
+    const onClose = React.useCallback(() => setPanelMode(undefined), []);
+
+    const {openWidget, closeWidget, widgetContent} = useSidePanel(panelMode + '_widget', {
+        renderContent({visible}) {
+            return panelMode === 'qt' ? (
+                <QueryWidgetLazy onClose={onClose} />
+            ) : (
+                UIFactory.yqlWidgetSetup?.renderWidget({visible, onClose})
+            );
+        },
+    });
+
+    const {isQtKitEnabled, isYqlKitEnabled} = useSelector(getNavigationSqlService);
 
-    const {isQtKitEnabled} = useSelector(getNavigationSqlService);
+    React.useEffect(() => {
+        if (panelMode === undefined) {
+            closeWidget();
+            return;
+        }
 
-    const handleOpen = React.useCallback(() => {
-        dispatch(createQueryFromTablePath(QueryEngine.YQL, cluster, path));
+        if (panelMode === 'qt') {
+            dispatch(createQueryFromTablePath(QueryEngine.YQL, cluster, path));
+        }
         openWidget();
-    }, [dispatch, path, cluster, openWidget]);
-
-    return !isQtKitEnabled ? null : (
-        <div className={className}>
-            <div className={b('query')}>
-                <Button
-                    onClick={handleOpen}
-                    pin="round-clear"
-                    view="action"
-                    className={b('btn')}
-                    disabled={widgetOpened}
-                    title="Open Queries widget"
-                >
-                    YQL query
-                </Button>
-                <Button
-                    className={b('btn')}
-                    pin="clear-round"
-                    view="action"
-                    href={createNewQueryUrl(cluster, QueryEngine.YQL, {path})}
-                    target="_blank"
-                    title="Open Queries page"
-                >
-                    <Icon awesome="table" />
-                </Button>
-                {widgetContent}
-            </div>
-            <YQLKitButton />
+    }, [panelMode, openWidget, closeWidget]);
+
+    const allowQtAutoOpen = autoOpen && isQtKitEnabled;
+
+    React.useEffect(() => {
+        if (autoOpen) {
+            setPanelMode(allowQtAutoOpen ? 'qt' : 'yqlkit');
+        }
+    }, [autoOpen, allowQtAutoOpen]);
+
+    return (
+        <div className={b(null, className)}>
+            {isQtKitEnabled && (
+                <div className={b('query')}>
+                    <Button
+                        onClick={() => {
+                            setPanelMode(panelMode === 'qt' ? undefined : 'qt');
+                        }}
+                        pin="round-clear"
+                        view="action"
+                        className={b('btn')}
+                        selected={panelMode === 'qt'}
+                        disabled={panelMode === 'yqlkit'}
+                        title="Open Queries widget"
+                    >
+                        QT Kit
+                    </Button>
+                    <Button
+                        className={b('btn')}
+                        pin="clear-round"
+                        view="action"
+                        href={createNewQueryUrl(cluster, QueryEngine.YQL, {path})}
+                        target="_blank"
+                        title="Open Queries page"
+                    >
+                        <Icon awesome="table" />
+                    </Button>
+                </div>
+            )}
+            {isYqlKitEnabled && (
+                <YQLKitButton
+                    disabled={panelMode === 'qt'}
+                    opened={panelMode === 'yqlkit'}
+                    onOpen={onOpenYqlKit}
+                    onClose={onClose}
+                />
+            )}
+            {widgetContent}
         </div>
     );
 }

packages/ui/src/ui/containers/YQLKitButton/YQLKitButton.tsx

@@ -1,25 +1,18 @@
 import React from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 
-import {RootState} from '../../store/reducers/index';
 import {mergeScreen} from '../../store/actions/global';
 
-import UIFactory from '../../UIFactory';
+import UIFactory, {YQLButtonProps} from '../../UIFactory';
 
-export function YQLKitButton({className}: {className?: string}) {
+export function YQLKitButton(props: YQLButtonProps) {
     const dispatch = useDispatch();
-    const {isSplit} = useSelector((state: RootState) => state.global.splitScreen);
 
     React.useEffect(() => {
         return () => {
             dispatch(mergeScreen());
         };
     }, [dispatch]);
 
-    return (
-        <React.Fragment>
-            {UIFactory.yqlWidgetSetup?.renderButton({isSplit, className})}
-            {UIFactory.yqlWidgetSetup?.renderWidget()}
-        </React.Fragment>
-    );
+    return <React.Fragment>{UIFactory.yqlWidgetSetup?.renderButton(props)}</React.Fragment>;
 }

packages/ui/src/ui/pages/navigation/content/Document/Document.tsx

@@ -63,6 +63,7 @@ const Document: FC = () => {
                             settings={settings}
                             attributes={attributes}
                             onEditClick={handleEditClick}
+                            queryAutoOpen={loaded}
                         />
                         <DocumentEditModal
                             settings={settings}

packages/ui/src/ui/pages/navigation/content/Document/DocumentBody.tsx

@@ -1,14 +1,13 @@
 import React, {FC, Fragment} from 'react';
 import cn from 'bem-cn-lite';
 
-import {Flex} from '@gravity-ui/uikit';
+import {Alert, Button, Flex} from '@gravity-ui/uikit';
 
 // @ts-ignore
 import ypath from '@ytsaurus/interface-helpers/lib/ypath';
 import MetaTable from '../../../../components/MetaTable/MetaTable';
 import {main} from '../../../../components/MetaTable/presets';
 import Yson from '../../../../components/Yson/Yson';
-import {Alert, Button} from '@gravity-ui/uikit';
 import {UnipikaSettings} from '../../../../components/Yson/StructuredYson/StructuredYsonTypes';
 import Icon from '../../../../components/Icon/Icon';
 import {OpenQueryButtons} from '../../../../containers/OpenQueryButtons/OpenQueryButtons';
@@ -25,6 +24,7 @@ type Props = {
     document: any;
     settings: UnipikaSettings;
     onEditClick: () => void;
+    queryAutoOpen?: boolean;
 };
 
 const EditButton: FC<Pick<Props, 'onEditClick'>> = ({onEditClick}) => {
@@ -36,24 +36,35 @@ const EditButton: FC<Pick<Props, 'onEditClick'>> = ({onEditClick}) => {
     );
 };
 
-function OpenYqlViewButton() {
+function OpenYqlViewButton({autoOpen}: {autoOpen?: boolean}) {
     const path: string = useSelector(getPath);
     const cluster = useSelector(getCluster);
 
-    return <OpenQueryButtons path={path} cluster={cluster} className={block('yql')} />;
+    return (
+        <OpenQueryButtons
+            path={path}
+            cluster={cluster}
+            className={block('yql')}
+            autoOpen={autoOpen}
+        />
+    );
 }
 
-function DocumentExtraTools({onEditClick, attributes}: Pick<Props, 'attributes' | 'onEditClick'>) {
+function DocumentExtraTools({
+    onEditClick,
+    attributes,
+    queryAutoOpen,
+}: Pick<Props, 'attributes' | 'onEditClick' | 'queryAutoOpen'>) {
     const isYqlView = 'view' === ypath.getValue(attributes, '/_yql_type');
     return (
         <Flex gap={4}>
-            {isYqlView && <OpenYqlViewButton />}
+            {isYqlView && <OpenYqlViewButton autoOpen={queryAutoOpen} />}
             <EditButton onEditClick={onEditClick} />
         </Flex>
     );
 }
 
-const DocumentBody: FC<Props> = ({attributes, settings, onEditClick, document = null}) => {
+function DocumentBody({attributes, settings, onEditClick, document = null, queryAutoOpen}: Props) {
     const [type] = ypath.getValues(attributes, ['/type']);
 
     return (
@@ -72,12 +83,16 @@ const DocumentBody: FC<Props> = ({attributes, settings, onEditClick, document =
                     settings={settings}
                     folding
                     extraTools={
-                        <DocumentExtraTools onEditClick={onEditClick} attributes={attributes} />
+                        <DocumentExtraTools
+                            onEditClick={onEditClick}
+                            attributes={attributes}
+                            queryAutoOpen={queryAutoOpen}
+                        />
                     }
                 />
             )}
         </Fragment>
     );
-};
+}
 
 export default DocumentBody;

packages/ui/src/ui/store/selectors/settings/navigation.ts

@@ -8,8 +8,8 @@ export const getNavigationSqlService = createSelector(
     [getSettingsData, isDeveloper],
     (data, isAdmin) => {
         const value = data['global::navigation::sqlService'];
-        const isQtKitEnabled = value ? -1 !== value.indexOf('qtkit') : isAdmin;
-        const isYqlKitEnabled = value ? -1 !== value.indexOf('yqlkit') : true;
+        const isQtKitEnabled = value?.length ? -1 !== value.indexOf('qtkit') : isAdmin;
+        const isYqlKitEnabled = value?.length ? -1 !== value.indexOf('yqlkit') : true;
 
         const hasYqlWidget = Boolean(UIFactory.yqlWidgetSetup);
         return {