From 3a79e11f563f81ac3a416b2edb49b3dfbfc90737 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Thu, 5 Sep 2024 18:31:12 +0300
Subject: [PATCH] fix(DecommissionButton): add checkbox to dialog

---
 .../CriticalActionDialog.tsx                  | 22 +++++++++++++++++--
 .../CriticalActionDialog/i18n/en.json         |  4 +++-
 .../DecommissionButton/DecommissionButton.tsx |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/CriticalActionDialog/CriticalActionDialog.tsx b/src/components/CriticalActionDialog/CriticalActionDialog.tsx
index 5e7c1ea696..ba11153b03 100644
--- a/src/components/CriticalActionDialog/CriticalActionDialog.tsx
+++ b/src/components/CriticalActionDialog/CriticalActionDialog.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {CircleXmarkFill, TriangleExclamationFill} from '@gravity-ui/icons';
-import {Dialog, Icon} from '@gravity-ui/uikit';
+import {Checkbox, Dialog, Icon} from '@gravity-ui/uikit';
 
 import type {IResponseError} from '../../types/api/error';
 import {cn} from '../../utils/cn';
@@ -29,6 +29,7 @@ interface CriticalActionDialogProps<T> {
     text?: string;
     withRetry?: boolean;
     retryButtonText?: string;
+    withCheckBox?: boolean;
     onClose: VoidFunction;
     onConfirm: (isRetry?: boolean) => Promise<T>;
     onConfirmActionSuccess: VoidFunction;
@@ -41,6 +42,7 @@ export function CriticalActionDialog<T>({
     text,
     withRetry,
     retryButtonText,
+    withCheckBox,
     onClose,
     onConfirm,
     onConfirmActionSuccess,
@@ -48,6 +50,7 @@ export function CriticalActionDialog<T>({
 }: CriticalActionDialogProps<T>) {
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState<IResponseError>();
+    const [checkBoxChecked, setCheckBoxChecked] = React.useState<boolean>(false);
 
     const onApply = async (isRetry?: boolean) => {
         setIsLoading(true);
@@ -68,6 +71,19 @@ export function CriticalActionDialog<T>({
 
     const handleTransitionExited = () => {
         setError(undefined);
+        setCheckBoxChecked(false);
+    };
+
+    const renderCheckBox = () => {
+        if (withCheckBox) {
+            return (
+                <Checkbox checked={checkBoxChecked} onUpdate={setCheckBoxChecked}>
+                    {criticalActionDialogKeyset('checkbox-text')}
+                </Checkbox>
+            );
+        }
+
+        return null;
     };
 
     const renderDialogContent = () => {
@@ -111,6 +127,8 @@ export function CriticalActionDialog<T>({
                         </span>
                         {text}
                     </div>
+
+                    {renderCheckBox()}
                 </Dialog.Body>
 
                 <Dialog.Footer
@@ -118,7 +136,7 @@ export function CriticalActionDialog<T>({
                     preset="default"
                     textButtonApply={criticalActionDialogKeyset('button-confirm')}
                     textButtonCancel={criticalActionDialogKeyset('button-cancel')}
-                    propsButtonApply={{type: 'submit'}}
+                    propsButtonApply={{type: 'submit', disabled: withCheckBox && !checkBoxChecked}}
                     onClickButtonCancel={onClose}
                     onClickButtonApply={() => onApply()}
                 />
diff --git a/src/components/CriticalActionDialog/i18n/en.json b/src/components/CriticalActionDialog/i18n/en.json
index 9ee11a8a13..0e508a84b0 100644
--- a/src/components/CriticalActionDialog/i18n/en.json
+++ b/src/components/CriticalActionDialog/i18n/en.json
@@ -5,5 +5,7 @@
   "button-confirm": "Confirm",
   "button-retry": "Retry",
   "button-cancel": "Cancel",
-  "button-close": "Close"
+  "button-close": "Close",
+
+  "checkbox-text": "I understand what I'm doing"
 }
diff --git a/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx b/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx
index 86b25e7a95..1ba9392ec0 100644
--- a/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx
+++ b/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx
@@ -138,6 +138,7 @@ export function DecommissionButton({
                 header={pDiskPageKeyset('decommission-dialog-title')}
                 text={getDecommissionWarningText(newDecommission)}
                 withRetry={withRetry}
+                withCheckBox
                 retryButtonText={pDiskPageKeyset('decommission-dialog-force-change')}
                 onConfirm={handleConfirmAction}
                 onConfirmActionSuccess={handleConfirmActionSuccess}