Scope() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/Scopes.tsx lines 42–100

const Scope = ({
  title,
  description,
  readScopeName,
  writeScopeName,
  scopes,
  setScopes,
}: {
  title: string
  description: string
  readScopeName: OAuthScope
  writeScopeName: OAuthScope
  scopes: OAuthScope[]
  setScopes: Dispatch<SetStateAction<OAuthScope[]>>
}) => {
  let accessDescription = 'Access: No access'
  if (scopes.includes(readScopeName)) {
    accessDescription = 'Access: Read-only'
  }
  if (scopes.includes(writeScopeName)) {
    accessDescription = 'Access: Write-only'
  }
  if (scopes.includes(readScopeName) && scopes.includes(writeScopeName)) {
    accessDescription = 'Access: Read and write'
  }

  return (
    <div
      className="flex flex-row justify-between p-4 border first:rounded-t last:rounded-b gap-x-2"
      key={title}
    >
      <div className="flex flex-col">
        <span className="text-foreground text-sm">{title}</span>
        <span className="text-foreground-light text-xs capitalize-sentence">{description}</span>
      </div>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button type="default" iconRight={<ChevronDown />}>
            <p>{accessDescription}</p>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-40">
          <DropdownMenuLabel>Select an access level</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <ScopeDropdownCheckboxItem scopeName={readScopeName} scopes={scopes} onChange={setScopes}>
            Read
          </ScopeDropdownCheckboxItem>
          <ScopeDropdownCheckboxItem
            scopeName={writeScopeName}
            scopes={scopes}
            onChange={setScopes}
          >
            Write
          </ScopeDropdownCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}