ReportFilterPopover() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx lines 262–387

export const ReportFilterPopover = ({
  buttonText,
  filters,
  filterProperties,
  onFiltersChange,
  disabled = false,
}: ReportFilterPopoverProps) => {
  const [open, setOpen] = useState(false)
  const [localFilters, setLocalFilters] = useState<ReportFilter[]>(filters)

  // Update local state when filters prop changes
  useMemo(() => {
    setLocalFilters(filters)
  }, [filters])

  const displayButtonText =
    buttonText ??
    (filters.length > 0
      ? `Filtered by ${filters.length} rule${filters.length > 1 ? 's' : ''}`
      : 'Filter')

  const onAddFilter = () => {
    const firstProperty = filterProperties[0]
    if (firstProperty) {
      setLocalFilters([
        ...localFilters,
        {
          propertyName: firstProperty.name,
          operator: firstProperty.operators[0] || '=',
          value: '',
        },
      ])
    }
  }

  const onChangeFilter = useCallback((index: number, filter: ReportFilter) => {
    setLocalFilters((currentFilters) => [
      ...currentFilters.slice(0, index),
      filter,
      ...currentFilters.slice(index + 1),
    ])
  }, [])

  const onDeleteFilter = useCallback((index: number) => {
    setLocalFilters((currentFilters) => [
      ...currentFilters.slice(0, index),
      ...currentFilters.slice(index + 1),
    ])
  }, [])

  const onApplyFilters = () => {
    // Filter out empty values
    const validFilters = localFilters.filter(
      (f) => f.value !== null && f.value !== undefined && f.value !== ''
    )
    onFiltersChange(validFilters)
    setOpen(false)
  }

  const onResetFilters = () => {
    setLocalFilters([])
    onFiltersChange([])
    setOpen(false)
  }

  function handleEnterKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (event.key === 'Enter') onApplyFilters()
  }

  const hasChanges = !isEqual(localFilters, filters)

  return (
    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
      <PopoverTrigger_Shadcn_ asChild>
        <Button
          type={filters.length > 0 ? 'link' : 'text'}
          icon={<FilterIcon />}
          disabled={disabled}
        >
          {displayButtonText}
        </Button>
      </PopoverTrigger_Shadcn_>
      <PopoverContent_Shadcn_ className="p-0 w-[500px]" side="bottom" align="start">
        <div className="space-y-2 py-2">
          <div>
            {localFilters.map((filter, index) => (
              <ReportFilterRow
                key={`filter-${filter.propertyName}-${index}`}
                filter={filter}
                filterIdx={index}
                filterProperties={filterProperties}
                onChange={onChangeFilter}
                onDelete={onDeleteFilter}
                onKeyDown={handleEnterKeyDown}
              />
            ))}
            {localFilters.length === 0 && (
              <div className="space-y-1 px-3">
                <h5 className="text-sm text-foreground-light">No filters applied</h5>
                <p className="text-xs text-foreground-lighter">
                  Add a filter below to narrow down the report data
                </p>
              </div>
            )}
          </div>
          <PopoverSeparator_Shadcn_ />
          <div className="px-3 flex flex-row justify-between">
            <div className="flex gap-2">
              <Button icon={<Plus />} type="text" onClick={onAddFilter}>
                Add filter
              </Button>
              {filters.length > 0 && (
                <Button type="text" onClick={onResetFilters}>
                  Clear all
                </Button>
              )}
            </div>
            <Button disabled={!hasChanges} type="default" onClick={onApplyFilters}>
              Apply filters
            </Button>
          </div>
        </div>
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
}