Feat: Reconstruct the QueryTable of BeginForm using shandcn #3221 (#7807)

### What problem does this PR solve?

Feat: Reconstruct the QueryTable of BeginForm using shandcn #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form/begin-form/index.tsx

@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { AgentDialogueMode } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import { ParameterDialog } from './parameter-dialog';
-import QueryTable from './query-table';
+import { QueryTable } from './query-table';
 import { useEditQueryRecord } from './use-edit-query';
 
 const ModeOptions = buildSelectOptions([

web/src/pages/agent/form/begin-form/query-table.tsx

@@ -1,9 +1,38 @@
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import type { TableProps } from 'antd';
-import { Collapse, Space, Table, Tooltip } from 'antd';
-import { BeginQuery } from '../../interface';
+'use client';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Pencil, Trash2 } from 'lucide-react';
+import * as React from 'react';
 
+import { TableEmpty } from '@/components/table-skeleton';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
 import { useTranslation } from 'react-i18next';
+import { BeginQuery } from '../../interface';
 
 interface IProps {
   data: BeginQuery[];
@@ -11,80 +40,150 @@ interface IProps {
   showModal(index: number, record: BeginQuery): void;
 }
 
-const QueryTable = ({ data, deleteRecord, showModal }: IProps) => {
+export function QueryTable({ data, deleteRecord, showModal }: IProps) {
   const { t } = useTranslation();
 
-  const columns: TableProps<BeginQuery>['columns'] = [
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const columns: ColumnDef<BeginQuery>[] = [
     {
-      title: 'Key',
-      dataIndex: 'key',
-      key: 'key',
-      ellipsis: {
-        showTitle: false,
+      accessorKey: 'key',
+      header: 'key',
+      meta: { cellClassName: 'max-w-16' },
+      cell: ({ row }) => {
+        const key: string = row.getValue('key');
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate ">{key}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{key}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
       },
-      render: (key) => (
-        <Tooltip placement="topLeft" title={key}>
-          {key}
-        </Tooltip>
-      ),
     },
     {
-      title: t('flow.name'),
-      dataIndex: 'name',
-      key: 'name',
-      ellipsis: {
-        showTitle: false,
+      accessorKey: 'name',
+      header: t('flow.name'),
+      meta: { cellClassName: 'max-w-20' },
+      cell: ({ row }) => {
+        const name: string = row.getValue('name');
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate">{name}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{name}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
       },
-      render: (name) => (
-        <Tooltip placement="topLeft" title={name}>
-          {name}
-        </Tooltip>
-      ),
     },
     {
-      title: t('flow.type'),
-      dataIndex: 'type',
-      key: 'type',
+      accessorKey: 'type',
+      header: t('flow.type'),
+      cell: ({ row }) => <div>{row.getValue('type')}</div>,
     },
     {
-      title: t('flow.optional'),
-      dataIndex: 'optional',
-      key: 'optional',
-      render: (optional) => (optional ? 'Yes' : 'No'),
+      accessorKey: 'optional',
+      header: t('flow.optional'),
+      cell: ({ row }) => <div>{row.getValue('optional') ? 'Yes' : 'No'}</div>,
     },
     {
-      title: t('common.action'),
-      key: 'action',
-      render: (_, record, idx) => (
-        <Space>
-          <EditOutlined onClick={() => showModal(idx, record)} />
-          <DeleteOutlined
-            className="cursor-pointer"
-            onClick={() => deleteRecord(idx)}
-          />
-        </Space>
-      ),
+      id: 'actions',
+      enableHiding: false,
+      header: t('common.action'),
+      cell: ({ row }) => {
+        const record = row.original;
+        const idx = row.index;
+
+        return (
+          <div>
+            <Button variant={'ghost'} onClick={() => showModal(idx, record)}>
+              <Pencil />
+            </Button>
+            <Button variant={'ghost'} onClick={() => deleteRecord(idx)}>
+              <Trash2 />
+            </Button>
+          </div>
+        );
+      },
     },
   ];
 
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  });
+
   return (
-    <Collapse
-      defaultActiveKey={['1']}
-      items={[
-        {
-          key: '1',
-          label: <span>{t('flow.input')}</span>,
-          children: (
-            <Table<BeginQuery>
-              columns={columns}
-              dataSource={data}
-              pagination={false}
-            />
-          ),
-        },
-      ]}
-    />
+    <div className="w-full">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn(cell.column.columnDef.meta?.cellClassName)}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableEmpty columnsLength={columns.length}></TableEmpty>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
   );
-};
-
-export default QueryTable;
+}