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

@@ -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, {

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', {