From bdd849cd7e40ccc31d5ce48d66913f6101bcb158 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Wed, 1 Nov 2023 13:31:30 +0100
Subject: [PATCH] fix: Fix a render error in the foreign key selector (#18628)

The table in SelectorGrid wasn't migrated to the new column format of react-select-grid.
---
 .../RowEditor/ForeignRowSelector/SelectorGrid.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
index d760250cf941a..5af042fd449ec 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
@@ -1,12 +1,12 @@
-import DataGrid, { Column } from 'react-data-grid'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { SupaRow, SupaTable } from 'components/grid'
-import { IconKey } from 'ui'
+import { COLUMN_MIN_WIDTH } from 'components/grid/constants'
 import {
   ESTIMATED_CHARACTER_PIXEL_WIDTH,
   getColumnDefaultWidth,
 } from 'components/grid/utils/gridColumns'
-import { COLUMN_MIN_WIDTH } from 'components/grid/constants'
+import DataGrid, { Column } from 'react-data-grid'
+import { IconKey } from 'ui'
 
 export interface SelectorGridProps {
   table: SupaTable
@@ -40,7 +40,7 @@ const columnRender = (name: string, isPrimaryKey = false) => {
   )
 }
 
-const formatter = (column: string, row: any) => {
+const formatter = (column: string, row: SupaRow) => {
   const formattedValue = typeof row[column] === 'object' ? JSON.stringify(row[column]) : row[column]
   return (
     <div className="group sb-grid-select-cell__formatter overflow-hidden">
@@ -57,15 +57,16 @@ const SelectorGrid = ({ table, rows, onRowSelect }: SelectorGridProps) => {
     const columnWidth =
       columnDefaultWidth < columnWidthBasedOnName ? columnWidthBasedOnName : columnDefaultWidth
 
-    return {
+    const result: Column<SupaRow> = {
       key: column.name,
       name: column.name,
-      formatter: ({ row }: any) => formatter(column.name, row),
-      headerRenderer: () => columnRender(column.name, column.isPrimaryKey),
+      renderCell: (props) => formatter(column.name, props.row),
+      renderHeaderCell: () => columnRender(column.name, column.isPrimaryKey),
       resizable: true,
       width: columnWidth,
       minWidth: COLUMN_MIN_WIDTH,
     }
+    return result
   })
 
   return (