ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/AppWithClusters/AppWithClusters.d.ts

@@ -0,0 +1,14 @@
+import type { History } from 'history';
+import type { Store } from 'redux';
+import type { GetMonitoringClusterLink, GetMonitoringLink } from '../../utils/monitoring';
+import { YDBEmbeddedUISettings } from '../UserSettings/settings';
+import React from 'react';
+export interface AppWithClustersProps {
+    store: Store;
+    history: History;
+    getMonitoringLink?: GetMonitoringLink;
+    getMonitoringClusterLink?: GetMonitoringClusterLink;
+    userSettings?: YDBEmbeddedUISettings;
+    children?: React.ReactNode;
+}
+export declare function AppWithClusters({ store, history, getMonitoringLink, getMonitoringClusterLink, userSettings, children, }: AppWithClustersProps): JSX.Element;

package/dist/containers/AppWithClusters/AppWithClusters.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { App, AppSlots } from '../App';
+import { getMonitoringLink as getMonitoringLinkDefault, getMonitoringClusterLink as getMonitoringClusterLinkDefault, } from '../../utils/monitoring';
+import { ExtendedCluster } from './ExtendedCluster/ExtendedCluster';
+import { ExtendedNode } from './ExtendedNode/ExtendedNode';
+import { ExtendedTenant } from './ExtendedTenant/ExtendedTenant';
+import { settings } from '../UserSettings/settings';
+import { USE_CLUSTER_BALANCER_AS_BACKEND_KEY } from '../../utils/constants';
+import i18n from './i18n';
+const defaultUserSettings = settings;
+defaultUserSettings[1].sections[0].settings.push({
+    title: i18n('settings.useClusterBalancerAsBackend.title'),
+    helpPopoverContent: i18n('settings.useClusterBalancerAsBackend.popover'),
+    settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
+});
+export function AppWithClusters({ store, history, getMonitoringLink = getMonitoringLinkDefault, getMonitoringClusterLink = getMonitoringClusterLinkDefault, userSettings = defaultUserSettings, children, }) {
+    return (_jsxs(App, Object.assign({ store: store, history: history, userSettings: userSettings }, { children: [_jsx(AppSlots.ClusterSlot, { children: ({ component }) => {
+                    return (_jsx(ExtendedCluster, { component: component, getMonitoringLink: getMonitoringLink, getMonitoringClusterLink: getMonitoringClusterLink }));
+                } }), _jsx(AppSlots.NodeSlot, { children: ({ component }) => {
+                    return _jsx(ExtendedNode, { component: component });
+                } }), _jsx(AppSlots.TenantSlot, { children: ({ component }) => {
+                    return (_jsx(ExtendedTenant, { component: component, getMonitoringLink: getMonitoringLink }));
+                } }), children] })));
+}

package/dist/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type Cluster from '../../Cluster/Cluster';
+import type { GetMonitoringLink, GetMonitoringClusterLink } from '../../../utils/monitoring';
+import './ExtendedCluster.scss';
+interface ExtendedClusterProps {
+    component: typeof Cluster;
+    getMonitoringLink?: GetMonitoringLink;
+    getMonitoringClusterLink?: GetMonitoringClusterLink;
+}
+export declare function ExtendedCluster({ component: ClusterComponent, getMonitoringLink, getMonitoringClusterLink, }: ExtendedClusterProps): JSX.Element;
+export {};

