fix(DecommissionButton): add checkbox to dialog (#1294)

Author: artemmufazalov

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,13 +42,15 @@ export function CriticalActionDialog<T>({
     text,
     withRetry,
     retryButtonText,
+    withCheckBox,
     onClose,
     onConfirm,
     onConfirmActionSuccess,
     onConfirmActionError,
 }: 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,14 +127,16 @@ export function CriticalActionDialog<T>({
                         </span>
                         {text}
                     </div>
+
+                    {renderCheckBox()}
                 </Dialog.Body>
 
                 <Dialog.Footer
                     loading={isLoading}
                     preset="default"
                     textButtonApply={criticalActionDialogKeyset('button-confirm')}
                     textButtonCancel={criticalActionDialogKeyset('button-cancel')}
-                    propsButtonApply={{type: 'submit'}}
+                    propsButtonApply={{type: 'submit', disabled: withCheckBox && !checkBoxChecked}}
                     onClickButtonCancel={onClose}
                     onClickButtonApply={() => onApply()}
                 />

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"
 }

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}