ydb-embedded-ui 6.11.0 → 6.13.0

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.js

@@ -1,25 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
 import { cn } from '../../utils/cn';
 import { INVERTED_DISKS_KEY } from '../../utils/constants';
 import { getSeverityColor } from '../../utils/disks/helpers';
 import { useSetting } from '../../utils/hooks';
 import './DiskStateProgressBar.scss';
 const b = cn('storage-disk-progress-bar');
-export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, }) {
+export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, faded, empty, content, className, }) {
     const [inverted] = useSetting(INVERTED_DISKS_KEY);
-    const renderAllocatedPercent = () => {
-        if (compact) {
-            return _jsx("div", { className: b('filled'), style: { width: '100%' } });
-        }
-        return (diskAllocatedPercent >= 0 && (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('filled'), style: {
-                        width: `${inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent}%`,
-                    } }), _jsx("div", { className: b('filled-title'), children: `${Math.round(diskAllocatedPercent)}%` })] })));
-    };
-    const mods = { inverted, compact };
+    const mods = { inverted, compact, faded, empty };
     const color = severity !== undefined && getSeverityColor(severity);
     if (color) {
         mods[color.toLocaleLowerCase()] = true;
     }
-    return (_jsx("div", { className: b(mods), role: "meter", "aria-label": "Disk allocated space", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": diskAllocatedPercent, children: renderAllocatedPercent() }));
+    const renderAllocatedPercent = () => {
+        if (compact) {
+            return _jsx("div", { className: b('fill-bar', mods), style: { width: '100%' } });
+        }
+        const fillWidth = inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent;
+        if (diskAllocatedPercent >= 0) {
+            return _jsx("div", { className: b('fill-bar', mods), style: { width: `${fillWidth}%` } });
+        }
+        return null;
+    };
+    const renderContent = () => {
+        if (content) {
+            return content;
+        }
+        if (!compact && diskAllocatedPercent >= 0) {
+            return _jsx("div", { className: b('title'), children: `${Math.round(diskAllocatedPercent)}%` });
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: b(mods, className), role: "meter", "aria-label": "Disk allocated space", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": diskAllocatedPercent, children: [renderAllocatedPercent(), renderContent()] }));
 }

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -5,81 +5,70 @@
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
+    --progress-bar-border-color: var(--g-color-base-misc-heavy);
+    --progress-bar-background-color: var(--g-color-base-misc-light);
+    --progress-bar-fill-color: var(--g-color-base-misc-medium);
+
     position: relative;
     z-index: 0;
 
-    display: block;
-
     min-width: 50px;
     height: var(--g-text-body-3-line-height);
 
     text-align: center;
 
     color: var(--g-color-text-primary);
-    border: $border-width solid var(--g-color-base-misc-heavy);
+    border: $border-width solid var(--progress-bar-border-color);
     border-radius: $outer-border-radius;
-    background-color: var(--g-color-base-misc-light);
+    background-color: var(--progress-bar-background-color);
 
     &_compact {
         min-width: 0;
         height: 12px;
 
         border-radius: 2px;
-
-        #{$block}__filled {
-            border-radius: 1px;
-        }
-    }
-
-    #{$block}__filled {
-        background-color: var(--g-color-base-misc-medium);
     }
 
     &_green {
-        border-color: var(--g-color-base-positive-heavy);
-        background-color: var(--g-color-base-positive-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-positive-medium);
-
-            .g-root_theme_dark & {
-                // the common medium green is too bright for this case
-                background-color: rgb(124, 227, 121, 0.4);
-            }
-        }
+        --progress-bar-border-color: var(--g-color-base-positive-heavy);
+        --progress-bar-background-color: var(--g-color-base-positive-light);
+        --progress-bar-fill-color: var(--g-color-base-positive-medium);
     }
 
     &_blue {
-        border-color: var(--g-color-base-info-heavy);
-        background-color: var(--g-color-base-info-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-info-medium);
-        }
+        --progress-bar-border-color: var(--g-color-base-info-heavy);
+        --progress-bar-background-color: var(--g-color-base-info-light);
+        --progress-bar-fill-color: var(--g-color-base-info-medium);
     }
 
     &_yellow {
-        border-color: var(--g-color-base-warning-heavy);
-        background-color: var(--g-color-base-yellow-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-yellow-medium);
-        }
+        --progress-bar-border-color: var(--g-color-base-warning-heavy);
+        --progress-bar-background-color: var(--g-color-base-yellow-light);
+        --progress-bar-fill-color: var(--g-color-base-yellow-medium);
     }
 
     &_orange {
-        border-color: var(--ydb-color-status-orange);
-        background-color: var(--g-color-base-warning-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-warning-medium);
-        }
+        --progress-bar-border-color: var(--ydb-color-status-orange);
+        --progress-bar-background-color: var(--g-color-base-warning-light);
+        --progress-bar-fill-color: var(--g-color-base-warning-medium);
     }
     &_red {
-        border-color: var(--g-color-base-danger-heavy);
-        background-color: var(--g-color-base-danger-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-danger-medium);
-        }
+        --progress-bar-border-color: var(--g-color-base-danger-heavy);
+        --progress-bar-background-color: var(--g-color-base-danger-light);
+        --progress-bar-fill-color: var(--g-color-base-danger-medium);
+    }
+
+    &_faded {
+        background-color: unset;
     }
 