package/dist/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { ClipboardButton } from '@gravity-ui/uikit';
+import { MonitoringButton } from '../../../components/MonitoringButton/MonitoringButton';
+import { getVersionColors, getVersionMap } from '../../../utils/clusterVersionColors';
+import { removeViewerPathname, getCleanBalancerValue } from '../../../utils/parseBalancer';
+import { getBackendFromNodeHost } from '../../../utils/prepareBackend';
+import { useClusterData } from '../useClusterData';
+import './ExtendedCluster.scss';
+const b = block('extended-cluster');
+const getAdditionalBalancerInfo = (balancer) => {
+    const cleanedValue = getCleanBalancerValue(balancer);
+    return {
+        label: 'Balancer',
+        value: (_jsxs("div", Object.assign({ className: b('balancer') }, { children: [cleanedValue, _jsx(ClipboardButton, { text: cleanedValue, size: 14, className: b('clipboard-button') })] }))),
+    };
+};
+const getAdditionalClusterProps = (monitoring, balancer, getMonitoringClusterLink) => {
+    const additionalClusterProps = {};
+    if (monitoring && getMonitoringClusterLink) {
+        const clusterLink = getMonitoringClusterLink(monitoring);
+        if (clusterLink) {
+            additionalClusterProps.links = [{ title: 'Monitoring', url: clusterLink }];
+        }
+    }
+    if (balancer) {
+        additionalClusterProps.info = [getAdditionalBalancerInfo(balancer)];
+    }
+    return additionalClusterProps;
+};
+const getAdditionalVersionsProps = (versions = []) => {
+    return {
+        getVersionToColorMap: () => {
+            return getVersionColors(getVersionMap(versions));
+        },
+    };
+};
+const getAdditionalTenantsProps = (clusterName, monitoring, balancer, useClusterBalancerAsBackend, getMonitoringLink) => {
+    const additionalTenantsProps = {};
+    additionalTenantsProps.prepareTenantBackend = (nodeHost) => {
+        // Proxy received from balancer value, so it's necessary
+        if (!balancer) {
+            return undefined;
+        }
+        if (useClusterBalancerAsBackend) {
+            return removeViewerPathname(balancer);
+        }
+        if (!nodeHost) {
+            return undefined;
+        }
+        return getBackendFromNodeHost(nodeHost, balancer);
+    };
+    if (monitoring && getMonitoringLink) {
+        additionalTenantsProps.getMonitoringLink = (dbName, dbType) => {
+            if (dbName && dbType) {
+                const href = getMonitoringLink({ monitoring, dbName, dbType, clusterName });
+                return _jsx(MonitoringButton, { href: href });
+            }
+            return null;
+        };
+    }
+    return additionalTenantsProps;
+};
+export function ExtendedCluster({ component: ClusterComponent, getMonitoringLink, getMonitoringClusterLink, }) {
+    const { monitoring, balancer, versions, cluster, useClusterBalancerAsBackend, additionalNodesProps, } = useClusterData();
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx(ClusterComponent, { additionalClusterProps: getAdditionalClusterProps(monitoring, balancer, getMonitoringClusterLink), additionalVersionsProps: getAdditionalVersionsProps(versions), additionalTenantsProps: getAdditionalTenantsProps(cluster === null || cluster === void 0 ? void 0 : cluster.Name, monitoring, balancer, useClusterBalancerAsBackend, getMonitoringLink), additionalNodesProps: additionalNodesProps }) })));
+}

package/dist/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.scss

@@ -0,0 +1,14 @@
+.extended-cluster {
+    display: flex;
+
+    height: 100%;
+
+    &__balancer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+    &__clipboard-button {
+        margin-left: 5px;
+    }
+}

package/dist/containers/AppWithClusters/ExtendedNode/ExtendedNode.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type Node from '../../Node/Node';
+export declare function ExtendedNode({ component: NodeComponent }: {
+    component: typeof Node;
+}): JSX.Element;

package/dist/containers/AppWithClusters/ExtendedNode/ExtendedNode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClusterData } from '../useClusterData';
+export function ExtendedNode({ component: NodeComponent }) {
+    const { additionalNodesProps } = useClusterData();
+    return _jsx(NodeComponent, { additionalNodesProps: additionalNodesProps });
+}

package/dist/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type Tenant from '../../Tenant/Tenant';
+import type { GetMonitoringLink } from '../../../utils/monitoring';
+export interface ExtendedTenantProps {
+    component: typeof Tenant;
+    getMonitoringLink?: GetMonitoringLink;
+}
+export declare function ExtendedTenant({ component: TenantComponent, getMonitoringLink, }: ExtendedTenantProps): JSX.Element;

package/dist/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClusterData } from '../useClusterData';
+import { MonitoringButton } from '../../../components/MonitoringButton/MonitoringButton';
+export function ExtendedTenant({ component: TenantComponent, getMonitoringLink, }) {
+    const { additionalNodesProps, cluster, monitoring } = useClusterData();
+    const additionalTenantProps = {
+        getMonitoringLink: (dbName, dbType) => {
+            if (monitoring && dbName && dbType && getMonitoringLink) {
+                const href = getMonitoringLink({
+                    monitoring,
+                    dbName,
+                    dbType,
+                    clusterName: cluster === null || cluster === void 0 ? void 0 : cluster.Name,
+                });
+                return href ? _jsx(MonitoringButton, { href: href, visible: true }) : null;
+            }
+            return null;
+        },
+    };
+    return (_jsx(TenantComponent, { additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }));
+}

