diff --git a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js index 5fac044708..9183a64ec8 100644 --- a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js +++ b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js @@ -11,10 +11,9 @@ import {renderMapNodesTableIcon} from '../../../../../pages/navigation/content/M import ErrorBoundary from '../../../../../components/ErrorBoundary/ErrorBoundary'; import MetaTable from '../../../../../components/MetaTable/MetaTable'; import HelpLink from '../../../../../components/HelpLink/HelpLink'; -import {Checkbox, Loader} from '@gravity-ui/uikit'; +import {Checkbox, Loader, Popover} from '@gravity-ui/uikit'; import Error from '../../../../../components/Error/Error'; import Modal from '../../../../../components/Modal/Modal'; -import Label from '../../../../../components/Label/Label'; import { closeDeleteModal, @@ -77,8 +76,11 @@ export class DeleteObjectModal extends Component { togglePermanentlyDelete: PropTypes.func.isRequired, }; + permanentlyTooltipRef = React.createRef(); + permanentlyCheckboxRef = React.createRef(); + componentDidUpdate(prevProps) { - const {visible, item, getRealPath, getRealPaths, multipleMode} = this.props; + const {visible, item, getRealPath, getRealPaths, multipleMode, permanently} = this.props; if (!prevProps.visible && visible) { if (multipleMode) { @@ -87,6 +89,12 @@ export class DeleteObjectModal extends Component { getRealPath(item); } } + + if (permanently) { + this.permanentlyTooltipRef.current?.openTooltip(); + } else { + this.permanentlyTooltipRef.current?.closeTooltip(); + } } get content() { @@ -136,14 +144,22 @@ export class DeleteObjectModal extends Component { return (

- -

); } @@ -187,7 +203,6 @@ export class DeleteObjectModal extends Component { ); })} - {this.renderPermanentlyCheckbox()} ); @@ -241,8 +256,6 @@ export class DeleteObjectModal extends Component {

- - {this.renderPermanentlyCheckbox()} @@ -255,6 +268,11 @@ export class DeleteObjectModal extends Component { const helpLinkUrl = UIFactory.docsUrls['common:regular_system_processes']; const helpLink = helpLinkUrl !== '' ? : null; + const footerContent = ( +
+ {helpLink} {this.renderPermanentlyCheckbox()} +
+ ); return ( diff --git a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss index 00b0393445..2e15e62f52 100644 --- a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss +++ b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss @@ -39,7 +39,6 @@ &__delete { margin: 0; - margin-top: 30px; display: flex; justify-content: space-between; @@ -55,6 +54,23 @@ } } + &__footer { + display: flex; + flex-direction: row; + align-items: baseline; + gap: 16px; + } + + &__danger-popup { + --g-popup-background-color: var(--g-color-base-danger-heavy); + --g-popup-border-color: var(--g-color-line-danger); + } + + &__danger-popup-content { + padding: 8px; + min-height: 0; + } + &_loading, &_error { min-height: 125px;