ydb-embedded-ui 5.1.0 → 5.2.0

package/dist/components/ComponentsProvider/ComponentsProvider.d.ts

@@ -9,9 +9,13 @@ export declare function useComponent<T extends Parameters<ComponentsRegistry['ge
     StaffCard: typeof import("../User/StaffCard").StaffCard;
 } & {
     AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
+} & {
+    ErrorBoundary: typeof import("../ErrorBoundary/ErrorBoundary").ErrorBoundaryInner;
 })[T] extends React.ComponentType<any> ? React.ComponentType<React.PropsWithoutRef<React.ComponentProps<({
     StaffCard: typeof import("../User/StaffCard").StaffCard;
 } & {
     AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
+} & {
+    ErrorBoundary: typeof import("../ErrorBoundary/ErrorBoundary").ErrorBoundaryInner;
 })[T]>>> : never;
 export {};

package/dist/components/ComponentsProvider/componentsRegistry.d.ts

@@ -1,10 +1,13 @@
 import { StaffCard } from '../User/StaffCard';
 import { AsideNavigation } from '../../containers/AsideNavigation/AsideNavigation';
 import { ComponentsRegistryTemplate, Registry } from './registry';
+import { ErrorBoundaryInner } from '../ErrorBoundary/ErrorBoundary';
 declare const componentsRegistryInner: Registry<{
     StaffCard: typeof StaffCard;
 } & {
     AsideNavigation: typeof AsideNavigation;
+} & {
+    ErrorBoundary: typeof ErrorBoundaryInner;
 }>;
 export declare type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
 export declare const componentsRegistry: ComponentsRegistry;

package/dist/components/ComponentsProvider/componentsRegistry.js

@@ -1,7 +1,9 @@
 import { StaffCard } from '../User/StaffCard';
 import { AsideNavigation } from '../../containers/AsideNavigation/AsideNavigation';
 import { Registry } from './registry';
+import { ErrorBoundaryInner } from '../ErrorBoundary/ErrorBoundary';
 const componentsRegistryInner = new Registry()
     .register('StaffCard', StaffCard)
-    .register('AsideNavigation', AsideNavigation);
+    .register('AsideNavigation', AsideNavigation)
+    .register('ErrorBoundary', ErrorBoundaryInner);
 export const componentsRegistry = componentsRegistryInner;

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,9 +1,19 @@
 import type { ReactNode } from 'react';
 import './ErrorBoundary.scss';
+export declare function ErrorBoundary({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
 interface ErrorBoundaryProps {
     children?: ReactNode;
     useRetry?: boolean;
     onReportProblem?: (error?: Error) => void;
 }
-export declare const ErrorBoundary: ({ children, useRetry, onReportProblem }: ErrorBoundaryProps) => JSX.Element;
+export declare function ErrorBoundaryInner({ children, useRetry, onReportProblem, }: ErrorBoundaryProps): JSX.Element;
+interface ErrorBoundaryFallbackProps {
+    error: Error;
+    useRetry?: boolean;
+    resetErrorBoundary: () => void;
+    onReportProblem?: (error?: Error) => void;
+}
+export declare function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }: ErrorBoundaryFallbackProps): JSX.Element;
 export {};

package/dist/components/ErrorBoundary/ErrorBoundary.js

@@ -4,13 +4,21 @@ import cn from 'bem-cn-lite';
 import { Button, Disclosure } from '@gravity-ui/uikit';
 import { registerError } from '../../utils/registerError';
 import { Illustration } from '../Illustration';
+import { useComponent } from '../ComponentsProvider/ComponentsProvider';
 import i18n from './i18n';
 import './ErrorBoundary.scss';
 const b = cn('ydb-error-boundary');
