feat(Tenant): transform general tabs into left navigation items (#431)

Author: artemmufazalov

src/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,9 +116,6 @@ interface AsideNavigationProps {
     setSettingValue: (name: string, value: string) => void;
 }
 
-// FIXME: add items or delete
-const items: MenuItem[] = [];
-
 enum Panel {
     UserSettings = 'UserSettings',
 }
@@ -124,32 +126,62 @@ function AsideNavigation(props: AsideNavigationProps) {
 
     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,
                 icon: item.icon,
                 iconSize: item.iconSize,
                 current,
                 onItemClick: () => {
+                    setInitialTenantPage(item.id);
                     history.push(item.location);
                 },
             };
         });
-        return menuItems;
-    }, [location, history]);
+    }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]);
 
     return (
         <React.Fragment>

src/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} />;

src/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,
             });
 

src/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: {

src/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.scss

@@ -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));
     };
 

src/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx

@@ -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;

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -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
-    }
 }