RoleImpersonationPopover() — supabase Function Reference

Source Code

apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx lines 17–69

export const RoleImpersonationPopover = ({
  serviceRoleLabel,
  variant = 'regular',
  align = 'end',
  disallowAuthenticatedOption = false,
}: RoleImpersonationPopoverProps) => {
  const state = useRoleImpersonationStateSnapshot()

  const [isOpen, setIsOpen] = useState(false)

  const currentRole = state.role?.role ?? serviceRoleLabel ?? 'service role'

  return (
    <Popover_Shadcn_ open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger_Shadcn_ asChild>
        <Button
          size="tiny"
          type="default"
          className={cn(
            'h-[26px] pr-3 gap-0',
            variant === 'connected-on-right' && 'rounded-r-none border-r-0',
            variant === 'connected-on-left' && 'rounded-l-none border-l-0',
            variant === 'connected-on-both' && 'rounded-none border-x-0'
          )}
        >
          <div className="flex items-center gap-1">
            <span className="text-foreground-muted">Role</span>
            <span>{currentRole}</span>
            {state.role?.type === 'postgrest' && state.role.role === 'authenticated' && (
              <>
                {state.role.userType === 'native' && state.role.user ? (
                  <UserRoleButtonSection user={state.role.user} />
                ) : state.role.userType === 'external' && state.role.externalAuth ? (
                  <ExternalAuthButtonSection sub={state.role.externalAuth.sub} />
                ) : null}
                <span className="text-xs text-foreground-lighter font-light">
                  {state.role.aal === 'aal2' ? 'AAL2' : 'AAL1'}
                </span>
              </>
            )}
            <ChevronDown className="text-muted" strokeWidth={1} size={12} />
          </div>
        </Button>
      </PopoverTrigger_Shadcn_>
      <PopoverContent_Shadcn_ className="p-0 overflow-hidden w-min" side="bottom" align={align}>
        <RoleImpersonationSelector
          serviceRoleLabel={serviceRoleLabel}
          disallowAuthenticatedOption={disallowAuthenticatedOption}
        />
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
}