-export const ErrorBoundary = ({ children, useRetry = true, onReportProblem }) => {
+export function ErrorBoundary({ children }) {
+    const ErrorBoundaryComponent = useComponent('ErrorBoundary');
+    return _jsx(ErrorBoundaryComponent, { children: children });
+}
+export function ErrorBoundaryInner({ children, useRetry = true, onReportProblem, }) {
     return (_jsx(ErrorBoundaryBase, Object.assign({ onError: (error, info) => {
             registerError(error, info.componentStack, 'error-boundary');
         }, fallbackRender: ({ error, resetErrorBoundary }) => {
-            return (_jsxs("div", Object.assign({ className: b(null) }, { children: [_jsx(Illustration, { name: "error", className: b('illustration') }), _jsxs("div", Object.assign({ className: b('content') }, { children: [_jsx("h2", Object.assign({ className: b('error-title') }, { children: i18n('error-title') })), _jsx("div", Object.assign({ className: b('error-description') }, { children: i18n('error-description') })), _jsx(Disclosure, Object.assign({ summary: i18n('show-details'), className: b('show-details'), size: "m" }, { children: _jsx("pre", Object.assign({ className: b('error-details') }, { children: error.stack })) })), _jsxs("div", Object.assign({ className: b('actions') }, { children: [useRetry && (_jsx(Button, Object.assign({ view: "outlined", onClick: resetErrorBoundary }, { children: i18n('button-reset') }))), onReportProblem && (_jsx(Button, Object.assign({ view: "outlined", onClick: () => onReportProblem(error) }, { children: i18n('report-problem') })))] }))] }))] })));
+            return (_jsx(ErrorBoundaryFallback, { error: error, useRetry: useRetry, resetErrorBoundary: resetErrorBoundary, onReportProblem: onReportProblem }));
         } }, { children: children })));
-};
+}
+export function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }) {
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Illustration, { name: "error", className: b('illustration') }), _jsxs("div", Object.assign({ className: b('content') }, { children: [_jsx("h2", Object.assign({ className: b('error-title') }, { children: i18n('error-title') })), _jsx("div", Object.assign({ className: b('error-description') }, { children: i18n('error-description') })), _jsx(Disclosure, Object.assign({ summary: i18n('show-details'), className: b('show-details'), size: "m" }, { children: _jsx("pre", Object.assign({ className: b('error-details') }, { children: error.stack })) })), _jsxs("div", Object.assign({ className: b('actions') }, { children: [useRetry && (_jsx(Button, Object.assign({ view: "outlined", onClick: resetErrorBoundary }, { children: i18n('button-reset') }))), onReportProblem && (_jsx(Button, Object.assign({ view: "outlined", onClick: () => onReportProblem(error) }, { children: i18n('report-problem') })))] }))] }))] })));
+}

package/dist/containers/ClusterModeGuard/ClusterModeGuard.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface ClusterModeGuardProps {
+    children: ReactNode;
+    mode: 'single' | 'multi';
+}
+export declare function ClusterModeGuard({ children, mode }: ClusterModeGuardProps): JSX.Element | null;

package/dist/containers/ClusterModeGuard/ClusterModeGuard.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useTypedSelector } from '../../lib';
+export function ClusterModeGuard({ children, mode }) {
+    const shouldRender = useTypedSelector((state) => mode === 'single' ? state.singleClusterMode : !state.singleClusterMode);
+    return shouldRender ? _jsx(_Fragment, { children: children }) : null;
+}

package/dist/containers/ClusterModeGuard/index.d.ts

@@ -0,0 +1 @@
+export * from './ClusterModeGuard';

package/dist/containers/ClusterModeGuard/index.js

@@ -0,0 +1 @@
+export * from './ClusterModeGuard';

package/dist/containers/UserSettings/Setting.d.ts