package/dist/containers/AppWithClusters/i18n/en.json

@@ -0,0 +1,4 @@
+{
+    "settings.useClusterBalancerAsBackend.title": "Use cluster balancer as backend",
+    "settings.useClusterBalancerAsBackend.popover": "By default random cluster node is used as backend. It causes saved links to become invalid after some time, when node is restarted. Using balancer as backend fixes it"
+}

package/dist/containers/AppWithClusters/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/AppWithClusters/i18n/index.js

@@ -0,0 +1,7 @@
+import { Lang, i18n } 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);

package/dist/containers/AppWithClusters/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+    "settings.useClusterBalancerAsBackend.title": "Использовать балансер кластера как бэкенд",
+    "settings.useClusterBalancerAsBackend.popover": "По умолчанию в качестве бэкенда используется случайный узел кластера. Это приводит к тому, что сохраненные ссылки становятся невалидными спустя некоторое время, когда узел перезапускается. Использование балансера исправляет это"
+}

package/dist/containers/AppWithClusters/useClusterData.d.ts

@@ -0,0 +1,8 @@
+export declare function useClusterData(): {
+    monitoring: string | undefined;
+    balancer: string | undefined;
+    versions: import("../../types/api/meta").MetaClusterVersion[] | undefined;
+    cluster: import("../../types/api/meta").MetaViewerClusterInfo | undefined;
+    useClusterBalancerAsBackend: boolean;
+    additionalNodesProps: import("../../types/additionalProps").AdditionalNodesProps;
+};

package/dist/containers/AppWithClusters/useClusterData.js

@@ -0,0 +1,24 @@
+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';
+export function useClusterData() {
+    useClustersList();
+    const location = useLocation();
+    const queryParams = parseQuery(location);
+    const { clusterName } = queryParams;
+    const { solomon: monitoring, balancer, versions, cluster, } = useTypedSelector((state) => selectClusterInfo(state, typeof clusterName === 'string' ? clusterName : ''));
+    const [useClusterBalancerAsBackend] = useSetting(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
+    const additionalNodesProps = getAdditionalNodesProps(balancer, useClusterBalancerAsBackend);
+    return {
+        monitoring,
+        balancer,
+        versions,
+        cluster,
+        useClusterBalancerAsBackend,
+        additionalNodesProps,
+    };
+}

package/dist/containers/AsideNavigation/AsideNavigation.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MenuItem } from '@gravity-ui/navigation';
+import './AsideNavigation.scss';
+export interface AsideNavigationProps {
+    settings: JSX.Element;
+    ydbInternalUser: JSX.Element;
+    menuItems?: MenuItem[];
+    content: React.ReactNode;
+}
+export declare function AsideNavigation(props: AsideNavigationProps): JSX.Element;

