feat: implement field deletion functionality with confirmation dialog and localization support (#1662)

Author: younocode

apps/nestjs-backend/src/features/field/field-calculate/field-converting-link.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, InternalServerErrorException } from '@nestjs/common';
-import type { ILinkCellValue, ILinkFieldOptions, IOtOperation } from '@teable/core';
+import type { FieldAction, ILinkCellValue, ILinkFieldOptions, IOtOperation } from '@teable/core';
 import {
   Relationship,
   RelationshipRevert,
@@ -455,11 +455,16 @@ export class FieldConvertingLinkService {
 
   async planResetLinkFieldLookupFieldId(
     lookupedTableId: string,
-    lookupedField: IFieldInstance
+    lookupedField: IFieldInstance,
+    fieldAction: FieldAction
   ): Promise<string[]> {
-    if (PRIMARY_SUPPORTED_TYPES.has(lookupedField.type)) {
+    if (fieldAction !== 'field|update' && fieldAction !== 'field|delete') {
       return [];
     }
+    if (fieldAction === 'field|update' && PRIMARY_SUPPORTED_TYPES.has(lookupedField.type)) {
+      return [];
+    }
+
     const prisma = this.prismaService.txClient();
 
     const lookupedFieldId = lookupedField.id;

apps/nestjs-backend/src/features/field/field-calculate/field-view-sync.service.ts

@@ -132,7 +132,8 @@ export class FieldViewSyncService {
     const fieldId = newField.id;
     const resetLinkFieldIds = await this.fieldConvertingLinkService.planResetLinkFieldLookupFieldId(
       tableId,
-      newField
+      newField,
+      'field|update'
     );
 
     if (isEmpty(resetLinkFieldIds)) {

apps/nestjs-backend/src/features/field/open-api/field-open-api.controller.ts

@@ -125,6 +125,12 @@ export class FieldOpenApiController {
     return await this.fieldOpenApiService.updateField(tableId, fieldId, updateFieldRo);
   }
 
+  @Permissions('field|delete')
+  @Delete(':fieldId/plan')
+  async planDeleteField(@Param('tableId') tableId: string, @Param('fieldId') fieldId: string) {
+    return await this.fieldOpenApiService.planDeleteField(tableId, fieldId);
+  }
+
   @Permissions('field|delete')
   @Delete(':fieldId')
   async deleteField(

apps/nestjs-backend/src/features/field/open-api/field-open-api.service.ts

@@ -86,6 +86,10 @@ export class FieldOpenApiService {
     return await this.graphService.planFieldConvert(tableId, fieldId, updateFieldRo);
   }
 
+  async planDeleteField(tableId: string, fieldId: string) {
+    return await this.graphService.planDeleteField(tableId, fieldId);
+  }
+
   async getFields(tableId: string, query: IGetFieldsQuery) {
     return await this.fieldService.getFieldsByQuery(tableId, {
       ...query,

apps/nestjs-backend/src/features/graph/graph.service.ts

@@ -8,6 +8,7 @@ import type {
   IGraphCombo,
   IPlanFieldVo,
   IPlanFieldConvertVo,
+  IPlanFieldDeleteVo,
 } from '@teable/openapi';
 import { Knex } from 'knex';
 import { groupBy, keyBy, uniq } from 'lodash';
@@ -351,7 +352,11 @@ export class GraphService {
     );
 
     const resetLinkFieldLookupFieldIds =
-      await this.fieldConvertingLinkService.planResetLinkFieldLookupFieldId(tableId, newField);
+      await this.fieldConvertingLinkService.planResetLinkFieldLookupFieldId(
+        tableId,
+        newField,
+        'field|update'
+      );
 
     return {
       graph,
@@ -361,6 +366,23 @@ export class GraphService {
     };
   }
 
+  async planDeleteField(tableId: string, fieldId: string): Promise<IPlanFieldDeleteVo> {
+    const res = await this.planField(tableId, fieldId);
+    const field = await this.fieldService.getField(tableId, fieldId);
+    const fieldInstance = createFieldInstanceByVo(field);
+    const resetLinkFieldLookupFieldIds =
+      await this.fieldConvertingLinkService.planResetLinkFieldLookupFieldId(
+        tableId,
+        fieldInstance,
+        'field|delete'
+      );
+
+    return {
+      ...res,
+      linkFieldCount: resetLinkFieldLookupFieldIds.length,
+    };
+  }
+
   private async affectedCellCount(
     hostFieldId: string,
     fieldIds: string[],

apps/nextjs-app/src/features/app/blocks/graph/FieldGraph.tsx

@@ -1,4 +1,4 @@
-import type { IFieldRo } from '@teable/core';
+import type { FieldAction, IFieldRo } from '@teable/core';
 import { ColorUtils } from '@teable/core';
 import { useLanDayjs } from '@teable/sdk/hooks';
 import { Badge } from '@teable/ui-lib/shadcn';
@@ -14,7 +14,12 @@ import { usePlan } from './usePlan';
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
 
-export const FieldGraph = (params: { tableId: string; fieldId?: string; fieldRo?: IFieldRo }) => {
+export const FieldGraph = (params: {
+  tableId: string;
+  fieldId?: string;
+  fieldRo?: IFieldRo;
+  fieldAction?: FieldAction;
+}) => {
   const ref = useRef(null);
   const planData = usePlan(params);
   const updateCellCount = planData?.updateCellCount;

apps/nextjs-app/src/features/app/blocks/graph/usePlan.ts

@@ -1,38 +1,59 @@
 import { useQuery } from '@tanstack/react-query';
-import type { IFieldRo } from '@teable/core';
-import { planField, planFieldCreate, planFieldConvert } from '@teable/openapi';
+import type { FieldAction, IFieldRo } from '@teable/core';
+import { planField, planFieldCreate, planFieldConvert, planFieldDelete } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
 
 export function usePlan({
   tableId,
   fieldId,
   fieldRo,
+  fieldAction,
 }: {
   tableId: string;
   fieldId?: string;
   fieldRo?: IFieldRo;
+  fieldAction?: FieldAction;
 }) {
+  // if fieldAction is not provided, we need to infer it from fieldId and fieldRo
+  let action = fieldAction;
+  if (!action && fieldId && fieldRo) {
+    action = 'field|update';
+  }
+  if (!action && !fieldId && fieldRo) {
+    action = 'field|create';
+  }
+  if (!action && fieldId && !fieldRo) {
+    action = 'field|read';
+  }
+
+  const { data: deletePlan } = useQuery({
+    queryKey: ReactQueryKeys.planFieldDelete(tableId, fieldId as string),
+    queryFn: ({ queryKey }) => planFieldDelete(queryKey[1], queryKey[2]).then((data) => data.data),
+    refetchOnWindowFocus: false,
+    enabled: action === 'field|delete',
+  });
+
   const { data: updatePlan } = useQuery({
     queryKey: ReactQueryKeys.planFieldConvert(tableId, fieldId as string, fieldRo as IFieldRo),
     queryFn: ({ queryKey }) =>
       planFieldConvert(queryKey[1], queryKey[2], queryKey[3]).then((data) => data.data),
     refetchOnWindowFocus: false,
-    enabled: !!(fieldId && fieldRo),
+    enabled: action === 'field|update',
   });
 
   const { data: createPlan } = useQuery({
     queryKey: ReactQueryKeys.planFieldCreate(tableId, fieldRo as IFieldRo),
     queryFn: ({ queryKey }) => planFieldCreate(queryKey[1], queryKey[2]).then((data) => data.data),
     refetchOnWindowFocus: false,
-    enabled: !!(!fieldId && fieldRo),
+    enabled: action === 'field|create',
   });
 
   const { data: staticPlan } = useQuery({
     queryKey: ReactQueryKeys.planField(tableId, fieldId as string),
     queryFn: ({ queryKey }) => planField(queryKey[1], queryKey[2]).then((data) => data.data),
     refetchOnWindowFocus: false,
-    enabled: !!(fieldId && !fieldRo),
+    enabled: action === 'field|read',
   });
 
-  return createPlan || staticPlan || updatePlan;
+  return deletePlan || updatePlan || createPlan || staticPlan;
 }

apps/nextjs-app/src/features/app/blocks/view/grid/components/FieldMenu.tsx

@@ -16,7 +16,7 @@ import {
   MagicAi,
 } from '@teable/icons';
 import type { IDuplicateFieldRo } from '@teable/openapi';
-import { deleteFields, duplicateField } from '@teable/openapi';
+import { duplicateField } from '@teable/openapi';
 import type { GridView } from '@teable/sdk';
 import {
   useFieldPermission,
@@ -44,8 +44,9 @@ import {
   SheetHeader,
 } from '@teable/ui-lib/shadcn';
 import { useTranslation } from 'next-i18next';
-import { Fragment, useRef } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
+import { FieldDeleteConfirmDialog } from '@/features/app/components/field-setting/field-delete-confirm-dialog/FieldDeleteConfirmDialog';
 import { FieldOperator } from '@/features/app/components/field-setting/type';
 import { tableConfig } from '@/features/i18n/table.config';
 import { useFieldSettingStore } from '../../field/useFieldSettingStore';
@@ -82,6 +83,14 @@ export const FieldMenu = () => {
   const fieldSettingRef = useRef<HTMLDivElement>(null);
   const { fields, aiEnable, onSelectionClear, onAutoFill } = headerMenu ?? {};
   const { filterRef, sortRef, groupRef } = useToolBarStore();
+  const emptyFieldMenu = !view || !fields?.length || !allFields.length;
+  const [deleteFieldDialog, setDeleteFieldDialog] = useState<{
+    open: boolean;
+    tableId?: string;
+    fieldIds?: string[];
+  }>({
+    open: false,
+  });
 
   const { mutateAsync: duplicateFieldFn } = useMutation({
     mutationFn: ({
@@ -99,7 +108,15 @@ export const FieldMenu = () => {
     closeHeaderMenu();
   });
 
-  if (!view || !fields?.length || !allFields.length) return null;
+  useEffect(() => {
+    if (emptyFieldMenu) {
+      setDeleteFieldDialog({ open: false });
+    }
+  }, [emptyFieldMenu]);
+
+  if (emptyFieldMenu) {
+    return null;
+  }
 
   const fieldIds = fields.map((f) => f.id);
 
@@ -350,10 +367,12 @@ export const FieldMenu = () => {
           const fieldIdsSet = new Set(fieldIds);
           const filteredFields = allFields.filter((f) => fieldIdsSet.has(f.id)).filter(Boolean);
           if (filteredFields.length === 0) return;
-          await deleteFields(
+
+          setDeleteFieldDialog({
+            open: true,
             tableId,
-            filteredFields.map((f) => f.id)
-          );
+            fieldIds: filteredFields.map((f) => f.id),
+          });
         },
       },
     ],
@@ -381,8 +400,11 @@ export const FieldMenu = () => {
                     if (disabled) return;
 
                     await onClick();
-                    onSelectionClear?.();
-                    closeHeaderMenu();
+                    // Don't auto-close menu for delete action
+                    if (type !== MenuItemType.Delete) {
+                      onSelectionClear?.();
+                      closeHeaderMenu();
+                    }
                   }}
                 >
                   {icon}
@@ -424,8 +446,11 @@ export const FieldMenu = () => {
                                 return;
                               }
                               await onClick();
-                              onSelectionClear?.();
-                              closeHeaderMenu();
+                              // Don't auto-close menu for delete action
+                              if (type !== MenuItemType.Delete) {
+                                onSelectionClear?.();
+                                closeHeaderMenu();
+                              }
                             }}
                           >
                             {icon}
@@ -442,6 +467,17 @@ export const FieldMenu = () => {
           </PopoverContent>
         </Popover>
       )}
+
+      <FieldDeleteConfirmDialog
+        tableId={deleteFieldDialog.tableId ?? ''}
+        fieldIds={deleteFieldDialog.fieldIds ?? []}
+        open={deleteFieldDialog.open}
+        onClose={() => {
+          setDeleteFieldDialog({ open: false });
+          onSelectionClear?.();
+          closeHeaderMenu();
+        }}
+      />
     </>
   );
 };

apps/nextjs-app/src/features/app/components/field-setting/field-delete-confirm-dialog/FieldDeleteConfirmDialog.tsx

@@ -0,0 +1,88 @@
+import { deleteFields } from '@teable/openapi';
+import { useFields, useFieldStaticGetter } from '@teable/sdk/hooks';
+import { ConfirmDialog } from '@teable/ui-lib/base';
+import { Button } from '@teable/ui-lib/shadcn';
+import { cn } from '@teable/ui-lib/shadcn/utils';
+import { first } from 'lodash';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import { DynamicFieldGraph } from '@/features/app/blocks/graph/DynamicFieldGraph';
+
+interface FieldDeleteConfirmDialogProps {
+  open: boolean;
+  tableId: string;
+  fieldIds: string[];
+  onClose?: () => void;
+}
+
+const FieldGraphListPanel = (props: { tableId: string; fieldIds: string[] }) => {
+  const { tableId, fieldIds } = props;
+  const fieldStaticGetter = useFieldStaticGetter();
+  const allFields = useFields();
+  const fields = allFields.filter((field) => fieldIds.includes(field.id));
+  const [activeFieldId, setActiveFieldId] = useState(first(fields)?.id);
+  return (
+    <>
+      <div className="w-full">
+        {fields.map((field) => {
+          const { Icon } = fieldStaticGetter(field.type, {
+            isLookup: field.isLookup,
+            hasAiConfig: Boolean(field.aiConfig),
+            deniedReadRecord: !field.canReadFieldRecord,
+          });
+          return (
+            <Button
+              key={field.id}
+              variant={'ghost'}
+              size={'xs'}
+              className={cn('font-normal shrink-0 truncate', {
+                'bg-secondary': activeFieldId === field.id,
+              })}
+              onClick={() => setActiveFieldId(field.id)}
+            >
+              <Icon className="size-4 text-sm" />
+              <span className={cn('truncate max-w-32')}>{field.name}</span>
+            </Button>
+          );
+        })}
+      </div>
+      <DynamicFieldGraph fieldId={activeFieldId} tableId={tableId} fieldAction="field|delete" />
+    </>
+  );
+};
+
+export const FieldDeleteConfirmDialog = (props: FieldDeleteConfirmDialogProps) => {
+  const { tableId, fieldIds, open, onClose } = props;
+  const { t } = useTranslation(['common', 'table']);
+
+  const close = () => {
+    onClose?.();
+  };
+
+  const actionDelete = async () => {
+    await deleteFields(tableId, fieldIds);
+    close();
+  };
+
+  return (
+    <ConfirmDialog
+      contentClassName="max-w-6xl"
+      title={t('table:table.actionTips.deleteFieldConfirmTitle')}
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose?.();
+        }
+      }}
+      content={
+        <>
+          <FieldGraphListPanel tableId={tableId} fieldIds={fieldIds} />
+        </>
+      }
+      cancelText={t('common:actions.cancel')}
+      confirmText={t('common:actions.confirm')}
+      onCancel={close}
+      onConfirm={actionDelete}
+    />
+  );
+};