feat(Navigation): move "premanently delete" checkbox to confirmation …

…modal footer [YTFRONT-4245]
ytsaurus · Nov 1, 2024 · e227ac5 · e227ac5
1 parent a549db4
commit e227ac5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/...src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js b/...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 (
             <p className={block('delete', {permanently})}>
                 <Checkbox
+                    ref={this.permanentlyCheckboxRef}
                     size="l"
                     disabled={inTrash}
                     checked={permanently}
                     content="Delete permanently"
                     onChange={togglePermanentlyDelete}
                 />
-
-                <Label theme="danger" text="This action CANNOT be undone" />
+                <Popover
+                    content="This action CANNOT be undone"
+                    ref={this.permanentlyTooltipRef}
+                    anchorRef={this.permanentlyCheckboxRef}
+                    tooltipClassName={block('danger-popup')}
+                    tooltipContentClassName={block('danger-popup-content')}
+                    theme="special"
+                    placement="bottom"
+                />
             </p>
         );
     }
@@ -187,7 +203,6 @@ export class DeleteObjectModal extends Component {
                             );
                         })}
                     </div>
-                    {this.renderPermanentlyCheckbox()}
                 </div>
             </ErrorBoundary>
         );
@@ -241,8 +256,6 @@ export class DeleteObjectModal extends Component {
                         </p>
 
                         <MetaTable className={block('meta')} items={buildItems()} />
-
-                        {this.renderPermanentlyCheckbox()}
                     </div>
                 </div>
             </ErrorBoundary>
@@ -255,6 +268,11 @@ export class DeleteObjectModal extends Component {
         const helpLinkUrl = UIFactory.docsUrls['common:regular_system_processes'];
         const helpLink =
             helpLinkUrl !== '' ? <HelpLink text="Documentation" url={helpLinkUrl} /> : null;
+        const footerContent = (
+            <div className={block('footer')}>
+                {helpLink} {this.renderPermanentlyCheckbox()}
+            </div>
+        );
 
         return (
             <Modal
@@ -264,7 +282,7 @@ export class DeleteObjectModal extends Component {
                 confirmTheme={theme}
                 confirmText="Delete"
                 content={this.content}
-                footerContent={helpLink}
+                footerContent={footerContent}
                 onCancel={closeDeleteModal}
                 onConfirm={this.handleDeleteClick}
             />

diff --git a/...c/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss b/...c/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;