feat: Added the ability to hide queries list sidebar

packages/ui/src/shared/constants/settings-types.ts

@@ -68,6 +68,10 @@ interface AccountsSettings {
     'global::accounts::dashboardVisibilityMode': 'string';
 }
 
+interface QueryTrackerSettings {
+    'global::queryTracker::queriesListSidebarVisibilityMode': boolean;
+}
+
 interface OtherSettings {
     [key: string]: any;
 }
@@ -82,9 +86,10 @@ export interface DefaultSettings {
     A11Y: A11YSettings;
     MENU: MenuSettings;
     ACCOUNTS: AccountsSettings;
+    QUERY_TRACKER: QueryTrackerSettings;
 }
 
-export type Settings = GlobalSettings &
+type DescribedSettings = GlobalSettings &
     YsonSettings &
     DevelopmentSettings &
     SystemSettings &
@@ -93,4 +98,8 @@ export type Settings = GlobalSettings &
     A11YSettings &
     MenuSettings &
     AccountsSettings &
-    OtherSettings;
+    QueryTrackerSettings;
+
+export type Settings = DescribedSettings & OtherSettings;
+
+export type SettingKey = keyof DescribedSettings;

packages/ui/src/shared/constants/settings.ts

@@ -111,6 +111,7 @@ export const SettingName = {
     QUERY_TRACKER: {
         STAGE: 'queryTrackerStage',
         YQL_AGENT_STAGE: 'yqlAgentStage',
+        QUERIES_LIST_SIDEBAR_VISIBILITY_MODE: 'queriesListSidebarVisibilityMode',
     },
 } as const;
 

packages/ui/src/ui/components/Icon/importGravityIcons.ts

@@ -3,10 +3,13 @@ import Code from '@gravity-ui/icons/svgs/code.svg';
 import CircleXmark from '@gravity-ui/icons/svgs/circle-xmark.svg';
 import FolderArrowDown from '@gravity-ui/icons/svgs/folder-arrow-down.svg';
 import FolderOpen from '@gravity-ui/icons/svgs/folder-open.svg';
+import LayoutSideContent from '@gravity-ui/icons/svgs/layout-side-content.svg';
+
 export const iconNames = {
     ['lock']: Lock,
     ['code']: Code,
     ['times-circle']: CircleXmark,
     ['folder-arrow-down']: FolderArrowDown,
     ['folder-open']: FolderOpen,
+    ['layout-side-content']: LayoutSideContent,
 };

packages/ui/src/ui/pages/query-tracker/QueriesListSidebarToggleButton/QueriesListSidebarToggleButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Button} from '@gravity-ui/uikit';
+import Icon from '../../../components/Icon/Icon';
+import {useQueriesListSidebarToggle} from '../hooks/QueriesList';
+
+export function QueriesListSidebarToggleButton() {
+    const {isQueriesListSidebarVisible, toggleQueriesListSideBarToggle} =
+        useQueriesListSidebarToggle();
+
+    return (
+        <Button
+            view="outlined"
+            size="l"
+            title={`${isQueriesListSidebarVisible ? 'Hide' : 'Show'} queries list`}
+            onClick={toggleQueriesListSideBarToggle}
+        >
+            <Icon awesome="layout-side-content" size={16} />
+        </Button>
+    );
+}

packages/ui/src/ui/pages/query-tracker/QueryEditor/QueryEditor.tsx

@@ -20,7 +20,6 @@ import {QueryResults} from '../QueryResults';
 import SquareIcon from '@gravity-ui/icons/svgs/square.svg';
 import LayoutFooterIcon from '@gravity-ui/icons/svgs/layout-footer.svg';
 
-import LayoutSideContentIcon from '@gravity-ui/icons/svgs/layout-side-content.svg';
 import XmarkIcon from '@gravity-ui/icons/svgs/xmark.svg';
 
 import './QueryEditor.scss';
