added operation queues directly to hook

apps/studio/components/grid/hooks/useOperationQueueActions.ts

@@ -1,12 +1,11 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { useCallback } from 'react'
-import { toast } from 'sonner'
-
 import { tableRowKeys } from 'data/table-rows/keys'
 import { useOperationQueueSaveMutation } from 'data/table-rows/operation-queue-save-mutation'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { useCallback } from 'react'
+import { toast } from 'sonner'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
-import { useTableEditorStateSnapshot } from 'state/table-editor'
+import { useOperationsQueueSnapshot, useTableEditorStateSnapshot } from 'state/table-editor'
 import { QueuedOperation } from 'state/table-editor-operation-queue.types'
 
 interface UseOperationQueueActionsOptions {
@@ -24,6 +23,7 @@ export function useOperationQueueActions(options: UseOperationQueueActionsOption
   const queryClient = useQueryClient()
   const { data: project } = useSelectedProjectQuery()
   const snap = useTableEditorStateSnapshot()
+  const operations = useOperationsQueueSnapshot()
   const getImpersonatedRoleState = useGetImpersonatedRoleState()
 
   const { mutate: saveOperationQueue, isPending: isMutationPending } =
@@ -44,7 +44,6 @@ export function useOperationQueueActions(options: UseOperationQueueActionsOption
   const handleSave = useCallback(() => {
     if (!project) return
 
-    const operations = snap.operationQueue.operations as readonly QueuedOperation[]
     if (operations.length === 0) return
 
     snap.setQueueStatus('saving')
@@ -55,11 +54,10 @@ export function useOperationQueueActions(options: UseOperationQueueActionsOption
       operations,
       roleImpersonationState: getImpersonatedRoleState(),
     })
-  }, [snap, project, saveOperationQueue, getImpersonatedRoleState])
+  }, [snap, project, operations, saveOperationQueue, getImpersonatedRoleState])
 
   const handleCancel = useCallback(() => {
     // Get unique table IDs from the queue before clearing
-    const operations = snap.operationQueue.operations as readonly QueuedOperation[]
     const tableIds = [...new Set(operations.map((op) => op.tableId))]
 
     // Clear the queue and invalidate queries to revert optimistic updates
@@ -73,7 +71,7 @@ export function useOperationQueueActions(options: UseOperationQueueActionsOption
       })
     }
     onCancelSuccess?.()
-  }, [snap, project, queryClient, onCancelSuccess])
+  }, [snap, project, operations, queryClient, onCancelSuccess])
 
   return {
     handleSave,

apps/studio/state/table-editor.tsx

@@ -1,7 +1,4 @@
 import type { PostgresColumn } from '@supabase/postgres-meta'
-import { PropsWithChildren, createContext, useContext } from 'react'
-import { proxy, useSnapshot } from 'valtio'
-
 import { useConstant } from 'common'
 import type { SupaRow } from 'components/grid/types'
 import {
@@ -11,15 +8,17 @@ import {
 import { ForeignKey } from 'components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.types'
 import type { EditValue } from 'components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.types'
 import type { TableField } from 'components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.types'
+import { PropsWithChildren, createContext, useContext } from 'react'
 import type { Dictionary } from 'types'
+import { proxy, useSnapshot } from 'valtio'
 
 import {
-  NewQueuedOperation,
-  QueuedOperationType,
   type EditCellContentPayload,
+  NewQueuedOperation,
   type OperationQueueState,
-  type QueuedOperation,
   type QueueStatus,
+  type QueuedOperation,
+  QueuedOperationType,
 } from './table-editor-operation-queue.types'
 
 export const TABLE_EDITOR_DEFAULT_ROWS_PER_PAGE = 100
@@ -333,3 +332,8 @@ export const useTableEditorStateSnapshot = (options?: Parameters<typeof useSnaps
   const state = useContext(TableEditorStateContext)
   return useSnapshot(state, options)
 }
+
+export const useOperationsQueueSnapshot = (options?: Parameters<typeof useSnapshot>[1]) => {
+  const state = useContext(TableEditorStateContext)
+  return useSnapshot(state.operationQueue.operations, options) as readonly QueuedOperation[]
+}