fix(Tablet): correctly process error in dialog action (#758)

Author: artemmufazalov

src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.tsx

@@ -0,0 +1,75 @@
+import {useState, type ReactNode} from 'react';
+
+import {Button, type ButtonProps} from '@gravity-ui/uikit';
+
+import {CriticalActionDialog} from '../CriticalActionDialog';
+
+interface ButtonWithConfirmDialogProps<T, K> {
+    children: ReactNode;
+    onConfirmAction: () => Promise<T>;
+    onConfirmActionSuccess?: (() => Promise<K>) | VoidFunction;
+    dialogContent: string;
+    buttonDisabled?: ButtonProps['disabled'];
+    buttonView?: ButtonProps['view'];
+    buttonClassName?: ButtonProps['className'];
+}
+
+export function ButtonWithConfirmDialog<T, K>({
+    children,
+    onConfirmAction,
+    onConfirmActionSuccess,
+    dialogContent,
+    buttonDisabled = false,
+    buttonView = 'action',
+    buttonClassName,
+}: ButtonWithConfirmDialogProps<T, K>) {
+    const [isConfirmDialogVisible, setIsConfirmDialogVisible] = useState(false);
+    const [buttonLoading, setButtonLoading] = useState(false);
+
+    const handleConfirmAction = async () => {
+        setButtonLoading(true);
+        await onConfirmAction();
+        setButtonLoading(false);
+    };
+
+    const handleConfirmActionSuccess = async () => {
+        if (onConfirmActionSuccess) {
+            setButtonLoading(true);
+
+            try {
+                await onConfirmActionSuccess();
+            } catch {
+            } finally {
+                setButtonLoading(false);
+            }
+        }
+    };
+
+    const handleConfirmActionError = () => {
+        setButtonLoading(false);
+    };
+
+    return (
+        <>
+            <CriticalActionDialog
+                visible={isConfirmDialogVisible}
+                text={dialogContent}
+                onConfirm={handleConfirmAction}
+                onConfirmActionSuccess={handleConfirmActionSuccess}
+                onConfirmActionError={handleConfirmActionError}
+                onClose={() => {
+                    setIsConfirmDialogVisible(false);
+                }}
+            />
+            <Button
+                onClick={() => setIsConfirmDialogVisible(true)}
+                view={buttonView}
+                disabled={buttonDisabled}
+                loading={!buttonDisabled && buttonLoading}
+                className={buttonClassName}
+            >
+                {children}
+            </Button>
+        </>
+    );
+}

src/components/CriticalActionDialog/CriticalActionDialog.scss

@@ -1,32 +1,21 @@
 .ydb-critical-dialog {
-    width: 252px !important;
+    width: 400px;
 
     &__warning-icon {
         margin-right: 16px;
     }
 
+    &__error-icon {
+        height: 24px;
+        margin-right: 16px;
+
+        color: var(--ydb-color-status-red);
+    }
+
     &__body {
         display: flex;
         align-items: center;
 
         padding: 16px 16px 0;
     }
-
-    & .yc-dialog-footer {
-        padding: 20px 4px 4px;
-    }
-
-    & .yc-dialog-footer__children {
-        display: none;
-    }
-
-    & .yc-dialog-footer__button {
-        box-sizing: border-box;
-        min-width: 120px;
-        margin: 0;
-    }
-
-    & .yc-dialog-footer__button_action_cancel {
-        margin-right: 4px;
-    }
 }

src/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -1,43 +1,87 @@
 import {FormEvent, useState} from 'react';
 import cn from 'bem-cn-lite';
 import {Dialog} from '@gravity-ui/uikit';
+import {CircleXmarkFill} from '@gravity-ui/icons';
 
+import type {IResponseError} from '../../types/api/error';
 import {Icon} from '../Icon';
+import {criticalActionDialogKeyset} from './i18n';
 
 import './CriticalActionDialog.scss';
 
 const b = cn('ydb-critical-dialog');
 
-interface CriticalActionDialogProps {
+const parseError = (error: IResponseError) => {
+    if (error.status === 403) {
+        return criticalActionDialogKeyset('no-rights-error');
+    }
+    if (error.statusText) {
+        return error.statusText;
+    }
+
+    return criticalActionDialogKeyset('default-error');
+};
+
+interface CriticalActionDialogProps<T> {
     visible: boolean;
     text: string;
     onClose: VoidFunction;
-    onConfirm: () => Promise<unknown>;
-    onConfirmActionFinish: VoidFunction;
+    onConfirm: () => Promise<T>;
+    onConfirmActionSuccess: VoidFunction;
+    onConfirmActionError: VoidFunction;
 }
 
-export const CriticalActionDialog = ({
+export function CriticalActionDialog<T>({
     visible,
     text,
     onClose,
     onConfirm,
-    onConfirmActionFinish,
-}: CriticalActionDialogProps) => {
+    onConfirmActionSuccess,
+    onConfirmActionError,
+}: CriticalActionDialogProps<T>) {
     const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<IResponseError>();
 
     const onSubmit = async (e: FormEvent) => {
         e.preventDefault();
         setIsLoading(true);
 
-        return onConfirm().then(() => {
-            onConfirmActionFinish();
-            setIsLoading(false);
-            onClose();
-        });
+        return onConfirm()
+            .then(() => {
+                onConfirmActionSuccess();
+                onClose();
+            })
+            .catch((err) => {
+                onConfirmActionError();
+                setError(err);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
     };
 
-    return (
-        <Dialog open={visible} hasCloseButton={false} className={b()} size="s" onClose={onClose}>
+    const renderDialogContent = () => {
+        if (error) {
+            return (
+                <>
+                    <Dialog.Body className={b('body')}>
+                        <span className={b('error-icon')}>
+                            <CircleXmarkFill width="24" height="22" />
+                        </span>
+                        {parseError(error)}
+                    </Dialog.Body>
+
+                    <Dialog.Footer
+                        loading={false}
+                        preset="default"
+                        textButtonCancel={criticalActionDialogKeyset('button-close')}
+                        onClickButtonCancel={onClose}
+                    />
+                </>
+            );
+        }
+
+        return (
             <form onSubmit={onSubmit}>
                 <Dialog.Body className={b('body')}>
                     <span className={b('warning-icon')}>
@@ -49,13 +93,26 @@ export const CriticalActionDialog = ({
                 <Dialog.Footer
                     loading={isLoading}
                     preset="default"
-                    textButtonApply="Confirm"
-                    textButtonCancel="Cancel"
+                    textButtonApply={criticalActionDialogKeyset('button-confirm')}
+                    textButtonCancel={criticalActionDialogKeyset('button-cancel')}
                     propsButtonApply={{type: 'submit'}}
                     onClickButtonCancel={onClose}
                     onClickButtonApply={() => {}}
                 />
             </form>
+        );
+    };
+
+    return (
+        <Dialog
+            open={visible}
+            hasCloseButton={false}
+            className={b()}
+            size="s"
+            onClose={onClose}
+            onTransitionExited={() => setError(undefined)}
+        >
+            {renderDialogContent()}
         </Dialog>
     );
-};
+}

src/components/CriticalActionDialog/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "default-error": "Something went wrong, action cannot be completed",
+  "no-rights-error": "You don't have enough rights to complete the operation",
+
+  "button-confirm": "Confirm",
+  "button-cancel": "Cancel",
+  "button-close": "Close"
+}

src/components/CriticalActionDialog/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-critical-action-dialog';
+
+export const criticalActionDialogKeyset = registerKeysets(COMPONENT, {en});

src/containers/Tablet/Tablet.tsx

@@ -73,7 +73,7 @@ export const Tablet = () => {
     }, [dispatch, tablet]);
 
     const fetchData = useCallback(() => {
-        dispatch(getTablet(id));
+        return dispatch(getTablet(id));
     }, [dispatch, id]);
 
     useAutofetcher(fetchData, [fetchData], true);