package/dist/containers/AsideNavigation/AsideNavigation.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import cn from 'bem-cn-lite';
+import { AsideHeader, FooterItem } from '@gravity-ui/navigation';
+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 { 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');
+function YdbUserDropdown({ isCompact, popupAnchor, ydbUser, children }) {
+    const [isUserDropdownVisible, setIsUserDropdownVisible] = useState(false);
+    const iconData = ydbUser.login ? userChecked : userSecret;
+    return (_jsx(FooterItem, { compact: isCompact, item: {
+            id: 'user-popup',
+            title: ydbUser.login ? ydbUser.login : i18n('navigation-item.account'),
+            current: isUserDropdownVisible,
+            icon: iconData,
+            iconSize: 22,
+            onItemClick: () => setIsUserDropdownVisible(true),
+        }, enableTooltip: !isUserDropdownVisible, popupAnchor: popupAnchor, popupVisible: isUserDropdownVisible, onClosePopup: () => setIsUserDropdownVisible(false), renderPopupContent: () => _jsx("div", Object.assign({ className: b('ydb-user-wrapper') }, { children: children })) }));
+}
+var Panel;
+(function (Panel) {
+    Panel["UserSettings"] = "UserSettings";
+})(Panel || (Panel = {}));
+export function AsideNavigation(props) {
+    const history = useHistory();
+    const [visiblePanel, setVisiblePanel] = useState();
+    const { user: ydbUser } = useTypedSelector((state) => state.authentication);
+    const [compact, setIsCompact] = useSetting(ASIDE_HEADER_COMPACT_KEY);
+    return (_jsx(React.Fragment, { children: _jsx(AsideHeader, { logo: {
+                text: 'YDB',
+                icon: ydbLogoIcon,
+                onClick: () => history.push('/'),
+            }, menuItems: props.menuItems, compact: compact, onChangeCompact: setIsCompact, className: b(), renderContent: () => props.content, renderFooter: ({ compact, asideRef }) => (_jsxs(React.Fragment, { children: [_jsx(FooterItem, { compact: compact, item: {
+                            id: 'documentation',
+                            title: i18n('navigation-item.documentation'),
+                            icon: supportIcon,
+                            iconSize: 24,
+                            onItemClick: () => {
+                                window.open('https://ydb.tech/docs', '_blank', 'noreferrer');
+                            },
+                        } }), _jsx(FooterItem, { item: {
+                            id: 'user-settings',
+                            title: i18n('navigation-item.settings'),
+                            icon: settingsIcon,
+                            iconSize: 24,
+                            current: visiblePanel === Panel.UserSettings,
+                            onItemClick: () => {
+                                setVisiblePanel(visiblePanel === Panel.UserSettings
+                                    ? undefined
+                                    : Panel.UserSettings);
+                            },
+                        }, compact: compact }), _jsx(YdbUserDropdown, Object.assign({ isCompact: compact, popupAnchor: asideRef, ydbUser: {
+                            login: ydbUser,
+                        } }, { children: props.ydbInternalUser }))] })), panelItems: [
+                {
+                    id: 'user-settings',
+                    visible: visiblePanel === Panel.UserSettings,
+                    content: props.settings,
+                },
+            ], onClosePanel: () => {
+                setVisiblePanel(undefined);
+            } }) }));
+}

package/dist/containers/AsideNavigation/Navigation.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { YDBEmbeddedUISettings } from '../UserSettings/settings';
+interface NavigationProps {
+    userSettings?: YDBEmbeddedUISettings;
+    children: React.ReactNode;
+}
+export declare function Navigation({ children, userSettings }: NavigationProps): JSX.Element;
+export {};

package/dist/containers/AsideNavigation/Navigation.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { YdbInternalUser } from './YdbInternalUser/YdbInternalUser';
+import { UserSettings } from '../UserSettings/UserSettings';
+import { useNavigationMenuItems } from './useNavigationMenuItems';
+import { useComponent } from '../../components/ComponentsProvider/ComponentsProvider';
+export function Navigation({ children, userSettings }) {
+    const AsideNavigation = useComponent('AsideNavigation');
+    const menuItems = useNavigationMenuItems();
+    return (_jsx(AsideNavigation, { settings: _jsx(UserSettings, { settings: userSettings }), menuItems: menuItems, ydbInternalUser: _jsx(YdbInternalUser, {}), content: children }));
+}

package/dist/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './YdbInternalUser.scss';
+export declare function YdbInternalUser(): JSX.Element;

package/dist/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHistory } from 'react-router';
+import { useDispatch } from 'react-redux';
+import { Button, Icon } from '@gravity-ui/uikit';
+import routes, { createHref } from '../../../routes';
+import { useTypedSelector } from '../../../utils/hooks';
+import { logout } from '../../../store/reducers/authentication/authentication';
+import { cn } from '../../../utils/cn';
+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');
+export function YdbInternalUser() {
+    const { user: ydbUser } = useTypedSelector((state) => state.authentication);
+    const history = useHistory();
+    const handleLoginClick = () => {
+        history.push(createHref(routes.auth, undefined, { returnUrl: encodeURIComponent(location.href) }));
+    };
+    const dispatch = useDispatch();
+    const handleLogout = () => {
+        dispatch(logout);
+    };
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('user-info-wrapper') }, { children: [_jsx("div", Object.assign({ className: b('ydb-internal-user-title') }, { children: i18n('account.user') })), ydbUser && _jsx("div", Object.assign({ className: b('username') }, { children: ydbUser }))] })), ydbUser ? (_jsx(Button, Object.assign({ view: "flat-secondary", title: i18n('account.logout'), onClick: handleLogout }, { children: _jsx(Icon, { data: signOutIcon, size: 16 }) }))) : (_jsx(Button, Object.assign({ view: "flat-secondary", title: i18n('account.login'), onClick: handleLoginClick }, { children: _jsx(Icon, { data: signInIcon, size: 16 }) })))] })));
+}

