feat(Navigation/NavigationError): add copy button and impove error de…

…tails [YTFRONT-4049]
ytsaurus · Feb 5, 2025 · 9efef4c · 9efef4c
1 parent 36a2d12
commit 9efef4c
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 17 deletions.
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -100,7 +100,7 @@
     "@gravity-ui/react-data-table": "^2.1.1",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.19.0",
+    "@gravity-ui/uikit": "^6.37.0",
     "@gravity-ui/unipika": "^5.1.0",
     "@gravity-ui/websql-autocomplete": "^12.3.0",
     "@gravity-ui/yagr": "^4.3.1",

diff --git a/packages/ui/src/ui/components/ErrorDetails/ErrorDetails.js b/packages/ui/src/ui/components/ErrorDetails/ErrorDetails.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {ClipboardButton} from '@gravity-ui/uikit';
 import Link from '../../components/Link/Link';
 import block from 'bem-cn-lite';
 import ypath from '../../common/thor/ypath';
@@ -107,13 +108,16 @@ export default class ErrorDetails extends Component {
     }
 
     renderTabs() {
+        const {error} = this.props;
         const {currentTab} = this.state;
 
         const items = this.prepareTabs();
+        const text = unipika.formatFromYSON(error.attributes, {asHTML: false});
 
         return (
             <div className={b('tabs')}>
                 <Tabs onTabChange={this.changeCurrentTab} active={currentTab} items={items} />
+                <ClipboardButton title="Copy error" view="flat-secondary" size="s" text={text} />
             </div>
         );
     }

diff --git a/packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss b/packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss
@@ -30,6 +30,11 @@
     }
 
     &__tabs {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
         span {
             color: var(--g-color-text-complementary);
             font-weight: 700;

diff --git a/packages/ui/src/ui/pages/navigation/Navigation/Navigation.js b/packages/ui/src/ui/pages/navigation/Navigation/Navigation.js
@@ -22,6 +22,10 @@ import ContentViewer from './ContentViewer/ContentViewer';
 import {checkContentIsSupported} from './ContentViewer/helpers';
 import Tabs from '../../../components/Tabs/Tabs';
 import {NavigationError} from './NavigationError';
+import {
+    getEffectiveMode,
+    getTabs,
+} from '../../../store/selectors/navigation/navigation';
 
 import {Tab} from '../../../constants/navigation';
 import {LOADING_STATUS} from '../../../constants/index';
@@ -38,7 +42,6 @@ import {
     getType,
     isNavigationFinalLoadState,
 } from '../../../store/selectors/navigation';
-import {getEffectiveMode, getTabs} from '../../../store/selectors/navigation/navigation';
 import {NavigationPermissionsNotice} from './NavigationPermissionsNotice';
 import {useRumMeasureStop} from '../../../rum/RumUiContext';
 import {useAppRumMeasureStart} from '../../../rum/rum-app-measures';

diff --git a/packages/ui/src/ui/pages/navigation/Navigation/NavigationError/NavigationError.tsx b/packages/ui/src/ui/pages/navigation/Navigation/NavigationError/NavigationError.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
-import {Flex, Text} from '@gravity-ui/uikit';
+import {ClipboardButton, Flex, Text} from '@gravity-ui/uikit';
 
 import Error from '../../../../components/Error/Error';
 import {NavigationErrorImage} from './NavigationErrorImage';
 import ErrorDetails from '../../../../components/ErrorDetails/ErrorDetails';
 import {RequestPermission} from './RequestPermission';
 import {getPermissionDeniedError} from '../../../../utils/errors';
 import {YTError} from '../../../../../@types/types';
-import {getErrorTitle, getLeadingErrorCode} from './helpers';
+import {formatForCopy, getErrorTitle, getLeadingErrorCode} from './helpers';
 
 import './NavigationError.scss';
 
@@ -26,8 +26,8 @@ function PrettyError(props: Props) {
 
     const code = getLeadingErrorCode(details);
     const error = code == 901 ? getPermissionDeniedError(details)! : details;
-
     const title = getErrorTitle(error, path);
+    const errorInfo = formatForCopy(details);
 
     return (
         <Flex className={block()} justifyContent="center" alignItems="center" gap={7}>
@@ -37,7 +37,14 @@ function PrettyError(props: Props) {
             <Flex direction="column" className={block('info')} gap={4}>
                 <Text className={block('title')}>{title}</Text>
                 <ErrorDetails error={details} />
-                {code === 901 && <RequestPermission cluster={cluster} path={path} error={error} />}
+                <Flex direction="row" gap={3}>
+                    {code === 901 && (
+                        <RequestPermission cluster={cluster} path={path} error={error} />
+                    )}
+                    <ClipboardButton className={block('copy')} view="outlined" text={errorInfo}>
+                        Copy error details
+                    </ClipboardButton>
+                </Flex>
             </Flex>
         </Flex>
     );

diff --git a/packages/ui/src/ui/pages/navigation/Navigation/NavigationError/helpers/helpers.ts b/packages/ui/src/ui/pages/navigation/Navigation/NavigationError/helpers/helpers.ts
@@ -1,3 +1,5 @@
+import unipika from '../../../../../common/thor/unipika';
+
 import {getYtErrorCode} from '../../../../../utils/errors';
 import {YTError} from '../../../../../../@types/types';
 import {UnipikaValue} from '../../../../../components/Yson/StructuredYson/StructuredYsonTypes';
@@ -85,3 +87,36 @@ export function getLeadingErrorCode(error: YTError): ErrorCode | undefined {
 
     return;
 }
+
+export function formatForCopy(error: YTError) {
+    const formatSettings = {asHTML: false};
+    let res = '';
+
+    const errorTraversal = (e: YTError) => {
+        if (e.message) {
+            // replace needed to truncate extra \
+            // for situations like: Access denied for user \"username\": \"role\"
+            res += `${unipika.formatFromYSON(e.message, formatSettings)}`.replace(/\\"/g, '"');
+        }
+
+        if (e.code) {
+            res += `[${unipika.formatFromYSON(e.code, formatSettings)}]`;
+        }
+
+        res += '\n';
+
+        if (e.attributes) {
+            res += `${unipika.formatFromYSON(e.attributes, formatSettings)}\n`;
+        }
+
+        if (e.inner_errors) {
+            for (const err of e.inner_errors) {
+                errorTraversal(err);
+            }
+        }
+    };
+
+    errorTraversal(error);
+
+    return res;
+}