feat(FR-2846): move deployment delete into a more menu next to edit

Author: yomybaby

react/src/components/DeploymentConfigurationSection.tsx

@@ -2,27 +2,38 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
+import { DeploymentConfigurationSectionDeleteMutation } from '../__generated__/DeploymentConfigurationSectionDeleteMutation.graphql';
 import { DeploymentConfigurationSectionQuery } from '../__generated__/DeploymentConfigurationSectionQuery.graphql';
 import type { DeploymentRevisionDetail_revision$key } from '../__generated__/DeploymentRevisionDetail_revision.graphql';
+import { useWebUINavigate } from '../hooks';
 import DeploymentRevisionDetail from './DeploymentRevisionDetail';
 import DeploymentRevisionDetailDrawer from './DeploymentRevisionDetailDrawer';
 import DeploymentRevisionHistoryTab from './DeploymentRevisionHistoryTab';
 import DeploymentSettingModal from './DeploymentSettingModal';
 import DeploymentTagChips from './DeploymentTagChips';
 import ErrorBoundaryWithNullFallback from './ErrorBoundaryWithNullFallback';
-import { EditOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  DeleteFilled,
+  EditOutlined,
+  LoadingOutlined,
+  MoreOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
 import { useToggle } from 'ahooks';
 import {
   Alert,
+  App,
   Button,
   Descriptions,
+  Dropdown,
   Empty,
   Skeleton,
   Typography,
   theme,
 } from 'antd';
 import {
   BAICard,
+  BAIConfirmModalWithInput,
   BAIFetchKeyButton,
   BAIFlex,
   BAIId,
@@ -31,12 +42,15 @@ import {
   BooleanTag,
   INITIAL_FETCH_KEY,
   filterOutEmpty,
+  toLocalId,
+  useBAILogger,
   useInterval,
 } from 'backend.ai-ui';
 import { parseAsStringLiteral, useQueryState } from 'nuqs';
 import React, { Suspense, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { graphql, useLazyLoadQuery } from 'react-relay';
+import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
+import { useLocation } from 'react-router-dom';
 
 interface DeploymentConfigurationSectionProps {
   deploymentId: string;
@@ -262,6 +276,10 @@ const DeploymentConfigurationCards: React.FC<{
   'use memo';
   const { t } = useTranslation();
   const { token } = theme.useToken();
+  const { message } = App.useApp();
+  const { logger } = useBAILogger();
+  const webuiNavigate = useWebUINavigate();
+  const location = useLocation();
 
   const [activeRevisionTab, setActiveRevisionTab] = useQueryState(
     'revisionTab',
@@ -278,6 +296,18 @@ const DeploymentConfigurationCards: React.FC<{
     settingModalOpen,
     { setLeft: closeSettingModal, setRight: openSettingModal },
   ] = useToggle(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  const [commitDeleteMutation, isInFlightDeleteMutation] =
+    useMutation<DeploymentConfigurationSectionDeleteMutation>(graphql`
+      mutation DeploymentConfigurationSectionDeleteMutation(
+        $input: DeleteDeploymentInput!
+      ) {
+        deleteModelDeployment(input: $input) {
+          id
+        }
+      }
+    `);
 
   const { deployment } = useLazyLoadQuery<DeploymentConfigurationSectionQuery>(
     graphql`
@@ -337,6 +367,35 @@ const DeploymentConfigurationCards: React.FC<{
   // the deploying revision matches the current revision.
   useInterval(onRefetch, isDeployingDifferentRevision ? 5000 : null);
 
+  const deploymentName = deployment?.metadata.name ?? '';
+  const isAdminContext = location.pathname.startsWith('/admin-deployments');
+  const listPath = isAdminContext ? '/admin-deployments' : '/deployments';
+
+  const handleDelete = () => {
+    if (!deployment?.id) return;
+    commitDeleteMutation({
+      variables: {
+        input: {
+          id: toLocalId(deployment.id) ?? deployment.id,
+        },
+      },
+      onCompleted: (_response, errors) => {
+        if (errors && errors.length > 0) {
+          logger.error('Failed to delete deployment', errors);
+          message.error(t('deployment.FailedToDeleteDeployment'));
+          return;
+        }
+        message.success(t('deployment.DeploymentDeleted'));
+        setIsDeleteModalOpen(false);
+        webuiNavigate(listPath);
+      },
+      onError: (error) => {
+        logger.error('Failed to delete deployment', error);
+        message.error(t('deployment.FailedToDeleteDeployment'));
+      },
+    });
+  };
+
   return (
     <>
       <BAICard
@@ -351,6 +410,24 @@ const DeploymentConfigurationCards: React.FC<{
             >
               {t('button.Edit')}
             </Button>
+            <Dropdown
+              trigger={['click']}
+              menu={{
+                items: [
+                  {
+                    key: 'delete',
+                    label: t('deployment.DeleteDeployment'),
+                    icon: <DeleteFilled />,
+                    danger: true,
+                    disabled:
+                      isDeploymentDestroying || isInFlightDeleteMutation,
+                    onClick: () => setIsDeleteModalOpen(true),
+                  },
+                ],
+              }}
+            >
+              <Button icon={<MoreOutlined />} aria-label={t('button.More')} />
+            </Dropdown>
           </BAIFlex>
         }
         styles={{ body: { paddingTop: 0 } }}
@@ -445,6 +522,27 @@ const DeploymentConfigurationCards: React.FC<{
           if (success) onRefetch();
         }}
       />
+      <BAIConfirmModalWithInput
+        open={isDeleteModalOpen}
+        title={t('deployment.DeleteDeployment')}
+        content={
+          <BAIFlex direction="column" gap="md" align="stretch">
+            <Alert type="warning" title={t('dialog.warning.CannotBeUndone')} />
+            <BAIFlex>
+              <Typography.Text style={{ marginRight: token.marginXXS }}>
+                {t('dialog.TypeNameToConfirmDeletion')}
+              </Typography.Text>
+              (<Typography.Text code>{deploymentName}</Typography.Text>)
+            </BAIFlex>
+          </BAIFlex>
+        }
+        confirmText={deploymentName}
+        inputProps={{ placeholder: deploymentName }}
+        okText={t('button.Delete')}
+        okButtonProps={{ loading: isInFlightDeleteMutation }}
+        onOk={handleDelete}
+        onCancel={() => setIsDeleteModalOpen(false)}
+      />
     </>
   );
 };

resources/i18n/en.json

@@ -362,6 +362,7 @@
     "Generate": "Generate",
     "GoBackToStartPage": "Go back to the {{title}} page",
     "Info": "Info",
+    "More": "More",
     "Move": "Move",
     "Next": "Next",
     "No": "No",