package/dist/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.scss

@@ -0,0 +1,24 @@
+.kv-ydb-internal-user {
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+    align-items: center;
+
+    margin-left: 16px;
+
+    line-height: var(--g-text-body-2-line-height);
+
+    &__user-info-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__ydb-internal-user-title {
+        font-weight: 500;
+    }
+
+    &__ydb-user-wrapper {
+        width: 300px;
+        padding: 10px;
+    }
+}

package/dist/containers/AsideNavigation/i18n/en.json

@@ -1,13 +1,10 @@
 {
-  "pages.query": "Query",
-  "pages.diagnostics": "Diagnostics",
-
-  "navigation-item.documentation": "Documentation",
-  "navigation-item.settings": "Settings",
-  "navigation-item.account": "Account",
-
-  "account.user": "YDB User",
-
-  "account.login": "Login",
-  "account.logout": "Logout"
+    "pages.query": "Query",
+    "pages.diagnostics": "Diagnostics",
+    "navigation-item.documentation": "Documentation",
+    "navigation-item.settings": "Settings",
+    "navigation-item.account": "Account",
+    "account.user": "YDB User",
+    "account.login": "Login",
+    "account.logout": "Logout"
 }

package/dist/containers/AsideNavigation/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/AsideNavigation/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } 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);

package/dist/containers/AsideNavigation/i18n/ru.json

@@ -1,13 +1,10 @@
 {
-  "pages.query": "Редактор запросов",
-  "pages.diagnostics": "Диагностика",
-
-  "navigation-item.documentation": "Документация",
-  "navigation-item.settings": "Настройки",
-  "navigation-item.account": "Аккаунт",
-
-  "account.user": "Пользователь YDB",
-
-  "account.login": "Войти",
-  "account.logout": "Выйти"
+    "pages.query": "Редактор запросов",
+    "pages.diagnostics": "Диагностика",
+    "navigation-item.documentation": "Документация",
+    "navigation-item.settings": "Настройки",
+    "navigation-item.account": "Аккаунт",
+    "account.user": "Пользователь YDB",
+    "account.login": "Войти",
+    "account.logout": "Выйти"
 }

package/dist/containers/AsideNavigation/useNavigationMenuItems.d.ts

@@ -0,0 +1,2 @@
+import type { MenuItem as AsideHeaderMenuItem } from '@gravity-ui/navigation';
+export declare function useNavigationMenuItems(): AsideHeaderMenuItem[];

package/dist/containers/AsideNavigation/useNavigationMenuItems.js

@@ -0,0 +1,55 @@
+import React from 'react';
+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 terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
+import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
+import i18n from './i18n';
+export function useNavigationMenuItems() {
+    const location = useLocation();
+    const history = useHistory();
+    const [initialTenantPage, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY);
+    const { tenantPage = initialTenantPage } = 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 = [
+            {
+                id: TENANT_PAGES_IDS.query,
+                title: i18n('pages.query'),
+                icon: terminalIcon,
+                iconSize: 20,
+                location: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.query })),
+            },
+            {
+                id: TENANT_PAGES_IDS.diagnostics,
+                title: i18n('pages.diagnostics'),
+                icon: pulseIcon,
+                iconSize: 20,
+                location: getTenantPath(Object.assign(Object.assign({}, 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);
+                },
+            };
+        });
+    }, [tenantPage, isTenantPage, setInitialTenantPage, history, queryParams]);
+    return menuItems;
+}

package/dist/containers/Authentication/Authentication.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './Authentication.scss';
+interface AuthenticationProps {
+    closable?: boolean;
+}
+declare function Authentication({ closable }: AuthenticationProps): JSX.Element;
+export default Authentication;

