From 70598ef10ab1db60f31cd32e810f02a04ac94b2d Mon Sep 17 00:00:00 2001
From: pabolkovdn <pabolkovdn@yandex-team.ru>
Date: Tue, 5 Nov 2024 13:06:31 +0300
Subject: [PATCH] fix(Navigation/DeleteModal): make header of deleting items
 list and  "permanently delete" checkbox is sticky [YTFRONT-4245]

---
 .../DeleteObjectModal/DeleteObjectModal.js    | 13 +++++++----
 .../DeleteObjectModal/DeleteObjectModal.scss  | 23 +++++++++++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

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..4ca7b7c250 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
@@ -155,11 +155,13 @@ export class DeleteObjectModal extends Component {
             <ErrorBoundary>
                 <div className={block({multiple: true})}>
                     <div className={block('table')}>
-                        <div className={block('preview-icon')} />
-                        <div className={block('preview-name')}>Name</div>
-                        <div className={block('preview-disk-space')}>Disk space</div>
-                        <div className={block('preview-node-count')}>Node count</div>
-                        <div className={block('preview-node-count')}>Row count</div>
+                        <div className={block('table-header')}>
+                            <div className={block('preview-icon')} />
+                            <div className={block('preview-name')}>Name</div>
+                            <div className={block('preview-disk-space')}>Disk space</div>
+                            <div className={block('preview-node-count')}>Node count</div>
+                            <div className={block('preview-node-count')}>Row count</div>
+                        </div>
 
                         {map_(multipleInfo, ({path, resourceUsage}, index) => {
                             const {type, titleUnquoted, rows, unmergedRows} = item[index];
@@ -265,6 +267,7 @@ export class DeleteObjectModal extends Component {
                 confirmText="Delete"
                 content={this.content}
                 footerContent={helpLink}
+                contentClassName={block('content')}
                 onCancel={closeDeleteModal}
                 onConfirm={this.handleDeleteClick}
             />
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..978450cd7f 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
@@ -7,14 +7,29 @@
         font-weight: bold;
     }
 
+    &__content {
+        padding: 0 30px;
+    }
+
     &__table {
         display: grid;
         grid-template-columns: 10px 1fr 70px 80px 75px;
-        grid-template-rows: 20px;
+        grid-template-rows: auto 20px;
         grid-gap: 12px 20px;
         align-items: center;
     }
 
+    &__table-header {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        position: sticky;
+        top: 0;
+        padding-top: 15px;
+        background-color: var(--g-color-base-modal);
+        z-index: 1;
+    }
+
     &__object {
         margin-bottom: 15px;
         display: flex;
@@ -38,8 +53,12 @@
     }
 
     &__delete {
+        position: sticky;
+        bottom: 0;
+        padding: 16px 0;
         margin: 0;
-        margin-top: 30px;
+        margin-top: 14px;
+        background: var(--g-color-base-modal);
         display: flex;
         justify-content: space-between;