konnosDashboard
DeleteRowOperationItem.tsx84 lines · main
1import { useQueryClient } from '@tanstack/react-query'
2import { Undo2 } from 'lucide-react'
3import { Card, CardContent, CardHeader } from 'ui'
4
5import { formatOperationItemValue } from './OperationQueueSidePanel.utils'
6import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
7import { tableRowKeys } from '@/data/table-rows/keys'
8import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
9import { useTableEditorStateSnapshot } from '@/state/table-editor'
10import { DeleteRowPayload } from '@/state/table-editor-operation-queue.types'
11
12interface DeleteRowOperationItemProps {
13 operationId: string
14 tableId: number
15 content: DeleteRowPayload
16}
17
18export const DeleteRowOperationItem = ({
19 operationId,
20 tableId,
21 content,
22}: DeleteRowOperationItemProps) => {
23 const { table, rowIdentifiers } = content
24 const tableSchema = table.schema
25 const tableName = table.name
26
27 const queryClient = useQueryClient()
28 const { data: project } = useSelectedProjectQuery()
29 const snap = useTableEditorStateSnapshot()
30
31 const fullTableName = `${tableSchema}.${tableName}`
32 const whereClause = Object.entries(rowIdentifiers)
33 .map(([key, value]) => `${key} = ${formatOperationItemValue(value)}`)
34 .join(', ')
35
36 const handleDelete = () => {
37 // Remove the operation from the queue
38 snap.removeOperation(operationId)
39
40 // Invalidate the query to revert the optimistic update
41 if (project) {
42 queryClient.invalidateQueries({
43 queryKey: tableRowKeys.tableRowsAndCount(project.ref, tableId),
44 })
45 }
46 }
47
48 return (
49 <Card className="overflow-hidden border-destructive-500 bg-destructive-500/5">
50 <CardHeader className="py-2 px-3 flex flex-row gap-2 border-b border-destructive-500 space-y-0 items-center">
51 <div className="min-w-0 flex-1 flex items-start gap-2">
52 <div className="min-w-0 flex-1">
53 <code className="text-code-inline dark:bg-surface-300 dark:border-foreground-muted/50">
54 {fullTableName}
55 </code>
56 <div className="text-xs text-foreground mt-1 ml-0.5">
57 <span>Delete row</span>
58 <span className="text-foreground-muted mx-1.5">·</span>
59 <span>where {whereClause}</span>
60 </div>
61 </div>
62 </div>
63 <ButtonTooltip
64 type="text"
65 aria-label="Discard change"
66 className="w-7"
67 icon={<Undo2 />}
68 onClick={handleDelete}
69 tooltip={{
70 content: {
71 side: 'left',
72 align: 'end',
73 text: 'Discard change',
74 },
75 }}
76 />
77 </CardHeader>
78
79 <CardContent className="py-2 px-3 font-mono text-xs bg-destructive-100/30">
80 <div className="text-destructive py-0.5">Row will be deleted</div>
81 </CardContent>
82 </Card>
83 )
84}