package/dist/containers/Authentication/Authentication.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router';
+import cn from 'bem-cn-lite';
+import { Button, TextInput, Icon, Link as ExternalLink } from '@gravity-ui/uikit';
+import { authenticate } from '../../store/reducers/authentication/authentication';
+import { useTypedSelector } from '../../utils/hooks';
+import { parseQuery } from '../../routes';
+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 './Authentication.scss';
+const b = cn('authentication');
+function Authentication({ closable = false }) {
+    const dispatch = useDispatch();
+    const history = useHistory();
+    const location = useLocation();
+    const { returnUrl } = parseQuery(location);
+    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);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = error === null || error === void 0 ? void 0 : error.data) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.includes('user')) {
+            setLoginError(error.data.error);
+        }
+        if ((_d = (_c = error === null || error === void 0 ? void 0 : error.data) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.includes('password')) {
+            setPasswordError(error.data.error);
+        }
+    }, [error]);
+    const onLoginUpdate = (value) => {
+        setLogin(value);
+        setLoginError('');
+    };
+    const onPassUpdate = (value) => {
+        setPass(value);
+        setPasswordError('');
+    };
+    const onLoginClick = () => {
+        // @ts-expect-error
+        // typed dispatch required, remove error expectation after adding it
+        dispatch(authenticate(login, pass)).then(() => {
+            if (returnUrl) {
+                const decodedUrl = decodeURIComponent(returnUrl.toString());
+                // to prevent page reload we use router history
+                // history navigates relative to origin
+                // so we remove origin to make it work properly
+                const url = new URL(decodedUrl);
+                const path = url.pathname + url.search;
+                history.replace(path);
+            }
+        });
+    };
+    const onEnterClick = (e) => {
+        if (e.keyCode === 13) {
+            onLoginClick();
+        }
+    };
+    const onClose = () => {
+        history.go(-1);
+    };
+    const onTogglePasswordVisibility = () => {
+        setShowPassword((prev) => !prev);
+    };
+    return (_jsxs("section", Object.assign({ className: b() }, { children: [_jsxs("form", Object.assign({ className: b('form-wrapper') }, { children: [_jsxs("div", Object.assign({ className: b('header') }, { children: [_jsxs("div", Object.assign({ className: b('logo') }, { children: [_jsx(Icon, { data: ydbLogoIcon, size: 24 }), "YDB"] })), _jsx(ExternalLink, Object.assign({ href: "http://ydb.tech/docs", target: "_blank" }, { children: "Documentation" }))] })), _jsx("h2", Object.assign({ className: b('title') }, { children: "Sign in" })), _jsx("div", Object.assign({ className: b('field-wrapper') }, { children: _jsx(TextInput, { value: login, onUpdate: onLoginUpdate, placeholder: 'Username', error: loginError, onKeyDown: onEnterClick, size: "l", autoFocus: true }) })), _jsxs("div", Object.assign({ className: b('field-wrapper') }, { children: [_jsx(TextInput, { value: pass, onUpdate: onPassUpdate, type: showPassword ? 'text' : 'password', placeholder: 'Password', error: passwordError, onKeyDown: onEnterClick, size: "l" }), _jsx(Button, Object.assign({ onClick: onTogglePasswordVisibility, size: "l", className: b('show-password-button') }, { children: _jsx(Icon, { data: showPassword ? hideIcon : showIcon, size: 16 }) }))] })), _jsx(Button, Object.assign({ view: "action", onClick: onLoginClick, width: "max", size: "l", disabled: Boolean(!login || loginError || passwordError), className: b('button-sign-in') }, { children: "Sign in" }))] })), closable && history.length > 1 && (_jsx(Button, Object.assign({ onClick: onClose, className: b('close') }, { children: _jsx(Icon, { data: closeIcon, size: 24 }) })))] })));
+}
+export default Authentication;

package/dist/containers/Cluster/Cluster.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { AdditionalClusterProps, AdditionalTenantsProps, AdditionalVersionsProps, AdditionalNodesProps } from '../../types/additionalProps';
+import './Cluster.scss';
+interface ClusterProps {
+    additionalTenantsProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
+    additionalClusterProps?: AdditionalClusterProps;
+    additionalVersionsProps?: AdditionalVersionsProps;
+}
+declare function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }: ClusterProps): JSX.Element;
+export default Cluster;