feat(PDiskPage): add decommission button (#1168)

Author: artemmufazalov

src/assets/icons/decommission.svg

@@ -3,13 +3,15 @@ import React from 'react';
 import {Button, Popover} from '@gravity-ui/uikit';
 import type {ButtonProps, PopoverProps} from '@gravity-ui/uikit';
 
-import {CriticalActionDialog} from '../CriticalActionDialog';
+import {CriticalActionDialog} from '../CriticalActionDialog/CriticalActionDialog';
+import {isErrorWithRetry} from '../CriticalActionDialog/utils';
 
 interface ButtonWithConfirmDialogProps<T, K> {
     children: React.ReactNode;
     onConfirmAction: (isRetry?: boolean) => Promise<T>;
     onConfirmActionSuccess?: (() => Promise<K>) | VoidFunction;
-    dialogContent: string;
+    dialogHeader: string;
+    dialogText: string;
     retryButtonText?: string;
     buttonDisabled?: ButtonProps['disabled'];
     buttonView?: ButtonProps['view'];
@@ -24,7 +26,8 @@ export function ButtonWithConfirmDialog<T, K>({
     children,
     onConfirmAction,
     onConfirmActionSuccess,
-    dialogContent,
+    dialogHeader,
+    dialogText,
     retryButtonText,
     buttonDisabled = false,
     buttonView = 'action',
@@ -41,29 +44,20 @@ export function ButtonWithConfirmDialog<T, K>({
     const handleConfirmAction = async (isRetry?: boolean) => {
         setButtonLoading(true);
         await onConfirmAction(isRetry);
-        setButtonLoading(false);
     };
 
     const handleConfirmActionSuccess = async () => {
         setWithRetry(false);
 
-        if (onConfirmActionSuccess) {
-            setButtonLoading(true);
-
-            try {
-                await onConfirmActionSuccess();
-            } catch {
-            } finally {
-                setButtonLoading(false);
-            }
+        try {
+            await onConfirmActionSuccess?.();
+        } finally {
+            setButtonLoading(false);
         }
     };
 
     const handleConfirmActionError = (error: unknown) => {
-        const isWithRetry = Boolean(
-            error && typeof error === 'object' && 'retryPossible' in error && error.retryPossible,
-        );
-        setWithRetry(isWithRetry);
+        setWithRetry(isErrorWithRetry(error));
         setButtonLoading(false);
     };
 
@@ -101,7 +95,8 @@ export function ButtonWithConfirmDialog<T, K>({
         <React.Fragment>
             <CriticalActionDialog
                 visible={isConfirmDialogVisible}
-                text={dialogContent}
+                header={dialogHeader}
+                text={dialogText}
                 withRetry={withRetry}
                 retryButtonText={retryButtonText}
                 onConfirm={handleConfirmAction}

src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.tsx

@@ -1,5 +1,5 @@
 .ydb-critical-dialog {
-    padding-top: var(--g-spacing-7);
+    padding-top: var(--g-spacing-3);
 
     &__warning-icon {
         margin-right: 16px;
@@ -15,7 +15,29 @@
     }
 
     &__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);
+        }
     }
 }

src/components/CriticalActionDialog/CriticalActionDialog.scss

@@ -25,7 +25,8 @@ const parseError = (error: IResponseError) => {
 
 interface CriticalActionDialogProps<T> {
     visible: boolean;
-    text: string;
+    header?: React.ReactNode;
+    text?: string;
     withRetry?: boolean;
     retryButtonText?: string;
     onClose: VoidFunction;
@@ -36,6 +37,7 @@ interface CriticalActionDialogProps<T> {
 
 export function CriticalActionDialog<T>({
     visible,
+    header,
     text,
     withRetry,
     retryButtonText,
@@ -64,15 +66,22 @@ export function CriticalActionDialog<T>({
             });
     };
 
+    const handleTransitionExited = () => {
+        setError(undefined);
+    };
+
     const renderDialogContent = () => {
         if (error) {
             return (
                 <React.Fragment>
+                    <Dialog.Header caption={header} />
                     <Dialog.Body className={b('body')}>
-                        <span className={b('error-icon')}>
-                            <CircleXmarkFill width="24" height="22" />
-                        </span>
-                        {parseError(error)}
+                        <div className={b('body-message', {error: true})}>
+                            <span className={b('error-icon')}>
+                                <CircleXmarkFill width="24" height="22" />
+                            </span>
+                            {parseError(error)}
+                        </div>
                     </Dialog.Body>
 
                     <Dialog.Footer
@@ -93,11 +102,15 @@ export function CriticalActionDialog<T>({
 
         return (
             <React.Fragment>
+                <Dialog.Header caption={header} />
+
                 <Dialog.Body className={b('body')}>
-                    <span className={b('warning-icon')}>
-                        <Icon data={TriangleExclamationFill} size={24} />
-                    </span>
-                    {text}
+                    <div className={b('body-message', {warning: true})}>
+                        <span className={b('warning-icon')}>
+                            <Icon data={TriangleExclamationFill} size={24} />
+                        </span>
+                        {text}
+                    </div>
                 </Dialog.Body>
 
                 <Dialog.Footer
@@ -120,7 +133,7 @@ export function CriticalActionDialog<T>({
             className={b()}
             size="s"
             onClose={onClose}
-            onTransitionExited={() => setError(undefined)}
+            onTransitionExited={handleTransitionExited}
         >
             {renderDialogContent()}
         </Dialog>

src/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -0,0 +1,9 @@
+interface ErrorWithRetry {
+    retryPossible: boolean;
+}
+
+export const isErrorWithRetry = (error: unknown): error is ErrorWithRetry => {
+    return Boolean(
+        error && typeof error === 'object' && 'retryPossible' in error && error.retryPossible,
+    );
+};

src/components/CriticalActionDialog/index.ts

@@ -11,22 +11,14 @@ interface EntityPageTitleProps {
     status: EFlag;
     id: React.ReactNode;
     className?: string;
-    children?: React.ReactNode;
 }
 
-export function EntityPageTitle({
-    entityName,
-    status,
-    id,
-    className,
-    children,
-}: EntityPageTitleProps) {
+export function EntityPageTitle({entityName, status, id, className}: EntityPageTitleProps) {
     return (
         <div className={b(null, className)}>
             <span className={b('prefix')}>{entityName}</span>
             <StatusIcon className={b('icon')} status={status} size="s" />
             {id}
-            {children}
         </div>
     );
 }

src/components/CriticalActionDialog/utils.ts

@@ -46,7 +46,6 @@ function getPDiskInfo<T extends PreparedPDisk>({
         SerialNumber,
         TotalSize,
         AllocatedSize,
-        DecommitStatus,
         StatusV2,
         NumActiveSlots,
         ExpectedSlotCount,
@@ -58,12 +57,6 @@ function getPDiskInfo<T extends PreparedPDisk>({
 
     const generalInfo: InfoViewerItem[] = [];
 
-    if (valueIsDefined(DecommitStatus)) {
-        generalInfo.push({
-            label: pDiskInfoKeyset('decomission-status'),
-            value: DecommitStatus.replace('DECOMMIT_', ''),
-        });
-    }
     if (valueIsDefined(Category)) {
         generalInfo.push({label: pDiskInfoKeyset('type'), value: Type});
     }

src/components/EntityPageTitle/EntityPageTitle.tsx

@@ -1,5 +1,4 @@
 {
-  "decomission-status": "Decomission Status",
   "type": "Type",
   "path": "Path",
   "guid": "GUID",

src/components/PDiskInfo/PDiskInfo.tsx

@@ -0,0 +1,6 @@
+.ydb-pdisk-decommission-button {
+    &__button,
+    &__popup {
+        width: 160px;
+    }
+}