AccessTokenNewBanner() — supabase Function Reference

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

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ AccessTokenNewBanner() — supabase Function Reference

Dependency Diagram

graph TD
  5d7ad770_c152_5219_ce27_4b3faaf4ace2["AccessTokenNewBanner()"]
  22a9ee12_f62e_6418_f74e_46b8fd2a178b["useGroupedPermissions()"]
  5d7ad770_c152_5219_ce27_4b3faaf4ace2 -->|calls| 22a9ee12_f62e_6418_f74e_46b8fd2a178b
  style 5d7ad770_c152_5219_ce27_4b3faaf4ace2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx lines 18–67

export const AccessTokenNewBanner = <T,>({
  token,
  onClose,
  getTokenValue,
  getTokenPermissions,
  title = 'Successfully generated a new token!',
  description = 'Copy this access token and store it in a secure place. You will not be able to see it again.',
}: AccessTokenNewBannerProps<T>) => {
  const tokenPermissions = getTokenPermissions?.(token)
  const { groupedPermissions, totalCount } = useGroupedPermissions(tokenPermissions)

  return (
    <Admonition
      type="tip"
      title={title}
      className="mb-6 relative"
      actions={
        <Button
          type="text"
          icon={<X />}
          className="w-7 h-7 absolute top-2.5 right-2.5"
          onClick={onClose}
        />
      }
    >
      <div className="space-y-4">
        <p className="text-sm text-foreground-light">{description}</p>
        <div className="w-full pb-2">
          <Input
            copy
            readOnly
            size="small"
            className="w-full input-mono"
            id="access-token-value"
            value={getTokenValue(token)}
            onChange={() => {}}
            onCopy={() => toast.success('Token copied to clipboard')}
          />
        </div>

        {tokenPermissions && tokenPermissions.length > 0 && (
          <TokenPermissionsSection
            groupedPermissions={groupedPermissions}
            totalCount={totalCount}
          />
        )}
      </div>
    </Admonition>
  )
}