[pull] master from supabase:master

apps/studio/components/grid/SupabaseGrid.utils.ts

@@ -1,17 +1,17 @@
 import AwesomeDebouncePromise from 'awesome-debounce-promise'
-import { compact, filter } from 'lodash'
-import { useEffect, useState } from 'react'
+import { compact } from 'lodash'
+import { useEffect, useMemo } from 'react'
 import { CalculatedColumn, CellKeyboardEvent } from 'react-data-grid'
 
 import type { Filter, SavedState } from 'components/grid/types'
 import { Entity, isTableLike } from 'data/table-editor/table-editor-types'
-import { useUrlState } from 'hooks/ui/useUrlState'
 import { copyToClipboard } from 'ui'
 import { FilterOperatorOptions } from './components/header/filter/Filter.constants'
 import { STORAGE_KEY_PREFIX } from './constants'
 import type { Sort, SupaColumn, SupaTable } from './types'
 import { formatClipboardValue } from './utils/common'
-import { parseAsArrayOf, parseAsBoolean, parseAsString, useQueryStates } from 'nuqs'
+import { parseAsNativeArrayOf, parseAsBoolean, parseAsString, useQueryStates } from 'nuqs'
+import { useSearchParams } from 'next/navigation'
 
 export const LOAD_TAB_FROM_CACHE_PARAM = 'loadFromCache'
 
@@ -197,16 +197,25 @@ export function useSyncTableEditorStateFromLocalStorageWithUrl({
   projectRef: string | undefined
   table: Entity | undefined
 }) {
-  const [urlParams, updateUrlParams] = useQueryStates(
+  // Warning: nuxt url state often fails to update to changes to URL
+  const [, updateUrlParams] = useQueryStates(
     {
-      sort: parseAsArrayOf(parseAsString).withDefault([]),
-      filter: parseAsArrayOf(parseAsString).withDefault([]),
+      sort: parseAsNativeArrayOf(parseAsString),
+      filter: parseAsNativeArrayOf(parseAsString),
       [LOAD_TAB_FROM_CACHE_PARAM]: parseAsBoolean.withDefault(false),
     },
     {
       history: 'replace',
     }
   )
+  // Use nextjs useSearchParams to get the latest URL params
+  const searchParams = useSearchParams()
+  const urlParams = useMemo(() => {
+    const sort = searchParams.getAll('sort')
+    const filter = searchParams.getAll('filter')
+    const loadFromCache = !!searchParams.get(LOAD_TAB_FROM_CACHE_PARAM)
+    return { sort, filter, loadFromCache }
+  }, [searchParams])
 
   useEffect(() => {
     if (!projectRef || !table) {

apps/studio/package.json

@@ -99,7 +99,7 @@
     "monaco-editor": "0.52.2",
     "next": "catalog:",
     "next-themes": "^0.3.0",
-    "nuqs": "^2.4.1",
+    "nuqs": "2.7.0",
     "openai": "^4.75.1",
     "openapi-fetch": "0.12.4",
     "papaparse": "^5.3.1",