From f3491db04a18aabd9f0493d3907e7283de5b4afb Mon Sep 17 00:00:00 2001
From: agatha197 <28584164+agatha197@users.noreply.github.com>
Date: Wed, 4 Sep 2024 11:13:47 +0000
Subject: [PATCH] feat: show confirm modal instead of popconfirm when deleting
 endpoint (#2678)

### TL;DR

Improved the delete functionality for endpoints in the EndpointListPage component.

### What changed?

- **Replaced the Popconfirm component with a modal confirmation dialog for deleting endpoints.**
- Removed the `terminatingModelService` state and directly used the row data for deletion.
- Updated the error handling and success messages for the terminate mutation.
- Simplified the delete button's onClick handler.

### How to test?

1. Navigate to the EndpointListPage.
2. Attempt to delete an endpoint by clicking the delete button.
3. Verify that a modal confirmation dialog appears.
4. Confirm the deletion and check if the endpoint is removed successfully.
5. Test error scenarios by mocking a failed deletion and verify error messages.

### Why make this change?

This change enhances the user experience by providing a more robust and consistent deletion process. The modal confirmation offers better visibility and control over the deletion action, while the improved error handling ensures users receive accurate feedback on the operation's success or failure.
---
 react/src/pages/EndpointListPage.tsx | 120 +++++++++++++--------------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/react/src/pages/EndpointListPage.tsx b/react/src/pages/EndpointListPage.tsx
index d683ed2a40..fbc3aac975 100644
--- a/react/src/pages/EndpointListPage.tsx
+++ b/react/src/pages/EndpointListPage.tsx
@@ -25,7 +25,7 @@ import {
 } from '@ant-design/icons';
 import { useRafInterval } from 'ahooks';
 import { useLocalStorageState } from 'ahooks';
-import { Button, Table, Typography, theme, message, Popconfirm } from 'antd';
+import { Button, Table, Typography, theme, App } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import graphql from 'babel-plugin-relay/macro';
 import { default as dayjs } from 'dayjs';
@@ -51,13 +51,12 @@ export type Endpoint = NonNullable<
 
 const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
   const { t } = useTranslation();
+  const { message, modal } = App.useApp();
   const baiClient = useSuspendedBackendaiClient();
   const webuiNavigate = useWebUINavigate();
   const { token } = theme.useToken();
   const curProject = useCurrentProjectValue();
   const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
-  const [terminatingModelService, setTerminatingModelService] =
-    useState<Endpoint | null>(null);
 
   // const [paginationState, setPaginationState] = useState<{
   const [paginationState] = useState<{
@@ -143,65 +142,66 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
               webuiNavigate('/service/update/' + row.endpoint_id);
             }}
           />
-          <Popconfirm
-            title={t('dialog.ask.DoYouWantToDeleteSomething', {
-              name: row.name,
-            })}
-            description={t('dialog.warning.CannotBeUndone')}
-            okType="danger"
-            okText={t('button.Delete')}
-            onConfirm={() => {
-              setOptimisticDeletingId(row.endpoint_id);
-              // FIXME: any better idea for handling result?
-              terminateModelServiceMutation.mutate(
-                terminatingModelService?.endpoint_id || '',
-                {
-                  onSuccess: (res) => {
-                    startRefetchTransition(() => {
-                      updateServicesFetchKey();
-                    });
-                    // FIXME: temporally refer to mutate input to message
-                    message.success(
-                      t('modelService.ServiceTerminated', {
-                        name: terminatingModelService?.name,
-                      }),
-                    );
-                  },
-                  onError: (err) => {
-                    console.log(err);
-                    message.error(t('modelService.FailedToTerminateService'));
-                  },
+          <Button
+            type="text"
+            icon={
+              <DeleteOutlined
+                style={
+                  row.desired_session_count < 0 ||
+                  row.status?.toLowerCase() === 'destroying'
+                    ? undefined
+                    : {
+                        color: token.colorError,
+                      }
+                }
+              />
+            }
+            loading={
+              terminateModelServiceMutation.isPending &&
+              optimisticDeletingId === row.endpoint_id
+            }
+            disabled={
+              row.desired_session_count < 0 ||
+              row.status?.toLowerCase() === 'destroying'
+            }
+            onClick={() => {
+              modal.confirm({
+                title: t('dialog.ask.DoYouWantToDeleteSomething', {
+                  name: row.name,
+                }),
+                content: t('dialog.warning.CannotBeUndone'),
+                okText: t('button.Delete'),
+                okButtonProps: {
+                  danger: true,
+                  type: 'primary',
                 },
-              );
+                onOk: () => {
+                  setOptimisticDeletingId(row.endpoint_id);
+                  // FIXME: any better idea for handling result?
+                  row.endpoint_id  && terminateModelServiceMutation.mutate(row.endpoint_id, {
+                    onSuccess: (res) => {
+                      startRefetchTransition(() => {
+                        updateServicesFetchKey();
+                      });
+                      // FIXME: temporally refer to mutate input to message
+                      if(res.success) {
+                        message.success(
+                          t('modelService.ServiceTerminated', {
+                            name: row?.name,
+                          }),
+                        );
+                      } else {
+                        message.error(t('modelService.FailedToTerminateService'));
+                      }
+                    },
+                    onError: (err) => {
+                      message.error(t('modelService.FailedToTerminateService'));
+                    },
+                  });
+                },
+              });
             }}
-          >
-            <Button
-              type="text"
-              icon={
-                <DeleteOutlined
-                  style={
-                    row.desired_session_count < 0 ||
-                    row.status?.toLowerCase() === 'destroying'
-                      ? undefined
-                      : {
-                          color: token.colorError,
-                        }
-                  }
-                />
-              }
-              loading={
-                terminateModelServiceMutation.isPending &&
-                optimisticDeletingId === row.endpoint_id
-              }
-              disabled={
-                row.desired_session_count < 0 ||
-                row.status?.toLowerCase() === 'destroying'
-              }
-              onClick={() => {
-                setTerminatingModelService(row);
-              }}
-            />
-          </Popconfirm>
+          />
         </Flex>
       ),
     },