-    &__filled {
+    &_empty {
+        color: var(--g-color-text-hint);
+        border-style: dashed;
+        background-color: unset;
+    }
+
+    &__fill-bar {
         position: absolute;
         top: 0;
         left: 0;
@@ -87,15 +76,26 @@
         height: 100%;
 
         border-radius: $inner-border-radius 0 0 $inner-border-radius;
+        background-color: var(--progress-bar-fill-color);
 
-        #{$block}_inverted & {
+        &_faded {
+            // Bg color is light variant, use it to make bar less bright
+            background-color: var(--progress-bar-background-color);
+        }
+
+        &_compact {
+            border-radius: 1px;
+        }
+
+        &_inverted {
             right: 0;
             left: auto;
 
             border-radius: 0 $inner-border-radius $inner-border-radius 0;
         }
     }
-    &__filled-title {
+
+    &__title {
         position: relative;
         z-index: 2;
 

package/dist/components/EntityStatus/EntityStatus.js

@@ -28,5 +28,5 @@ export function EntityStatus({ status = EFlag.Grey, name = '', label, path, icon
     };
     return (_jsxs("div", { className: b(null, className), title: name, children: [iconPath ? renderStatusLink(iconPath) : renderIcon(), label && (_jsx("span", { title: label, className: b('label', { size, state: status.toLowerCase() }), children: label })), _jsx("span", { className: b('link', { 'with-left-trim': withLeftTrim }), children: renderLink() }), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
                     visible: clipboardButtonAlwaysVisible,
-                }) })), additionalControls] }));
+                }) })), additionalControls && (_jsx("span", { className: b('additional-controls '), children: additionalControls }))] }));
 }

package/dist/components/EntityStatus/EntityStatus.scss

@@ -10,14 +10,14 @@
     @include body-2-typography();
 
     &__icon {
-        margin-right: 8px;
+        margin-right: var(--g-spacing-2);
     }
 
     &__clipboard-button {
         display: flex;
         flex-shrink: 0;
 
-        margin-left: 8px;
+        margin-left: var(--g-spacing-2);
 
         opacity: 0;
         color: var(--g-color-text-secondary);
@@ -28,6 +28,10 @@
         }
     }
 
+    &__additional-controls {
+        margin-left: var(--g-spacing-1);
+    }
+
     &__label {
         margin-right: 2px;
 

package/dist/components/Errors/PageError/PageError.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { EmptyStateProps } from '../../EmptyState';
+interface PageErrorProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
+    title?: string;
+    description?: string;
+    error: unknown;
+    children?: React.ReactNode;
+}
+export declare function PageError({ title, description, error, children, ...restProps }: PageErrorProps): import("react/jsx-runtime").JSX.Element;
+export declare function isAccessError(error: unknown): boolean;
+export {};

