diff --git a/package-lock.json b/package-lock.json
index ebb65209c4..1cae98e5b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
"@gravity-ui/paranoid": "^2.0.1",
"@gravity-ui/react-data-table": "^2.1.1",
"@gravity-ui/table": "^0.5.0",
- "@gravity-ui/uikit": "^6.20.1",
+ "@gravity-ui/uikit": "^6.33.0",
"@gravity-ui/websql-autocomplete": "^9.1.0",
"@hookform/resolvers": "^3.9.0",
"@reduxjs/toolkit": "^2.2.3",
@@ -3927,9 +3927,9 @@
}
},
"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.6.0",
+ "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.6.0.tgz",
+ "integrity": "sha512-ftMLGZy7migLEtPkZa8jM6onipIeEOnEg9976RRpg3f39H+Q2bYYAGMjU+NJpWQ90ZDp6ztYLt5WAMEg248tEg=="
},
"node_modules/@gravity-ui/icons": {
"version": "2.10.0",
@@ -4044,18 +4044,18 @@
"dev": true
},
"node_modules/@gravity-ui/uikit": {
- "version": "6.20.1",
- "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.20.1.tgz",
- "integrity": "sha512-BtkEWkpPLvXm7C/R23jp1nRwWkcd+pmBbsuJZU4qoYASFk0uhq7apkrrPcfCX+9Qk3PXiZg8xHwUlqjG33y0bw==",
+ "version": "6.33.0",
+ "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.33.0.tgz",
+ "integrity": "sha512-QBIkSABA/psZSUhyF9Xgdhzxk4Z4OS/+eZAruEbqlH8QYMweUanlYMmSZoVGzHBxsKO4l/Qxr+MybPY5bOsWkQ==",
"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",
@@ -20634,13 +20634,13 @@
}
},
"node_modules/rc-slider": {
- "version": "10.5.0",
- "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.5.0.tgz",
- "integrity": "sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==",
+ "version": "10.6.2",
+ "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.6.2.tgz",
+ "integrity": "sha512-FjkoFjyvUQWcBo1F3RgSglky3ar0+qHLM41PlFVYB4Bj3RD8E/Mv7kqMouLFBU+3aFglMzzctAIWRwajEuueSw==",
"dependencies": {
"@babel/runtime": "^7.10.1",
"classnames": "^2.2.5",
- "rc-util": "^5.27.0"
+ "rc-util": "^5.36.0"
},
"engines": {
"node": ">=8.x"
@@ -20651,9 +20651,9 @@
}
},
"node_modules/rc-util": {
- "version": "5.39.1",
- "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.39.1.tgz",
- "integrity": "sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==",
+ "version": "5.43.0",
+ "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz",
+ "integrity": "sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==",
"dependencies": {
"@babel/runtime": "^7.18.3",
"react-is": "^18.2.0"
@@ -20664,9 +20664,9 @@
}
},
"node_modules/rc-util/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
},
"node_modules/react": {
"version": "18.3.1",
diff --git a/package.json b/package.json
index 1a13dc9776..e8e155fcbd 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"@gravity-ui/paranoid": "^2.0.1",
"@gravity-ui/react-data-table": "^2.1.1",
"@gravity-ui/table": "^0.5.0",
- "@gravity-ui/uikit": "^6.20.1",
+ "@gravity-ui/uikit": "^6.33.0",
"@gravity-ui/websql-autocomplete": "^9.1.0",
"@hookform/resolvers": "^3.9.0",
"@reduxjs/toolkit": "^2.2.3",
diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
index 3769c6ba94..667862ad87 100644
--- a/src/components/EntityStatus/EntityStatus.scss
+++ b/src/components/EntityStatus/EntityStatus.scss
@@ -1,12 +1,12 @@
@import '../../styles/mixins.scss';
.entity-status {
+ --button-width: 28px;
position: relative;
display: inline-flex;
align-items: center;
- min-width: 90px;
max-width: 100%;
height: 100%;
@@ -20,6 +20,18 @@
color: var(--g-color-text-secondary);
@include table-hover-appearing-button();
+
+ &_visible {
+ opacity: 1;
+ }
+ }
+
+ &__wrapper {
+ position: relative;
+
+ overflow: hidden;
+
+ padding-right: var(--button-width);
}
&__controls-wrapper {
@@ -34,13 +46,18 @@
width: 0;
height: 100%;
- background-color: var(--g-color-base-float);
+ &_visible {
+ width: min-content;
+ padding: var(--g-spacing-1);
+ }
.data-table__row:hover &,
.ydb-paginated-table__row:hover &,
.ydb-tree-view__item & {
width: min-content;
padding: var(--g-spacing-1);
+
+ background-color: var(--g-color-base-float);
}
}
@@ -57,13 +74,18 @@
}
&__link {
+ display: inline-block;
overflow: hidden;
+ width: calc(100% + var(--button-width));
+ margin-top: 5px;
+
white-space: nowrap;
text-overflow: ellipsis;
}
&__link_with-left-trim {
+ text-align: end;
direction: rtl;
.entity-status__name {
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
index 7866c92b2e..1f73a96a4f 100644
--- a/src/components/EntityStatus/EntityStatus.tsx
+++ b/src/components/EntityStatus/EntityStatus.tsx
@@ -28,8 +28,6 @@ interface EntityStatusProps {
clipboardButtonAlwaysVisible?: boolean;
className?: string;
-
- additionalControls?: React.ReactNode;
}
export function EntityStatus({
@@ -50,8 +48,6 @@ export function EntityStatus({
clipboardButtonAlwaysVisible = false,
className,
-
- additionalControls,
}: EntityStatusProps) {
const renderIcon = () => {
if (!showStatus) {
@@ -93,22 +89,29 @@ export function EntityStatus({
{label}
)}
- {renderLink()}
-
- {hasClipboardButton && (
-
- )}
- {additionalControls && (
- {additionalControls}
- )}
-
+ {(path || name) && (
+
+
+ {renderLink()}
+
+ {hasClipboardButton && (
+
+
+
+ )}
+
+ )}
);
}
diff --git a/src/components/MonitoringButton/MonitoringButton.scss b/src/components/MonitoringButton/MonitoringButton.scss
deleted file mode 100644
index 09e1fb1110..0000000000
--- a/src/components/MonitoringButton/MonitoringButton.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.kv-monitoring-button {
- display: none;
-
- &_visible {
- display: inline-block;
- }
-
- .data-table__row:hover & {
- display: inline-block;
- }
-}
diff --git a/src/components/MonitoringButton/MonitoringButton.tsx b/src/components/MonitoringButton/MonitoringButton.tsx
index 6a36d19e46..2c57b5dd13 100644
--- a/src/components/MonitoringButton/MonitoringButton.tsx
+++ b/src/components/MonitoringButton/MonitoringButton.tsx
@@ -1,32 +1,20 @@
import type {ButtonSize} from '@gravity-ui/uikit';
import {Button, Icon} from '@gravity-ui/uikit';
-import {cn} from '../../utils/cn';
-
import monitoringIcon from '../../assets/icons/monitoring.svg';
-import './MonitoringButton.scss';
-
-const b = cn('kv-monitoring-button');
-
interface MonitoringButtonProps {
className?: string;
- visible?: boolean;
href: string;
size?: ButtonSize;
}
-export function MonitoringButton({
- href,
- visible = false,
- className,
- size = 's',
-}: MonitoringButtonProps) {
+export function MonitoringButton({href, className, size = 'xs'}: MonitoringButtonProps) {
return (