fix(CriticalActionDialog): change layout (#3746)

Raubzeug · web-flow · commit 5b825ff03514 · 2026-04-06T10:49:22.000Z
diff --git a/src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.tsx b/src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.tsx
@@ -11,10 +11,13 @@ interface ButtonWithConfirmDialogProps<T, K> {
     onConfirmAction: (isRetry?: boolean) => Promise<T>;
     onConfirmActionSuccess?: (() => Promise<K>) | VoidFunction;
     dialogHeader: string;
-    dialogText: string;
+    dialogText?: string;
+    dialogWarning?: string;
     retryButtonText?: string;
+    applyButtonText?: string;
     buttonDisabled?: ButtonProps['disabled'];
     buttonView?: ButtonProps['view'];
+    applyButtonView?: ButtonProps['view'];
     buttonWidth?: ButtonProps['width'];
     buttonClassName?: ButtonProps['className'];
     withPopover?: boolean;
@@ -29,6 +32,8 @@ export function ButtonWithConfirmDialog<T, K>({
     onConfirmActionSuccess,
     dialogHeader,
     dialogText,
+    dialogWarning,
+    applyButtonText,
     retryButtonText,
     buttonDisabled = false,
     buttonView = 'action',
@@ -38,6 +43,7 @@ export function ButtonWithConfirmDialog<T, K>({
     popoverContent,
     popoverPlacement = 'right',
     popoverDisabled = true,
+    applyButtonView,
 }: ButtonWithConfirmDialogProps<T, K>) {
     const [isConfirmDialogVisible, setIsConfirmDialogVisible] = React.useState(false);
     const [buttonLoading, setButtonLoading] = React.useState(false);
@@ -100,10 +106,13 @@ export function ButtonWithConfirmDialog<T, K>({
             <CriticalActionDialog
                 visible={isConfirmDialogVisible}
                 header={dialogHeader}
-                text={dialogText}
+                description={dialogText}
+                warningText={dialogWarning}
+                applyButtonText={applyButtonText}
                 withRetry={withRetry}
                 retryButtonText={retryButtonText}
                 onConfirm={handleConfirmAction}
+                applyButtonView={applyButtonView}
                 onConfirmActionSuccess={handleConfirmActionSuccess}
                 onConfirmActionError={handleConfirmActionError}
                 onClose={() => {
diff --git a/src/components/CriticalActionDialog/CriticalActionDialog.scss b/src/components/CriticalActionDialog/CriticalActionDialog.scss
@@ -1,43 +1,3 @@
 .ydb-critical-dialog {
     padding-top: var(--g-spacing-3);
-
-    &__warning-icon {
-        margin-right: 16px;
-
-        color: var(--ydb-color-status-yellow);
-    }
-
-    &__error-icon {
-        height: 24px;
-        margin-right: 16px;
-
-        color: var(--ydb-color-status-red);
-    }
-
-    &__body {
-        display: flex;
-        flex-direction: column;
-        gap: var(--g-spacing-6);
-    }
-
-    &__body-message {
-        display: flex;
-        align-items: center;
-
-        &_warning,
-        &_error {
-            padding: var(--g-spacing-4) var(--g-spacing-5);
-
-            border: 1px solid;
-            border-radius: var(--g-modal-border-radius, 5px);
-        }
-
-        &_warning {
-            border-color: var(--ydb-color-status-yellow);
-        }
-
-        &_error {
-            border-color: var(--ydb-color-status-red);
-        }
-    }
 }
diff --git 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 {Checkbox, Dialog, Icon} from '@gravity-ui/uikit';
+import {Alert, Checkbox, Dialog, Flex, Text} from '@gravity-ui/uikit';
+import type {ButtonView} from '@gravity-ui/uikit';
 
 import {ResultIssues} from '../../containers/Tenant/Query/Issues/Issues';
 import type {IResponseError} from '../../types/api/error';
@@ -36,9 +36,12 @@ const parseError = (error: unknown) => {
 interface CriticalActionDialogProps<T> {
     visible: boolean;
     header?: React.ReactNode;
-    text?: string;
+    description?: string;
+    warningText?: string;
     withRetry?: boolean;
     retryButtonText?: string;
+    applyButtonText?: string;
+    applyButtonView?: ButtonView;
     withCheckBox?: boolean;
     onClose: VoidFunction;
     onConfirm: (isRetry?: boolean) => Promise<T>;
@@ -49,9 +52,12 @@ interface CriticalActionDialogProps<T> {
 export function CriticalActionDialog<T>({
     visible,
     header,
-    text,
+    description,
+    warningText,
     withRetry,
     retryButtonText,
+    applyButtonText = criticalActionDialogKeyset('button-confirm'),
+    applyButtonView,
     withCheckBox,
     onClose,
     onConfirm,
@@ -101,13 +107,8 @@ export function CriticalActionDialog<T>({
             return (
                 <React.Fragment>
                     <Dialog.Header caption={header} />
-                    <Dialog.Body className={b('body')}>
-                        <div className={b('body-message', {error: true})}>
-                            <span className={b('error-icon')}>
-                                <CircleXmarkFill width="24" height="22" />
-                            </span>
-                            {parseError(error)}
-                        </div>
+                    <Dialog.Body>
+                        <Alert theme="danger" message={parseError(error)} view="outlined" />
                     </Dialog.Body>
 
                     <Dialog.Footer
@@ -130,23 +131,24 @@ export function CriticalActionDialog<T>({
             <React.Fragment>
                 <Dialog.Header caption={header} />
 
-                <Dialog.Body className={b('body')}>
-                    <div className={b('body-message', {warning: true})}>
-                        <span className={b('warning-icon')}>
-                            <Icon data={TriangleExclamationFill} size={24} />
-                        </span>
-                        {text}
-                    </div>
-
-                    {renderCheckBox()}
+                <Dialog.Body>
+                    <Flex direction="column" gap={4}>
+                        {description && <Text as="div">{description}</Text>}
+                        {warningText && <Alert theme="warning" message={warningText} />}
+                        {renderCheckBox()}
+                    </Flex>
                 </Dialog.Body>
 
                 <Dialog.Footer
                     loading={isLoading}
                     preset="default"
-                    textButtonApply={criticalActionDialogKeyset('button-confirm')}
+                    textButtonApply={applyButtonText}
                     textButtonCancel={criticalActionDialogKeyset('button-cancel')}
-                    propsButtonApply={{type: 'submit', disabled: withCheckBox && !checkBoxChecked}}
+                    propsButtonApply={{
+                        type: 'submit',
+                        disabled: withCheckBox && !checkBoxChecked,
+                        view: applyButtonView,
+                    }}
                     onClickButtonCancel={onClose}
                     onClickButtonApply={() => onApply()}
                 />
diff --git a/src/components/EvictVDiskButton/EvictVDiskButton.tsx b/src/components/EvictVDiskButton/EvictVDiskButton.tsx
@@ -77,6 +77,9 @@ export const EvictVDiskButton = ({
             buttonWidth={fullWidth ? 'max' : undefined}
             dialogHeader={evictVDiskButtonKeyset('title_evict-dialog')}
             dialogText={evictVDiskButtonKeyset('confirm_evict')}
+            dialogWarning={evictVDiskButtonKeyset('alert_evict')}
+            applyButtonText={evictVDiskButtonKeyset('action_evict-short')}
+            applyButtonView="outlined-danger"
             retryButtonText={evictVDiskButtonKeyset('action_force-evict')}
             withPopover
             popoverContent={
diff --git a/src/components/EvictVDiskButton/i18n/en.json b/src/components/EvictVDiskButton/i18n/en.json
@@ -1,8 +1,10 @@
 {
   "action_evict": "Evict VDisk",
+  "action_evict-short": "Evict",
   "action_force-evict": "Evict anyway",
-  "title_evict-dialog": "Evict VDisk",
-  "confirm_evict": "VDisk will be evicted. Do you want to proceed?",
+  "title_evict-dialog": "Evict VDisk?",
+  "confirm_evict": "The VDisk will be evicted from the node. All data will be moved to other VDisks in the storage pool.",
+  "alert_evict": "This action is irreversible. It cannot be cancelled.",
   "alert_not-allowed": "You don't have enough rights to evict VDisk",
   "alert_donor-mode-impossible": "Evicting a donor VDisk is not possible"
 }
diff --git a/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx b/src/containers/PDiskPage/DecommissionButton/DecommissionButton.tsx
@@ -136,7 +136,7 @@ export function DecommissionButton({
             <CriticalActionDialog
                 visible={Boolean(newDecommission)}
                 header={pDiskPageKeyset('decommission-dialog-title')}
-                text={getDecommissionWarningText(newDecommission)}
+                warningText={getDecommissionWarningText(newDecommission)}
                 withRetry={withRetry}
                 withCheckBox
                 retryButtonText={pDiskPageKeyset('decommission-dialog-force-change')}
diff --git a/src/containers/PDiskPage/PDiskPage.tsx b/src/containers/PDiskPage/PDiskPage.tsx
@@ -187,7 +187,7 @@ export function PDiskPage() {
                     buttonDisabled={!pDiskParamsDefined || !isUserAllowedToMakeChanges}
                     buttonView="normal"
                     dialogHeader={pDiskPageKeyset('restart-pdisk-dialog-header')}
-                    dialogText={pDiskPageKeyset('restart-pdisk-dialog-text')}
+                    dialogWarning={pDiskPageKeyset('restart-pdisk-dialog-text')}
                     retryButtonText={pDiskPageKeyset('force-restart-pdisk-button')}
                     withPopover
                     popoverContent={pDiskPageKeyset('restart-pdisk-not-allowed')}
diff --git a/src/containers/Tablet/components/TabletControls/TabletControls.tsx b/src/containers/Tablet/components/TabletControls/TabletControls.tsx
@@ -42,7 +42,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         <Flex gap={2} wrap="nowrap">
             <ButtonWithConfirmDialog
                 dialogHeader={i18n('dialog.kill-header')}
-                dialogText={i18n('dialog.kill-text')}
+                dialogWarning={i18n('dialog.kill-text')}
                 onConfirmAction={() => killTablet({id: TabletId}).unwrap()}
                 buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
                 withPopover
diff --git a/src/containers/Tablets/TabletsTable.tsx b/src/containers/Tablets/TabletsTable.tsx
@@ -179,17 +179,17 @@ function TabletActions(tablet: TTabletStateInfo) {
 
     if (isFollower) {
         popoverContent = i18n('controls.kill-impossible-follower');
-    } else if (!isUserAllowedToMakeChanges) {
-        popoverContent = i18n('controls.kill-not-allowed');
-    } else {
+    } else if (isUserAllowedToMakeChanges) {
         popoverContent = i18n('dialog.kill-header');
+    } else {
+        popoverContent = i18n('controls.kill-not-allowed');
     }
 
     return (
         <ButtonWithConfirmDialog
             buttonView="outlined"
             dialogHeader={i18n('dialog.kill-header')}
-            dialogText={i18n('dialog.kill-text')}
+            dialogWarning={i18n('dialog.kill-text')}
             onConfirmAction={() => {
                 return killTablet({id}).unwrap();
             }}

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,10 @@`
`1`	`1`	`{`
`2`	`2`	`"action_evict": "Evict VDisk",`
	`3`	`+ "action_evict-short": "Evict",`
`3`	`4`	`"action_force-evict": "Evict anyway",`
`4`		`- "title_evict-dialog": "Evict VDisk",`
`5`		`- "confirm_evict": "VDisk will be evicted. Do you want to proceed?",`
	`5`	`+ "title_evict-dialog": "Evict VDisk?",`
	`6`	`+ "confirm_evict": "The VDisk will be evicted from the node. All data will be moved to other VDisks in the storage pool.",`
	`7`	`+ "alert_evict": "This action is irreversible. It cannot be cancelled.",`
`6`	`8`	`"alert_not-allowed": "You don't have enough rights to evict VDisk",`
`7`	`9`	`"alert_donor-mode-impossible": "Evicting a donor VDisk is not possible"`
`8`	`10`	`}`