feat(Navigation/NavigationError): add copy button and impove error details [YTFRONT-4049]

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",

packages/ui/src/ui/components/ErrorDetails/ErrorDetails.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {ClipboardButton, Flex} 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>
         );
     }
@@ -229,15 +233,15 @@ export default class ErrorDetails extends Component {
         return (
             <div className={b('error')}>
                 {typeof attributes !== 'undefined' ? (
-                    <div className={'toggle-group'}>
+                    <Flex direction="column">
                         <Link theme="primary" onClick={this.toggleDetails}>
                             {this.renderToggler()}
                             {this.renderMessage()}
                         </Link>
                         <div className={'toggle-subject'}>
                             {showDetails && this.renderDetails()}
                         </div>
-                    </div>
+                    </Flex>
                 ) : (
                     this.renderMessage()
                 )}

packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss

@@ -6,6 +6,7 @@
 
         padding: 8px;
         margin-bottom: 10px;
+        margin-top: 4px;;
 
         border-radius: var(--g-border-radius-l);
 
@@ -30,6 +31,11 @@
     }
 
     &__tabs {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
         span {
             color: var(--g-color-text-complementary);
             font-weight: 700;

packages/ui/src/ui/pages/navigation/Navigation/NavigationError/NavigationError.tsx

@@ -1,6 +1,6 @@
 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';
@@ -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 = JSON.stringify(details, null, 4);
 
     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>
     );