diff --git a/package-lock.json b/package-lock.json index 0027c18d6c..7908a25589 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "@gravity-ui/paranoid": "^3.0.0", "@gravity-ui/react-data-table": "^2.2.1", "@gravity-ui/table": "^1.10.1", - "@gravity-ui/uikit": "^7.16.2", + "@gravity-ui/uikit": "^7.22.0", "@gravity-ui/unipika": "^5.2.1", "@gravity-ui/websql-autocomplete": "^13.7.0", "@hookform/resolvers": "^3.10.0", @@ -2120,12 +2120,10 @@ } }, "node_modules/@babel/runtime": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", - "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", - "dependencies": { - "regenerator-runtime": "^0.14.0" - }, + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", + "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", + "license": "MIT", "engines": { "node": ">=6.9.0" } @@ -3563,25 +3561,26 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "7.16.2", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.16.2.tgz", - "integrity": "sha512-WxeDx7MKMHEjx4qjpD+W/+Yxk8/Zsqrc05gd5RGX3M2j+2tGMJzib+/eIdu1uEeuWnViTUtI4jQrVPPp2zSXNA==", + "version": "7.22.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.22.0.tgz", + "integrity": "sha512-kIE8M0V0WMa6YGM+4LS3075ru27Jlp/0Mdo67racSguG5pVy6dyTpz/Mpom+B5fsM/u+pwoN+yD/5QMJ6J8bxg==", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", "@floating-ui/react": "^0.27.12", "@gravity-ui/i18n": "^1.8.0", "@gravity-ui/icons": "^2.13.0", + "@hello-pangea/dnd": "^18.0.1", "@tanstack/react-virtual": "^3.13.9", "blueimp-md5": "^2.19.0", "lodash": "^4.17.21", "rc-slider": "^11.1.8", - "react-beautiful-dnd": "^13.1.1", "react-transition-group": "^4.4.5", "react-virtualized-auto-sizer": "^1.0.26", "react-window": "^1.8.11", "tabbable": "^6.2.0", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", @@ -3620,6 +3619,23 @@ "node": ">=16.0.0" } }, + "node_modules/@hello-pangea/dnd": { + "version": "18.0.1", + "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz", + "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==", + "license": "Apache-2.0", + "dependencies": { + "@babel/runtime": "^7.26.7", + "css-box-model": "^1.2.1", + "raf-schd": "^4.0.3", + "react-redux": "^9.2.0", + "redux": "^5.0.1" + }, + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, "node_modules/@hookform/resolvers": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz", @@ -5994,15 +6010,6 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "dev": true }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz", - "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==", - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -6199,17 +6206,6 @@ "@types/react": "^18.0.0" } }, - "node_modules/@types/react-redux": { - "version": "7.1.34", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz", - "integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==", - "dependencies": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, "node_modules/@types/react-router": { "version": "5.1.20", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", @@ -9522,6 +9518,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "license": "MIT", "dependencies": { "tiny-invariant": "^1.0.6" } @@ -22044,7 +22041,8 @@ "node_modules/raf-schd": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", - "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==", + "license": "MIT" }, "node_modules/randombytes": { "version": "2.1.0", @@ -22187,49 +22185,6 @@ "semver": "bin/semver" } }, - "node_modules/react-beautiful-dnd": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", - "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==", - "deprecated": "react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672", - "dependencies": { - "@babel/runtime": "^7.9.2", - "css-box-model": "^1.2.0", - "memoize-one": "^5.1.1", - "raf-schd": "^4.0.2", - "react-redux": "^7.2.0", - "redux": "^4.0.4", - "use-memo-one": "^1.1.1" - }, - "peerDependencies": { - "react": "^16.8.5 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/react-beautiful-dnd/node_modules/react-redux": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", - "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", - "dependencies": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.2" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17 || ^18" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -22453,7 +22408,8 @@ "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true }, "node_modules/react-list": { "version": "0.8.18", @@ -24988,11 +24944,6 @@ "node": ">=4" } }, - "node_modules/regenerator-runtime": { - "version": "0.14.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" - }, "node_modules/regenerator-transform": { "version": "0.15.2", "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz", @@ -28770,14 +28721,6 @@ "requires-port": "^1.0.0" } }, - "node_modules/use-memo-one": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", - "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/use-query-params": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/use-query-params/-/use-query-params-2.2.1.tgz", @@ -28801,9 +28744,10 @@ } }, "node_modules/use-sync-external-store": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz", - "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", + "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==", + "license": "MIT", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } diff --git a/package.json b/package.json index c961fb5373..866a7e18db 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@gravity-ui/paranoid": "^3.0.0", "@gravity-ui/react-data-table": "^2.2.1", "@gravity-ui/table": "^1.10.1", - "@gravity-ui/uikit": "^7.16.2", + "@gravity-ui/uikit": "^7.22.0", "@gravity-ui/unipika": "^5.2.1", "@gravity-ui/websql-autocomplete": "^13.7.0", "@hookform/resolvers": "^3.10.0", diff --git a/src/containers/Cluster/ClusterOverview/ClusterOverview.scss b/src/containers/Cluster/ClusterOverview/ClusterOverview.scss index a16489c0aa..c86148a581 100644 --- a/src/containers/Cluster/ClusterOverview/ClusterOverview.scss +++ b/src/containers/Cluster/ClusterOverview/ClusterOverview.scss @@ -3,8 +3,6 @@ .ydb-cluster-dashboard { &__dashboard-wrapper { gap: var(--g-spacing-6); - - padding-top: var(--g-spacing-4); } &__dashboard-wrapper_collapsed { @@ -28,18 +26,18 @@ height: 100%; } &__overview-wrapper { - --g-button-background-color-hover: var(--g-color-base-background); - --g-button-padding: 0; - - padding: var(--g-spacing-4); - border: 1px solid var(--g-color-line-generic); border-radius: 5px; - .g-button:active { - transform: unset; + .g-disclosure__trigger { + width: 100%; + height: 60px; + padding: var(--g-spacing-4); } } + &__disclosure-content { + padding: 0 var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-4); + } &__overview-wrapper_collapsed { &:hover { @@ -47,20 +45,6 @@ } } - &__disclosure-summary { - display: flex; - justify-content: space-between; - align-items: center; - - width: 100%; - height: 28px; - - cursor: pointer; - .g-button__text { - width: 100%; - } - } - &__card { min-width: 280px; height: 132px; diff --git a/src/containers/Cluster/ClusterOverview/ClusterOverview.tsx b/src/containers/Cluster/ClusterOverview/ClusterOverview.tsx index 05ab4a8570..9a9a24dfde 100644 --- a/src/containers/Cluster/ClusterOverview/ClusterOverview.tsx +++ b/src/containers/Cluster/ClusterOverview/ClusterOverview.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {ArrowToggle, Disclosure, Flex, Icon, Text} from '@gravity-ui/uikit'; +import {Disclosure, Flex, Icon, Text} from '@gravity-ui/uikit'; import {ResponseError} from '../../../components/Errors/ResponseError'; import { @@ -56,35 +56,34 @@ export function ClusterOverview(props: ClusterOverviewProps) { } return ( - - setExpandDashboard(!expandDashboard)} - > - - {(disclosureProps) => ( -
- - - - - {i18n('label_overview')} - - - {!expandDashboard && } - - -
- )} - + setExpandDashboard(!expandDashboard)} + className={b('overview-wrapper', {collapsed: !expandDashboard})} + summary={ + + + + + {i18n('label_overview')} + + + {!expandDashboard && } + + } + > +
- - +
+ ); } diff --git a/src/containers/Tenant/Healthcheck/Healthcheck.scss b/src/containers/Tenant/Healthcheck/Healthcheck.scss index fddc182c5c..d7d4c2789a 100644 --- a/src/containers/Tenant/Healthcheck/Healthcheck.scss +++ b/src/containers/Tenant/Healthcheck/Healthcheck.scss @@ -1,3 +1,5 @@ +@use '../../../styles/mixins'; + .ydb-healthcheck { &__stub-wrapper { margin: auto; @@ -41,6 +43,16 @@ animation: disclosure-collapsed 0.2s cubic-bezier(0.23, 1, 0.32, 1) forwards; } } + &__disclosure-trigger { + width: 100%; + @include mixins.button-reset(); + + &:focus-visible { + border-radius: var(--g-border-radius-s); + outline: 2px solid var(--g-color-line-focus); + outline-offset: -2px; + } + } &__issue-summary { padding: var(--g-spacing-4); @@ -52,6 +64,9 @@ background-color: var(--g-color-base-generic-ultralight); } } + &__issue-status { + text-align: start; + } &__issue-content { --g-definition-list-item-gap: var(--g-spacing-3); width: 100%; diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx index 6d2ed48733..b68f0acfc8 100644 --- a/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx +++ b/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx @@ -36,7 +36,7 @@ export function HealthcheckIssue({issue, expanded}: HealthcheckIssueProps) { {(props) => ( -
+
+ )}