package/dist/components/Errors/PageError/PageError.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { EmptyState } from '../../EmptyState';
+import { Illustration } from '../../Illustration';
+import { AccessDenied } from '../403';
+import { ResponseError } from '../ResponseError';
+import i18n from '../i18n';
+export function PageError({ title, description, error, children, ...restProps }) {
+    if (isAccessError(error)) {
+        return _jsx(AccessDenied, { title: title, description: description, ...restProps });
+    }
+    if (error || description) {
+        return (_jsx(EmptyState, { image: _jsx(Illustration, { name: "error" }), title: title || i18n('error.title'), description: error ? _jsx(ResponseError, { error: error }) : description, ...restProps }));
+    }
+    return _jsx(React.Fragment, { children: children });
+}
+export function isAccessError(error) {
+    return Boolean(error && typeof error === 'object' && 'status' in error && error.status === 403);
+}

package/dist/components/Errors/i18n/en.json

@@ -1,5 +1,6 @@
 {
     "403.title": "Access denied",
     "403.description": "You don’t have the necessary roles to view this page.",
-    "responseError.defaultMessage": "Response error"
+    "responseError.defaultMessage": "Response error",
+    "error.title": "Error"
 }

package/dist/components/Errors/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "403.title" | "403.description" | "responseError.defaultMessage", params?: import("@gravity-ui/i18n").Params) => string;
+declare const _default: (key: "403.title" | "403.description" | "responseError.defaultMessage" | "error.title", params?: import("@gravity-ui/i18n").Params) => string;
 export default _default;

package/dist/components/Errors/i18n/ru.json

@@ -1,5 +1,6 @@
 {
     "403.title": "Доступ запрещен",
     "403.description": "У вас недостаточно прав для просмотра данной страницы.",
-    "responseError.defaultMessage": "Ошибка запроса"
+    "responseError.defaultMessage": "Ошибка запроса",
+    "error.title": "Ошибка"
 }

package/dist/components/Fullscreen/Fullscreen.d.ts

@@ -4,5 +4,5 @@ interface FullscreenProps {
     children: React.ReactNode;
     className?: string;
 }
-declare function Fullscreen(props: FullscreenProps): import("react/jsx-runtime").JSX.Element;
+declare function Fullscreen({ children, className }: FullscreenProps): import("react/jsx-runtime").JSX.Element | null;
 export default Fullscreen;

package/dist/components/Fullscreen/Fullscreen.js

@@ -1,35 +1,16 @@
+var _a;
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Button, Icon } from '@gravity-ui/uikit';
-import ReactDOM from 'react-dom';
+import { Button, Icon, Portal } from '@gravity-ui/uikit';
 import { disableFullscreen } from '../../store/reducers/fullscreen';
 import { cn } from '../../utils/cn';
-import { useTypedDispatch } from '../../utils/hooks';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import disableFullscreenIcon from '../../assets/icons/disableFullscreen.svg';
 import './Fullscreen.scss';
