TroubleshootingFilterInternal() — supabase Function Reference

Architecture documentation for the TroubleshootingFilterInternal() function in Troubleshooting.ui.client.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ TroubleshootingFilterInternal() — supabase Function Reference

Dependency Diagram

graph TD
  799d8a70_c062_29ce_481e_96e0e7857118["TroubleshootingFilterInternal()"]
  d6b58f41_efbc_4023_278f_9b90e8e39130["useTroubleshootingSearchState()"]
  799d8a70_c062_29ce_481e_96e0e7857118 -->|calls| d6b58f41_efbc_4023_278f_9b90e8e39130
  style 799d8a70_c062_29ce_481e_96e0e7857118 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/features/docs/Troubleshooting.ui.client.tsx lines 162–295

function TroubleshootingFilterInternal({
  keywords,
  products,
  errors,
  className,
}: TroubleshootingFilterProps) {
  const {
    selectedProducts,
    selectedErrorCodes,
    selectedTags,
    searchState,
    setSelectedProducts,
    setSelectedErrorCodes,
    setSelectedTags,
    setSearchState,
    reset,
  } = useTroubleshootingSearchState()

  const searchInputRef = useRef<HTMLInputElement | null>(null)

  const allEntries = useRef<HTMLElement[]>([])
  useEffect(() => {
    const container = document.getElementById(TROUBLESHOOTING_CONTAINER_ID)
    if (!container) return

    const entries = Array.from(
      container.querySelectorAll(
        `[${TROUBLESHOOTING_DATA_ATTRIBUTES.QUERY_ATTRIBUTE}="${TROUBLESHOOTING_DATA_ATTRIBUTES.QUERY_VALUE_ENTRY}"]`
      )
    ) as HTMLElement[]
    allEntries.current = entries
  }, [])

  const allErrorCodes: string[] = useMemo(
    () =>
      Array.from(
        new Set(
          errors?.flatMap((error) => {
            const result: string[] = []
            if (error.http_status_code) {
              result.push(String(error.http_status_code))
            }
            if (error.code) {
              result.push(error.code)
            }
            return result
          }) ?? []
        )
      ),
    [errors]
  )

  return (
    <>
      <h2 className="sr-only">Search and filter</h2>
      <div className={cn('flex flex-wrap gap-2 items-center', className)}>
        {!!products && (
          <MultiSelector values={selectedProducts} onValuesChange={setSelectedProducts}>
            <MultiSelector.Trigger badgeLimit={1} className="w-48" label="Products" />
            <MultiSelector.Content>
              <MultiSelector.List>
                {products?.map((product) => (
                  <MultiSelector.Item key={`product-${product}`} value={product}>
                    {product}
                  </MultiSelector.Item>
                ))}
              </MultiSelector.List>
            </MultiSelector.Content>
          </MultiSelector>
        )}
        <MultiSelector values={selectedErrorCodes} onValuesChange={setSelectedErrorCodes}>
          <MultiSelector.Trigger badgeLimit={1} className="w-48" label="Error codes" />
          <MultiSelector.Content>
            <MultiSelector.List>
              {allErrorCodes.map((error) => (
                <MultiSelector.Item key={`error-${error}`} value={error}>
                  {error}
                </MultiSelector.Item>
              ))}
            </MultiSelector.List>
          </MultiSelector.Content>
        </MultiSelector>
        <MultiSelector values={selectedTags} onValuesChange={setSelectedTags}>
          <MultiSelector.Trigger badgeLimit={1} className="w-48" label="Tags" />
          <MultiSelector.Content>
            <MultiSelector.List>
              {keywords?.map((keyword) => (
                <MultiSelector.Item key={`keyword-${keyword}`} value={keyword}>
                  {keyword}
                </MultiSelector.Item>
              ))}
            </MultiSelector.List>
          </MultiSelector.Content>
        </MultiSelector>
        <div className="relative">
          <Input_Shadcn_
            id="troubleshooting-search"
            ref={searchInputRef}
            type="text"
            placeholder="Search by keyword"
            className="pl-8 pr-8 h-[40px] w-60 rounded-md border-alternative placeholder:text-foreground-light"
            value={searchState}
            onChange={(e) => setSearchState(e.target.value)}
          />
          <Search
            aria-hidden
            className="absolute left-2 top-1/2 -translate-y-1/2 text-foreground-light"
            size={16}
          />
          {searchState && (
            <button
              className="absolute right-1 top-1/2 -translate-y-1/2 text-foreground-light border-alternative hover:border-stronger rounded-md p-1 transition-colors"
              onClick={() => {
                setSearchState('')
                searchInputRef.current?.focus()
              }}
            >
              <span className="sr-only">Clear search</span>
              <X size={16} />
            </button>
          )}
        </div>
        <Button_Shadcn_
          variant="outline"
          className="rounded-md text-foreground-light h-[40px] w-[40px] p-0"
          onClick={reset}
        >
          <RotateCw size={16} />
          <span className="sr-only">Reset filters</span>
        </Button_Shadcn_>
      </div>
    </>
  )
}