diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 088d44242..27cc2cdb3 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json @@ -44,7 +44,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", @@ -4614,9 +4614,10 @@ } }, "node_modules/@gravity-ui/i18n": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.5.1.tgz", - "integrity": "sha512-ZvaQtRUf4Yl9zi0+SMzjlDeHp9+p5IXkNu2k6RtW04c+RYKA1jX+umeKNwzft4iR3+KxDlpLX2trTFEW6W7HKQ==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.7.0.tgz", + "integrity": "sha512-jZotOX73lMVARsNZ5L8rquDhyCIcHnX7GwT32m6vrnqy6iKBfBdOuAnAalUbnoVJoasfvYiSyX3kwusetyZgfQ==", + "license": "MIT" }, "node_modules/@gravity-ui/icons": { "version": "2.10.0", @@ -4741,19 +4742,20 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "6.19.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.19.0.tgz", - "integrity": "sha512-riIgdot10rawRvp14zlrei8QIfCBGJlCLCuRpQSHbWMclc4cReRC86170NVXwA0dpXBlUt7bnV5tK140LEZDDA==", + "version": "6.42.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.42.0.tgz", + "integrity": "sha512-PVe2mCXdQ15oAFZ10MxLo5iLdDCdOZ8TKLjRTRaAdROK52MKme04vv3TciOtO7gF0G6QG2SRX04x61nq/IFxAQ==", "dev": true, + "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", - "@gravity-ui/i18n": "^1.3.0", + "@gravity-ui/i18n": "^1.6.0", "@gravity-ui/icons": "^2.8.1", "@popperjs/core": "^2.11.8", "blueimp-md5": "^2.19.0", "focus-trap": "^7.5.4", "lodash": "^4.17.21", - "rc-slider": "^10.5.0", + "rc-slider": "^10.6.2", "react-beautiful-dnd": "^13.1.1", "react-copy-to-clipboard": "^5.1.0", "react-popper": "^2.3.0", @@ -4764,8 +4766,8 @@ "tslib": "^2.6.2" }, "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@gravity-ui/unipika": { diff --git a/packages/ui/package.json b/packages/ui/package.json index ed5e0ef95..34e4a5ddb 100644 --- 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 index e91d18656..8ee1da5f6 100644 --- 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, 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 (
+
); } @@ -229,7 +233,7 @@ export default class ErrorDetails extends Component { return (
{typeof attributes !== 'undefined' ? ( -
+ {this.renderToggler()} {this.renderMessage()} @@ -237,7 +241,7 @@ export default class ErrorDetails extends Component {
{showDetails && this.renderDetails()}
-
+ ) : ( this.renderMessage() )} diff --git a/packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss b/packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss index 7229c8d36..74da02b01 100644 --- a/packages/ui/src/ui/components/ErrorDetails/ErrorDetails.scss +++ b/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; diff --git a/packages/ui/src/ui/pages/navigation/Navigation/NavigationError/NavigationError.tsx b/packages/ui/src/ui/pages/navigation/Navigation/NavigationError/NavigationError.tsx index 9314a2e84..f83472d3f 100644 --- a/packages/ui/src/ui/pages/navigation/Navigation/NavigationError/NavigationError.tsx +++ b/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 ( @@ -37,7 +37,14 @@ function PrettyError(props: Props) { {title} - {code === 901 && } + + {code === 901 && ( + + )} + + Copy error details + + ); diff --git a/packages/ui/tests/screenshots/pages/components/components.base.screen.ts-snapshots/Components---Tablets-1-chromium-linux.png b/packages/ui/tests/screenshots/pages/components/components.base.screen.ts-snapshots/Components---Tablets-1-chromium-linux.png index 5c246b135..a7e5221fc 100644 Binary files a/packages/ui/tests/screenshots/pages/components/components.base.screen.ts-snapshots/Components---Tablets-1-chromium-linux.png and b/packages/ui/tests/screenshots/pages/components/components.base.screen.ts-snapshots/Components---Tablets-1-chromium-linux.png differ diff --git a/packages/ui/tests/screenshots/pages/navigation/navigation.table.base.screen.ts-snapshots/Navigation-table---Content-3-chromium-linux.png b/packages/ui/tests/screenshots/pages/navigation/navigation.table.base.screen.ts-snapshots/Navigation-table---Content-3-chromium-linux.png index 7de53b787..6758c454f 100644 Binary files a/packages/ui/tests/screenshots/pages/navigation/navigation.table.base.screen.ts-snapshots/Navigation-table---Content-3-chromium-linux.png and b/packages/ui/tests/screenshots/pages/navigation/navigation.table.base.screen.ts-snapshots/Navigation-table---Content-3-chromium-linux.png differ