@@ -147,12 +146,10 @@ const ResultView = React.memo(function ResultView({
     query,
     resultViewMode,
     setResultViewMode,
-    listVisible,
 }: {
     query: QueryItem;
     resultViewMode: ResultMode;
     setResultViewMode: (v: ResultMode) => void;
-    listVisible?: QueryListVisible;
 }) {
     return (
         <QueryResults
@@ -161,15 +158,6 @@ const ResultView = React.memo(function ResultView({
             minimized={resultViewMode === 'minimized'}
             toolbar={
                 <>
-                    {listVisible && (
-                        <Button
-                            className={b('meta-action')}
-                            view={listVisible.visible ? 'flat' : 'outlined'}
-                            onClick={() => listVisible.setVisibility(!listVisible.visible)}
-                        >
-                            <Icon data={LayoutSideContentIcon} size={16} />
-                        </Button>
-                    )}
                     {resultViewMode === 'split' ? (
                         <Button
                             className={b('meta-action')}
@@ -203,16 +191,10 @@ const ResultView = React.memo(function ResultView({
 });
 
 type ResultMode = 'full' | 'minimized' | 'split';
-type QueryListVisible = {
-    visible: boolean;
-    setVisibility: (visible: boolean) => void;
-};
 export default function QueryEditor({
     onStartQuery,
-    listVisible,
 }: {
     onStartQuery?: (queryId: string) => boolean | void;
-    listVisible?: QueryListVisible;
 }) {
     const query = useCurrentQuery();
 
@@ -247,7 +229,6 @@ export default function QueryEditor({
                         query={query}
                         setResultViewMode={setResultViewMode}
                         resultViewMode={resultViewMode}
-                        listVisible={listVisible}
                     />
                 )}
             </FlexSplitPane>

packages/ui/src/ui/pages/query-tracker/QueryTracker/QueryTracker.tsx

@@ -13,6 +13,7 @@ import {
     loadQuery,
 } from '../module/query/actions';
 import {getQueryGetParams} from '../module/query/selectors';
+import {useQueriesListSidebarToggle} from '../hooks/QueriesList';
 import {QueriesList} from '../QueriesList';
 
 import cn from 'bem-cn-lite';
@@ -89,8 +90,8 @@ function QueryPage(props: Props) {
 }
 
 export default function QueryTracker({match}: Props) {
+    const {isQueriesListSidebarVisible} = useQueriesListSidebarToggle();
     const [sizes, setSize] = useState(initialSizes);
-    const [listVisible, setListVisible] = useState<boolean>(true);
     const getSize = useMemo(() => {
         return () => sizes;
     }, [sizes]);
@@ -117,14 +118,8 @@ export default function QueryTracker({match}: Props) {
                     minSize={minSize}
                     getInitialSizes={getSize}
                 >
-                    {listVisible && <QueriesList />}
-                    <QueryEditor
-                        onStartQuery={goToCreatedQuery}
-                        listVisible={{
-                            visible: listVisible,
-                            setVisibility: setListVisible,
-                        }}
-                    ></QueryEditor>
+                    {isQueriesListSidebarVisible ? <QueriesList /> : null}
+                    <QueryEditor onStartQuery={goToCreatedQuery} />
                 </FlexSplitPane>
             </QueriesPooling>
         </>

packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/index.tsx

@@ -7,6 +7,7 @@ import {QueryMetaForm} from './QueryMetaForm/QueryMetaForm';
 
 import './index.scss';
 import {getQueryGetParams} from '../module/query/selectors';
+import {QueriesListSidebarToggleButton} from '../QueriesListSidebarToggleButton/QueriesListSidebarToggleButton';
 
 const block = cn('query-tracker-top-row-content');
 
@@ -30,6 +31,7 @@ export default function QueryTrackerTopRow() {
     return (
         <RowWithName page={Page.QUERIES}>
             <QueryHeader />
+            <QueriesListSidebarToggleButton />
         </RowWithName>
     );
 }

packages/ui/src/ui/pages/query-tracker/hooks/QueriesList/index.ts

@@ -8,6 +8,8 @@ import {
     isQueriesListLoading,
 } from '../../module/queries_list/selectors';
 import {loadNextQueriesList, resetCursor} from '../../module/queries_list/actions';
+import {setSettingByKey} from '../../../../store/actions/settings';
+import {getSettingQueryTrackerQueriesListSidebarVisibilityMode} from '../../module/settings/selector';
 
 export function useQueryList(): [QueryItem[], boolean] {
     const items = useSelector(getQueriesList);
@@ -42,3 +44,24 @@ export const useQueriesPagination = () => {
         goFirst: reset,
     };
 };
+
+export const useQueriesListSidebarToggle = () => {
+    const dispatch = useDispatch();
+    const isQueriesListSidebarVisible = useSelector(
+        getSettingQueryTrackerQueriesListSidebarVisibilityMode,
+    );
+
+    const toggleQueriesListSideBarToggle = () => {
+        dispatch(
+            setSettingByKey<boolean>(
+                'global::queryTracker::queriesListSidebarVisibilityMode',
+                !isQueriesListSidebarVisible,
+            ),
+        );
+    };
+
+    return {
+        isQueriesListSidebarVisible,
+        toggleQueriesListSideBarToggle,
+    };
+};

packages/ui/src/ui/pages/query-tracker/module/settings/selector.ts

@@ -0,0 +1,7 @@
+import {createSelector} from 'reselect';
+import {getSettingsData} from '../../../../store/selectors/settings-base';
+
+export const getSettingQueryTrackerQueriesListSidebarVisibilityMode = createSelector(
+    getSettingsData,
+    (settings) => Boolean(settings['global::queryTracker::queriesListSidebarVisibilityMode']),
+);

packages/ui/src/ui/store/actions/settings/index.ts

@@ -2,6 +2,7 @@ import {ThunkAction} from 'redux-thunk';
 import {RootState} from '../../../store/reducers';
 import {SettingsAction} from '../../../store/reducers/settings';
 import {SettingNS, getPath} from '../../../../shared/utils/settings';
+import {SettingKey} from '../../../../shared/constants/settings-types';
 
 import {
     SET_SETTING_VALUE,
@@ -14,15 +15,25 @@ function logError(action: string, name: string) {
     console.error('Failed to "%s" setting "%s", settings provider is disabled.', action, name);
 }
 
-type SettingsThunkAction<T = Promise<void>> = ThunkAction<T, RootState, unknown, SettingsAction>;
+export type SettingsThunkAction<T = Promise<void>> = ThunkAction<
+    T,
+    RootState,
+    unknown,
+    SettingsAction
+>;
 
 export function setSetting<T>(
     settingName: string,
     settingNS: SettingNS,
     value: T,
 ): SettingsThunkAction {
-    const path = getPath(settingName, settingNS);
+    return (dispatch) => {
+        const path = getPath(settingName, settingNS);
+        return dispatch(setSettingByKey(path as SettingKey, value));
+    };
+}
 
+export function setSettingByKey<T>(path: SettingKey, value: T): SettingsThunkAction {
     return (dispatch, getState) => {
         const {
             settings: {provider, data},
@@ -37,7 +48,7 @@ export function setSetting<T>(
 
         return provider.set(login, path, value).catch((error) => {
             if (error === 'disabled') {
-                logError('set', settingName);
+                logError('set', path);
                 return;
             }
 

packages/ui/src/ui/store/selectors/settings-base.ts

@@ -0,0 +1,4 @@
+import {Settings} from '../../../shared/constants/settings-types';
+import {RootState} from '../../store/reducers';
+
+export const getSettingsData = (state: RootState) => state.settings.data as Settings;