feat(Navigation): relocate tenant nav to main space (#936)

NaiSidera · Ivan Samarin · Raubzeug · web-flow · commit 6161d97c3c6a · 2024-06-26T15:52:16.000+03:00
Co-authored-by: Ivan Samarin &lt;adsidera@yandex-team.ru&gt;
Co-authored-by: Elena Makarova &lt;el-makarova@yandex-team.ru&gt;
diff --git a/src/containers/AsideNavigation/Navigation.tsx b/src/containers/AsideNavigation/Navigation.tsx
@@ -3,7 +3,6 @@ import {UserSettings} from '../UserSettings/UserSettings';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
 
 import {YdbInternalUser} from './YdbInternalUser/YdbInternalUser';
-import {useNavigationMenuItems} from './useNavigationMenuItems';
 
 interface NavigationProps {
     userSettings?: YDBEmbeddedUISettings;
@@ -12,12 +11,9 @@ interface NavigationProps {
 export function Navigation({children, userSettings}: NavigationProps) {
     const AsideNavigation = useComponent('AsideNavigation');
 
-    const menuItems = useNavigationMenuItems();
-
     return (
         <AsideNavigation
             settings={<UserSettings settings={userSettings} />}
-            menuItems={menuItems}
             ydbInternalUser={<YdbInternalUser />}
             content={children}
         />
diff --git a/src/containers/AsideNavigation/i18n/en.json b/src/containers/AsideNavigation/i18n/en.json
@@ -1,7 +1,4 @@
 {
-  "pages.query": "Query",
-  "pages.diagnostics": "Diagnostics",
-
   "navigation-item.documentation": "Documentation",
   "navigation-item.settings": "Settings",
   "navigation-item.account": "Account",
diff --git a/src/containers/AsideNavigation/i18n/index.ts b/src/containers/AsideNavigation/i18n/index.ts
@@ -1,8 +1,7 @@
 import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
-import ru from './ru.json';
 
 const COMPONENT = 'ydb-aside-navigation';
 
-export default registerKeysets(COMPONENT, {ru, en});
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/containers/AsideNavigation/i18n/ru.json b/src/containers/AsideNavigation/i18n/ru.json
diff --git a/src/containers/AsideNavigation/useNavigationMenuItems.ts b/src/containers/AsideNavigation/useNavigationMenuItems.ts
diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.scss b/src/containers/Tenant/Diagnostics/Diagnostics.scss
@@ -6,7 +6,7 @@
     height: 100%;
 
     &__header-wrapper {
-        padding: 13px 20px 16px;
+        padding: 0 20px 16px;
 
         background-color: var(--g-color-base-background);
     }
diff --git a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx
@@ -7,6 +7,7 @@ import {cn} from '../../../utils/cn';
 import {useTypedSelector} from '../../../utils/hooks';
 import Diagnostics from '../Diagnostics/Diagnostics';
 import {Query} from '../Query/Query';
+import {TenantNavigation} from '../TenantNavigation/TenantNavigation';
 
 import './ObjectGeneral.scss';
 
@@ -24,7 +25,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
 
     const {tenantPage} = useTypedSelector((state) => state.tenant);
 
-    const renderTabContent = () => {
+    const renderPageContent = () => {
         const {type, additionalTenantProps, additionalNodesProps, tenantName} = props;
         switch (tenantPage) {
             case TENANT_PAGES_IDS.query: {
@@ -47,7 +48,12 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         if (!tenantName) {
             return null;
         }
-        return <div className={b()}>{renderTabContent()}</div>;
+        return (
+            <div className={b()}>
+                <TenantNavigation />
+                {renderPageContent()}
+            </div>
+        );
     };
 
     return renderContent();
diff --git a/src/containers/Tenant/Query/Query.scss b/src/containers/Tenant/Query/Query.scss
@@ -5,7 +5,7 @@
     @include flex-container();
 
     &__tabs {
-        padding: 13px 20px 16px;
+        padding: 0 20px 16px;
     }
 
     &__content {
diff --git a/src/containers/Tenant/Query/i18n/en.json b/src/containers/Tenant/Query/i18n/en.json
@@ -1,7 +1,7 @@
 {
   "controls.query-mode-selector_type": "Query type:",
 
-  "tabs.newQuery": "Query",
+  "tabs.newQuery": "Editor",
   "tabs.history": "History",
   "tabs.saved": "Saved",
 
diff --git a/src/containers/Tenant/TenantNavigation/TenantNavigation.scss b/src/containers/Tenant/TenantNavigation/TenantNavigation.scss
@@ -0,0 +1,18 @@
+.ydb-tenant-navigation {
+    padding: 12px 16px 8px;
+
+    &__item {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+    }
+    &__text {
+        overflow: hidden;
+
+        text-overflow: ellipsis;
+    }
+}
diff --git a/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx b/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx
@@ -0,0 +1,48 @@
+import type {RadioButtonOption} from '@gravity-ui/uikit';
+import {Icon, RadioButton} from '@gravity-ui/uikit';
+
+import {cn} from '../../../utils/cn';
+
+import {useTenantNavigation} from './useTenantNavigation';
+
+import './TenantNavigation.scss';
+
+const b = cn('ydb-tenant-navigation');
+
+type MenuItem = ReturnType<typeof useTenantNavigation>[0];
+
+const transformItemToOption = ({id, title, icon}: MenuItem): RadioButtonOption => {
+    const content = (
+        <span className={b('item')}>
+            <Icon data={icon} size={16} className={b('icon')} />
+            <span className={b('text')}>{title}</span>
+        </span>
+    );
+
+    return {value: id, content};
+};
+
+export const TenantNavigation = () => {
+    const navigationItems = useTenantNavigation();
+
+    const handleUpdate = (value: string) => {
+        const nextItem = navigationItems.find((item) => item.id === value);
+
+        nextItem?.onForward();
+    };
+
+    const getCurrentItem = () => navigationItems.find((item) => item.current) || navigationItems[0];
+
+    return (
+        <div className={b()}>
+            <RadioButton
+                width="auto"
+                onUpdate={handleUpdate}
+                size="l"
+                className={b('body')}
+                defaultValue={getCurrentItem().id}
+                options={navigationItems.map(transformItemToOption)}
+            />
+        </div>
+    );
+};
diff --git a/src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx b/src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {Pulse, Terminal} from '@gravity-ui/icons';
+import {useHistory, useLocation} from 'react-router';
+
+import routes, {parseQuery} from '../../../routes';
+import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
+import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
+import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {getTenantPath} from '../TenantPages';
+import i18n from '../i18n';
+
+type TenantPages = keyof typeof TENANT_PAGES_IDS;
+
+const pagesList: Array<TenantPages> = ['query', 'diagnostics'];
+
+const mapPageToIcon = {
+    query: Terminal,
+    diagnostics: Pulse,
+};
+
+export function useTenantNavigation() {
+    const history = useHistory();
+
+    const location = useLocation();
+    const queryParams = parseQuery(location);
+
+    const [, setInitialTenantPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
+    const {tenantPage} = useTypedSelector((state) => state.tenant);
+
+    const menuItems = React.useMemo(() => {
+        if (location.pathname !== routes.tenant) {
+            return [];
+        }
+
+        const items = pagesList.map((key) => {
+            const pageId = TENANT_PAGES_IDS[key];
+            const pagePath = getTenantPath({...queryParams, [TENANT_PAGE]: pageId});
+
+            const nextItem = {
+                id: pageId,
+                title: i18n(`pages.${key}`),
+                icon: mapPageToIcon[key],
+                path: pagePath,
+                current: tenantPage === pageId,
+                onForward: () => {
+                    setInitialTenantPage(pageId);
+                    history.push(pagePath);
+                },
+            };
+
+            return nextItem;
+        });
+
+        return items;
+    }, [tenantPage, setInitialTenantPage, location.pathname, history, queryParams]);
+
+    return menuItems;
+}
diff --git a/src/containers/Tenant/i18n/en.json b/src/containers/Tenant/i18n/en.json
@@ -1,6 +1,9 @@
 {
   "page.title": "Database",
 
+  "pages.query": "Query",
+  "pages.diagnostics": "Diagnostics",
+
   "acl.owner": "Owner",
   "acl.empty": "No Acl data",
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,4 @@`
`1`	`1`	`{`
`2`		`- "pages.query": "Query",`
`3`		`- "pages.diagnostics": "Diagnostics",`
`4`		`-`
`5`	`2`	`"navigation-item.documentation": "Documentation",`
`6`	`3`	`"navigation-item.settings": "Settings",`
`7`	`4`	`"navigation-item.account": "Account",`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`height: 100%;`
`7`	`7`
`8`	`8`	`&__header-wrapper {`
`9`		`- padding: 13px 20px 16px;`
	`9`	`+ padding: 0 20px 16px;`
`10`	`10`
`11`	`11`	`background-color: var(--g-color-base-background);`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`@include flex-container();`
`6`	`6`
`7`	`7`	`&__tabs {`
`8`		`- padding: 13px 20px 16px;`
	`8`	`+ padding: 0 20px 16px;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`&__content {`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"controls.query-mode-selector_type": "Query type:",`
`3`	`3`
`4`		`- "tabs.newQuery": "Query",`
	`4`	`+ "tabs.newQuery": "Editor",`
`5`	`5`	`"tabs.history": "History",`
`6`	`6`	`"tabs.saved": "Saved",`
`7`	`7`