FilterPopoverNew() — supabase Function Reference

Source Code

apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx lines 119–213

export const FilterPopoverNew = ({ isRefetching = false }: FilterPopoverProps) => {
  const { filters, setFilters } = useTableFilterNew()
  const snap = useTableEditorTableStateSnapshot()

  const [freeformText, setFreeformText] = useState('')
  const { mutateAsync: generateFilters, isPending: isGenerating } = useSqlFilterGenerateMutation()

  // Convert filters to FilterGroup for the FilterBar
  const filterGroup = useMemo(() => filtersToFilterGroup(filters), [filters])

  const columns = useMemo(() => snap.table?.columns ?? [], [snap.table?.columns])

  // Create filter properties from table columns
  // Add the date picker component for date columns (can't be in utils due to React component)
  const filterProperties: FilterProperty[] = useMemo(() => {
    return columns.map((column) => {
      const property = columnToFilterProperty(column)
      if (property.type === 'date' && Array.isArray(property.options)) {
        return {
          ...property,
          options: [
            ...property.options,
            {
              label: 'Pick a date...',
              component: (props: CustomOptionProps) => <DatePickerOption {...props} />,
            },
          ],
        }
      }
      return property
    })
  }, [columns])

  const serializableFilterProperties = useMemo(
    () => serializeFilterProperties(filterProperties),
    [filterProperties]
  )

  // Handle filter changes from FilterBar
  const handleFilterChange = useCallback(
    (newFilterGroup: FilterGroup) => {
      const newFilters = filterGroupToFilters(newFilterGroup)
      setFilters(newFilters)
    },
    [setFilters]
  )

  const actions = useMemo(
    () => [
      {
        value: 'ai-filter',
        label: 'Filter by AI',
        onSelect: async (
          inputValue: string,
          context: { path: number[]; activeFilters: FilterGroup }
        ) => {
          const prompt = inputValue.trim()
          if (!prompt) return

          const aiGroup = await generateFilters({
            prompt,
            filterProperties: serializableFilterProperties,
            currentPath: context.path ?? [],
          })

          const updatedGroup = updateGroupAtPath(context.activeFilters, context.path ?? [], aiGroup)
          handleFilterChange(updatedGroup)
          setFreeformText('')
        },
      },
    ],
    [generateFilters, serializableFilterProperties, handleFilterChange, setFreeformText]
  )

  const icon = isRefetching ? (
    <Loader2 className="animate-spin text-brand h-4 w-4 shrink-0" aria-label="Loading table data" />
  ) : null

  return (
    <div className="flex-1 min-w-0">
      <FilterBar
        filterProperties={filterProperties}
        filters={filterGroup}
        onFilterChange={handleFilterChange}
        freeformText={freeformText}
        onFreeformTextChange={setFreeformText}
        actions={actions}
        isLoading={isGenerating}
        variant="pill"
        className="bg-transparent border-0"
        icon={icon}
      />
    </div>
  )
}