From 612b54c19d9ea7ebaf3bef327895069d257cc773 Mon Sep 17 00:00:00 2001
From: ironAiken2 <51399982+ironAiken2@users.noreply.github.com>
Date: Fri, 6 Sep 2024 09:45:55 +0000
Subject: [PATCH] fix: disable edit button based on endpoint status (#2695)

### TL;DR

An update that prevents modifications to an endpoint in `destroyed` and `destroying` state.

### What changed?
- Updated status checks to include both 'destroying' and 'destroyed' states
- Disabled certain buttons and actions when an endpoint is in 'destroying' or 'destroyed' state

[Additionally]
- Changed "LLM Playground" tooltip to "LLM Chat Test" in EndpointDetailPage

### How to test?

1. Navigate to the Endpoint List and Detail pages
2. Verify that buttons are properly disabled for endpoints in 'destroying' or 'destroyed' states
3. Check that the tooltip for the LLM chat test button now reads "LLM Chat Test"
4. Attempt to perform actions on endpoints in various states to ensure correct behavior

### Why make this change?

This change improves the user experience by:
1. Providing more accurate UI feedback for endpoint statuses
2. Preventing actions on endpoints that are no longer active
3. Ensuring consistency in how endpoint statuses are handled across the application
4. Clarifying the purpose of the LLM chat test button with an updated tooltip

---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after
---
 react/src/pages/EndpointDetailPage.tsx | 22 +++++++++++++++++----
 react/src/pages/EndpointListPage.tsx   | 27 ++++++++++++++++----------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx
index 0a28766bd0..0f4c5f4f74 100644
--- a/react/src/pages/EndpointDetailPage.tsx
+++ b/react/src/pages/EndpointDetailPage.tsx
@@ -18,6 +18,7 @@ import {
 } from '../hooks';
 import { useCurrentUserInfo } from '../hooks/backendai';
 import { useTanMutation } from '../hooks/reactQueryAlias';
+import { isDestroyingStatus } from './EndpointListPage';
 import {
   EndpointDetailPageQuery,
   EndpointDetailPageQuery$data,
@@ -300,7 +301,7 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
       children: endpoint?.url ? (
         <>
           <Typography.Text copyable>{endpoint?.url}</Typography.Text>
-          <Tooltip title={'LLM Playground'}>
+          <Tooltip title={'LLM Chat Test'}>
             <Button
               type="link"
               icon={<BotMessageSquareIcon />}
@@ -472,6 +473,10 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
           <Button
             loading={isPendingRefetch}
             icon={<ReloadOutlined />}
+            disabled={isDestroyingStatus(
+              endpoint?.desired_session_count,
+              endpoint?.status,
+            )}
             onClick={() => {
               startRefetchTransition(() => {
                 updateFetchKey();
@@ -489,8 +494,10 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
             type="primary"
             icon={<SettingOutlined />}
             disabled={
-              (endpoint?.desired_session_count || 0) < 0 ||
-              endpoint?.status === 'DESTROYING' ||
+              isDestroyingStatus(
+                endpoint?.desired_session_count,
+                endpoint?.status,
+              ) ||
               (!!endpoint?.created_user_email &&
                 endpoint?.created_user_email !== currentUser.email)
             }
@@ -517,7 +524,10 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
           <Button
             type="primary"
             icon={<PlusOutlined />}
-            disabled={endpoint?.status === 'DESTROYING'}
+            disabled={isDestroyingStatus(
+              endpoint?.desired_session_count,
+              endpoint?.status,
+            )}
             onClick={() => {
               setIsOpenTokenGenerationModal(true);
             }}
@@ -600,6 +610,10 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
             <Button
               icon={<SyncOutlined />}
               loading={mutationToSyncRoutes.isPending}
+              disabled={isDestroyingStatus(
+                endpoint?.desired_session_count,
+                endpoint?.status,
+              )}
               onClick={() => {
                 endpoint?.endpoint_id &&
                   mutationToSyncRoutes.mutateAsync(endpoint?.endpoint_id, {
diff --git a/react/src/pages/EndpointListPage.tsx b/react/src/pages/EndpointListPage.tsx
index 3863f2290e..e57b5c5d15 100644
--- a/react/src/pages/EndpointListPage.tsx
+++ b/react/src/pages/EndpointListPage.tsx
@@ -50,6 +50,16 @@ export type Endpoint = NonNullable<
   >[0]
 >;
 
+export const isDestroyingStatus = (
+  desiredSessionCount: number | null | undefined,
+  status: string | null | undefined,
+) => {
+  return (
+    (desiredSessionCount ?? 0) < 0 ||
+    _.includes(['DESTROYED', 'DESTROYING'], status ?? '')
+  );
+};
+
 type LifecycleStage = 'created&destroying' | 'destroyed';
 
 const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
@@ -137,8 +147,7 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
             type="text"
             icon={<SettingOutlined />}
             style={
-              row.desired_session_count < 0 ||
-              row.status?.toLowerCase() === 'destroying' ||
+              isDestroyingStatus(row?.desired_session_count, row?.status) ||
               (!!row.created_user_email &&
                 row.created_user_email !== currentUser.email)
                 ? {
@@ -149,8 +158,7 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
                   }
             }
             disabled={
-              row.desired_session_count < 0 ||
-              row.status?.toLowerCase() === 'destroying' ||
+              isDestroyingStatus(row?.desired_session_count, row?.status) ||
               (!!row.created_user_email &&
                 row.created_user_email !== currentUser.email)
             }
@@ -163,8 +171,7 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
             icon={
               <DeleteOutlined
                 style={
-                  row.desired_session_count < 0 ||
-                  row.status?.toLowerCase() === 'destroying'
+                  isDestroyingStatus(row?.desired_session_count, row?.status)
                     ? undefined
                     : {
                         color: token.colorError,
@@ -176,10 +183,10 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
               terminateModelServiceMutation.isPending &&
               optimisticDeletingId === row.endpoint_id
             }
-            disabled={
-              row.desired_session_count < 0 ||
-              row.status?.toLowerCase() === 'destroying'
-            }
+            disabled={isDestroyingStatus(
+              row?.desired_session_count,
+              row?.status,
+            )}
             onClick={() => {
               modal.confirm({
                 title: t('dialog.ask.DoYouWantToDeleteSomething', {