Repository: supabase/supabase
File: apps/studio/components/interfaces/Auth/Users/UsersV2.tsx (TypeScript)

Code before:

  const {
    data: countData,
    refetch: refetchCount,
    isLoading: isLoadingCount,
  } = useUsersCountQuery({
    projectRef,
    connectionString: project?.connectionString,
    keywords: filterKeywords,
    filter: filter === 'all' ? undefined : filter,
    providers: selectedProviders,
    forceExactCount,
  })

  const { mutateAsync: deleteUser } = useUserDeleteMutation()

  const totalUsers = countData?.count ?? 0
  const users = useMemo(() => data?.pages.flatMap((page) => page.result) ?? [], [data?.pages])
  // [Joshen] Only relevant for when selecting one user only
  const selectedUserFromCheckbox = users.find((u) => u.id === [...selectedUsers][0])

  const telemetryProps = {
    sort_column: sortColumn,
    sort_order: sortOrder,
    providers: selectedProviders,
    user_type: filter,
    keywords: filterKeywords,
  }
  const telemetryGroups = {
    project: projectRef ?? 'Unknown',
    organization: selectedOrg?.slug ?? 'Unknown',
  }

  const formatEstimatedCount = (count: number) => {
    if (count >= 1e6) return `${(count / 1e6).toFixed(1)}M`
    if (count >= 1e3) return `${(count / 1e3).toFixed(1)}K`
    return count.toString()
  }

  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
    const isScrollingHorizontally = xScroll.current !== event.currentTarget.scrollLeft
    xScroll.current = event.currentTarget.scrollLeft

    if (
      isLoading ||
      isFetchingNextPage ||
      isScrollingHorizontally ||
      !isAtBottom(event) ||
      !hasNextPage
    ) {
      return

Review comment (suggestion):
It might be clearer to match the `"all"` behavior here to `undefined`, just like on L177 and L156 above. That way, it’s explicit that `"all"` means "no filter" rather than a literal `"all"` user type and it keeps the telemetry data consistent with the query payload.

You could use the same ternary logic:
```js
user_type: filter === 'all' ? undefined : filter
```

Code after:
    organization: selectedOrg?.slug ?? 'Unknown',
  }

  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
    const isScrollingHorizontally = xScroll.current !== event.currentTarget.scrollLeft
    xScroll.current = event.currentTarget.scrollLeft

    if (
      isLoading ||
      isFetchingNextPage ||
      isScrollingHorizontally ||
      !isAtBottom(event) ||
      !hasNextPage
    ) {
      return
    }
    fetchNextPage()
  }

  const swapColumns = (data: any[], sourceIdx: number, targetIdx: number) => {
    const updatedColumns = data.slice()
    const [removed] = updatedColumns.splice(sourceIdx, 1)
    updatedColumns.splice(targetIdx, 0, removed)
    return updatedColumns
  }

  // [Joshen] Left off here - it's tricky trying to do both column toggling and re-ordering
  const saveColumnConfiguration = AwesomeDebouncePromise(
    (event: 'resize' | 'reorder' | 'toggle', value) => {
      if (event === 'toggle') {
        const columnConfig = value.columns.map((col: any) => ({
          id: col.key,
          width: col.width,
        }))
        setColumnConfiguration(columnConfig)
      } else if (event === 'resize') {
        const columnConfig = columns.map((col, idx) => ({
          id: col.key,
          width: idx === value.idx ? value.width : col.width,
        }))
        setColumnConfiguration(columnConfig)
      } else if (event === 'reorder') {
        const columnConfig = value.columns.map((col: any) => ({
          id: col.key,
          width: col.width,
        }))
        setColumnConfiguration(columnConfig)
      }
    },
    500
  )