-const b = cn('kv-fullscreen');
-class FullscreenWrapper extends React.Component {
-    constructor(props) {
-        super(props);
-        this.modalRoot = null;
-        this.el = document.createElement('div');
-    }
-    componentDidMount() {
-        this.modalRoot = document.getElementById('fullscreen-root');
-        if (this.modalRoot) {
-            this.modalRoot.appendChild(this.el);
-        }
-    }
-    componentWillUnmount() {
-        if (this.modalRoot) {
-            this.modalRoot.removeChild(this.el);
-        }
-    }
-    render() {
-        return ReactDOM.createPortal(this.props.children, this.el);
-    }
-}
-function Fullscreen(props) {
+const b = cn('ydb-fullscreen');
+const fullscreenRoot = (_a = document.getElementById('fullscreen-root')) !== null && _a !== void 0 ? _a : undefined;
+function Fullscreen({ children, className }) {
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useTypedDispatch();
     const onDisableFullScreen = React.useCallback(() => {
         dispatch(disableFullscreen());
@@ -45,6 +26,32 @@ function Fullscreen(props) {
             document.removeEventListener('keydown', escFunction, false);
         };
     }, [onDisableFullScreen]);
-    return (_jsx(FullscreenWrapper, { children: _jsxs("div", { className: b(null, props.className), children: [_jsx(Button, { onClick: onDisableFullScreen, view: "raised", className: b('close-button'), children: _jsx(Icon, { data: disableFullscreenIcon }) }), props.children] }) }));
+    const [container, setContainer] = React.useState(null);
+    React.useEffect(() => {
+        const div = document.createElement('div');
+        fullscreenRoot === null || fullscreenRoot === void 0 ? void 0 : fullscreenRoot.appendChild(div);
+        div.style.display = 'contents';
+        setContainer(div);
+        return () => {
+            setContainer(null);
+            div.remove();
+        };
+    }, []);
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
+        var _a;
+        if (container) {
+            if (isFullscreen) {
+                fullscreenRoot === null || fullscreenRoot === void 0 ? void 0 : fullscreenRoot.appendChild(container);
+            }
+            else {
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.appendChild(container);
+            }
+        }
+    }, [container, isFullscreen]);
+    if (!container) {
+        return null;
+    }
+    return (_jsx("div", { ref: ref, style: { display: 'contents' }, children: _jsx(Portal, { container: container, children: _jsxs("div", { className: b({ fullscreen: isFullscreen }, className), children: [_jsx(Button, { onClick: onDisableFullScreen, view: "raised", className: b('close-button'), children: _jsx(Icon, { data: disableFullscreenIcon }) }), children] }) }) }));
 }
 export default Fullscreen;

package/dist/components/Fullscreen/Fullscreen.scss

