refactor(web): migrate annotation selection to checkbox group (#36370)

2026-05-25 19:00:43 -04:00 · 2026-05-19 13:40:24 +08:00
parent 04d62867af
commit 2031d31ee8
6 changed files with 134 additions and 137 deletions
--- a/web/app/components/app/annotation/tests/batch-action.spec.tsx
+++ b/web/app/components/app/annotation/tests/batch-action.spec.tsx
@@ -6,14 +6,14 @@ describe('BatchAction', () => {
  const baseProps = {
    selectedIds: ['1', '2', '3'],
    onBatchDelete: vi.fn(),
-    onCancel: vi.fn(),
+    onSelectedIdsChange: vi.fn(),
  }

  beforeEach(() => {
    vi.clearAllMocks()
  })

-  it('should show the selected count and trigger cancel action', () => {
+  it('should show the selected count and clear selection through selection change', () => {
    render(<BatchAction {...baseProps} className="custom-class" />)

    expect(screen.getByText('3')).toBeInTheDocument()
@@ -21,7 +21,7 @@ describe('BatchAction', () => {

    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))

-    expect(baseProps.onCancel).toHaveBeenCalledTimes(1)
+    expect(baseProps.onSelectedIdsChange).toHaveBeenCalledWith([])
  })

  it('should confirm before running batch delete', async () => {
--- a/web/app/components/app/annotation/tests/index.spec.tsx
+++ b/web/app/components/app/annotation/tests/index.spec.tsx
@@ -67,7 +67,7 @@ vi.mock('../header-opts', () => ({
 let latestListProps: any

 vi.mock('../list', () => ({
-  default: (props: any) => {
+  List: (props: any) => {
    latestListProps = props
    if (!props.list.length)
      return <div data-testid="list-empty" />
@@ -440,7 +440,7 @@ describe('Annotation', () => {
      latestListProps.onSelectedIdsChange([annotation.id])
    })
    await act(async () => {
-      latestListProps.onCancel()
+      latestListProps.onSelectedIdsChange([])
    })

    expect(latestListProps.selectedIds).toEqual([])
--- a/web/app/components/app/annotation/tests/list.spec.tsx
+++ b/web/app/components/app/annotation/tests/list.spec.tsx
@@ -1,7 +1,7 @@
 import type { AnnotationItem } from '../type'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import * as React from 'react'
-import List from '../list'
+import { List } from '../list'

 const mockFormatTime = vi.fn(() => 'formatted-time')

@@ -36,7 +36,6 @@ describe('List', () => {
        selectedIds={[]}
        onSelectedIdsChange={vi.fn()}
        onBatchDelete={vi.fn()}
-        onCancel={vi.fn()}
      />,
    )

@@ -57,12 +56,11 @@ describe('List', () => {
        selectedIds={[]}
        onSelectedIdsChange={onSelectedIdsChange}
        onBatchDelete={vi.fn()}
-        onCancel={vi.fn()}
      />,
    )

    fireEvent.click(screen.getByRole('checkbox', { name: 'A' }))
-    expect(onSelectedIdsChange).toHaveBeenCalledWith(['a'])
+    expect(onSelectedIdsChange.mock.calls.at(-1)?.[0]).toEqual(['a'])

    rerender(
      <List
@@ -72,14 +70,13 @@ describe('List', () => {
        selectedIds={['a']}
        onSelectedIdsChange={onSelectedIdsChange}
        onBatchDelete={vi.fn()}
-        onCancel={vi.fn()}
      />,
    )
    fireEvent.click(screen.getByRole('checkbox', { name: 'A' }))
-    expect(onSelectedIdsChange).toHaveBeenCalledWith([])
+    expect(onSelectedIdsChange.mock.calls.at(-1)?.[0]).toEqual([])

    fireEvent.click(screen.getByRole('checkbox', { name: 'common.operation.selectAll' }))
-    expect(onSelectedIdsChange).toHaveBeenCalledWith(['a', 'b'])
+    expect(onSelectedIdsChange.mock.calls.at(-1)?.[0]).toEqual(['a', 'b'])
  })

  it('should confirm before removing an annotation and expose batch actions', async () => {
@@ -93,7 +90,6 @@ describe('List', () => {
        selectedIds={[item.id]}
        onSelectedIdsChange={vi.fn()}
        onBatchDelete={vi.fn()}
-        onCancel={vi.fn()}
      />,
    )

--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -7,8 +7,8 @@ import {
  AlertDialogContent,
  AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiDeleteBinLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,14 +20,14 @@ type IBatchActionProps = {
  className?: string
  selectedIds: string[]
  onBatchDelete: () => Promise<void>
-  onCancel: () => void
+  onSelectedIdsChange: (selectedIds: string[]) => void
 }

 const BatchAction: FC<IBatchActionProps> = ({
  className,
  selectedIds,
  onBatchDelete,
-  onCancel,
+  onSelectedIdsChange,
 }) => {
  const { t } = useTranslation()
  const [isShowDeleteConfirm, {
@@ -46,34 +46,35 @@ const BatchAction: FC<IBatchActionProps> = ({
    setIsNotDeleting()
  }
  return (
-    <div className={cn('pointer-events-none flex w-full justify-center', className)}>
-      <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]">
+    <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
+      <div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
        <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
-          <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface">
+          <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
            {selectedIds.length}
          </span>
-          <span className="text-[13px] leading-[16px] font-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>
+          <span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>
        </div>
        <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
-        <button
-          type="button"
-          className="flex cursor-pointer items-center gap-x-0.5 border-none bg-transparent px-3 py-2 text-left text-components-button-destructive-ghost-text focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
+        <Button
+          variant="ghost"
+          tone="destructive"
+          className="gap-x-0.5 px-3"
          onClick={showDeleteConfirm}
        >
-          <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
-          <span className="px-0.5 text-[13px] leading-[16px] font-medium">
+          <span aria-hidden className="i-ri-delete-bin-line size-4" />
+          <span className="px-0.5">
            {t('operation.delete', { ns: 'common' })}
          </span>
-        </button>
+        </Button>

        <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
-        <button
-          type="button"
-          className="border-none bg-transparent px-3.5 py-2 text-left text-[13px] leading-[16px] font-medium text-components-button-ghost-text focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-          onClick={onCancel}
+        <Button
+          variant="ghost"
+          className="px-3"
+          onClick={() => onSelectedIdsChange([])}
        >
-          {t('operation.cancel', { ns: 'common' })}
-        </button>
+          <span className="px-0.5">{t('operation.cancel', { ns: 'common' })}</span>
+        </Button>
      </div>
      <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
        <AlertDialogContent>
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -26,7 +26,7 @@ import { sleep } from '@/utils'
 import EmptyElement from './empty-element'
 import Filter from './filter'
 import HeaderOpts from './header-opts'
-import List from './list'
+import { List } from './list'
 import { AnnotationEnableStatus, JobStatus } from './type'
 import ViewAnnotationModal from './view-annotation-modal'

@@ -176,7 +176,7 @@ const Annotation: FC<Props> = (props) => {
                  >
                  </Switch>
                  {annotationConfig?.enabled && (
-                    <div className="flex items-center pl-1.5">
+                    <div className="flex items-center pr-1 pl-1.5">
                      <div className="mr-1 h-3.5 w-px shrink-0 bg-divider-subtle"></div>
                      <ActionButton onClick={() => setIsShowEdit(true)}>
                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
@@ -210,7 +210,6 @@ const Annotation: FC<Props> = (props) => {
                  selectedIds={selectedIds}
                  onSelectedIdsChange={setSelectedIds}
                  onBatchDelete={handleBatchDelete}
-                  onCancel={() => setSelectedIds([])}
                />
              )
            : <div className="flex h-full grow items-center justify-center"><EmptyElement /></div>}
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -1,11 +1,8 @@
 'use client'
-import type { FC } from 'react'
 import type { AnnotationItem } from './type'
 import { Checkbox } from '@langgenius/dify-ui/checkbox'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
+import { CheckboxGroup } from '@langgenius/dify-ui/checkbox-group'
 import * as React from 'react'
-import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import useTimestamp from '@/hooks/use-timestamp'
@@ -19,121 +16,126 @@ type Props = {
  selectedIds: string[]
  onSelectedIdsChange: (selectedIds: string[]) => void
  onBatchDelete: () => Promise<void>
-  onCancel: () => void
 }

-const List: FC<Props> = ({
+type AnnotationTableRowProps = {
+  item: AnnotationItem
+  formattedCreatedAt: string
+  onView: (item: AnnotationItem) => void
+  onRemoveClick: (id: string) => void
+}
+
+function AnnotationTableRow({
+  item,
+  formattedCreatedAt,
+  onView,
+  onRemoveClick,
+}: AnnotationTableRowProps) {
+  const { t } = useTranslation()
+  const questionId = React.useId()
+
+  return (
+    <tr
+      className="cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover"
+      onClick={() => onView(item)}
+    >
+      <td className="w-12 px-2 align-middle" onClick={e => e.stopPropagation()}>
+        <div className="flex items-center">
+          <Checkbox
+            className="shrink-0"
+            value={item.id}
+            aria-labelledby={questionId}
+          />
+        </div>
+      </td>
+      <td
+        className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+        title={item.question}
+      >
+        <span id={questionId}>{item.question}</span>
+      </td>
+      <td
+        className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
+        title={item.answer}
+      >
+        {item.answer}
+      </td>
+      <td className="p-3 pr-2">{formattedCreatedAt}</td>
+      <td className="p-3 pr-2">{item.hit_count}</td>
+      <td className="w-24 p-3 pr-2" onClick={e => e.stopPropagation()}>
+        <div className="flex space-x-1 text-text-tertiary">
+          <ActionButton aria-label={t('feature.annotation.edit', { ns: 'appDebug' })} onClick={() => onView(item)}>
+            <span aria-hidden className="i-ri-edit-line h-4 w-4" />
+          </ActionButton>
+          <ActionButton
+            aria-label={t('feature.annotation.remove', { ns: 'appDebug' })}
+            onClick={() => onRemoveClick(item.id)}
+          >
+            <span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
+          </ActionButton>
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+export function List({
  list,
  onView,
  onRemove,
  selectedIds,
  onSelectedIdsChange,
  onBatchDelete,
-  onCancel,
-}) => {
+}: Props) {
  const { t } = useTranslation()
  const { formatTime } = useTimestamp()
  const [currId, setCurrId] = React.useState<string | null>(null)
  const [showConfirmDelete, setShowConfirmDelete] = React.useState(false)
-
-  const isAllSelected = useMemo(() => {
-    return list.length > 0 && list.every(item => selectedIds.includes(item.id))
-  }, [list, selectedIds])
-
-  const isSomeSelected = useMemo(() => {
-    return list.some(item => selectedIds.includes(item.id))
-  }, [list, selectedIds])
-
-  const handleSelectAll = useCallback((checked: boolean) => {
-    const currentPageIds = list.map(item => item.id)
-    const otherPageIds = selectedIds.filter(id => !currentPageIds.includes(id))
-
-    if (checked)
-      onSelectedIdsChange([...otherPageIds, ...currentPageIds])
-    else
-      onSelectedIdsChange(otherPageIds)
-  }, [list, selectedIds, onSelectedIdsChange])
+  const annotationIds = list.map(item => item.id)

  return (
    <>
      <div className="relative mt-2 grow overflow-x-auto">
-        <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
-          <thead className="system-xs-medium-uppercase text-text-tertiary">
-            <tr>
-              <td className="w-12 rounded-l-lg bg-background-section-burn px-2 whitespace-nowrap">
-                <Checkbox
-                  className="mr-2"
-                  checked={isAllSelected}
-                  indeterminate={!isAllSelected && isSomeSelected}
-                  aria-label={t('operation.selectAll', { ns: 'common' })}
-                  onCheckedChange={handleSelectAll}
-                />
-              </td>
-              <td className="w-5 bg-background-section-burn pr-1 pl-2 whitespace-nowrap">{t('table.header.question', { ns: 'appAnnotation' })}</td>
-              <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.answer', { ns: 'appAnnotation' })}</td>
-              <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.createdAt', { ns: 'appAnnotation' })}</td>
-              <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.hits', { ns: 'appAnnotation' })}</td>
-              <td className="w-[96px] rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.actions', { ns: 'appAnnotation' })}</td>
-            </tr>
-          </thead>
-          <tbody className="system-sm-regular text-text-secondary">
-            {list.map(item => (
-              <tr
-                key={item.id}
-                className="cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover"
-                onClick={
-                  () => {
-                    onView(item)
-                  }
-                }
-              >
-                <td className="w-12 px-2" onClick={e => e.stopPropagation()}>
-                  <Checkbox
-                    className="mr-2"
-                    checked={selectedIds.includes(item.id)}
-                    aria-label={item.question}
-                    onCheckedChange={(checked) => {
-                      if (checked)
-                        onSelectedIdsChange([...selectedIds, item.id])
-                      else
-                        onSelectedIdsChange(selectedIds.filter(id => id !== item.id))
-                    }}
-                  />
-                </td>
-                <td
-                  className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
-                  title={item.question}
-                >
-                  {item.question}
-                </td>
-                <td
-                  className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
-                  title={item.answer}
-                >
-                  {item.answer}
-                </td>
-                <td className="p-3 pr-2">{formatTime(item.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</td>
-                <td className="p-3 pr-2">{item.hit_count}</td>
-                <td className="w-[96px] p-3 pr-2" onClick={e => e.stopPropagation()}>
-                  {/* Actions */}
-                  <div className="flex space-x-1 text-text-tertiary">
-                    <ActionButton onClick={() => onView(item)}>
-                      <RiEditLine className="h-4 w-4" />
-                    </ActionButton>
-                    <ActionButton
-                      onClick={() => {
-                        setCurrId(item.id)
-                        setShowConfirmDelete(true)
-                      }}
-                    >
-                      <RiDeleteBinLine className="h-4 w-4" />
-                    </ActionButton>
+        <CheckboxGroup
+          value={selectedIds}
+          onValueChange={onSelectedIdsChange}
+          allValues={annotationIds}
+        >
+          <table className="w-full min-w-110 border-collapse border-0">
+            <thead className="system-xs-medium-uppercase text-text-tertiary">
+              <tr>
+                <td className="w-12 rounded-l-lg bg-background-section-burn px-2 align-middle whitespace-nowrap">
+                  <div className="flex items-center">
+                    <Checkbox
+                      className="shrink-0"
+                      parent
+                      aria-label={t('operation.selectAll', { ns: 'common' })}
+                    />
                  </div>
                </td>
+                <td className="w-5 bg-background-section-burn pr-1 pl-2 whitespace-nowrap">{t('table.header.question', { ns: 'appAnnotation' })}</td>
+                <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.answer', { ns: 'appAnnotation' })}</td>
+                <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.createdAt', { ns: 'appAnnotation' })}</td>
+                <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.hits', { ns: 'appAnnotation' })}</td>
+                <td className="w-24 rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.actions', { ns: 'appAnnotation' })}</td>
              </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody className="system-sm-regular text-text-secondary">
+              {list.map(item => (
+                <AnnotationTableRow
+                  key={item.id}
+                  item={item}
+                  formattedCreatedAt={formatTime(item.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}
+                  onView={onView}
+                  onRemoveClick={(id) => {
+                    setCurrId(id)
+                    setShowConfirmDelete(true)
+                  }}
+                />
+              ))}
+            </tbody>
+          </table>
+        </CheckboxGroup>
        <RemoveAnnotationConfirmModal
          isShow={showConfirmDelete}
          onHide={() => setShowConfirmDelete(false)}
@@ -148,10 +150,9 @@ const List: FC<Props> = ({
          className="absolute bottom-20 left-0 z-20"
          selectedIds={selectedIds}
          onBatchDelete={onBatchDelete}
-          onCancel={onCancel}
+          onSelectedIdsChange={onSelectedIdsChange}
        />
      )}
    </>
  )
 }
-export default React.memo(List)