From b4244bf17d744e1cfc66e64b99d64489ba88d6dc Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Fri, 3 Mar 2023 12:35:37 +1100
Subject: [PATCH] fix: <RowContextMenu /> to use rows from react-query

---
 studio/components/grid/SupabaseGrid.tsx               |  3 ++-
 studio/components/grid/components/header/Header.tsx   |  2 --
 .../grid/components/menu/RowContextMenu.tsx           | 11 ++++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/studio/components/grid/SupabaseGrid.tsx b/studio/components/grid/SupabaseGrid.tsx
index 3229e4a771d..60d8da7c426 100644
--- a/studio/components/grid/SupabaseGrid.tsx
+++ b/studio/components/grid/SupabaseGrid.tsx
@@ -201,7 +201,8 @@ const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props
       <Grid ref={gridRef} {...gridProps} rows={data?.rows ?? []} updateRow={props.updateTableRow} />
       <Footer isLoading={isLoading || isRefetching} />
       <Shortcuts gridRef={gridRef} />
-      {mounted && createPortal(<RowContextMenu table={table} />, document.body)}
+      {mounted &&
+        createPortal(<RowContextMenu table={table} rows={data?.rows ?? []} />, document.body)}
     </div>
   )
 })
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 8c869e456fd..4e7d6bbb6d0 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -15,7 +15,6 @@ import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectConte
 import { useTableRowDeleteMutation } from 'data/table-rows/table-row-delete-mutation'
 import { useTableRowDeleteAllMutation } from 'data/table-rows/table-row-delete-all-mutation'
 import { useTableRowTruncateMutation } from 'data/table-rows/table-row-truncate-mutation'
-import { useQueryClient } from '@tanstack/react-query'
 import { useTableRowsCountQuery } from 'data/table-rows/table-rows-count-query'
 import { useTableRowsQuery } from 'data/table-rows/table-rows-query'
 
@@ -153,7 +152,6 @@ type RowHeaderProps = {
   filters: Filter[]
 }
 const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => {
-  const queryClient = useQueryClient()
   const { ui } = useStore()
   const state = useTrackedState()
   const dispatch = useDispatch()
diff --git a/studio/components/grid/components/menu/RowContextMenu.tsx b/studio/components/grid/components/menu/RowContextMenu.tsx
index 1bdd6ccd19c..b8f4023a4d2 100644
--- a/studio/components/grid/components/menu/RowContextMenu.tsx
+++ b/studio/components/grid/components/menu/RowContextMenu.tsx
@@ -5,15 +5,16 @@ import { formatClipboardValue, copyToClipboard } from '../../utils'
 import { useTableRowDeleteMutation } from 'data/table-rows/table-row-delete-mutation'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { SupaTable } from 'components/grid/types'
+import { SupaRow, SupaTable } from 'components/grid/types'
 
 export const ROW_CONTEXT_MENU_ID = 'row-context-menu-id'
 
 export type RowContextMenuProps = {
   table: SupaTable
+  rows: SupaRow[]
 }
 
-const RowContextMenu = ({ table }: RowContextMenuProps) => {
+const RowContextMenu = ({ table, rows }: RowContextMenuProps) => {
   const state = useTrackedState()
   const dispatch = useDispatch()
 
@@ -27,7 +28,7 @@ const RowContextMenu = ({ table }: RowContextMenuProps) => {
       onAsyncConfirm: async () => {
         const { props } = p
         const { rowIdx } = props
-        const row = state.rows[rowIdx]
+        const row = rows[rowIdx]
         if (!row || !project) return
 
         try {
@@ -53,7 +54,7 @@ const RowContextMenu = ({ table }: RowContextMenuProps) => {
   function onEditRowClick(p: ItemParams) {
     const { props } = p
     const { rowIdx } = props
-    const row = state.rows[rowIdx]
+    const row = rows[rowIdx]
     if (state.onEditRow) state.onEditRow(row)
   }
 
@@ -71,7 +72,7 @@ const RowContextMenu = ({ table }: RowContextMenuProps) => {
     }
 
     const { rowIdx } = props
-    const row = state.rows[rowIdx]
+    const row = rows[rowIdx]
 
     const columnKey = state.gridColumns[state.selectedCellPosition?.idx as number].key