Trim empty spaces in table editor filter popover inputs (#28443)

* Trim empty spaces in table editor filter popover inputs

* Only trim filter input values in table editor for UUID columns

* Fix

apps/studio/components/grid/components/header/filter/FilterPopover.tsx

@@ -110,8 +110,19 @@ const FilterOverlay = ({ table, filters: filtersFromUrl, onApplyFilters }: Filte
     )
   }, [])
 
+  const onSelectApplyFilters = () => {
+    // [Joshen] Trim empty spaces in input for only UUID type columns
+    const formattedFilters = filters.map((f) => {
+      const column = table.columns.find((c) => c.name === f.column)
+      if (column?.format === 'uuid') return { ...f, value: f.value.trim() }
+      else return f
+    })
+    setFilters(formattedFilters)
+    onApplyFilters(formattedFilters)
+  }
+
   function handleEnterKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    if (event.key === 'Enter') onApplyFilters(filters)
+    if (event.key === 'Enter') onSelectApplyFilters()
   }
 
   return (
@@ -143,7 +154,7 @@ const FilterOverlay = ({ table, filters: filtersFromUrl, onApplyFilters }: Filte
         <Button
           disabled={isEqual(filters, initialFilters)}
           type="default"
-          onClick={() => onApplyFilters(filters)}
+          onClick={() => onSelectApplyFilters()}
         >
           Apply filter
         </Button>

apps/studio/components/grid/components/header/filter/FilterRow.tsx

@@ -1,9 +1,9 @@
 import { KeyboardEvent, memo } from 'react'
-import { Button, IconChevronDown, Input } from 'ui'
+import { Button, Input } from 'ui'
 
 import { DropdownControl } from 'components/grid/components/common/DropdownControl'
 import type { Filter, FilterOperator, SupaTable } from 'components/grid/types'
-import { X } from 'lucide-react'
+import { ChevronDown, X } from 'lucide-react'
 import { FilterOperatorOptions } from './Filter.constants'
 
 export interface FilterRowProps {
@@ -41,7 +41,7 @@ const FilterRow = ({ table, filter, filterIdx, onChange, onDelete, onKeyDown }:
           type="outline"
           icon={
             <div className="text-foreground-lighter">
-              <IconChevronDown strokeWidth={1.5} size={14} />
+              <ChevronDown strokeWidth={1.5} size={14} />
             </div>
           }
           className="w-32 justify-start"
@@ -64,7 +64,7 @@ const FilterRow = ({ table, filter, filterIdx, onChange, onDelete, onKeyDown }:
           type="outline"
           icon={
             <div className="text-foreground-lighter">
-              <IconChevronDown strokeWidth={1.5} size={14} />
+              <ChevronDown strokeWidth={1.5} size={14} />
             </div>
           }
         >