ydb-embedded-ui 4.28.0 → 4.30.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.30.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.29.0...v4.30.0) (2024-01-16)
+
+
+### Features
+
+* add clipboard button to nodes tree titles ([#648](https://github.com/ydb-platform/ydb-embedded-ui/issues/648)) ([1411651](https://github.com/ydb-platform/ydb-embedded-ui/commit/141165173189be064e9e9314b42aa3eb7fce9c69))
+
+## [4.29.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.28.0...v4.29.0) (2024-01-12)
+
+
+### Features
+
+* add ErrorBoundary ([#549](https://github.com/ydb-platform/ydb-embedded-ui/issues/549)) ([f5ad224](https://github.com/ydb-platform/ydb-embedded-ui/commit/f5ad224b342e0fa25b1bafa3f5e2202ce165ef80))
+
 ## [4.28.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.27.1...v4.28.0) (2024-01-10)
 
 

package/README.md

@@ -2,7 +2,8 @@
 
 Local viewer for YDB clusters
 
-[Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+* [Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+* [Project Roadmap](ROADMAP.md)
 
 ## Preview
 

package/dist/assets/illustrations/dark/error.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230" fill="none">
+    <path fill="#BECFE0" fill-opacity=".8" fill-rule="evenodd" d="M169.001 51.666c5.523 0 10 4.477 10 10v21.017l18.197-10.506c4.783-2.762 10.899-1.123 13.66 3.66 2.761 4.783 1.123 10.899-3.66 13.66l-18.197 10.507 18.198 10.506c4.783 2.762 6.421 8.878 3.66 13.661-2.762 4.782-8.877 6.421-13.66 3.66l-18.198-10.506v21.008c0 5.523-4.477 10-10 10-5.522 0-10-4.477-10-10v-21.009l-18.199 10.507c-4.782 2.761-10.898 1.122-13.66-3.66-2.761-4.783-1.122-10.899 3.66-13.661l18.199-10.506-18.198-10.507c-4.783-2.761-6.421-8.877-3.66-13.66 2.762-4.783 8.877-6.422 13.66-3.66l18.198 10.507V61.666c0-5.523 4.478-10 10-10Z" clip-rule="evenodd"/>
+    <path fill="#E7E7E7" fill-rule="evenodd" d="M171.523 95.922a11.003 11.003 0 0 1 1.099 8.347l-13.208 49.291c-1.572 5.868-7.604 9.351-13.472 7.778l-25.356-6.794a44.998 44.998 0 0 1-.53 1.929l25.368 6.797c6.935 1.858 14.064-2.257 15.922-9.192l13.207-49.291c.893-3.33.426-6.879-1.298-9.865L155.598 64.34a12.999 12.999 0 0 0-7.894-6.057l-29.972-8.031c-6.935-1.858-14.063 2.257-15.922 9.192l-11.328 42.277c.64.192 1.276.398 1.905.618l11.355-42.377c1.573-5.868 7.604-9.35 13.472-7.778l29.973 8.03a11 11 0 0 1 6.679 5.126l17.657 30.582Z" clip-rule="evenodd"/>
+    <path fill="#FF5958" fill-opacity=".8" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    <path stroke="#E7E7E7" stroke-width="2" d="M60.636 117.734c53.586-33.459-26.868-81.505-36.557-61.318-11.802 24.59 99.395 51.098 128.865-26.3"/>
+    <mask id="b" width="89" height="89" x="33" y="99" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+        <path fill="#FF5958" fill-opacity=".9" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    </mask>
+    <g filter="url(#a)" mask="url(#b)">
+        <path stroke="#E7E7E7" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".6" stroke-width="2" d="M172.389 95.422a12.004 12.004 0 0 1 1.199 9.106l-13.208 49.291c-1.715 6.401-8.295 10.2-14.697 8.485L91.591 147.81c-6.401-1.715-10.2-8.295-8.485-14.697l19.67-73.41c1.716-6.402 8.296-10.2 14.697-8.485l29.972 8.03a11.998 11.998 0 0 1 7.287 5.592l17.657 30.582Z"/>
+    </g>
+    <g filter="url(#c)">
+        <path fill="#fff" fill-opacity=".72" fill-rule="evenodd" d="M80.866 130.432a6.359 6.359 0 1 1-12.284 3.29 6.359 6.359 0 0 1 12.284-3.29Zm4.817-1.291c1.621 6.052-1.97 12.273-8.022 13.894-6.052 1.622-12.273-1.97-13.895-8.022-1.621-6.052 1.97-12.272 8.022-13.894 6.052-1.622 12.273 1.97 13.895 8.022Zm-21.346 32.565c-.154-.577-.009-2.61 2.877-5.555 2.665-2.721 6.917-5.33 12.158-6.734 5.24-1.404 10.227-1.271 13.896-.247 3.971 1.108 5.114 2.796 5.268 3.372a3.116 3.116 0 0 1-2.204 3.817l-28.178 7.55a3.116 3.116 0 0 1-3.817-2.203ZM78.081 144.6c-12.054 3.23-20.238 12.134-18.56 18.396a8.103 8.103 0 0 0 9.924 5.73l28.178-7.55a8.104 8.104 0 0 0 5.73-9.925c-1.678-6.261-13.218-9.881-25.272-6.651Z" clip-rule="evenodd"/>
+    </g>
+    <defs>
+        <filter id="a" width="113.303" height="133.91" x="71.693" y="39.806" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feGaussianBlur result="effect1_foregroundBlur_1301_35376" stdDeviation="5"/>
+        </filter>
+        <filter id="c" width="73.289" height="73.288" x="41.018" y="106.391" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="1.917"/>
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
+            <feBlend in2="shape" result="effect1_innerShadow_1301_35376"/>
+        </filter>
+    </defs>
+</svg>

package/dist/assets/illustrations/light/error.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="230" height="230" fill="none">
+    <path fill="#BECFE0" fill-opacity=".9" fill-rule="evenodd" d="M169.001 51.666c5.523 0 10 4.477 10 10v21.017l18.197-10.506c4.783-2.762 10.899-1.123 13.66 3.66 2.761 4.783 1.123 10.899-3.66 13.66l-18.197 10.507 18.198 10.506c4.783 2.762 6.421 8.878 3.66 13.661-2.762 4.782-8.877 6.421-13.66 3.66l-18.198-10.506v21.008c0 5.523-4.477 10-10 10-5.522 0-10-4.477-10-10v-21.009l-18.199 10.507c-4.782 2.761-10.898 1.122-13.66-3.66-2.761-4.783-1.122-10.899 3.66-13.661l18.199-10.506-18.198-10.507c-4.783-2.761-6.421-8.877-3.66-13.66 2.762-4.783 8.877-6.422 13.66-3.66l18.198 10.507V61.666c0-5.523 4.478-10 10-10Z" clip-rule="evenodd"/>
+    <path fill="#262626" fill-rule="evenodd" d="M171.523 95.922a11.003 11.003 0 0 1 1.099 8.347l-13.208 49.291c-1.572 5.868-7.604 9.351-13.472 7.778l-25.356-6.794a44.998 44.998 0 0 1-.53 1.929l25.368 6.797c6.935 1.858 14.064-2.257 15.922-9.192l13.207-49.291c.893-3.33.426-6.879-1.298-9.865L155.598 64.34a12.999 12.999 0 0 0-7.894-6.057l-29.972-8.031c-6.935-1.858-14.063 2.257-15.922 9.192l-11.328 42.277c.64.192 1.276.398 1.905.618l11.355-42.377c1.573-5.868 7.604-9.35 13.472-7.778l29.973 8.03a11 11 0 0 1 6.679 5.126l17.657 30.582Z" clip-rule="evenodd"/>
+    <path fill="#FF5958" fill-opacity=".9" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    <path stroke="#262626" stroke-width="2" d="M60.636 117.734c53.586-33.459-26.868-81.505-36.557-61.318-11.802 24.59 99.395 51.098 128.865-26.3"/>
+    <mask id="b" width="89" height="89" x="33" y="99" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+        <path fill="#FF5958" fill-opacity=".9" d="M35.388 155.273c-6.29-23.472 7.64-47.599 31.113-53.889 23.472-6.289 47.599 7.641 53.889 31.113 6.289 23.473-7.641 47.599-31.113 53.889-23.473 6.289-47.6-7.64-53.889-31.113Z"/>
+    </mask>
+    <g filter="url(#a)" mask="url(#b)">
+        <path stroke="#262626" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".6" stroke-width="2" d="M172.389 95.422a12.004 12.004 0 0 1 1.199 9.106l-13.208 49.291c-1.715 6.401-8.295 10.2-14.697 8.485L91.591 147.81c-6.401-1.715-10.2-8.295-8.485-14.697l19.67-73.41c1.716-6.402 8.296-10.2 14.697-8.485l29.972 8.03a11.998 11.998 0 0 1 7.287 5.592l17.657 30.582Z"/>
+    </g>
+    <g filter="url(#c)">
+        <path fill="#fff" fill-opacity=".72" fill-rule="evenodd" d="M80.866 130.432a6.359 6.359 0 1 1-12.284 3.29 6.359 6.359 0 0 1 12.284-3.29Zm4.817-1.291c1.621 6.052-1.97 12.273-8.022 13.894-6.052 1.622-12.273-1.97-13.895-8.022-1.621-6.052 1.97-12.272 8.022-13.894 6.052-1.622 12.273 1.97 13.895 8.022Zm-21.346 32.565c-.154-.577-.009-2.61 2.877-5.555 2.665-2.721 6.917-5.33 12.158-6.734 5.24-1.404 10.227-1.271 13.896-.247 3.971 1.108 5.114 2.796 5.268 3.372a3.116 3.116 0 0 1-2.204 3.817l-28.178 7.55a3.116 3.116 0 0 1-3.817-2.203ZM78.081 144.6c-12.054 3.23-20.238 12.134-18.56 18.396a8.103 8.103 0 0 0 9.924 5.73l28.178-7.55a8.104 8.104 0 0 0 5.73-9.925c-1.678-6.261-13.218-9.881-25.272-6.651Z" clip-rule="evenodd"/>
+    </g>
+    <defs>
+        <filter id="a" width="113.303" height="133.91" x="71.693" y="39.806" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feGaussianBlur result="effect1_foregroundBlur_1301_31085" stdDeviation="5"/>
+        </filter>
+        <filter id="c" width="73.289" height="73.288" x="41.018" y="106.391" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="1.917"/>
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
+            <feBlend in2="shape" result="effect1_innerShadow_1301_31085"/>
+        </filter>
+    </defs>
+</svg>

package/dist/components/ClipboardButton/ClipboardButton.tsx

@@ -0,0 +1,52 @@
+import {
+    Button,
+    ButtonProps,
+    ClipboardIcon,
+    CopyToClipboard as CopyToClipboardUiKit,
+    CopyToClipboardStatus,
+    Tooltip,
+} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+const b = cn('clipboard-button');
+
+interface ClipboardButtonProps extends Pick<ButtonProps, 'disabled' | 'size' | 'title' | 'view'> {
+    className?: string;
+    text: string;
+}
+
+/**
+ * An inner component required
+ * because `react-copy-to-clipboard` doesn't work with `Tooltip` otherwise.
+ */
+function InnerButton({
+    className,
+    status,
+    title,
+    ...props
+}: Omit<ClipboardButtonProps, 'text'> & {status: CopyToClipboardStatus}) {
+    return (
+        <Tooltip
+            content={status === CopyToClipboardStatus.Success ? 'Copied!' : title || 'Copy'}
+            /**
+             * Auto-placement has a bug with text changing.
+             * @link https://github.com/ydb-platform/ydb-embedded-ui/pull/648#discussion_r1453530092
+             */
+            placement="bottom-start"
+        >
+            <Button {...props} className={b(null, className)}>
+                <Button.Icon>
+                    <ClipboardIcon status={status} size={16} />
+                </Button.Icon>
+            </Button>
+        </Tooltip>
+    );
+}
+
+export function ClipboardButton({text, ...props}: ClipboardButtonProps) {
+    return (
+        <CopyToClipboardUiKit text={text} timeout={1000}>
+            {(status) => <InnerButton {...props} status={status} />}
+        </CopyToClipboardUiKit>
+    );
+}

package/dist/components/ClipboardButton/index.ts

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

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,14 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import {Icon, Link as UIKitLink} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import React from 'react';
 import {Link} from 'react-router-dom';
-import {ClipboardButton, Link as UIKitLink, Button, Icon} from '@gravity-ui/uikit';
-
-import circleInfoIcon from '../../assets/icons/circle-info.svg';
 import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
-import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import circleInfoIcon from '../../assets/icons/circle-info.svg';
 import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
-
+import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import {ClipboardButton} from '../ClipboardButton';
 import './EntityStatus.scss';
 
 const icons = {
@@ -121,15 +120,13 @@ class EntityStatus extends React.Component {
                     {this.renderLink()}
                 </span>
                 {hasClipboardButton && (
-                    <Button
-                        component="span"
+                    <ClipboardButton
+                        text={name}
                         size="s"
                         className={b('clipboard-button', {
                             visible: this.props.clipboardButtonAlwaysVisible,
                         })}
-                    >
-                        <ClipboardButton text={name} size={16} />
-                    </Button>
+                    />
                 )}
             </div>
         );

package/dist/components/EntityStatus/EntityStatus.scss

@@ -10,25 +10,14 @@
     @include body-2-typography();
 
     &__clipboard-button {
-        display: none;
-        justify-content: center;
-        align-items: center;
+        visibility: hidden;
 
         margin-left: 8px;
 
         color: var(--yc-color-text-secondary);
 
-        .yc-button__text {
-            margin: 0;
-        }
-
-        .yc-clipboard-button {
-            width: 24px;
-            height: 24px;
-        }
-
         &_visible {
-            display: inline-flex;
+            visibility: visible;
         }
     }
 

package/dist/components/ErrorBoundary/ErrorBoundary.scss

@@ -0,0 +1,40 @@
+@import '../../styles/mixins.scss';
+
+.ydb-error-boundary {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: 20px;
+
+    @include body-2-typography();
+
+    &__illustration {
+        width: 230px;
+        height: 230px;
+        margin-right: 20px;
+    }
+    &__error-title {
+        margin-top: 44px;
+        @include lead-typography();
+    }
+    &__error-description {
+        margin-top: 12px;
+    }
+    &__show-details {
+        margin-top: 8px;
+    }
+    &__error-details {
+        padding: 13px 18px;
+
+        border: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-generic-ultralight);
+    }
+    &__actions {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+
+        margin-top: 20px;
+    }
+}

package/dist/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,62 @@
+import type {ReactNode} from 'react';
+import {ErrorBoundary as ErrorBoundaryBase} from 'react-error-boundary';
+import cn from 'bem-cn-lite';
+
+import {Button, Disclosure} from '@gravity-ui/uikit';
+
+import {registerError} from '../../utils/registerError';
+import {Illustration} from '../Illustration';
+import i18n from './i18n';
+import './ErrorBoundary.scss';
+
+const b = cn('ydb-error-boundary');
+
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    useRetry?: boolean;
+    onReportProblem?: (error?: Error) => void;
+}
+
+export const ErrorBoundary = ({children, useRetry = true, onReportProblem}: ErrorBoundaryProps) => {
+    return (
+        <ErrorBoundaryBase
+            onError={(error, info) => {
+                registerError(error, info.componentStack, 'error-boundary');
+            }}
+            fallbackRender={({error, resetErrorBoundary}) => {
+                return (
+                    <div className={b(null)}>
+                        <Illustration name="error" className={b('illustration')} />
+                        <div className={b('content')}>
+                            <h2 className={b('error-title')}>{i18n('error-title')}</h2>
+                            <div className={b('error-description')}>
+                                {i18n('error-description')}
+                            </div>
+                            <Disclosure
+                                summary={i18n('show-details')}
+                                className={b('show-details')}
+                                size="m"
+                            >
+                                <pre className={b('error-details')}>{error.stack}</pre>
+                            </Disclosure>
+                            <div className={b('actions')}>
+                                {useRetry && (
+                                    <Button view="outlined" onClick={resetErrorBoundary}>
+                                        {i18n('button-reset')}
+                                    </Button>
+                                )}
+                                {onReportProblem && (
+                                    <Button view="outlined" onClick={() => onReportProblem(error)}>
+                                        {i18n('report-problem')}
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            }}
+        >
+            {children}
+        </ErrorBoundaryBase>
+    );
+};

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

@@ -0,0 +1,7 @@
+{
+  "error-title": "Something went wrong",
+  "error-description": "We have something broken, but don't worry, it won't last long",
+  "show-details": "Show details",
+  "report-problem": "Report a problem",
+  "button-reset": "Try again"
+}

package/dist/components/ErrorBoundary/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-error-boundary';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,7 @@
+{
+  "error-title": "Что-то пошло не так",
+  "error-description": "У нас что-то сломалось, но не переживайте, это ненадолго",
+  "show-details": "Показать детали",
+  "report-problem": "Сообщить о проблеме",
+  "button-reset": "Попробовать снова"
+}

package/dist/components/Illustration/Illustration.tsx

@@ -13,10 +13,12 @@ const store: IllustrationStore = {
     light: {
         403: () => import('../../assets/illustrations/light/403.svg'),
         thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/light/error.svg'),
     },
     dark: {
         403: () => import('../../assets/illustrations/dark/403.svg'),
-        thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
+        thumbsUp: () => import('../../assets/illustrations/dark/thumbsUp.svg'),
+        error: () => import('../../assets/illustrations/dark/error.svg'),
     },
 };
 

package/dist/containers/App/App.js

@@ -7,6 +7,7 @@ import AsideNavigation from '../AsideNavigation/AsideNavigation';
 
 import {getUser} from '../../store/reducers/authentication/authentication';
 import {registerLanguages} from '../../utils/monaco';
+import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 
 import './App.scss';
 
@@ -38,8 +39,10 @@ class App extends React.Component {
         const {singleClusterMode, clusterName} = this.props;
         return (
             <AsideNavigation>
-                <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
-                <div id="fullscreen-root"></div>
+                <ErrorBoundary>
+                    <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
+                    <div id="fullscreen-root"></div>
+                </ErrorBoundary>
             </AsideNavigation>
         );
     }

package/dist/containers/App/App.scss

@@ -107,21 +107,21 @@ body,
         border-right: unset;
         border-left: unset;
     }
-
-    .yc-clipboard-button {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-    }
 }
 
 .error {
     color: var(--g-color-text-danger);
 }
 
-.data-table__row:hover .entity-status__clipboard-button,
-.ydb-virtual-table__row:hover .entity-status__clipboard-button {
-    display: flex;
+.data-table__row,
+.ydb-virtual-table__row,
+.ydb-tree-view__item {
+    &:hover,
+    &:focus-within {
+        & .clipboard-button {
+            visibility: visible;
+        }
+    }
 }
 
 .g-root .data-table_highlight-rows .data-table__row:hover {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -1,60 +1,53 @@
+import {HelpPopover} from '@gravity-ui/components';
+import {Button, Tabs} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import qs from 'qs';
 import React, {ReactNode, useEffect, useReducer} from 'react';
 import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
 import {Link} from 'react-router-dom';
-import qs from 'qs';
-import cn from 'bem-cn-lite';
-
-import {Button, Tabs} from '@gravity-ui/uikit';
-import {HelpPopover} from '@gravity-ui/components';
-
-import SplitPane from '../../../components/SplitPane';
-import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
+import {ClipboardButton} from '../../../components/ClipboardButton';
+import {Icon} from '../../../components/Icon';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import {
     CDCStreamOverview,
     PersQueueGroupOverview,
 } from '../../../components/InfoViewer/schemaOverview';
-import {Icon} from '../../../components/Icon';
 import {Loader} from '../../../components/Loader';
-
+import SplitPane from '../../../components/SplitPane';
+import routes, {createHref} from '../../../routes';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+    TENANT_SUMMARY_TABS_IDS,
+} from '../../../store/reducers/tenant/constants';
+import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {
     EPathSubType,
     EPathType,
     TColumnDescription,
     TColumnTableDescription,
 } from '../../../types/api/schema';
-import routes, {createHref} from '../../../routes';
-import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../utils/hooks';
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {
-    TENANT_PAGES_IDS,
-    TENANT_QUERY_TABS_ID,
-    TENANT_SUMMARY_TABS_IDS,
-} from '../../../store/reducers/tenant/constants';
-
-import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
-import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
+import {useTypedSelector} from '../../../utils/hooks';
 import {Acl} from '../Acl/Acl';
-import {ExternalTableSummary} from '../Info/ExternalTable/ExternalTable';
+import i18n from '../i18n';
 import {ExternalDataSourceSummary} from '../Info/ExternalDataSource/ExternalDataSource';
-
+import {ExternalTableSummary} from '../Info/ExternalTable/ExternalTable';
+import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
+import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB} from '../TenantPages';
 import {
     PaneVisibilityActionTypes,
-    paneVisibilityToggleReducerCreator,
     PaneVisibilityToggleButtons,
+    paneVisibilityToggleReducerCreator,
 } from '../utils/paneVisibilityToggleHelpers';
 import {isColumnEntityType, isExternalTable, isIndexTable, isTableType} from '../utils/schema';
-
-import i18n from '../i18n';
-
 import './ObjectSummary.scss';
 
 const b = cn('object-summary');
@@ -306,8 +299,9 @@ export function ObjectSummary({
                     </Button>
                 )}
                 {currentSchemaPath && (
-                    <CopyToClipboard
+                    <ClipboardButton
                         text={currentSchemaPath}
+                        view="flat-secondary"
                         title={i18n('summary.copySchemaPath')}
                     />
                 )}

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -1,31 +1,25 @@
-import React, {useEffect, useState} from 'react';
-import {useDispatch} from 'react-redux';
+import {RadioButton, Tabs} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import React, {useEffect, useState} from 'react';
 import JSONTree from 'react-json-inspector';
-
-import {RadioButton, Tabs} from '@gravity-ui/uikit';
-
-import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
+import {useDispatch} from 'react-redux';
+import {ClipboardButton} from '../../../../components/ClipboardButton';
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 import {QueryResultTable} from '../../../../components/QueryResultTable/QueryResultTable';
-
+import {disableFullscreen} from '../../../../store/reducers/fullscreen';
+import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
 import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query';
-import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
-import {disableFullscreen} from '../../../../store/reducers/fullscreen';
-import {prepareQueryError} from '../../../../utils/query';
-import {useTypedSelector} from '../../../../utils/hooks';
 import {getArray} from '../../../../utils';
-
+import {useTypedSelector} from '../../../../utils/hooks';
+import {prepareQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
-
 import {ResultIssues} from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 import {getPreparedResult} from '../utils/getPreparedResult';
-
 import './ExecuteResult.scss';
 
 const b = cn('ydb-query-execute-result');
@@ -115,10 +109,10 @@ export function ExecuteResult({
 
     const renderClipboardButton = () => {
         return (
-            <CopyToClipboard
+            <ClipboardButton
                 text={textResults}
+                view="flat-secondary"
                 title="Copy results"
-                toastText="Results were copied to clipboard successfully"
                 disabled={copyDisabled}
             />
         );

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -17,10 +17,12 @@
             margin-left: 30px;
         }
     }
+
     &__overview-container {
         display: flex;
         align-items: center;
     }
+
     &__info-label {
         font-weight: 200;
 
@@ -52,4 +54,17 @@
             width: 200px;
         }
     }
+
+    &__overview-title {
+        display: flex;
+        align-items: center;
+    }
+
+    &__clipboard-button {
+        visibility: hidden;
+
+        margin-left: 8px;
+
+        color: var(--yc-color-text-secondary);
+    }
 }

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -1,11 +1,9 @@
-import block from 'bem-cn-lite';
-
 import {Progress} from '@gravity-ui/uikit';
-
-import type {VersionValue} from '../../../types/versions';
+import block from 'bem-cn-lite';
+import {ClipboardButton} from '../../../components/ClipboardButton';
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
+import type {VersionValue} from '../../../types/versions';
 import type {GroupedNodesItem} from '../types';
-
 import './NodesTreeTitle.scss';
 
 const b = block('ydb-versions-nodes-tree-title');
@@ -43,7 +41,12 @@ export const NodesTreeTitle = ({
                 {versionColor ? (
                     <div className={b('version-color')} style={{background: versionColor}} />
                 ) : null}
-                <span className={b('overview-title')}>{title}</span>
+                {title ? (
+                    <span className={b('overview-title')}>
+                        {title}
+                        <ClipboardButton text={title} size="s" className={b('clipboard-button')} />
+                    </span>
+                ) : null}
             </div>
             <div className={b('overview-info')}>
                 <div>

package/dist/index.tsx

@@ -8,6 +8,7 @@ import App from './containers/App/App';
 import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
 import HistoryContext from './contexts/HistoryContext';
+import {ErrorBoundary} from './components/ErrorBoundary/ErrorBoundary';
 
 import './styles/themes.scss';
 import './styles/constants.scss';
@@ -18,11 +19,13 @@ window.store = store;
 
 ReactDOM.render(
     <React.StrictMode>
-        <Provider store={store}>
-            <HistoryContext.Provider value={history}>
-                <App />
-            </HistoryContext.Provider>
-        </Provider>
+        <ErrorBoundary>
+            <Provider store={store}>
+                <HistoryContext.Provider value={history}>
+                    <App />
+                </HistoryContext.Provider>
+            </Provider>
+        </ErrorBoundary>
     </React.StrictMode>,
     document.getElementById('root'),
 );

package/dist/utils/registerError.ts

@@ -0,0 +1,18 @@
+export function registerError(error: Error, message?: string, type = 'error') {
+    if (typeof window !== 'undefined' && window.Ya?.Rum) {
+        window.Ya.Rum.logError(
+            {
+                additional: {
+                    url: window.location.href,
+                },
+                type,
+                message,
+                level: window.Ya.Rum.ERROR_LEVEL.ERROR,
+            },
+            error,
+        );
+    } else {
+        // eslint-disable-next-line no-console
+        console.error(error);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.28.0",
+  "version": "4.30.0",
   "files": [
     "dist"
   ],
@@ -30,6 +30,7 @@
     "numeral": "2.0.6",
     "path-to-regexp": "3.0.0",
     "qs": "^6.11.0",
+    "react-error-boundary": "^4.0.12",
     "react-json-inspector": "7.1.1",
     "react-list": "0.8.11",
     "react-monaco-editor": "0.30.1",
@@ -45,7 +46,7 @@
     "sass": "1.32.8",
     "url": "^0.11.0",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.5.0"
+    "ydb-ui-components": "^3.6.0"
   },
   "scripts": {
     "start": "react-app-rewired start",

package/dist/components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,38 +0,0 @@
-import {Button, CopyToClipboard as CopyToClipboardUiKit} from '@gravity-ui/uikit';
-import createToast from '../../utils/createToast';
-import {Icon} from '../Icon';
-
-interface CopyToClipboardProps {
-    text: string;
-    title?: string;
-    disabled?: boolean;
-    toastText?: string;
-}
-
-function CopyToClipboard(props: CopyToClipboardProps) {
-    return (
-        <CopyToClipboardUiKit text={props.text} timeout={1000}>
-            {(state) => {
-                if (state === 'success') {
-                    createToast({
-                        name: 'Copied',
-                        title: props.toastText ?? 'Data was copied to clipboard successfully',
-                        type: state,
-                    });
-                }
-
-                return (
-                    <Button
-                        disabled={props.disabled}
-                        title={props.title ?? 'Copy'}
-                        view="flat-secondary"
-                    >
-                        <Icon name="copy" viewBox={'0 0 16 16'} width={16} height={16} />
-                    </Button>
-                );
-            }}
-        </CopyToClipboardUiKit>
-    );
-}
-
-export default CopyToClipboard;