RouteTdContent() — supabase Function Reference

Architecture documentation for the RouteTdContent() function in ApiRenderers.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ RouteTdContent() — supabase Function Reference

Dependency Diagram

graph TD
  59d587f0_9d65_94af_80fd_c71fd8754398["RouteTdContent()"]
  9846cadd_8749_5d21_87ef_8ec41cd4e645["queryParamsToObject()"]
  59d587f0_9d65_94af_80fd_c71fd8754398 -->|calls| 9846cadd_8749_5d21_87ef_8ec41cd4e645
  style 59d587f0_9d65_94af_80fd_c71fd8754398 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx lines 352–404

const RouteTdContent = (datum: RouteTdContentProps) => (
  <Collapsible_Shadcn_>
    <CollapsibleTrigger_Shadcn_ asChild>
      <div className="flex gap-2 items-center">
        <Button asChild type="text" className=" !py-0 !p-1" title="Show more route details">
          <span>
            <ChevronRight
              size={14}
              className="transition data-open-parent:rotate-90 data-closed-parent:rotate-0"
            />
          </span>
        </Button>
        <TextFormatter
          className="w-10 h-4 text-center rounded bg-surface-300"
          value={datum.method}
        />
        {datum.status_code && (
          <TextFormatter
            className={`w-10 h-4 text-center rounded ${
              datum.status_code >= 400
                ? 'bg-orange-500'
                : datum.status_code >= 300
                  ? 'bg-yellow-500'
                  : 'bg-green-500'
            }`}
            value={String(datum.status_code)}
          />
        )}
        <div className=" truncate max-w-sm lg:max-w-lg">
          <TextFormatter className="text-foreground-light" value={datum.path} />
          <TextFormatter
            className="max-w-sm text-foreground-lighter truncate "
            value={decodeURIComponent(datum.search || '')}
          />
        </div>
      </div>
    </CollapsibleTrigger_Shadcn_>
    <CollapsibleContent_Shadcn_ className="pt-2">
      {datum.search ? (
        <pre className={`syntax-highlight overflow-auto rounded bg-surface-100 p-2 !text-xs`}>
          <div
            className="text-wrap"
            dangerouslySetInnerHTML={{
              __html: jsonSyntaxHighlight(queryParamsToObject(datum.search)),
            }}
          />
        </pre>
      ) : (
        <p className="text-xs text-foreground-lighter">No query parameters in this request</p>
      )}
    </CollapsibleContent_Shadcn_>
  </Collapsible_Shadcn_>
)