[pull] master from supabase:master

apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx

@@ -21,6 +21,7 @@ interface SortDropdownProps {
   showSortByEmail: boolean
   showSortByPhone: boolean
   setSortByValue: (value: string) => void
+  improvedSearchEnabled: boolean
 }
 
 export const SortDropdown = ({
@@ -31,8 +32,9 @@ export const SortDropdown = ({
   showSortByEmail,
   showSortByPhone,
   setSortByValue,
+  improvedSearchEnabled = false,
 }: SortDropdownProps) => {
-  if (specificFilterColumn !== 'freeform') {
+  if (specificFilterColumn !== 'freeform' && !improvedSearchEnabled) {
     return (
       <ButtonTooltip
         disabled

apps/studio/components/interfaces/Auth/Users/Users.constants.ts

@@ -4,7 +4,7 @@ import { OptimizedSearchColumns } from '@supabase/pg-meta/src/sql/studio/get-use
 
 export type Filter = 'all' | 'verified' | 'unverified' | 'anonymous'
 
-export type SpecificFilterColumn = OptimizedSearchColumns | 'freeform'
+export type SpecificFilterColumn = OptimizedSearchColumns | 'name' | 'freeform'
 
 export const UUIDV4_LEFT_PREFIX_REGEX =
   /^(?:[0-9a-f]{1,8}|[0-9a-f]{8}-|[0-9a-f]{8}-[0-9a-f]{1,4}|[0-9a-f]{8}-[0-9a-f]{4}-|[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{0,3}|[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-|[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{0,3}|[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-|[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{0,12})$/i

apps/studio/components/interfaces/Auth/Users/Users.utils.tsx

@@ -149,6 +149,7 @@ export function getDisplayName(user: User, fallback = '-'): string {
     last_name,
     firstName,
     first_name,
+    name,
   } = user.raw_user_meta_data ?? {}
 
   const {
@@ -193,7 +194,8 @@ export function getDisplayName(user: User, fallback = '-'): string {
 
   return (
     toPrettyJsonString(
-      displayName ||
+      name ||
+        displayName ||
         display_name ||
         ccDisplayName ||
         cc_display_name ||

apps/studio/components/interfaces/Auth/Users/UsersSearch.tsx

@@ -1,6 +1,25 @@
 import { Search, X } from 'lucide-react'
 import { SetStateAction } from 'react'
 
+import { SpecificFilterColumn } from './Users.constants'
+
+const getSearchPlaceholder = (column: SpecificFilterColumn): string => {
+  switch (column) {
+    case 'id':
+      return 'Search by user ID'
+    case 'email':
+      return 'Search by email'
+    case 'name':
+      return 'Search by name'
+    case 'phone':
+      return 'Search by phone'
+    case 'freeform':
+      return 'Search by user ID, email, phone or name'
+    default:
+      return 'Search users...'
+  }
+}
+
 import {
   Button,
   cn,
@@ -20,10 +39,11 @@ import { Input } from 'ui-patterns/DataInputs/Input'
 interface UsersSearchProps {
   search: string
   searchInvalid: boolean
-  specificFilterColumn: 'id' | 'email' | 'phone' | 'freeform'
+  specificFilterColumn: SpecificFilterColumn
   setSearch: (value: SetStateAction<string>) => void
   setFilterKeywords: (value: string) => void
-  setSpecificFilterColumn: (value: 'id' | 'email' | 'phone' | 'freeform') => void
+  setSpecificFilterColumn: (value: SpecificFilterColumn) => void
+  improvedSearchEnabled?: boolean
 }
 
 export const UsersSearch = ({
@@ -33,6 +53,7 @@ export const UsersSearch = ({
   setSearch,
   setFilterKeywords,
   setSpecificFilterColumn,
+  improvedSearchEnabled = false,
 }: UsersSearchProps) => {
   return (
     <div className="flex items-center">
@@ -61,21 +82,30 @@ export const UsersSearch = ({
             <SelectItem_Shadcn_ value="email" className="text-xs">
               Email address
             </SelectItem_Shadcn_>
+            {improvedSearchEnabled && (
+              <SelectItem_Shadcn_ value="name" className="text-xs">
+                Name
+              </SelectItem_Shadcn_>
+            )}
             <SelectItem_Shadcn_ value="phone" className="text-xs">
               Phone number
             </SelectItem_Shadcn_>
-            <SelectSeparator_Shadcn_ />
-            <Tooltip>
-              <TooltipTrigger>
-                <SelectItem_Shadcn_ value="freeform" className="text-xs">
-                  Unified search
-                </SelectItem_Shadcn_>
-              </TooltipTrigger>
-              <TooltipContent side="right" className="w-64 text-center">
-                Search by all columns at once, including mid-string search. May impact database
-                performance if you have many users.
-              </TooltipContent>
-            </Tooltip>
+            {!improvedSearchEnabled && (
+              <>
+                <SelectSeparator_Shadcn_ />
+                <Tooltip>
+                  <TooltipTrigger>
+                    <SelectItem_Shadcn_ value="freeform" className="text-xs">
+                      Unified search
+                    </SelectItem_Shadcn_>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" className="w-64 text-center">
+                    Search by all columns at once, including mid-string search. May impact database
+                    performance if you have many users.
+                  </TooltipContent>
+                </Tooltip>
+              </>
+            )}
           </SelectGroup_Shadcn_>
         </SelectContent_Shadcn_>
       </Select_Shadcn_>
@@ -87,25 +117,14 @@ export const UsersSearch = ({
           searchInvalid ? 'text-red-900 dark:border-red-900' : '',
           search.length > 1 && 'pr-6'
         )}
-        placeholder={
-          specificFilterColumn === 'freeform'
-            ? 'Search by user ID, email, phone or name'
-            : `Search by ${specificFilterColumn === 'id' ? 'User ID' : specificFilterColumn === 'email' ? 'Email' : 'Phone'}`
-        }
+        placeholder={getSearchPlaceholder(specificFilterColumn)}
         value={search}
         onChange={(e) => {
           const value = e.target.value.replace(/\s+/g, '').toLowerCase()
           setSearch(value)
         }}
         onKeyDown={(e) => {
           if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-            setSearch((s) => {
-              if (s && specificFilterColumn === 'phone' && !s.startsWith('+')) {
-                return `+${s}`
-              } else {
-                return s
-              }
-            })
             if (!searchInvalid) setFilterKeywords(search.trim().toLocaleLowerCase())
           }
         }}