From 05e58326805373cd6d6a4e5024476723c7ab5314 Mon Sep 17 00:00:00 2001 From: Ivan Samarin Date: Thu, 20 Jun 2024 13:39:48 +0300 Subject: [PATCH 1/4] feat(Navigation): relocate tenant nav to main space --- .../AsideNavigation/InlineNavigation.scss | 15 ++++++ .../AsideNavigation/InlineNavigation.tsx | 52 +++++++++++++++++++ src/containers/AsideNavigation/Navigation.tsx | 6 +-- ...enuItems.ts => useNavigationMenuItems.tsx} | 39 ++++++-------- .../Tenant/Diagnostics/Diagnostics.scss | 2 +- .../Tenant/ObjectGeneral/ObjectGeneral.tsx | 8 ++- src/containers/Tenant/Query/i18n/en.json | 5 +- src/store/reducers/tenant/constants.ts | 5 ++ 8 files changed, 104 insertions(+), 28 deletions(-) create mode 100644 src/containers/AsideNavigation/InlineNavigation.scss create mode 100644 src/containers/AsideNavigation/InlineNavigation.tsx rename src/containers/AsideNavigation/{useNavigationMenuItems.ts => useNavigationMenuItems.tsx} (70%) diff --git a/src/containers/AsideNavigation/InlineNavigation.scss b/src/containers/AsideNavigation/InlineNavigation.scss new file mode 100644 index 0000000000..44814e5f41 --- /dev/null +++ b/src/containers/AsideNavigation/InlineNavigation.scss @@ -0,0 +1,15 @@ +.inline-navigation { + padding: 13px 16px 0px; + + &-body { + width: fit-content; + + &__item { + display: flex; + align-items: center; + gap: 5px; + + font-size: 15px; + } + } +} diff --git a/src/containers/AsideNavigation/InlineNavigation.tsx b/src/containers/AsideNavigation/InlineNavigation.tsx new file mode 100644 index 0000000000..e7286aac6f --- /dev/null +++ b/src/containers/AsideNavigation/InlineNavigation.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +import {cn} from '@bem-react/classname'; +import type {RadioButtonOption} from '@gravity-ui/uikit'; +import {RadioButton} from '@gravity-ui/uikit'; + +import {useNavigationMenuItems} from './useNavigationMenuItems'; + +import './InlineNavigation.scss'; + +const b = cn('inline-navigation'); + +type MenuItem = ReturnType[0]; + +export const InlineNavigation = () => { + const navigationItems = useNavigationMenuItems(); + + const handleUpdate = React.useCallback( + (value: string) => { + const nextItem = navigationItems.find((item) => item.id === value); + + nextItem?.onItemClick(); + }, + [navigationItems], + ); + + const getCurrentItem = () => navigationItems.find((item) => item.current) || navigationItems[0]; + + const transformItemToOption = ({id, title, icon: Icon}: MenuItem): RadioButtonOption => { + const content = ( + + + {title} + + ); + + return {value: id, content}; + }; + + return ( +
+ +
+ ); +}; diff --git a/src/containers/AsideNavigation/Navigation.tsx b/src/containers/AsideNavigation/Navigation.tsx index 9ef9d55906..328404ca83 100644 --- a/src/containers/AsideNavigation/Navigation.tsx +++ b/src/containers/AsideNavigation/Navigation.tsx @@ -3,7 +3,7 @@ import {UserSettings} from '../UserSettings/UserSettings'; import type {YDBEmbeddedUISettings} from '../UserSettings/settings'; import {YdbInternalUser} from './YdbInternalUser/YdbInternalUser'; -import {useNavigationMenuItems} from './useNavigationMenuItems'; +// import {useNavigationMenuItems} from './useNavigationMenuItems'; interface NavigationProps { userSettings?: YDBEmbeddedUISettings; @@ -12,12 +12,12 @@ interface NavigationProps { export function Navigation({children, userSettings}: NavigationProps) { const AsideNavigation = useComponent('AsideNavigation'); - const menuItems = useNavigationMenuItems(); + // const menuItems = useNavigationMenuItems(); return ( } - menuItems={menuItems} + // menuItems={menuItems} ydbInternalUser={} content={children} /> diff --git a/src/containers/AsideNavigation/useNavigationMenuItems.ts b/src/containers/AsideNavigation/useNavigationMenuItems.tsx similarity index 70% rename from src/containers/AsideNavigation/useNavigationMenuItems.ts rename to src/containers/AsideNavigation/useNavigationMenuItems.tsx index 447c88f5d3..c92a5467a3 100644 --- a/src/containers/AsideNavigation/useNavigationMenuItems.ts +++ b/src/containers/AsideNavigation/useNavigationMenuItems.tsx @@ -1,8 +1,6 @@ import React from 'react'; import {Pulse, Terminal} from '@gravity-ui/icons'; -import type {MenuItem as AsideHeaderMenuItem} from '@gravity-ui/navigation'; -import type {IconData} from '@gravity-ui/uikit'; import {useHistory, useLocation} from 'react-router'; import routes, {parseQuery} from '../../routes'; @@ -13,12 +11,15 @@ import {getTenantPath} from '../Tenant/TenantPages'; import i18n from './i18n'; +type IconComponent = (props: React.SVGProps) => JSX.Element; + interface MenuItem { id: string; title: string; - icon: IconData; + icon: IconComponent; iconSize: string | number; - location: string; + path: string; + current?: boolean; locationKeys?: string[]; } @@ -34,7 +35,7 @@ export function useNavigationMenuItems() { const isTenantPage = pathname === routes.tenant; - const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => { + const menuItems = React.useMemo(() => { if (!isTenantPage) { return []; } @@ -45,7 +46,7 @@ export function useNavigationMenuItems() { title: i18n('pages.query'), icon: Terminal, iconSize: 20, - location: getTenantPath({ + path: getTenantPath({ ...queryParams, [TENANT_PAGE]: TENANT_PAGES_IDS.query, }), @@ -55,28 +56,22 @@ export function useNavigationMenuItems() { title: i18n('pages.diagnostics'), icon: Pulse, iconSize: 20, - location: getTenantPath({ + path: getTenantPath({ ...queryParams, [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, }), }, ]; - 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 items.map(({path, ...item}) => ({ + ...item, + iconSize: 20, + current: item.id === tenantPage, + onItemClick: () => { + setInitialTenantPage(item.id); + history.push(path); + }, + })); }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]); return menuItems; diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.scss b/src/containers/Tenant/Diagnostics/Diagnostics.scss index bde358fad8..92b7faf835 100644 --- 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: 10px 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 index 969a5d4e16..0f75f4598a 100644 --- a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx +++ b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx @@ -1,5 +1,6 @@ import {useThemeValue} from '@gravity-ui/uikit'; +import {InlineNavigation} from '../../../containers/AsideNavigation/InlineNavigation'; import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants'; import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps'; import type {EPathType} from '../../../types/api/schema'; @@ -47,7 +48,12 @@ function ObjectGeneral(props: ObjectGeneralProps) { if (!tenantName) { return null; } - return
{renderTabContent()}
; + return ( +
+ + {renderTabContent()} +
+ ); }; return renderContent(); diff --git a/src/containers/Tenant/Query/i18n/en.json b/src/containers/Tenant/Query/i18n/en.json index 8d2c29cf8e..47936a7b32 100644 --- a/src/containers/Tenant/Query/i18n/en.json +++ b/src/containers/Tenant/Query/i18n/en.json @@ -1,7 +1,10 @@ { "controls.query-mode-selector_type": "Query type:", - "tabs.newQuery": "Query", + "sections.query": "Query", + "sections.diagnostics": "Diagnostics", + + "tabs.newQuery": "Editor", "tabs.history": "History", "tabs.saved": "Saved", diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts index d7818309a2..f4bfe74876 100644 --- a/src/store/reducers/tenant/constants.ts +++ b/src/store/reducers/tenant/constants.ts @@ -5,6 +5,11 @@ export const TENANT_PAGES_IDS = { diagnostics: 'diagnostics', } as const; +export enum TenantPageTabs { + QUERY, + DIAGNOSTICS, +} + export const TENANT_QUERY_TABS_ID = { newQuery: 'newQuery', history: 'history', From 189f383eff9f3ff852955a7a461e785909b65d88 Mon Sep 17 00:00:00 2001 From: Ivan Samarin Date: Wed, 26 Jun 2024 02:16:10 +0300 Subject: [PATCH 2/4] refactor(TenantNavigation): refactor tenant related navigation --- .../AsideNavigation/InlineNavigation.scss | 15 ---- .../useNavigationMenuItems.tsx | 78 ------------------- .../Tenant/ObjectGeneral/ObjectGeneral.tsx | 4 +- .../TenantNavigation/TenantNavigation.scss | 15 ++++ .../TenantNavigation/TenantNavigation.tsx} | 18 ++--- .../Tenant/hooks/useTenantNavigation.tsx | 61 +++++++++++++++ src/containers/Tenant/i18n/en.json | 3 + src/types/global.d.ts | 2 + 8 files changed, 92 insertions(+), 104 deletions(-) delete mode 100644 src/containers/AsideNavigation/InlineNavigation.scss delete mode 100644 src/containers/AsideNavigation/useNavigationMenuItems.tsx create mode 100644 src/containers/Tenant/TenantNavigation/TenantNavigation.scss rename src/containers/{AsideNavigation/InlineNavigation.tsx => Tenant/TenantNavigation/TenantNavigation.tsx} (69%) create mode 100644 src/containers/Tenant/hooks/useTenantNavigation.tsx diff --git a/src/containers/AsideNavigation/InlineNavigation.scss b/src/containers/AsideNavigation/InlineNavigation.scss deleted file mode 100644 index 44814e5f41..0000000000 --- a/src/containers/AsideNavigation/InlineNavigation.scss +++ /dev/null @@ -1,15 +0,0 @@ -.inline-navigation { - padding: 13px 16px 0px; - - &-body { - width: fit-content; - - &__item { - display: flex; - align-items: center; - gap: 5px; - - font-size: 15px; - } - } -} diff --git a/src/containers/AsideNavigation/useNavigationMenuItems.tsx b/src/containers/AsideNavigation/useNavigationMenuItems.tsx deleted file mode 100644 index c92a5467a3..0000000000 --- a/src/containers/AsideNavigation/useNavigationMenuItems.tsx +++ /dev/null @@ -1,78 +0,0 @@ -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 '../Tenant/TenantPages'; - -import i18n from './i18n'; - -type IconComponent = (props: React.SVGProps) => JSX.Element; - -interface MenuItem { - id: string; - title: string; - icon: IconComponent; - iconSize: string | number; - path: string; - current?: boolean; - locationKeys?: string[]; -} - -export function useNavigationMenuItems() { - const location = useLocation(); - const history = useHistory(); - - const [, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY); - const {tenantPage} = useTypedSelector((state) => state.tenant); - - const {pathname} = location; - const queryParams = parseQuery(location); - - const isTenantPage = pathname === routes.tenant; - - const menuItems = React.useMemo(() => { - if (!isTenantPage) { - return []; - } - - const items: MenuItem[] = [ - { - id: TENANT_PAGES_IDS.query, - title: i18n('pages.query'), - icon: Terminal, - iconSize: 20, - path: getTenantPath({ - ...queryParams, - [TENANT_PAGE]: TENANT_PAGES_IDS.query, - }), - }, - { - id: TENANT_PAGES_IDS.diagnostics, - title: i18n('pages.diagnostics'), - icon: Pulse, - iconSize: 20, - path: getTenantPath({ - ...queryParams, - [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, - }), - }, - ]; - - return items.map(({path, ...item}) => ({ - ...item, - iconSize: 20, - current: item.id === tenantPage, - onItemClick: () => { - setInitialTenantPage(item.id); - history.push(path); - }, - })); - }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]); - - return menuItems; -} diff --git a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx index 0f75f4598a..6701ab9ee8 100644 --- a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx +++ b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx @@ -1,6 +1,5 @@ import {useThemeValue} from '@gravity-ui/uikit'; -import {InlineNavigation} from '../../../containers/AsideNavigation/InlineNavigation'; import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants'; import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps'; import type {EPathType} from '../../../types/api/schema'; @@ -8,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'; @@ -50,7 +50,7 @@ function ObjectGeneral(props: ObjectGeneralProps) { } return (
- + {renderTabContent()}
); diff --git a/src/containers/Tenant/TenantNavigation/TenantNavigation.scss b/src/containers/Tenant/TenantNavigation/TenantNavigation.scss new file mode 100644 index 0000000000..2d7ed7062f --- /dev/null +++ b/src/containers/Tenant/TenantNavigation/TenantNavigation.scss @@ -0,0 +1,15 @@ +.tenant-navigation { + padding: 13px 16px 0px; + + &-body__item { + display: flex; + align-items: center; + gap: 5px; + + font-size: 15px; + } + + &-body__icon { + display: flex; + } +} diff --git a/src/containers/AsideNavigation/InlineNavigation.tsx b/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx similarity index 69% rename from src/containers/AsideNavigation/InlineNavigation.tsx rename to src/containers/Tenant/TenantNavigation/TenantNavigation.tsx index e7286aac6f..87186471d8 100644 --- a/src/containers/AsideNavigation/InlineNavigation.tsx +++ b/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx @@ -4,22 +4,22 @@ import {cn} from '@bem-react/classname'; import type {RadioButtonOption} from '@gravity-ui/uikit'; import {RadioButton} from '@gravity-ui/uikit'; -import {useNavigationMenuItems} from './useNavigationMenuItems'; +import {useTenantNavigation} from '../hooks/useTenantNavigation'; -import './InlineNavigation.scss'; +import './TenantNavigation.scss'; -const b = cn('inline-navigation'); +const b = cn('tenant-navigation'); -type MenuItem = ReturnType[0]; +type MenuItem = ReturnType[0]; -export const InlineNavigation = () => { - const navigationItems = useNavigationMenuItems(); +export const TenantNavigation = () => { + const navigationItems = useTenantNavigation(); const handleUpdate = React.useCallback( (value: string) => { const nextItem = navigationItems.find((item) => item.id === value); - nextItem?.onItemClick(); + nextItem?.onForward(); }, [navigationItems], ); @@ -29,7 +29,7 @@ export const InlineNavigation = () => { const transformItemToOption = ({id, title, icon: Icon}: MenuItem): RadioButtonOption => { const content = ( - + {Icon} {title} ); @@ -45,7 +45,7 @@ export const InlineNavigation = () => { size="l" className={b('body')} defaultValue={getCurrentItem().id} - options={Object.values(navigationItems).map(transformItemToOption)} + options={navigationItems.map(transformItemToOption)} /> ); diff --git a/src/containers/Tenant/hooks/useTenantNavigation.tsx b/src/containers/Tenant/hooks/useTenantNavigation.tsx new file mode 100644 index 0000000000..702dcbe650 --- /dev/null +++ b/src/containers/Tenant/hooks/useTenantNavigation.tsx @@ -0,0 +1,61 @@ +import React from 'react'; + +import {Pulse, Terminal} from '@gravity-ui/icons'; +import type {IconData} from '@gravity-ui/uikit'; +import {Icon} from '@gravity-ui/uikit'; +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 = ['query', 'diagnostics']; + +const mapPageToIcon: Record = { + query: Terminal, + diagnostics: Pulse, +}; + +export function useTenantNavigation() { + const history = useHistory(); + + const location = useLocation(); + const queryParams = parseQuery(location); + + const [, setInitialTenantPage] = useSetting(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: , + 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 index c9c736a420..49d2366cae 100644 --- 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", diff --git a/src/types/global.d.ts b/src/types/global.d.ts index fa4d2d94ac..8b8da85736 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1 +1,3 @@ declare type AnyRecord = Record; + +declare type ValuesOf | AnyRecord> = T extends Array

? P : T[keyof T]; From 4792509e779e9f38e0a67429cbf446acd9b1689c Mon Sep 17 00:00:00 2001 From: Ivan Samarin Date: Wed, 26 Jun 2024 02:23:32 +0300 Subject: [PATCH 3/4] chore: fix PR comments --- src/containers/AsideNavigation/Navigation.tsx | 4 ---- src/containers/Tenant/Query/i18n/en.json | 3 --- 2 files changed, 7 deletions(-) diff --git a/src/containers/AsideNavigation/Navigation.tsx b/src/containers/AsideNavigation/Navigation.tsx index 328404ca83..e1c63316eb 100644 --- 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 ( } - // menuItems={menuItems} ydbInternalUser={} content={children} /> diff --git a/src/containers/Tenant/Query/i18n/en.json b/src/containers/Tenant/Query/i18n/en.json index 47936a7b32..0bab781726 100644 --- a/src/containers/Tenant/Query/i18n/en.json +++ b/src/containers/Tenant/Query/i18n/en.json @@ -1,9 +1,6 @@ { "controls.query-mode-selector_type": "Query type:", - "sections.query": "Query", - "sections.diagnostics": "Diagnostics", - "tabs.newQuery": "Editor", "tabs.history": "History", "tabs.saved": "Saved", From 1cc4ccc32d727f990e38f0e94a60e7f8f8fc20e6 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Wed, 26 Jun 2024 15:04:06 +0300 Subject: [PATCH 4/4] fix: refactor --- src/containers/AsideNavigation/i18n/en.json | 3 -- src/containers/AsideNavigation/i18n/index.ts | 3 +- src/containers/AsideNavigation/i18n/ru.json | 13 ------ .../Tenant/Diagnostics/Diagnostics.scss | 2 +- .../Tenant/ObjectGeneral/ObjectGeneral.tsx | 4 +- src/containers/Tenant/Query/Query.scss | 2 +- .../TenantNavigation/TenantNavigation.scss | 15 ++++--- .../TenantNavigation/TenantNavigation.tsx | 44 +++++++++---------- .../useTenantNavigation.tsx | 6 +-- src/store/reducers/tenant/constants.ts | 5 --- src/types/global.d.ts | 2 - 11 files changed, 36 insertions(+), 63 deletions(-) delete mode 100644 src/containers/AsideNavigation/i18n/ru.json rename src/containers/Tenant/{hooks => TenantNavigation}/useTenantNavigation.tsx (89%) diff --git a/src/containers/AsideNavigation/i18n/en.json b/src/containers/AsideNavigation/i18n/en.json index 84accf88e6..069c9981c7 100644 --- 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 index 95323257a5..69e12eca36 100644 --- 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 deleted file mode 100644 index 36ca12b60b..0000000000 --- a/src/containers/AsideNavigation/i18n/ru.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "pages.query": "Редактор запросов", - "pages.diagnostics": "Диагностика", - - "navigation-item.documentation": "Документация", - "navigation-item.settings": "Настройки", - "navigation-item.account": "Аккаунт", - - "account.user": "Пользователь YDB", - - "account.login": "Войти", - "account.logout": "Выйти" -} diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.scss b/src/containers/Tenant/Diagnostics/Diagnostics.scss index 92b7faf835..9adf5592e9 100644 --- a/src/containers/Tenant/Diagnostics/Diagnostics.scss +++ b/src/containers/Tenant/Diagnostics/Diagnostics.scss @@ -6,7 +6,7 @@ height: 100%; &__header-wrapper { - padding: 10px 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 index 6701ab9ee8..b6ff4f77ab 100644 --- a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx +++ b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx @@ -25,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: { @@ -51,7 +51,7 @@ function ObjectGeneral(props: ObjectGeneralProps) { return (

- {renderTabContent()} + {renderPageContent()}
); }; diff --git a/src/containers/Tenant/Query/Query.scss b/src/containers/Tenant/Query/Query.scss index 8f9dbf1f9c..3644a537be 100644 --- 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/TenantNavigation/TenantNavigation.scss b/src/containers/Tenant/TenantNavigation/TenantNavigation.scss index 2d7ed7062f..a714bef959 100644 --- a/src/containers/Tenant/TenantNavigation/TenantNavigation.scss +++ b/src/containers/Tenant/TenantNavigation/TenantNavigation.scss @@ -1,15 +1,18 @@ -.tenant-navigation { - padding: 13px 16px 0px; +.ydb-tenant-navigation { + padding: 12px 16px 8px; - &-body__item { + &__item { display: flex; align-items: center; gap: 5px; + } - font-size: 15px; + &__icon { + flex-shrink: 0; } + &__text { + overflow: hidden; - &-body__icon { - display: flex; + text-overflow: ellipsis; } } diff --git a/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx b/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx index 87186471d8..a346fba132 100644 --- a/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx +++ b/src/containers/Tenant/TenantNavigation/TenantNavigation.tsx @@ -1,42 +1,38 @@ -import React from 'react'; - -import {cn} from '@bem-react/classname'; import type {RadioButtonOption} from '@gravity-ui/uikit'; -import {RadioButton} from '@gravity-ui/uikit'; +import {Icon, RadioButton} from '@gravity-ui/uikit'; + +import {cn} from '../../../utils/cn'; -import {useTenantNavigation} from '../hooks/useTenantNavigation'; +import {useTenantNavigation} from './useTenantNavigation'; import './TenantNavigation.scss'; -const b = cn('tenant-navigation'); +const b = cn('ydb-tenant-navigation'); type MenuItem = ReturnType[0]; +const transformItemToOption = ({id, title, icon}: MenuItem): RadioButtonOption => { + const content = ( + + + {title} + + ); + + return {value: id, content}; +}; + export const TenantNavigation = () => { const navigationItems = useTenantNavigation(); - const handleUpdate = React.useCallback( - (value: string) => { - const nextItem = navigationItems.find((item) => item.id === value); + const handleUpdate = (value: string) => { + const nextItem = navigationItems.find((item) => item.id === value); - nextItem?.onForward(); - }, - [navigationItems], - ); + nextItem?.onForward(); + }; const getCurrentItem = () => navigationItems.find((item) => item.current) || navigationItems[0]; - const transformItemToOption = ({id, title, icon: Icon}: MenuItem): RadioButtonOption => { - const content = ( - - {Icon} - {title} - - ); - - return {value: id, content}; - }; - return (
= ['query', 'diagnostics']; -const mapPageToIcon: Record = { +const mapPageToIcon = { query: Terminal, diagnostics: Pulse, }; @@ -42,7 +40,7 @@ export function useTenantNavigation() { const nextItem = { id: pageId, title: i18n(`pages.${key}`), - icon: , + icon: mapPageToIcon[key], path: pagePath, current: tenantPage === pageId, onForward: () => { diff --git a/src/store/reducers/tenant/constants.ts b/src/store/reducers/tenant/constants.ts index f4bfe74876..d7818309a2 100644 --- a/src/store/reducers/tenant/constants.ts +++ b/src/store/reducers/tenant/constants.ts @@ -5,11 +5,6 @@ export const TENANT_PAGES_IDS = { diagnostics: 'diagnostics', } as const; -export enum TenantPageTabs { - QUERY, - DIAGNOSTICS, -} - export const TENANT_QUERY_TABS_ID = { newQuery: 'newQuery', history: 'history', diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 8b8da85736..fa4d2d94ac 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1,3 +1 @@ declare type AnyRecord = Record; - -declare type ValuesOf | AnyRecord> = T extends Array

? P : T[keyof T];