Feat: Initialize the data pipeline canvas. #9869 (#9870)

### What problem does this PR solve?
Feat: Initialize the data pipeline canvas. #9869

### Type of change


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

web/src/pages/data-flow/form/invoke-form/variable-table.tsx

@@ -0,0 +1,199 @@
+'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 { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { VariableFormSchemaType } from './schema';
+
+interface IProps {
+  data: VariableFormSchemaType[];
+  deleteRecord(index: number): void;
+  showModal(index: number, record: VariableFormSchemaType): void;
+  nodeId?: string;
+}
+
+export function VariableTable({
+  data = [],
+  deleteRecord,
+  showModal,
+  nodeId,
+}: IProps) {
+  const { t } = useTranslation();
+  const getLabel = useGetVariableLabelByValue(nodeId!);
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const columns: ColumnDef<VariableFormSchemaType>[] = [
+    {
+      accessorKey: 'key',
+      header: t('flow.key'),
+      meta: { cellClassName: 'max-w-30' },
+      cell: ({ row }) => {
+        const key: string = row.getValue('key');
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate">{key}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{key}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      accessorKey: 'ref',
+      header: t('flow.ref'),
+      meta: { cellClassName: 'max-w-30' },
+      cell: ({ row }) => {
+        const ref: string = row.getValue('ref');
+        const label = getLabel(ref);
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate">{label}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{label}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      accessorKey: 'value',
+      header: t('flow.value'),
+      cell: ({ row }) => <div>{row.getValue('value')}</div>,
+    },
+    {
+      id: 'actions',
+      enableHiding: false,
+      header: t('common.action'),
+      cell: ({ row }) => {
+        const record = row.original;
+        const idx = row.index;
+
+        return (
+          <div>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              onClick={() => showModal(idx, record)}
+            >
+              <Pencil />
+            </Button>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              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 (
+    <div className="w-full">
+      <div className="rounded-md border">
+        <Table rootClassName="rounded-md">
+          <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>
+  );
+}