@@ -1,20 +1,28 @@
-.kv-fullscreen {
-    // should expand to fill the content area, keeping aside navigation visible
-    // counts on .gn-aside-header__content to have position: relative, it is set in App.scss
-    position: absolute;
-    z-index: 10;
-    inset: 0;
-
+.ydb-fullscreen {
     display: flex;
     overflow: hidden;
     flex-grow: 1;
 
-    background-color: var(--g-color-base-background);
+    &_fullscreen {
+        // should expand to fill the content area, keeping aside navigation visible
+        // counts on .gn-aside-header__content to have position: relative, it is set in App.scss
+        position: absolute;
+        z-index: 10;
+        inset: 0;
+
+        background-color: var(--g-color-base-background);
+    }
 
     &__close-button {
         position: fixed;
         z-index: 11;
         top: 8px;
         right: 20px;
+
+        display: none;
+    }
+
+    &_fullscreen &__close-button {
+        display: block;
     }
 }

package/dist/components/Graph/Graph.d.ts

@@ -0,0 +1,13 @@
+import type { Data, GraphNode, Options, Shapes } from '@gravity-ui/paranoid';
+interface GraphProps<T> {
+    data: Data<T>;
+    opts?: Options;
+    shapes?: Shapes;
+}
+export declare function Graph<T>(props: GraphProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const renderExplainNode: (node: GraphNode) => string;
+interface YDBGraphProps<T> {
+    data: Data<T>;
+}
+export declare function YDBGraph<T>(props: YDBGraphProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Graph/Graph.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { getTopology, getYdbPlanNodeShape } from '@gravity-ui/paranoid';
+export function Graph(props) {
+    const containerRef = React.useRef(null);
+    const containerId = React.useId();
+    const { data, opts, shapes } = props;
+    React.useEffect(() => {
+        const graphRoot = containerRef.current;
+        if (!graphRoot) {
+            return undefined;
+        }
+        graphRoot.innerHTML = '';
+        // set width and height to screen size to make a canvas bigger then the container
+        graphRoot.style.setProperty('width', '100vw');
+        graphRoot.style.setProperty('height', '100vh');
+        const topology = getTopology(graphRoot.id, data, opts, shapes);
+        topology.render();
+        graphRoot.style.setProperty('width', '100%');
+        graphRoot.style.setProperty('height', '100%');
+        return () => {
+            topology.destroy();
+        };
+    }, [data, opts, shapes]);
+    return _jsx("div", { id: containerId, ref: containerRef, style: { overflow: 'auto' } });
+}
+export const renderExplainNode = (node) => {
+    const parts = node.name.split('|');
+    return parts.length > 1 ? parts[1] : node.name;
+};
+const schemaOptions = {
+    renderNodeTitle: renderExplainNode,
+    textOverflow: 'normal',
+    initialZoomFitsCanvas: true,
+};
+const schemaShapes = {
+    node: getYdbPlanNodeShape,
+};
+export function YDBGraph(props) {
+    return _jsx(Graph, { ...props, opts: schemaOptions, shapes: schemaShapes });
+}

package/dist/components/LabelWithPopover/LabelWithPopover.d.ts

@@ -1,8 +1,11 @@
+import type { ButtonProps } from '@gravity-ui/uikit';
 interface LabelWithPopoverProps {
     text: React.ReactNode;
     popoverContent: React.ReactNode;
+    popoverClassName?: string;
     className?: string;
     contentClassName?: string;
+    buttonProps?: ButtonProps;
 }
-export declare const LabelWithPopover: ({ text, popoverContent, className, contentClassName, }: LabelWithPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelWithPopover: ({ text, popoverContent, popoverClassName, className, contentClassName, buttonProps, }: LabelWithPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LabelWithPopover/LabelWithPopover.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpPopover } from '@gravity-ui/components';
-export const LabelWithPopover = ({ text, popoverContent, className, contentClassName, }) => (_jsxs("div", { className: className, children: [text, '\u00a0', _jsx(HelpPopover, { content: popoverContent, contentClassName: contentClassName })] }));
+export const LabelWithPopover = ({ text, popoverContent, popoverClassName, className, contentClassName, buttonProps, }) => (_jsxs("div", { className: className, children: [text, '\u00a0', _jsx(HelpPopover, { className: popoverClassName, buttonProps: buttonProps, content: popoverContent, contentClassName: contentClassName })] }));

package/dist/components/Loader/Loader.d.ts

@@ -2,7 +2,8 @@ import type { LoaderSize } from '@gravity-ui/uikit';
 import './Loader.scss';
 interface LoaderProps {
     size?: LoaderSize;
+    delay?: number;
     className?: string;
 }
-export declare const Loader: ({ size, className }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Loader: ({ size, delay, className }: LoaderProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Loader/Loader.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Loader as KitLoader } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
+import { useDelayed } from '../../utils/hooks/useDelayed';
 import './Loader.scss';
 const b = cn('ydb-loader');
-export const Loader = ({ size = 'm', className }) => {
+export const Loader = ({ size = 'm', delay = 600, className }) => {
+    const show = useDelayed(delay);
+    if (!show) {
+        return null;
+    }
     return (_jsx("div", { className: b(null, className), children: _jsx(KitLoader, { size: size }) }));
 };

package/dist/components/LoaderWrapper/LoaderWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LoaderSize } from '@gravity-ui/uikit';
+interface LoaderWrapperProps {
+    loading?: boolean;
+    size?: LoaderSize;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function LoaderWrapper({ loading, size, className, children }: LoaderWrapperProps): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/components/LoaderWrapper/LoaderWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from '../Loader/Loader';
+export function LoaderWrapper({ loading, size = 'm', className, children }) {
+    if (loading) {
+        return _jsx(Loader, { size: size, className: className });
+    }
+    return children;
+}

package/dist/components/MetricChart/reducer.d.ts

@@ -1,4 +1,4 @@
 import type { GetChartDataParams } from './getChartData';
 export declare const chartApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, {
-    getChartData: import("@reduxjs/toolkit/query").QueryDefinition<GetChartDataParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All", import("./types").PreparedMetricsData | undefined, "api">;
-}, "api", "All", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
+    getChartData: import("@reduxjs/toolkit/query").QueryDefinition<GetChartDataParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All" | "PDiskData" | "UserData", import("./types").PreparedMetricsData | undefined, "api">;
+}, "api", "All" | "PDiskData" | "UserData", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;

package/dist/components/MonacoEditor/MonacoEditor.js

@@ -1,7 +1,5 @@
 import { lazyComponent } from '../../utils/lazyComponent';
 export const MonacoEditor = lazyComponent(async () => {
     const Editor = (await import('react-monaco-editor')).default;
-    const { registerLanguages } = await import('../../utils/monaco');
-    registerLanguages();
     return { Editor };
 }, 'Editor');

package/dist/components/NodeHostWrapper/NodeHostWrapper.d.ts

@@ -1,6 +1,5 @@
 import type { NodesPreparedEntity } from '../../store/reducers/nodes/types';
 import type { NodeAddress } from '../../types/additionalProps';
-import './NodeHostWrapper.scss';
 interface NodeHostWrapperProps {
     node: NodesPreparedEntity;
     getNodeRef?: (node?: NodeAddress) => string | null;

package/dist/components/NodeHostWrapper/NodeHostWrapper.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
-import { Button, Icon, PopoverBehavior } from '@gravity-ui/uikit';
+import { PopoverBehavior } from '@gravity-ui/uikit';
 import { getDefaultNodePath } from '../../containers/Node/NodePages';
-import { cn } from '../../utils/cn';
 import { createDeveloperUILinkWithNodeId } from '../../utils/developerUI/developerUI';
 import { isUnavailableNode } from '../../utils/nodes';
 import { CellWithPopover } from '../CellWithPopover/CellWithPopover';
+import { DeveloperUILinkButton } from '../DeveloperUILinkButton/DeveloperUILinkButton';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { NodeEndpointsTooltipContent } from '../TooltipsContent';
-import './NodeHostWrapper.scss';
-const b = cn('ydb-node-host-wrapper');
 export const NodeHostWrapper = ({ node, getNodeRef }) => {
     if (!node.Host) {
         return _jsx("span", { children: "\u2014" });
@@ -27,6 +24,6 @@ export const NodeHostWrapper = ({ node, getNodeRef }) => {
             tenantName: node.TenantName,
         })
         : undefined;
-    const additionalControls = nodeHref ? (_jsx(Button, { size: "s", href: nodeHref, className: b('external-button'), target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) })) : null;
+    const additionalControls = nodeHref ? _jsx(DeveloperUILinkButton, { href: nodeHref }) : null;
     return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, additionalControls: additionalControls }) }));
 };

package/dist/components/PDiskInfo/PDiskInfo.d.ts

@@ -1,10 +1,13 @@
 import type { PreparedPDisk } from '../../utils/disks/types';
-import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
 import './PDiskInfo.scss';
-interface PDiskInfoProps<T extends PreparedPDisk> extends Omit<InfoViewerProps, 'info'> {
-    pDisk: T;
+interface GetPDiskInfoOptions<T extends PreparedPDisk> {
+    pDisk?: T;
     nodeId?: number | string | null;
-    isPDiskPage?: boolean;
+    withPDiskPageLink?: boolean;
+    isUserAllowedToMakeChanges?: boolean;
 }
-export declare function PDiskInfo<T extends PreparedPDisk>({ pDisk, nodeId, isPDiskPage, ...infoViewerProps }: PDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
+interface PDiskInfoProps<T extends PreparedPDisk> extends GetPDiskInfoOptions<T> {
+    className?: string;
+}
+export declare function PDiskInfo<T extends PreparedPDisk>({ pDisk, nodeId, withPDiskPageLink, className, }: PDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};