@@ -3,6 +3,7 @@ export declare type SettingsElementType = 'switch' | 'radio';
 export interface SettingProps {
     type?: SettingsElementType;
     title: string;
+    description?: ReactNode;
     settingKey: string;
     helpPopoverContent?: ReactNode;
     options?: {
@@ -12,4 +13,4 @@ export interface SettingProps {
     defaultValue?: unknown;
     onValueUpdate?: VoidFunction;
 }
-export declare const Setting: ({ type, settingKey, title, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => JSX.Element;
+export declare const Setting: ({ type, settingKey, title, description, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => JSX.Element;

package/dist/containers/UserSettings/Setting.js

@@ -4,7 +4,7 @@ import { Settings } from '@gravity-ui/navigation';
 import { LabelWithPopover } from '../../components/LabelWithPopover/LabelWithPopover';
 import { useSetting } from '../../utils/hooks';
 import { b } from './UserSettings';
-export const Setting = ({ type = 'switch', settingKey, title, helpPopoverContent, options, defaultValue, onValueUpdate, }) => {
+export const Setting = ({ type = 'switch', settingKey, title, description, helpPopoverContent, options, defaultValue, onValueUpdate, }) => {
     const [settingValue, setValue] = useSetting(settingKey, defaultValue);
     const onUpdate = (value) => {
         setValue(value);
@@ -33,5 +33,5 @@ export const Setting = ({ type = 'switch', settingKey, title, helpPopoverContent
                 return null;
         }
     };
-    return (_jsx(Settings.Item, Object.assign({ title: title, highlightedTitle: title, renderTitleComponent: renderTitleComponent }, { children: getSettingsElement(type) })));
+    return (_jsx(Settings.Item, Object.assign({ title: title, highlightedTitle: title, description: description, renderTitleComponent: renderTitleComponent }, { children: getSettingsElement(type) })));
 };

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

@@ -10,6 +10,8 @@
     "settings.language.title": "Interface language",
     "settings.language.option-russian": "Russian",
     "settings.language.option-english": "English",
+    "settings.binaryDataInPlainTextDisplay.title": "Display binary data in plain text",
+    "settings.binaryDataInPlainTextDisplay.description": "Available starting from version 24.1",
     "settings.invertedDisks.title": "Inverted disks space indicators",
     "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
     "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It could return incorrect data on some versions",

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

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "page.general" | "section.appearance" | "page.experiments" | "section.experiments" | "settings.theme.title" | "settings.theme.option-dark" | "settings.theme.option-light" | "settings.theme.option-system" | "settings.language.title" | "settings.language.option-russian" | "settings.language.option-english" | "settings.binaryDataInPlainTextDisplay.title" | "settings.binaryDataInPlainTextDisplay.description" | "settings.invertedDisks.title" | "settings.useNodesEndpoint.title" | "settings.useNodesEndpoint.popover" | "settings.useVirtualTables.title" | "settings.useVirtualTables.popover" | "settings.queryUseMultiSchema.title" | "settings.queryUseMultiSchema.popover", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

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

@@ -1,7 +1,3 @@
-import { i18n, Lang } from '../../../utils/i18n';
+import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
-import ru from './ru.json';
-const COMPONENT = 'ydb-user-settings';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets('ydb-user-settings', { en });

package/dist/containers/UserSettings/settings.d.ts

@@ -14,6 +14,7 @@ export interface SettingsPage {
 export declare type YDBEmbeddedUISettings = SettingsPage[];
 export declare const themeSetting: SettingProps;
 export declare const languageSetting: SettingProps;
+export declare const binaryDataInPlainTextDisplay: SettingProps;
 export declare const invertedDisksSetting: SettingProps;
 export declare const useNodesEndpointSetting: SettingProps;
 export declare const useVirtualTables: SettingProps;

package/dist/containers/UserSettings/settings.js

@@ -1,8 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
-import { INVERTED_DISKS_KEY, LANGUAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../utils/constants';
+import { INVERTED_DISKS_KEY, LANGUAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, QUERY_USE_MULTI_SCHEMA_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, } from '../../utils/constants';
 import { Lang, defaultLang } from '../../utils/i18n';
 import i18n from './i18n';
+import { ClusterModeGuard } from '../ClusterModeGuard';
 const themeOptions = [
     {
         value: 'system',
@@ -43,6 +45,11 @@ export const languageSetting = {
         window.location.reload();
     },
 };
+export const binaryDataInPlainTextDisplay = {
+    settingKey: BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
+    title: i18n('settings.binaryDataInPlainTextDisplay.title'),
+    description: (_jsx(ClusterModeGuard, Object.assign({ mode: "multi" }, { children: i18n('settings.binaryDataInPlainTextDisplay.description') }))),
+};
 export const invertedDisksSetting = {
     settingKey: INVERTED_DISKS_KEY,
     title: i18n('settings.invertedDisks.title'),
@@ -65,7 +72,7 @@ export const queryUseMultiSchemaSetting = {
 export const appearanceSection = {
     id: 'appearanceSection',
     title: i18n('section.appearance'),
-    settings: [themeSetting, invertedDisksSetting],
+    settings: [themeSetting, invertedDisksSetting, binaryDataInPlainTextDisplay],
 };
 export const experimentsSection = {
     id: 'experimentsSection',

package/dist/lib.d.ts

@@ -1,7 +1,8 @@
 export { App as SingleClusterApp, AppSlots } from './containers/App';
 export { AppWithClusters as MultiClusterApp } from './containers/AppWithClusters/AppWithClusters';
-export { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+export { ErrorBoundaryInner as ErrorBoundary, ErrorBoundaryFallback, } from './components/ErrorBoundary/ErrorBoundary';
 export { configureStore, rootReducer } from './store';
+export { default as appRoutes } from './routes';
 export { createApi, YdbEmbeddedAPI, YdbWebVersionAPI } from './services/api';
 export { settingsManager } from './services/settings';
 export { settings as userSettings } from './containers/UserSettings/settings';

package/dist/lib.js

@@ -1,7 +1,8 @@
 export { App as SingleClusterApp, AppSlots } from './containers/App';
 export { AppWithClusters as MultiClusterApp } from './containers/AppWithClusters/AppWithClusters';
-export { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+export { ErrorBoundaryInner as ErrorBoundary, ErrorBoundaryFallback, } from './components/ErrorBoundary/ErrorBoundary';
 export { configureStore, rootReducer } from './store';
+export { default as appRoutes } from './routes';
 export { createApi, YdbEmbeddedAPI, YdbWebVersionAPI } from './services/api';
 export { settingsManager } from './services/settings';
 export { settings as userSettings } from './containers/UserSettings/settings';

package/dist/services/api.js

@@ -12,8 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import AxiosWrapper from '@gravity-ui/axios-wrapper';
 import { backend as BACKEND, metaBackend as META_BACKEND } from '../store';
 import { prepareSortValue } from '../utils/filters';
+import { BINARY_DATA_IN_PLAIN_TEXT_DISPLAY } from '../utils/constants';
 import { parseMetaCluster } from './parsers/parseMetaCluster';
 import { parseMetaTenants } from './parsers/parseMetaTenants';
+import { settingsManager } from './settings';
 export class YdbEmbeddedAPI extends AxiosWrapper {
     getPath(path) {
         return `${BACKEND !== null && BACKEND !== void 0 ? BACKEND : ''}${path}`;
@@ -179,7 +181,12 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         // Time difference to ensure that timeout from ui will be shown rather than backend error
         const uiTimeout = 9 * 60 * 1000;
         const backendTimeout = 10 * 60 * 1000;
-        return this.post(this.getPath(`/viewer/json/query?timeout=${backendTimeout}${schema ? `&schema=${schema}` : ''}`), params, {}, {
+        /**
+         * Return strings using base64 encoding.
+         * @link https://github.com/ydb-platform/ydb/pull/647
+         */
+        const base64 = !settingsManager.readUserSettingsValue(BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, true);
+        return this.post(this.getPath(`/viewer/json/query?timeout=${backendTimeout}&base64=${base64}${schema ? `&schema=${schema}` : ''}`), params, {}, {
             concurrentId,
             timeout: uiTimeout,
         });

package/dist/services/settings.js

@@ -1,5 +1,5 @@
 import { TENANT_PAGES_IDS } from '../store/reducers/tenant/constants';
-import { ASIDE_HEADER_COMPACT_KEY, INVERTED_DISKS_KEY, LANGUAGE_KEY, LAST_USED_QUERY_ACTION_KEY, PARTITIONS_HIDDEN_COLUMNS_KEY, QUERY_INITIAL_MODE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, TENANT_INITIAL_PAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, } from '../utils/constants';
+import { ASIDE_HEADER_COMPACT_KEY, INVERTED_DISKS_KEY, LANGUAGE_KEY, LAST_USED_QUERY_ACTION_KEY, PARTITIONS_HIDDEN_COLUMNS_KEY, QUERY_INITIAL_MODE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, SAVED_QUERIES_KEY, TENANT_INITIAL_PAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, } from '../utils/constants';
 import { QUERY_ACTIONS, QUERY_MODES } from '../utils/query';
 import { parseJson } from '../utils/utils';
 /** User settings keys and their default values */
@@ -9,6 +9,7 @@ export const DEFAULT_USER_SETTINGS = {
     [INVERTED_DISKS_KEY]: false,
     [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: false,
     [QUERY_USE_MULTI_SCHEMA_KEY]: false,
+    [BINARY_DATA_IN_PLAIN_TEXT_DISPLAY]: true,
     [SAVED_QUERIES_KEY]: [],
     [TENANT_INITIAL_PAGE_KEY]: TENANT_PAGES_IDS.query,
     [QUERY_INITIAL_MODE_KEY]: QUERY_MODES.script,

package/dist/utils/constants.d.ts

@@ -56,6 +56,7 @@ export declare const SAVED_QUERIES_KEY = "saved_queries";
 export declare const ASIDE_HEADER_COMPACT_KEY = "asideHeaderCompact";
 export declare const QUERIES_HISTORY_KEY = "queries_history";
 export declare const DATA_QA_TUNE_COLUMNS_POPUP = "tune-columns-popup";
+export declare const BINARY_DATA_IN_PLAIN_TEXT_DISPLAY = "binaryDataInPlainTextDisplay";
 export declare const DEFAULT_SIZE_RESULT_PANE_KEY = "default-size-result-pane";
 export declare const DEFAULT_SIZE_TENANT_SUMMARY_KEY = "default-size-tenant-summary-pane";
 export declare const DEFAULT_SIZE_TENANT_KEY = "default-size-tenant-pane";

package/dist/utils/constants.js

@@ -72,6 +72,7 @@ export const SAVED_QUERIES_KEY = 'saved_queries';
 export const ASIDE_HEADER_COMPACT_KEY = 'asideHeaderCompact';
 export const QUERIES_HISTORY_KEY = 'queries_history';
 export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
+export const BINARY_DATA_IN_PLAIN_TEXT_DISPLAY = 'binaryDataInPlainTextDisplay';
 export const DEFAULT_SIZE_RESULT_PANE_KEY = 'default-size-result-pane';
 export const DEFAULT_SIZE_TENANT_SUMMARY_KEY = 'default-size-tenant-summary-pane';
 export const DEFAULT_SIZE_TENANT_KEY = 'default-size-tenant-pane';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "files": [
     "dist"
   ],

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

@@ -1,20 +0,0 @@
-{
-    "page.general": "Общие",
-    "section.appearance": "Внешний вид",
-    "page.experiments": "Эксперименты",
-    "section.experiments": "Эксперименты",
-    "settings.theme.title": "Тема",
-    "settings.theme.option-dark": "Тёмная",
-    "settings.theme.option-light": "Светлая",
-    "settings.theme.option-system": "Системная",
-    "settings.language.title": "Язык интерфейса",
-    "settings.language.option-russian": "Русский",
-    "settings.language.option-english": "English",
-    "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
-    "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
-    "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на некоторых версиях",
-    "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage",
-    "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
-    "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
-    "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
-}