From a72bc3d0d720fa9fc189ecd94fa666f01b7be5aa Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Mon, 20 Feb 2023 15:37:55 +1100
Subject: [PATCH] read projectRef from params in <RefreshButton />

---
 studio/components/grid/SupabaseGrid.tsx       |  1 -
 .../grid/components/header/Header.tsx         | 23 ++++---------------
 .../grid/components/header/RefreshButton.tsx  |  7 +++---
 3 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/studio/components/grid/SupabaseGrid.tsx b/studio/components/grid/SupabaseGrid.tsx
index 731050edf6d..d09cef7ea34 100644
--- a/studio/components/grid/SupabaseGrid.tsx
+++ b/studio/components/grid/SupabaseGrid.tsx
@@ -191,7 +191,6 @@ const SupabaseGridLayout = forwardRef<SupabaseGridRef, SupabaseGridProps>((props
   return (
     <div className="sb-grid">
       <Header
-        projectRef={project?.ref}
         table={table}
         sorts={sorts}
         filters={filters}
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index ce73ee22e77..67a2e8ffc4e 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -24,7 +24,6 @@ import { useTableRowsQuery } from 'data/table-rows/table-rows-query'
 const MAX_EXPORT_ROW_COUNT = 500000
 
 export type HeaderProps = {
-  projectRef?: string
   table: SupaTable
   sorts: Sort[]
   filters: Filter[]
@@ -33,15 +32,7 @@ export type HeaderProps = {
   headerActions?: ReactNode
 }
 
-const Header = ({
-  projectRef,
-  table,
-  sorts,
-  filters,
-  onAddColumn,
-  onAddRow,
-  headerActions,
-}: HeaderProps) => {
+const Header = ({ table, sorts, filters, onAddColumn, onAddRow, headerActions }: HeaderProps) => {
   const state = useTrackedState()
   const { selectedRows } = state
 
@@ -50,12 +41,7 @@ const Header = ({
       {selectedRows.size > 0 ? (
         <RowHeader table={table} sorts={sorts} filters={filters} />
       ) : (
-        <DefaultHeader
-          table={table}
-          projectRef={projectRef}
-          onAddColumn={onAddColumn}
-          onAddRow={onAddRow}
-        />
+        <DefaultHeader table={table} onAddColumn={onAddColumn} onAddRow={onAddRow} />
       )}
       <div className="sb-grid-header__inner">{headerActions}</div>
     </div>
@@ -65,18 +51,17 @@ const Header = ({
 export default Header
 
 type DefaultHeaderProps = {
-  projectRef?: string
   table: SupaTable
   onAddColumn?: () => void
   onAddRow?: () => void
 }
-const DefaultHeader = ({ projectRef, table, onAddColumn, onAddRow }: DefaultHeaderProps) => {
+const DefaultHeader = ({ table, onAddColumn, onAddRow }: DefaultHeaderProps) => {
   const canAddNew = onAddRow !== undefined || onAddColumn !== undefined
 
   return (
     <div className="flex items-center gap-4">
       <div className="flex items-center gap-2">
-        <RefreshButton projectRef={projectRef} table={table} />
+        <RefreshButton table={table} />
         <FilterDropdown />
         <SortPopover />
       </div>
diff --git a/studio/components/grid/components/header/RefreshButton.tsx b/studio/components/grid/components/header/RefreshButton.tsx
index 0f5e6002fa2..dea181a3de8 100644
--- a/studio/components/grid/components/header/RefreshButton.tsx
+++ b/studio/components/grid/components/header/RefreshButton.tsx
@@ -1,19 +1,20 @@
 import { useQueryClient, useIsFetching } from '@tanstack/react-query'
 import { SupaTable } from 'components/grid/types'
 import { sqlKeys } from 'data/sql/keys'
+import { useParams } from 'hooks'
 import { useEffect, useState } from 'react'
 import { Button, IconCheck, IconRefreshCw } from 'ui'
 import { SupabaseGridQueue } from '../../constants'
 
 export type RefreshButtonProps = {
-  projectRef?: string
   table: SupaTable
 }
 
-const RefreshButton = ({ projectRef, table }: RefreshButtonProps) => {
+const RefreshButton = ({ table }: RefreshButtonProps) => {
+  const { ref } = useParams()
   const queryClient = useQueryClient()
 
-  const queryKey = sqlKeys.query(projectRef, [table.schema, table.name])
+  const queryKey = sqlKeys.query(ref, [table.schema, table.name])
 
   const loading = useIsFetching({ queryKey }) > 0