= Props extends {children: infer Children}
? Children
: Props extends {children?: infer Children}
- ? Children | undefined
- : never;
+ ? Children | undefined
+ : never;
diff --git a/src/components/slots/utils.ts b/src/components/slots/utils.ts
index 775b610884..f1acada7aa 100644
--- a/src/components/slots/utils.ts
+++ b/src/components/slots/utils.ts
@@ -4,7 +4,7 @@ import type {SlotComponent} from './types';
export function isSlotElement(
node: React.ReactNode,
-): node is React.ReactElement> & React.RefAttributes {
+): node is React.ReactElement> & {ref?: React.Ref} {
return React.isValidElement(node) && isSlotComponent(node.type);
}
diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss
index 58f586da42..d806b96fc3 100644
--- a/src/containers/App/App.scss
+++ b/src/containers/App/App.scss
@@ -9,7 +9,7 @@
font-variant-numeric: tabular-nums;
}
-.yc-select-popup__tick-icon {
+.g-select-popup__tick-icon {
// this is a local fix, remove after the refactoring
box-sizing: content-box;
}
@@ -45,11 +45,11 @@ body,
--ydb-color-status-black: var(--g-color-base-misc-heavy);
}
-:is(#tab, .yc-tabs-item_active .yc-tabs-item__title) {
+:is(#tab, .g-tabs-item_active .g-tabs-item__title) {
color: var(--g-color-text-primary) !important;
}
-:is(#tab, .yc-tabs-item__title) {
+:is(#tab, .g-tabs-item__title) {
color: var(--g-color-text-secondary);
}
@@ -131,7 +131,7 @@ body,
background: var(--ydb-data-table-color-hover);
}
-.yc-table-column-setup__item {
+.g-table-column-setup__item {
/* stylelint-disable-next-line declaration-no-important*/
padding: 0 8px 0 32px !important;
/* stylelint-disable-next-line declaration-no-important*/
@@ -142,6 +142,6 @@ body,
font-family: 'Rubik', sans-serif;
}
-.yc-popup {
+.g-popup {
max-width: 500px;
}
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index 666b2ca677..9c316531a8 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -1,20 +1,20 @@
import React from 'react';
-import {connect} from 'react-redux';
+
+import type {Store} from '@reduxjs/toolkit';
+import type {History} from 'history';
import {Helmet} from 'react-helmet-async';
+import {connect} from 'react-redux';
-import ContentWrapper, {Content} from './Content';
-import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
+import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
+import type {RootState} from '../../store';
import AppIcons from '../AppIcons/AppIcons';
import {Navigation} from '../AsideNavigation/Navigation';
-
-import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
+import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
import {settings} from '../UserSettings/settings';
-import {Providers} from './Providers';
-
-import type {Store} from '@reduxjs/toolkit';
-import type {History} from 'history';
import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
-import type {RootState} from '../../store';
+
+import ContentWrapper, {Content} from './Content';
+import {Providers} from './Providers';
import './App.scss';
diff --git a/src/containers/App/Content.tsx b/src/containers/App/Content.tsx
index bfb79a7497..6382561a22 100644
--- a/src/containers/App/Content.tsx
+++ b/src/containers/App/Content.tsx
@@ -1,45 +1,45 @@
import React from 'react';
-import {Switch, Route, Redirect, RedirectProps} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import routes from '../../routes';
+import {connect, shallowEqual} from 'react-redux';
+import type {RedirectProps} from 'react-router-dom';
+import {Redirect, Route, Switch} from 'react-router-dom';
-import {Clusters} from '../Clusters/Clusters';
+import {useSlots} from '../../components/slots';
+import type {SlotMap} from '../../components/slots/SlotMap';
+import type {SlotComponent} from '../../components/slots/types';
+import routes from '../../routes';
+import type {RootState} from '../../store';
+import {getUser} from '../../store/reducers/authentication/authentication';
+import {getNodesList} from '../../store/reducers/nodesList';
+import {cn} from '../../utils/cn';
+import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import Authentication from '../Authentication/Authentication';
import Cluster from '../Cluster/Cluster';
-import Tenant from '../Tenant/Tenant';
+import {getClusterPath} from '../Cluster/utils';
+import {Clusters} from '../Clusters/Clusters';
+import Header from '../Header/Header';
+import type {RawBreadcrumbItem} from '../Header/breadcrumbs';
import Node from '../Node/Node';
import {PDiskPage} from '../PDiskPage/PDiskPage';
-import {VDiskPage} from '../VDiskPage/VDiskPage';
import {Tablet} from '../Tablet';
import TabletsFilters from '../TabletsFilters/TabletsFilters';
-import Header from '../Header/Header';
-import Authentication from '../Authentication/Authentication';
+import Tenant from '../Tenant/Tenant';
+import {VDiskPage} from '../VDiskPage/VDiskPage';
-import {getUser} from '../../store/reducers/authentication/authentication';
-import {getNodesList} from '../../store/reducers/nodesList';
-import {getClusterPath} from '../Cluster/utils';
-import {useSlots} from '../../components/slots';
-import {useTypedSelector, useTypedDispatch} from '../../utils/hooks';
import {
ClusterSlot,
ClustersSlot,
NodeSlot,
PDiskPageSlot,
- VDiskPageSlot,
RedirectSlot,
RoutesSlot,
TabletSlot,
TabletsFiltersSlot,
TenantSlot,
+ VDiskPageSlot,
} from './appSlots';
-
-import type {SlotComponent} from '../../components/slots/types';
-import type {SlotMap} from '../../components/slots/SlotMap';
-import type {RawBreadcrumbItem} from '../Header/breadcrumbs';
-import type {RootState} from '../../store';
-
import i18n from './i18n';
+
import './App.scss';
const b = cn('app');
@@ -160,10 +160,13 @@ export function Content(props: ContentProps) {
function GetUser() {
const dispatch = useTypedDispatch();
- const {isAuthenticated, isInternalUser} = useTypedSelector((state) => ({
- isAuthenticated: state.authentication.isAuthenticated,
- isInternalUser: Boolean(state.authentication.user),
- }));
+ const {isAuthenticated, isInternalUser} = useTypedSelector(
+ (state) => ({
+ isAuthenticated: state.authentication.isAuthenticated,
+ isInternalUser: Boolean(state.authentication.user),
+ }),
+ shallowEqual,
+ );
React.useEffect(() => {
if (isAuthenticated && !isInternalUser) {
diff --git a/src/containers/App/Providers.tsx b/src/containers/App/Providers.tsx
index 640fffdb52..85ea859df4 100644
--- a/src/containers/App/Providers.tsx
+++ b/src/containers/App/Providers.tsx
@@ -1,19 +1,19 @@
import React from 'react';
+
+import {ThemeProvider} from '@gravity-ui/uikit';
+import type {Store} from '@reduxjs/toolkit';
+import type {History} from 'history';
+import {HelmetProvider} from 'react-helmet-async';
import {Provider} from 'react-redux';
import {Router} from 'react-router';
import {QueryParamProvider} from 'use-query-params';
import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
-import {ThemeProvider} from '@gravity-ui/uikit';
-import {HelmetProvider} from 'react-helmet-async';
import {ComponentsProvider} from '../../components/ComponentsProvider/ComponentsProvider';
import {componentsRegistry as defaultComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
-import {useSetting} from '../../utils/hooks';
-import {THEME_KEY} from '../../utils/constants';
-
-import type {Store} from '@reduxjs/toolkit';
-import type {History} from 'history';
import type {ComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
+import {THEME_KEY} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
interface ProvidersProps {
store: Store;
diff --git a/src/containers/App/appSlots.tsx b/src/containers/App/appSlots.tsx
index 6c591f22ee..7161f7e4b6 100644
--- a/src/containers/App/appSlots.tsx
+++ b/src/containers/App/appSlots.tsx
@@ -1,14 +1,14 @@
-import {createSlot} from '../../components/slots';
-
import type {RedirectProps, RouteComponentProps} from 'react-router';
+
+import {createSlot} from '../../components/slots';
import type Cluster from '../Cluster/Cluster';
import type {Clusters} from '../Clusters/Clusters';
import type Node from '../Node/Node';
import type {PDiskPage} from '../PDiskPage/PDiskPage';
-import type {VDiskPage} from '../VDiskPage/VDiskPage';
import type {Tablet} from '../Tablet';
import type TabletsFilters from '../TabletsFilters/TabletsFilters';
import type Tenant from '../Tenant/Tenant';
+import type {VDiskPage} from '../VDiskPage/VDiskPage';
export const ClustersSlot = createSlot<{
children:
@@ -51,5 +51,5 @@ export const TabletsFiltersSlot = createSlot<{
| ((props: {component: typeof TabletsFilters} & RouteComponentProps) => React.ReactNode);
}>('tabletsFilters');
-export const RoutesSlot = createSlot('routes');
+export const RoutesSlot = createSlot<{children: React.ReactNode}>('routes');
export const RedirectSlot = createSlot('redirect');
diff --git a/src/containers/App/i18n/index.ts b/src/containers/App/i18n/index.ts
index 94b83b0685..ae8a8fc8df 100644
--- a/src/containers/App/i18n/index.ts
+++ b/src/containers/App/i18n/index.ts
@@ -1,11 +1,8 @@
-import {i18n, Lang} from '../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
import en from './en.json';
import ru from './ru.json';
const COMPONENT = 'ydb-app-content';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, {ru, en});
diff --git a/src/containers/AppWithClusters/AppWithClusters.tsx b/src/containers/AppWithClusters/AppWithClusters.tsx
index 2141dce1bb..84d8d24ab3 100644
--- a/src/containers/AppWithClusters/AppWithClusters.tsx
+++ b/src/containers/AppWithClusters/AppWithClusters.tsx
@@ -1,22 +1,22 @@
-import {App, AppSlots} from '../App';
+import React from 'react';
-import type {History} from 'history';
import type {Store} from '@reduxjs/toolkit';
+import type {History} from 'history';
+import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../utils/constants';
import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../utils/monitoring';
-
import {
- getMonitoringLink as getMonitoringLinkDefault,
getMonitoringClusterLink as getMonitoringClusterLinkDefault,
+ getMonitoringLink as getMonitoringLinkDefault,
} from '../../utils/monitoring';
+import {App, AppSlots} from '../App';
+import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
+import {settings} from '../UserSettings/settings';
+
import {ExtendedCluster} from './ExtendedCluster/ExtendedCluster';
import {ExtendedNode} from './ExtendedNode/ExtendedNode';
import {ExtendedTenant} from './ExtendedTenant/ExtendedTenant';
-import {YDBEmbeddedUISettings, settings} from '../UserSettings/settings';
-import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../utils/constants';
-
import i18n from './i18n';
-import React from 'react';
export interface AppWithClustersProps {
store: Store;
diff --git a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx
index b284c16354..8fdc6ebb1f 100644
--- a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx
+++ b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx
@@ -1,26 +1,24 @@
-import block from 'bem-cn-lite';
-
import {ClipboardButton} from '@gravity-ui/uikit';
-import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
-import type {ETenantType} from '../../../types/api/tenant';
+import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
import type {
AdditionalClusterProps,
AdditionalTenantsProps,
AdditionalVersionsProps,
} from '../../../types/additionalProps';
-import type Cluster from '../../Cluster/Cluster';
import type {MetaClusterVersion} from '../../../types/api/meta';
-import type {GetMonitoringLink, GetMonitoringClusterLink} from '../../../utils/monitoring';
-
+import type {ETenantType} from '../../../types/api/tenant';
import {getVersionColors, getVersionMap} from '../../../utils/clusterVersionColors';
-import {removeViewerPathname, getCleanBalancerValue} from '../../../utils/parseBalancer';
+import {cn} from '../../../utils/cn';
+import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring';
+import {getCleanBalancerValue, removeViewerPathname} from '../../../utils/parseBalancer';
import {getBackendFromNodeHost} from '../../../utils/prepareBackend';
+import type Cluster from '../../Cluster/Cluster';
import {useClusterData} from '../useClusterData';
import './ExtendedCluster.scss';
-const b = block('extended-cluster');
+const b = cn('extended-cluster');
const getAdditionalBalancerInfo = (balancer: string) => {
const cleanedValue = getCleanBalancerValue(balancer);
@@ -30,7 +28,7 @@ const getAdditionalBalancerInfo = (balancer: string) => {
value: (
{cleanedValue}
-
+
),
};
diff --git a/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx b/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx
index 48b19cccc3..aae4afaee9 100644
--- a/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx
+++ b/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx
@@ -1,6 +1,5 @@
-import {useClusterData} from '../useClusterData';
-
import type Node from '../../Node/Node';
+import {useClusterData} from '../useClusterData';
export function ExtendedNode({component: NodeComponent}: {component: typeof Node}) {
const {additionalNodesProps} = useClusterData();
diff --git a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx
index db0e4f1b34..f743c6d56a 100644
--- a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx
+++ b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx
@@ -1,10 +1,8 @@
-import type Tenant from '../../Tenant/Tenant';
+import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
import type {GetMonitoringLink} from '../../../utils/monitoring';
-
+import type Tenant from '../../Tenant/Tenant';
import {useClusterData} from '../useClusterData';
-import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton';
-
export interface ExtendedTenantProps {
component: typeof Tenant;
getMonitoringLink?: GetMonitoringLink;
diff --git a/src/containers/AppWithClusters/i18n/index.ts b/src/containers/AppWithClusters/i18n/index.ts
index bb1695541c..acc497755b 100644
--- a/src/containers/AppWithClusters/i18n/index.ts
+++ b/src/containers/AppWithClusters/i18n/index.ts
@@ -1,11 +1,8 @@
-import {Lang, i18n} from '../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
import en from './en.json';
import ru from './ru.json';
const COMPONENT = 'ydb-extended-user-settings';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, {ru, en});
diff --git a/src/containers/AppWithClusters/useClusterData.ts b/src/containers/AppWithClusters/useClusterData.ts
index 08c2138500..e4c80aa09b 100644
--- a/src/containers/AppWithClusters/useClusterData.ts
+++ b/src/containers/AppWithClusters/useClusterData.ts
@@ -1,10 +1,11 @@
import {useLocation} from 'react-router';
-import {useClustersList} from '../Clusters/useClustersList';
+
import {parseQuery} from '../../routes';
-import {useSetting, useTypedSelector} from '../../utils/hooks';
import {selectClusterInfo} from '../../store/reducers/clusters/selectors';
-import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../utils/constants';
import {getAdditionalNodesProps} from '../../utils/additionalProps';
+import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../utils/constants';
+import {useSetting, useTypedSelector} from '../../utils/hooks';
+import {useClustersList} from '../Clusters/useClustersList';
export function useClusterData() {
useClustersList();
diff --git a/src/containers/AsideNavigation/AsideNavigation.tsx b/src/containers/AsideNavigation/AsideNavigation.tsx
index 3acdc1d67a..58bcdab308 100644
--- a/src/containers/AsideNavigation/AsideNavigation.tsx
+++ b/src/containers/AsideNavigation/AsideNavigation.tsx
@@ -1,19 +1,21 @@
-import React, {useState} from 'react';
+import React from 'react';
+
+import type {MenuItem} from '@gravity-ui/navigation';
+import {AsideHeader, FooterItem} from '@gravity-ui/navigation';
import {useHistory} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-import {AsideHeader, FooterItem, MenuItem} from '@gravity-ui/navigation';
+import {cn} from '../../utils/cn';
+import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
+import {useSetting, useTypedSelector} from '../../utils/hooks';
+
+import i18n from './i18n';
-import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import userSecret from '../../assets/icons/user-secret.svg';
-import userChecked from '../../assets/icons/user-check.svg';
import settingsIcon from '../../assets/icons/settings.svg';
import supportIcon from '../../assets/icons/support.svg';
+import userChecked from '../../assets/icons/user-check.svg';
+import userSecret from '../../assets/icons/user-secret.svg';
+import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import {useSetting, useTypedSelector} from '../../utils/hooks';
-import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
-
-import i18n from './i18n';
import './AsideNavigation.scss';
const b = cn('kv-navigation');
@@ -28,7 +30,7 @@ interface YdbUserDropdownProps {
}
function YdbUserDropdown({isCompact, popupAnchor, ydbUser, children}: YdbUserDropdownProps) {
- const [isUserDropdownVisible, setIsUserDropdownVisible] = useState(false);
+ const [isUserDropdownVisible, setIsUserDropdownVisible] = React.useState(false);
const iconData = ydbUser.login ? userChecked : userSecret;
return (
();
+ const [visiblePanel, setVisiblePanel] = React.useState();
const {user: ydbUser} = useTypedSelector((state) => state.authentication);
const [compact, setIsCompact] = useSetting(ASIDE_HEADER_COMPACT_KEY);
diff --git a/src/containers/AsideNavigation/Navigation.tsx b/src/containers/AsideNavigation/Navigation.tsx
index 45891542bd..9ef9d55906 100644
--- a/src/containers/AsideNavigation/Navigation.tsx
+++ b/src/containers/AsideNavigation/Navigation.tsx
@@ -1,10 +1,9 @@
-import {YdbInternalUser} from './YdbInternalUser/YdbInternalUser';
+import {useComponent} from '../../components/ComponentsProvider/ComponentsProvider';
import {UserSettings} from '../UserSettings/UserSettings';
+import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
+import {YdbInternalUser} from './YdbInternalUser/YdbInternalUser';
import {useNavigationMenuItems} from './useNavigationMenuItems';
-import {useComponent} from '../../components/ComponentsProvider/ComponentsProvider';
-
-import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
interface NavigationProps {
userSettings?: YDBEmbeddedUISettings;
diff --git a/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx b/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx
index deb3557c21..a6c1505432 100644
--- a/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx
+++ b/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx
@@ -1,17 +1,15 @@
-import {useHistory} from 'react-router';
-
import {Button, Icon} from '@gravity-ui/uikit';
+import {useHistory} from 'react-router';
import routes, {createHref} from '../../../routes';
-import {useTypedSelector, useTypedDispatch} from '../../../utils/hooks';
import {logout} from '../../../store/reducers/authentication/authentication';
import {cn} from '../../../utils/cn';
+import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
+import i18n from '../i18n';
import signOutIcon from '@gravity-ui/icons/svgs/arrow-right-from-square.svg';
import signInIcon from '@gravity-ui/icons/svgs/arrow-right-to-square.svg';
-import i18n from '../i18n';
-
import './YdbInternalUser.scss';
const b = cn('kv-ydb-internal-user');
diff --git a/src/containers/AsideNavigation/i18n/index.ts b/src/containers/AsideNavigation/i18n/index.ts
index 85ddaa753d..95323257a5 100644
--- a/src/containers/AsideNavigation/i18n/index.ts
+++ b/src/containers/AsideNavigation/i18n/index.ts
@@ -1,11 +1,8 @@
-import {i18n, Lang} from '../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
import en from './en.json';
import ru from './ru.json';
const COMPONENT = 'ydb-aside-navigation';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, {ru, en});
diff --git a/src/containers/AsideNavigation/useNavigationMenuItems.ts b/src/containers/AsideNavigation/useNavigationMenuItems.ts
index 809cec45ea..da35c42af3 100644
--- a/src/containers/AsideNavigation/useNavigationMenuItems.ts
+++ b/src/containers/AsideNavigation/useNavigationMenuItems.ts
@@ -1,24 +1,24 @@
import React from 'react';
+
+import type {MenuItem as AsideHeaderMenuItem} from '@gravity-ui/navigation';
+import type {IconData} from '@gravity-ui/uikit';
import {useHistory, useLocation} from 'react-router';
-import {useSetting, useTypedSelector} from '../../utils/hooks';
import routes, {parseQuery} from '../../routes';
-import {getTenantPath} from '../Tenant/TenantPages';
-
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 type {MenuItem as AsideHeaderMenuItem} from '@gravity-ui/navigation';
+import i18n from './i18n';
-import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
-
-import i18n from './i18n';
+import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
interface MenuItem {
id: string;
title: string;
- icon: SVGIconData;
+ icon: IconData;
iconSize: string | number;
location: string;
locationKeys?: string[];
diff --git a/src/containers/Authentication/Authentication.scss b/src/containers/Authentication/Authentication.scss
index 894a3cb6e2..4d16cc346b 100644
--- a/src/containers/Authentication/Authentication.scss
+++ b/src/containers/Authentication/Authentication.scss
@@ -17,7 +17,7 @@
radial-gradient(at 110% 100%, rgba(0, 102, 255, 0.15) 20%, rgba(247, 247, 247, 0) 40%);
background-blend-mode: normal;
- .yc-text-input {
+ .g-text-input {
display: flex;
}
@@ -35,10 +35,10 @@
&__logo {
display: flex;
align-items: center;
+ gap: 8px;
font-size: 16px;
font-weight: 600;
- gap: 8px;
}
&__title {
@@ -70,7 +70,7 @@
width: 320px;
margin-bottom: 16px;
- .yc-text-input_state_error {
+ .g-text-input_state_error {
flex-direction: column;
}
}
diff --git a/src/containers/Authentication/Authentication.tsx b/src/containers/Authentication/Authentication.tsx
index 723ad95a5f..cb81a9b789 100644
--- a/src/containers/Authentication/Authentication.tsx
+++ b/src/containers/Authentication/Authentication.tsx
@@ -1,17 +1,17 @@
-import {KeyboardEvent, useEffect, useState} from 'react';
-import {useHistory, useLocation} from 'react-router';
-import cn from 'bem-cn-lite';
+import React from 'react';
-import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
+import {Button, Link as ExternalLink, Icon, TextInput} from '@gravity-ui/uikit';
+import {useHistory, useLocation} from 'react-router';
-import {authenticate} from '../../store/reducers/authentication/authentication';
-import {useTypedSelector, useTypedDispatch} from '../../utils/hooks';
import {parseQuery} from '../../routes';
+import {authenticate} from '../../store/reducers/authentication/authentication';
+import {cn} from '../../utils/cn';
+import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
-import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import showIcon from '../../assets/icons/show.svg';
-import hideIcon from '../../assets/icons/hide.svg';
import closeIcon from '../../assets/icons/close.svg';
+import hideIcon from '../../assets/icons/hide.svg';
+import showIcon from '../../assets/icons/show.svg';
+import ydbLogoIcon from '../../assets/icons/ydb.svg';
import './Authentication.scss';
@@ -30,13 +30,13 @@ function Authentication({closable = false}: AuthenticationProps) {
const {error} = useTypedSelector((state) => state.authentication);
- const [login, setLogin] = useState('');
- const [pass, setPass] = useState('');
- const [loginError, setLoginError] = useState('');
- const [passwordError, setPasswordError] = useState('');
- const [showPassword, setShowPassword] = useState(false);
+ const [login, setLogin] = React.useState('');
+ const [pass, setPass] = React.useState('');
+ const [loginError, setLoginError] = React.useState('');
+ const [passwordError, setPasswordError] = React.useState('');
+ const [showPassword, setShowPassword] = React.useState(false);
- useEffect(() => {
+ React.useEffect(() => {
if (error?.data?.error?.includes('user')) {
setLoginError(error.data.error);
}
@@ -70,7 +70,7 @@ function Authentication({closable = false}: AuthenticationProps) {
});
};
- const onEnterClick = (e: KeyboardEvent) => {
+ const onEnterClick = (e: React.KeyboardEvent) => {
if (e.keyCode === 13) {
onLoginClick();
}
diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx
index 06b5c6000d..c2d2523446 100644
--- a/src/containers/Cluster/Cluster.tsx
+++ b/src/containers/Cluster/Cluster.tsx
@@ -1,35 +1,34 @@
-import {useEffect, useMemo, useRef} from 'react';
-import {Redirect, Switch, Route, useLocation, useRouteMatch} from 'react-router';
-import {Helmet} from 'react-helmet-async';
-import cn from 'bem-cn-lite';
-import qs from 'qs';
+import React from 'react';
import {Skeleton, Tabs} from '@gravity-ui/uikit';
+import qs from 'qs';
+import {Helmet} from 'react-helmet-async';
+import {Redirect, Route, Switch, useLocation, useRouteMatch} from 'react-router';
+import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
+import {InternalLink} from '../../components/InternalLink';
+import routes, {getLocationObjectFromHref} from '../../routes';
+import {getClusterInfo, updateDefaultClusterTab} from '../../store/reducers/cluster/cluster';
+import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
import type {
AdditionalClusterProps,
+ AdditionalNodesProps,
AdditionalTenantsProps,
AdditionalVersionsProps,
- AdditionalNodesProps,
} from '../../types/additionalProps';
-import routes, {getLocationObjectFromHref} from '../../routes';
-
-import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
-import {getClusterInfo, updateDefaultClusterTab} from '../../store/reducers/cluster/cluster';
-import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
+import {cn} from '../../utils/cn';
+import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
+import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
-import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../utils/hooks';
-
-import {InternalLink} from '../../components/InternalLink';
-import {Tenants} from '../Tenants/Tenants';
-import {StorageWrapper} from '../Storage/StorageWrapper';
import {NodesWrapper} from '../Nodes/NodesWrapper';
+import {StorageWrapper} from '../Storage/StorageWrapper';
+import {Tenants} from '../Tenants/Tenants';
import {Versions} from '../Versions/Versions';
-import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
-import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
import {ClusterInfo} from './ClusterInfo/ClusterInfo';
-import {ClusterTab, clusterTabs, clusterTabsIds, getClusterPath, isClusterTab} from './utils';
+import type {ClusterTab} from './utils';
+import {clusterTabs, clusterTabsIds, getClusterPath, isClusterTab} from './utils';
import './Cluster.scss';
@@ -48,7 +47,7 @@ function Cluster({
additionalNodesProps,
additionalVersionsProps,
}: ClusterProps) {
- const container = useRef(null);
+ const container = React.useRef(null);
const dispatch = useTypedDispatch();
@@ -77,7 +76,7 @@ function Cluster({
const infoLoading = (clusterLoading && !clusterWasLoaded) || (nodesLoading && !nodesWasLoaded);
- useEffect(() => {
+ React.useEffect(() => {
dispatch(getClusterNodes());
}, [dispatch]);
@@ -87,18 +86,18 @@ function Cluster({
true,
);
- useEffect(() => {
+ React.useEffect(() => {
dispatch(setHeaderBreadcrumbs('cluster', {}));
}, [dispatch, Name]);
- const versionToColor = useMemo(() => {
+ const versionToColor = React.useMemo(() => {
if (additionalVersionsProps?.getVersionToColorMap) {
return additionalVersionsProps?.getVersionToColorMap();
}
return parseVersionsToVersionToColorMap(cluster?.Versions);
}, [additionalVersionsProps, cluster]);
- const versionsValues = useMemo(() => {
+ const versionsValues = React.useMemo(() => {
return parseNodesToVersionsValues(nodes, versionToColor);
}, [nodes, versionToColor]);
@@ -118,7 +117,10 @@ function Cluster({
};
const clusterTitle = cluster?.Name ?? clusterName ?? CLUSTER_DEFAULT_TITLE;
- const activeTab = useMemo(() => clusterTabs.find(({id}) => id === activeTabId), [activeTabId]);
+ const activeTab = React.useMemo(
+ () => clusterTabs.find(({id}) => id === activeTabId),
+ [activeTabId],
+ );
return (
@@ -228,7 +230,7 @@ function useClusterTab() {
activeTab = defaultTab;
}
- useEffect(() => {
+ React.useEffect(() => {
if (activeTab !== defaultTab) {
dispatch(updateDefaultClusterTab(activeTab));
}
diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
index a98be143b6..7511ad63f8 100644
--- a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
+++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
@@ -44,7 +44,6 @@
&__links {
display: flex;
flex-flow: row wrap;
-
gap: 12px;
}
diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
index 948d73428c..2d9a7795fe 100644
--- a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
+++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
@@ -1,29 +1,27 @@
-import block from 'bem-cn-lite';
-
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import InfoViewer, {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
-import {Tags} from '../../../components/Tags';
-import {Tablet} from '../../../components/Tablet';
-import {ResponseError} from '../../../components/Errors/ResponseError';
-import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup';
+import {ResponseError} from '../../../components/Errors/ResponseError';
+import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-
-import type {IResponseError} from '../../../types/api/error';
-import type {AdditionalClusterProps, ClusterLink} from '../../../types/additionalProps';
-import type {VersionValue} from '../../../types/versions';
-import type {TClusterInfo} from '../../../types/api/cluster';
+import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
+import {Tablet} from '../../../components/Tablet';
+import {Tags} from '../../../components/Tags';
import {backend, customBackend} from '../../../store';
-import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../utils/hooks';
-import {formatBytes, getSizeWithSignificantDigits} from '../../../utils/bytesParsers';
-import {DEVELOPER_UI_TITLE} from '../../../utils/constants';
import type {
ClusterGroupsStats,
DiskErasureGroupsStats,
DiskGroupsStats,
} from '../../../store/reducers/cluster/types';
-
+import type {AdditionalClusterProps, ClusterLink} from '../../../types/additionalProps';
+import type {TClusterInfo} from '../../../types/api/cluster';
+import type {IResponseError} from '../../../types/api/error';
+import type {VersionValue} from '../../../types/versions';
+import {formatBytes, getSizeWithSignificantDigits} from '../../../utils/bytesParsers';
+import {cn} from '../../../utils/cn';
+import {DEVELOPER_UI_TITLE} from '../../../utils/constants';
+import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
+import {useTypedSelector} from '../../../utils/hooks';
import {VersionsBar} from '../VersionsBar/VersionsBar';
import i18n from '../i18n';
@@ -31,7 +29,7 @@ import {compareTablets} from './utils';
import './ClusterInfo.scss';
-const b = block('cluster-info');
+const b = cn('cluster-info');
interface GroupsStatsPopupContentProps {
stats: DiskErasureGroupsStats;
diff --git a/src/containers/Cluster/ClusterInfo/utils.ts b/src/containers/Cluster/ClusterInfo/utils.ts
index 05237d008a..7a34e9f871 100644
--- a/src/containers/Cluster/ClusterInfo/utils.ts
+++ b/src/containers/Cluster/ClusterInfo/utils.ts
@@ -1,4 +1,5 @@
-import {TTabletStateInfo, EType} from '../../../types/api/tablet';
+import type {TTabletStateInfo} from '../../../types/api/tablet';
+import {EType} from '../../../types/api/tablet';
export const compareTablets = (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => {
if (tablet1.Type === EType.TxAllocator) {
diff --git a/src/containers/Cluster/VersionsBar/VersionsBar.scss b/src/containers/Cluster/VersionsBar/VersionsBar.scss
index f1dbaddd33..df9a9a0c08 100644
--- a/src/containers/Cluster/VersionsBar/VersionsBar.scss
+++ b/src/containers/Cluster/VersionsBar/VersionsBar.scss
@@ -4,7 +4,7 @@
width: 600px;
- & .yc-progress {
+ & .g-progress {
width: 100%;
}
@@ -21,7 +21,7 @@
white-space: nowrap;
}
- & .yc-progress__stack {
+ & .g-progress__stack {
cursor: pointer;
}
}
diff --git a/src/containers/Cluster/VersionsBar/VersionsBar.tsx b/src/containers/Cluster/VersionsBar/VersionsBar.tsx
index 0a2755ff79..1458a3d689 100644
--- a/src/containers/Cluster/VersionsBar/VersionsBar.tsx
+++ b/src/containers/Cluster/VersionsBar/VersionsBar.tsx
@@ -1,12 +1,11 @@
-import block from 'bem-cn-lite';
-
import {Progress} from '@gravity-ui/uikit';
import type {VersionValue} from '../../../types/versions';
+import {cn} from '../../../utils/cn';
import './VersionsBar.scss';
-const b = block('ydb-cluster-versions-bar');
+const b = cn('ydb-cluster-versions-bar');
interface VersionsBarProps {
versionsValues?: VersionValue[];
diff --git a/src/containers/Cluster/i18n/index.ts b/src/containers/Cluster/i18n/index.ts
index 7f1d6b5ae7..758b317b3e 100644
--- a/src/containers/Cluster/i18n/index.ts
+++ b/src/containers/Cluster/i18n/index.ts
@@ -1,11 +1,8 @@
-import {i18n, Lang} from '../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
import en from './en.json';
import ru from './ru.json';
const COMPONENT = 'ydb-cluster';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, {ru, en});
diff --git a/src/containers/Cluster/utils.tsx b/src/containers/Cluster/utils.tsx
index 3ea4c3816c..0350aeea96 100644
--- a/src/containers/Cluster/utils.tsx
+++ b/src/containers/Cluster/utils.tsx
@@ -1,5 +1,5 @@
-import type {ValueOf} from '../../types/common';
import routes, {createHref} from '../../routes';
+import type {ValueOf} from '../../types/common';
export const clusterTabsIds = {
overview: 'overview',
diff --git a/src/containers/ClusterModeGuard/ClusterModeGuard.tsx b/src/containers/ClusterModeGuard/ClusterModeGuard.tsx
index f3cd9ca613..bbb4876303 100644
--- a/src/containers/ClusterModeGuard/ClusterModeGuard.tsx
+++ b/src/containers/ClusterModeGuard/ClusterModeGuard.tsx
@@ -1,8 +1,9 @@
-import {ReactNode} from 'react';
+import React from 'react';
+
import {useTypedSelector} from '../../lib';
export interface ClusterModeGuardProps {
- children: ReactNode;
+ children: React.ReactNode;
mode: 'single' | 'multi';
}
@@ -11,5 +12,5 @@ export function ClusterModeGuard({children, mode}: ClusterModeGuardProps) {
mode === 'single' ? state.singleClusterMode : !state.singleClusterMode,
);
- return shouldRender ? <>{children} : null;
+ return shouldRender ? {children} : null;
}
diff --git a/src/containers/Clusters/Clusters.scss b/src/containers/Clusters/Clusters.scss
index 3a0d20482d..1188219d11 100644
--- a/src/containers/Clusters/Clusters.scss
+++ b/src/containers/Clusters/Clusters.scss
@@ -81,7 +81,7 @@
word-break: break-all;
}
- & .yc-progress__item {
+ & .g-progress__item {
transition: none;
}
diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx
index 7834863314..cd9e45376b 100644
--- a/src/containers/Clusters/Clusters.tsx
+++ b/src/containers/Clusters/Clusters.tsx
@@ -1,39 +1,38 @@
-import {useCallback, useMemo} from 'react';
-import {Helmet} from 'react-helmet-async';
+import React from 'react';
import DataTable from '@gravity-ui/react-data-table';
-import {TableColumnSetup, Select} from '@gravity-ui/uikit';
+import {Select, TableColumnSetup} from '@gravity-ui/uikit';
+import {Helmet} from 'react-helmet-async';
-import {Search} from '../../components/Search';
import {Loader} from '../../components/Loader';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {useAutofetcher, useTypedSelector, useTypedDispatch} from '../../utils/hooks';
-
-import {fetchClustersList, changeClustersFilters} from '../../store/reducers/clusters/clusters';
+import {Search} from '../../components/Search';
+import {changeClustersFilters, fetchClustersList} from '../../store/reducers/clusters/clusters';
import {
+ selectClusterNameFilter,
+ selectClustersAggregation,
selectClustersList,
+ selectFilteredClusters,
selectLoadingFlag,
- selectClusterNameFilter,
- selectStatusFilter,
selectServiceFilter,
+ selectStatusFilter,
selectVersionFilter,
selectVersions,
- selectFilteredClusters,
- selectClustersAggregation,
} from '../../store/reducers/clusters/selectors';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {ClustersStatistics} from './ClustersStatistics';
+import {CLUSTERS_COLUMNS} from './columns';
import {
+ CLUSTER_STATUSES,
COLUMNS_NAMES,
COLUMNS_TITLES,
- CLUSTER_STATUSES,
DEFAULT_COLUMNS,
SELECTED_COLUMNS_KEY,
} from './constants';
-import {ClustersStatistics} from './ClustersStatistics';
-import {CLUSTERS_COLUMNS} from './columns';
-import {useSelectedColumns} from './useSelectedColumns';
-import {b} from './shared';
import i18n from './i18n';
+import {b} from './shared';
+import {useSelectedColumns} from './useSelectedColumns';
import './Clusters.scss';
@@ -50,7 +49,7 @@ export function Clusters() {
const version = useTypedSelector(selectVersionFilter);
const versions = useTypedSelector(selectVersions);
- const fetchData = useCallback(() => {
+ const fetchData = React.useCallback(() => {
dispatch(fetchClustersList());
}, [dispatch]);
@@ -77,7 +76,7 @@ export function Clusters() {
[COLUMNS_NAMES.TITLE],
);
- const servicesToSelect = useMemo(() => {
+ const servicesToSelect = React.useMemo(() => {
const clustersServices = new Set();
clusters.forEach((cluster) => {
@@ -153,16 +152,14 @@ export function Clusters() {
/>