ydb-embedded-ui 4.7.0 → 4.8.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.8.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.0...v4.8.1) (2023-06-26)
+
+
+### Bug Fixes
+
+* **Tenants:** fix tenant link ([#439](https://github.com/ydb-platform/ydb-embedded-ui/issues/439)) ([432c621](https://github.com/ydb-platform/ydb-embedded-ui/commit/432c621eb2fb2ffd5a747299af930236d5cc06f7))
+
+## [4.8.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.7.0...v4.8.0) (2023-06-26)
+
+
+### Features
+
+* **Tenant:** transform general tabs into left navigation items ([#431](https://github.com/ydb-platform/ydb-embedded-ui/issues/431)) ([7117b96](https://github.com/ydb-platform/ydb-embedded-ui/commit/7117b9622d5f6469dcc2bcc1c0d5cb71d4f94c0b))
+
 ## [4.7.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.6.0...v4.7.0) (2023-06-23)
 
 

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -7,6 +7,9 @@ import cn from 'bem-cn-lite';
 import {Icon, Button} from '@gravity-ui/uikit';
 import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity-ui/navigation';
 
+import squareChartBarIcon from '@gravity-ui/icons/svgs/square-chart-bar.svg';
+import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
+
 import signOutIcon from '../../assets/icons/signOut.svg';
 import signInIcon from '../../assets/icons/signIn.svg';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
@@ -15,18 +18,20 @@ import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
 import supportIcon from '../../assets/icons/support.svg';
 
-import {UserSettings} from '../UserSettings/UserSettings';
-
-import routes, {createHref} from '../../routes';
-
 import {logout} from '../../store/reducers/authentication';
 import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
+import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
+import routes, {TENANT, createHref, parseQuery} from '../../routes';
+import {useSetting, useTypedSelector} from '../../utils/hooks';
+import {ASIDE_HEADER_COMPACT_KEY, TENANT_INITIAL_PAGE_KEY} from '../../utils/constants';
 
-import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
+import {getTenantPath} from '../Tenant/TenantPages';
+import {UserSettings} from '../UserSettings/UserSettings';
 
 import './AsideNavigation.scss';
 
 const b = cn('kv-navigation');
+
 interface MenuItem {
     id: string;
     title: string;
@@ -111,32 +116,53 @@ interface AsideNavigationProps {
     setSettingValue: (name: string, value: string) => void;
 }
 
-// FIXME: add items or delete
-const items: MenuItem[] = [];
-
 enum Panel {
     UserSettings = 'UserSettings',
 }
 
-function AsideNavigation(props: AsideNavigationProps) {
+export const useGetLeftNavigationItems = () => {
     const location = useLocation();
     const history = useHistory();
 
-    const [visiblePanel, setVisiblePanel] = useState<Panel>();
+    const [initialTenantPage, setInitialTenantPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
+    const {tenantPage = initialTenantPage} = useTypedSelector((state) => state.tenant);
 
-    const setIsCompact = (compact: boolean) => {
-        props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
-    };
+    const {pathname} = location;
+    const queryParams = parseQuery(location);
+
+    const isTenantPage = pathname === `/${TENANT}`;
 
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
-        const {pathname} = location;
-        const menuItems: AsideHeaderMenuItem[] = items.map((item) => {
-            const locationKeysCoincidence = item.locationKeys?.filter((key) =>
-                pathname.startsWith(key),
-            );
-            const current =
-                (locationKeysCoincidence && locationKeysCoincidence.length > 0) ||
-                item.location.startsWith(pathname);
+        if (!isTenantPage) {
+            return [];
+        }
+
+        const items: MenuItem[] = [
+            {
+                id: TENANT_PAGES_IDS.diagnostics,
+                title: 'Diagnostics',
+                icon: squareChartBarIcon,
+                iconSize: 20,
+                location: getTenantPath({
+                    ...queryParams,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+                }),
+            },
+            {
+                id: TENANT_PAGES_IDS.query,
+                title: 'Query',
+                icon: pulseIcon,
+                iconSize: 20,
+                location: getTenantPath({
+                    ...queryParams,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+                }),
+            },
+        ];
+
+        return items.map((item) => {
+            const current = item.id === tenantPage;
+
             return {
                 id: item.id,
                 title: item.title,
@@ -144,12 +170,26 @@ function AsideNavigation(props: AsideNavigationProps) {
                 iconSize: item.iconSize,
                 current,
                 onItemClick: () => {
+                    setInitialTenantPage(item.id);
                     history.push(item.location);
                 },
             };
         });
-        return menuItems;
-    }, [location, history]);
+    }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]);
+
+    return menuItems;
+};
+
+function AsideNavigation(props: AsideNavigationProps) {
+    const history = useHistory();
+
+    const [visiblePanel, setVisiblePanel] = useState<Panel>();
+
+    const setIsCompact = (compact: boolean) => {
+        props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
+    };
+
+    const menuItems = useGetLeftNavigationItems();
 
     return (
         <React.Fragment>

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -11,9 +11,9 @@ import type {EPathType} from '../../../types/api/schema';
 
 import {useTypedSelector} from '../../../utils/hooks';
 import routes, {createHref} from '../../../routes';
-import type {TenantDiagnosticsTab, TenantGeneralTab} from '../../../store/reducers/tenant/types';
+import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema/schema';
-import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
+import { setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import {Loader} from '../../../components/Loader';
@@ -96,10 +96,6 @@ function Diagnostics(props: DiagnosticsProps) {
         }
     };
 
-    const forwardToGeneralTab = (tab: TenantGeneralTab) => {
-        dispatch(setTopLevelTab(tab));
-    };
-
     const renderTabContent = () => {
         const {type} = props;
 
@@ -116,13 +112,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
-                return (
-                    <TopQueries
-                        path={tenantNameString}
-                        changeSchemaTab={forwardToGeneralTab}
-                        type={type}
-                    />
-                );
+                return <TopQueries path={tenantNameString} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
                 return <TopShards tenantPath={tenantNameString} type={type} />;

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -22,12 +22,8 @@ import type {KeyValueRow} from '../../../../types/api/query';
 import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
-import type {TenantGeneralTab} from '../../../../store/reducers/tenant/types';
 
-import {
-    TENANT_GENERAL_TABS_IDS,
-    TENANT_QUERY_TABS_ID,
-} from '../../../../store/reducers/tenant/constants';
+import {TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -85,7 +81,6 @@ const COLUMNS: Column<KeyValueRow>[] = [
 
 interface TopQueriesProps {
     path: string;
-    changeSchemaTab: (tab: TenantGeneralTab) => void;
     type?: EPathType;
 }
 
@@ -177,7 +172,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
 
             const queryPath = getTenantPath({
                 ...queryParams,
-                [TenantTabsGroups.general]: TENANT_GENERAL_TABS_IDS.query,
+                [TENANT_PAGE]: TENANT_PAGES_IDS.query,
                 [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
             });
 

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,11 +1,13 @@
-import qs from 'qs';
 import {useLocation} from 'react-router';
 import cn from 'bem-cn-lite';
 
 import {useThemeValue} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../types/api/schema';
-import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
+import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
+import {useSetting} from '../../../utils/hooks';
+import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
+import {parseQuery} from '../../../routes';
 
 import {Query} from '../Query/Query';
 import Diagnostics from '../Diagnostics/Diagnostics';
@@ -22,19 +24,17 @@ interface ObjectGeneralProps {
 
 function ObjectGeneral(props: ObjectGeneralProps) {
     const location = useLocation();
-
     const theme = useThemeValue();
 
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
+    const [initialPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
 
-    const {name: tenantName, general: generalTab} = queryParams;
+    const queryParams = parseQuery(location);
+    const {name: tenantName, tenantPage = initialPage} = queryParams;
 
     const renderTabContent = () => {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
-        switch (generalTab) {
-            case TENANT_GENERAL_TABS_IDS.query: {
+        switch (tenantPage) {
+            case TENANT_PAGES_IDS.query: {
                 return <Query path={tenantName as string} theme={theme} type={type} />;
             }
             default: {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -47,9 +47,9 @@ import {
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {
-    TENANT_GENERAL_TABS_IDS,
+    TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../store/reducers/tenant/constants';
 
@@ -278,7 +278,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
-        dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -15,6 +15,7 @@ import {
     goToNextQuery,
     MONACO_HOT_KEY_ACTIONS,
     setMonacoHotKey,
+    setTenantPath,
 } from '../../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../../store/reducers/explainQuery';
 import {getParsedSettingValue, setSettingValue} from '../../../../store/reducers/settings/settings';
@@ -75,6 +76,7 @@ const propTypes = {
     theme: PropTypes.string,
     type: PropTypes.string,
     initialQueryMode: PropTypes.string,
+    setTenantPath: PropTypes.func,
 };
 
 const initialTenantCommonInfoState = {
@@ -83,6 +85,9 @@ const initialTenantCommonInfoState = {
     collapsed: true,
 };
 function QueryEditor(props) {
+    const {path, executeQuery, theme, setTenantPath, changeUserInput} = props;
+    const {tenantPath: savedPath} = executeQuery;
+
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
@@ -96,6 +101,13 @@ function QueryEditor(props) {
         }
     }, [enableAdditionalQueryModes, queryMode, setQueryMode]);
 
+    useEffect(() => {
+        if (savedPath !== path) {
+            setTenantPath(path);
+            changeUserInput({input: ''});
+        }
+    }, [changeUserInput, setTenantPath, path, savedPath]);
+
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
         initialTenantCommonInfoState,
@@ -507,7 +519,6 @@ function QueryEditor(props) {
         );
     };
 
-    const {executeQuery, theme} = props;
     const result = renderResult();
 
     return (
@@ -569,6 +580,7 @@ const mapDispatchToProps = {
     setSettingValue,
     setShowPreview,
     setMonacoHotKey,
+    setTenantPath,
 };
 
 QueryEditor.propTypes = propTypes;

package/dist/containers/Tenant/Tenant.scss

@@ -6,12 +6,4 @@
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
     @include flex-container();
-
-    .yc-tabs {
-        overflow: initial;
-    }
-
-    &__tab-content {
-        height: calc(100% - 56px); // general tabs height
-    }
 }

package/dist/containers/Tenant/Tenant.tsx

@@ -15,7 +15,6 @@ import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
 
-import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
 import ObjectSummary from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
 
@@ -111,33 +110,28 @@ function Tenant(props: TenantProps) {
             {showBlockingError ? (
                 <AccessDenied />
             ) : (
-                <>
-                    <ObjectGeneralTabs />
-                    <div className={b('tab-content')}>
-                        <SplitPane
-                            defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
-                            defaultSizes={[25, 75]}
-                            triggerCollapse={summaryVisibilityState.triggerCollapse}
-                            triggerExpand={summaryVisibilityState.triggerExpand}
-                            minSize={[36, 200]}
-                            onSplitStartDragAdditional={onSplitStartDragAdditional}
-                        >
-                            <ObjectSummary
-                                type={preloadedPathType || currentPathType}
-                                subType={preloadedPathSubType || currentPathSubType}
-                                onCollapseSummary={onCollapseSummaryHandler}
-                                onExpandSummary={onExpandSummaryHandler}
-                                isCollapsed={summaryVisibilityState.collapsed}
-                                additionalTenantInfo={props.additionalTenantInfo}
-                            />
-                            <ObjectGeneral
-                                type={preloadedPathType || currentPathType}
-                                additionalTenantInfo={props.additionalTenantInfo}
-                                additionalNodesInfo={props.additionalNodesInfo}
-                            />
-                        </SplitPane>
-                    </div>
-                </>
+                <SplitPane
+                    defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
+                    defaultSizes={[25, 75]}
+                    triggerCollapse={summaryVisibilityState.triggerCollapse}
+                    triggerExpand={summaryVisibilityState.triggerExpand}
+                    minSize={[36, 200]}
+                    onSplitStartDragAdditional={onSplitStartDragAdditional}
+                >
+                    <ObjectSummary
+                        type={preloadedPathType || currentPathType}
+                        subType={preloadedPathSubType || currentPathSubType}
+                        onCollapseSummary={onCollapseSummaryHandler}
+                        onExpandSummary={onExpandSummaryHandler}
+                        isCollapsed={summaryVisibilityState.collapsed}
+                        additionalTenantInfo={props.additionalTenantInfo}
+                    />
+                    <ObjectGeneral
+                        type={preloadedPathType || currentPathType}
+                        additionalTenantInfo={props.additionalTenantInfo}
+                        additionalNodesInfo={props.additionalNodesInfo}
+                    />
+                </SplitPane>
             )}
         </div>
     );

package/dist/containers/Tenant/TenantPages.tsx

@@ -1,6 +1,4 @@
-import {TENANT_GENERAL_TABS_IDS} from '../../store/reducers/tenant/constants';
 import routes, {createHref} from '../../routes';
-import {Icon} from '../../components/Icon';
 
 export enum TenantInfoTabsIds {
     overview = 'overview',
@@ -10,23 +8,10 @@ export enum TenantInfoTabsIds {
 
 export enum TenantTabsGroups {
     info = 'info',
-    general = 'general',
     queryTab = 'queryTab',
     diagnosticsTab = 'diagnosticsTab',
 }
 
-export const TENANT_GENERAL_TABS = [
-    {
-        id: TENANT_GENERAL_TABS_IDS.query,
-        title: 'Query',
-        icon: <Icon name="query" viewBox="0 0 16 16" />,
-    },
-    {
-        id: TENANT_GENERAL_TABS_IDS.diagnostics,
-        title: 'Diagnostics',
-        icon: <Icon name="diagnostics" viewBox="0 0 17 16" />,
-    },
-];
 export const TENANT_INFO_TABS = [
     {
         id: TenantInfoTabsIds.overview,

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -3,10 +3,10 @@ import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-component
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {
     TENANT_QUERY_TABS_ID,
-    TENANT_GENERAL_TABS_IDS,
+    TENANT_PAGES_IDS,
 } from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
 
@@ -40,7 +40,7 @@ const bindActions = (
 ) => {
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
-        dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
         setActivePath(path);
     };
@@ -70,7 +70,7 @@ const bindActions = (
         },
         openPreview: () => {
             dispatch(setShowPreview(true));
-            dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
             dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(path);
         },

package/dist/containers/Tenants/Tenants.js

@@ -18,16 +18,12 @@ import {AutoFetcher} from '../../utils/autofetcher';
 import routes, {createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {withSearch} from '../../HOCS';
-import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
-import {
-    changeFilter,
-    getSettingValue,
-    ProblemFilterValues,
-} from '../../store/reducers/settings/settings';
+import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 import {clusterName} from '../../store';
-import {TenantTabsGroups, TENANT_GENERAL_TABS, TENANT_INFO_TABS} from '../Tenant/TenantPages';
+import {TenantTabsGroups, TENANT_INFO_TABS} from '../Tenant/TenantPages';
 
 import './Tenants.scss';
 
@@ -114,7 +110,6 @@ class Tenants extends React.Component {
             filter,
             handleSearchQuery,
             additionalTenantsInfo = {},
-            savedTenantInitialTab,
         } = this.props;
 
         const filteredTenantsBySearch = tenants.filter((item) => {
@@ -123,7 +118,6 @@ class Tenants extends React.Component {
         });
         const filteredTenants = Tenants.filterTenants(filteredTenantsBySearch, filter);
 
-        const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
         const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
 
         const getTenantBackend = (tenant) => {
@@ -153,7 +147,6 @@ class Tenants extends React.Component {
                                     name: value,
                                     backend,
                                     [TenantTabsGroups.info]: initialTenantInfoTab,
-                                    [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
                             />
                             {additionalTenantsInfo.name && additionalTenantsInfo.name(value, row)}
@@ -359,7 +352,6 @@ const mapStateToProps = (state) => {
         loading,
         error,
         filter: state.settings.problemFilter,
-        savedTenantInitialTab: getSettingValue(state, TENANT_INITIAL_TAB_KEY),
     };
 };
 

package/dist/routes.ts

@@ -5,13 +5,18 @@ import isEmpty from 'lodash/isEmpty';
 
 import {backend, clusterName, webVersion} from './store';
 
+export const CLUSTER = 'cluster';
+export const TENANT = 'tenant';
+export const NODE = 'node';
+export const TABLET = 'tablet';
+
 const routes = {
-    cluster: '/cluster/:activeTab?',
-    tenant: '/tenant',
-    node: '/node/:id/:activeTab?',
-    tablet: '/tablet/:id',
-    tabletsFilters: '/tabletsFilters',
-    auth: '/auth',
+    cluster: `/${CLUSTER}/:activeTab?`,
+    tenant: `/${TENANT}`,
+    node: `/${NODE}/:id/:activeTab?`,
+    tablet: `/${TABLET}/:id`,
+    tabletsFilters: `/tabletsFilters`,
+    auth: `/auth`,
 };
 
 export const parseQuery = (location: Location) => {

package/dist/store/reducers/executeQuery.ts

@@ -23,7 +23,8 @@ const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
 const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
 const GO_TO_PREVIOUS_QUERY = 'query/GO_TO_PREVIOUS_QUERY';
 const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
-const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
+const SET_MONACO_HOT_KEY = 'query/SET_MONACO_HOT_KEY';
+const SET_TENANT_PATH = 'query/SET_TENANT_PATH';
 
 const queriesHistoryInitial: string[] = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
 
@@ -128,12 +129,18 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
             };
         }
 
-        case MONACO_HOT_KEY: {
+        case SET_MONACO_HOT_KEY: {
             return {
                 ...state,
                 monacoHotKey: action.data,
             };
         }
+        case SET_TENANT_PATH: {
+            return {
+                ...state,
+                tenantPath: action.data,
+            };
+        }
 
         default:
             return state;
@@ -188,7 +195,14 @@ export const changeUserInput = ({input}: {input: string}) => {
 
 export const setMonacoHotKey = (value: MonacoHotKeyAction | null) => {
     return {
-        type: MONACO_HOT_KEY,
+        type: SET_MONACO_HOT_KEY,
+        data: value,
+    } as const;
+};
+
+export const setTenantPath = (value: string) => {
+    return {
+        type: SET_TENANT_PATH,
         data: value,
     } as const;
 };

package/dist/store/reducers/settings/settings.ts

@@ -5,7 +5,7 @@ import type {ValueOf} from '../../../types/common';
 import {
     SAVED_QUERIES_KEY,
     THEME_KEY,
-    TENANT_INITIAL_TAB_KEY,
+    TENANT_INITIAL_PAGE_KEY,
     INVERTED_DISKS_KEY,
     ASIDE_HEADER_COMPACT_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
@@ -18,6 +18,8 @@ import '../../../services/api';
 import {getValueFromLS, parseJson} from '../../../utils/utils';
 import {QueryModes} from '../../../types/store/query';
 
+import {TENANT_PAGES_IDS} from '../tenant/constants';
+
 import type {RootState} from '..';
 import type {
     SetSettingValueAction,
@@ -58,7 +60,10 @@ export const initialState = {
             'false',
         ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
-        [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
+        [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
+            TENANT_INITIAL_PAGE_KEY,
+            TENANT_PAGES_IDS.query,
+        ),
         [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
         [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),

package/dist/store/reducers/tenant/constants.ts

@@ -1,4 +1,6 @@
-export const TENANT_GENERAL_TABS_IDS = {
+export const TENANT_PAGE = 'tenantPage';
+
+export const TENANT_PAGES_IDS = {
     query: 'query',
     diagnostics: 'diagnostics',
 } as const;

package/dist/store/reducers/tenant/tenant.ts

@@ -4,7 +4,7 @@ import type {TTenant} from '../../../types/api/tenant';
 import type {
     TenantAction,
     TenantDiagnosticsTab,
-    TenantGeneralTab,
+    TenantPage,
     TenantQueryTab,
     TenantState,
 } from './types';
@@ -60,7 +60,7 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
         case SET_TOP_LEVEL_TAB: {
             return {
                 ...state,
-                topLevelTab: action.data,
+                tenantPage: action.data,
             };
         }
         case SET_QUERY_TAB: {
@@ -95,10 +95,10 @@ export const clearTenant = () => {
     return {type: CLEAR_TENANT} as const;
 };
 
-export function setTopLevelTab(tab: TenantGeneralTab) {
+export function setTenantPage(page: TenantPage) {
     return {
         type: SET_TOP_LEVEL_TAB,
-        data: tab,
+        data: page,
     } as const;
 }
 

package/dist/store/reducers/tenant/types.ts

@@ -3,21 +3,18 @@ import type {TTenant} from '../../../types/api/tenant';
 import type {ValueOf} from '../../../types/common';
 import type {ApiRequestAction} from '../../utils';
 
-import {
-    TENANT_QUERY_TABS_ID,
-    TENANT_DIAGNOSTICS_TABS_IDS,
-    TENANT_GENERAL_TABS_IDS,
-} from './constants';
-import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setQueryTab, setTopLevelTab} from './tenant';
+import {TENANT_QUERY_TABS_ID, TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGES_IDS} from './constants';
+import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setQueryTab, setTenantPage} from './tenant';
+
+export type TenantPage = ValueOf<typeof TENANT_PAGES_IDS>;
 
-export type TenantGeneralTab = ValueOf<typeof TENANT_GENERAL_TABS_IDS>;
 export type TenantQueryTab = ValueOf<typeof TENANT_QUERY_TABS_ID>;
 export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
 
 export interface TenantState {
     loading: boolean;
     wasLoaded: boolean;
-    topLevelTab?: TenantGeneralTab;
+    tenantPage?: TenantPage;
     queryTab?: TenantQueryTab;
     diagnosticsTab?: TenantDiagnosticsTab;
     tenant?: TTenant;
@@ -27,6 +24,6 @@ export interface TenantState {
 export type TenantAction =
     | ApiRequestAction<typeof FETCH_TENANT, TTenant | undefined, IResponseError>
     | ReturnType<typeof clearTenant>
-    | ReturnType<typeof setTopLevelTab>
+    | ReturnType<typeof setTenantPage>
     | ReturnType<typeof setQueryTab>
     | ReturnType<typeof setDiagnosticsTab>;

package/dist/store/state-url-mapping.js

@@ -42,8 +42,8 @@ const paramSetup = {
             stateKey: 'tablets.typeFilter',
             type: 'array',
         },
-        general: {
-            stateKey: 'tenant.topLevelTab',
+        tenantPage: {
+            stateKey: 'tenant.tenantPage',
         },
         queryTab: {
             stateKey: 'tenant.queryTab',

package/dist/types/store/executeQuery.ts

@@ -5,6 +5,7 @@ import {
     goToPreviousQuery,
     setMonacoHotKey,
     goToNextQuery,
+    setTenantPath,
     MONACO_HOT_KEY_ACTIONS,
 } from '../../store/reducers/executeQuery';
 import type {ApiRequestAction} from '../../store/utils';
@@ -22,6 +23,7 @@ export interface ExecuteQueryState {
         currentIndex: number;
     };
     monacoHotKey: null | MonacoHotKeyAction;
+    tenantPath?: string;
     data?: IQueryResult;
     stats?: IQueryResult['stats'];
     error?: string | ErrorResponse;
@@ -35,4 +37,5 @@ export type ExecuteQueryAction =
     | ReturnType<typeof goToPreviousQuery>
     | ReturnType<typeof changeUserInput>
     | ReturnType<typeof saveQueryToHistory>
-    | ReturnType<typeof setMonacoHotKey>;
+    | ReturnType<typeof setMonacoHotKey>
+    | ReturnType<typeof setTenantPath>;

package/dist/utils/constants.ts

@@ -104,9 +104,11 @@ export const DEFAULT_TABLE_SETTINGS = {
     highlightRows: true,
 } as const;
 
-export const TENANT_INITIAL_TAB_KEY = 'saved_tenant_initial_tab';
 export const QUERY_INITIAL_MODE_KEY = 'query_initial_mode';
 
 export const PARTITIONS_HIDDEN_COLUMNS_KEY = 'partitionsHiddenColumns';
 
 export const CLUSTER_INFO_HIDDEN_KEY = 'clusterInfoHidden';
+
+// Remain "tab" in key name for backward compatibility
+export const TENANT_INITIAL_PAGE_KEY = 'saved_tenant_initial_tab';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.7.0",
+  "version": "4.8.1",
   "files": [
     "dist"
   ],

package/dist/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.scss

@@ -1,9 +0,0 @@
-@import '../../../styles/mixins.scss';
-
-.object-general-tabs {
-    padding: 12px 20px 0 12px;
-
-    &__tab {
-        text-decoration: none;
-    }
-}

package/dist/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx

@@ -1,68 +0,0 @@
-import qs from 'qs';
-import {connect} from 'react-redux';
-import {useLocation} from 'react-router';
-import {Link} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-
-import {Tabs} from '@gravity-ui/uikit';
-
-import routes, {createHref} from '../../../routes';
-import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
-import {setSettingValue} from '../../../store/reducers/settings/settings';
-
-import {TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
-
-import './ObjectGeneralTabs.scss';
-
-const b = cn('object-general-tabs');
-
-interface ObjectGeneralTabsProps {
-    setSettingValue: (name: string, value: string) => void;
-}
-
-function ObjectGeneralTabs(props: ObjectGeneralTabsProps) {
-    const location = useLocation();
-
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
-
-    const {name: tenantName, general: generalTab} = queryParams;
-
-    const renderContent = () => {
-        if (!tenantName) {
-            return null;
-        }
-        return (
-            <div className={b()}>
-                <Tabs
-                    size="xl"
-                    items={TENANT_GENERAL_TABS}
-                    activeTab={generalTab as string}
-                    wrapTo={({id}, node) => {
-                        const path = createHref(routes.tenant, undefined, {
-                            ...queryParams,
-                            name: tenantName as string,
-                            [TenantTabsGroups.general]: id,
-                        });
-                        return (
-                            <Link to={path} key={id} className={b('tab')}>
-                                {node}
-                            </Link>
-                        );
-                    }}
-                    allowNotSelected
-                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
-                />
-            </div>
-        );
-    };
-
-    return renderContent();
-}
-
-const mapDispatchToProps = {
-    setSettingValue,
-};
-
-export default connect(null, mapDispatchToProps)(ObjectGeneralTabs);