AddHookDropdown() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Auth/Hooks/AddHookDropdown.tsx lines 30–124

export const AddHookDropdown = ({
  buttonText = 'Add hook',
  align = 'end',
  type = 'primary',
  onSelectHook,
}: AddHookDropdownProps) => {
  const { ref: projectRef } = useParams()
  const { data: organization } = useSelectedOrganizationQuery()

  const { data: authConfig } = useAuthConfigQuery({ projectRef })
  const { can: canUpdateAuthHook } = useAsyncCheckPermissions(PermissionAction.AUTH_EXECUTE, '*')
  const { getEntitlementSetValues: getEntitledHookSet } = useCheckEntitlements('auth.hooks')
  const entitledHookSet = getEntitledHookSet()

  const { availableHooks, nonAvailableHooks } = useMemo(() => {
    const allHooks: Hook[] = HOOKS_DEFINITIONS.map((definition) => ({
      ...definition,
      enabled: authConfig?.[definition.enabledKey] || false,
      method: extractMethod(
        authConfig?.[definition.uriKey] || '',
        authConfig?.[definition.secretsKey] || ''
      ),
    }))

    const availableHooks: Hook[] = allHooks.filter(
      (h) => !isValidHook(h) && entitledHookSet.includes(h.entitlementKey)
    )

    const nonAvailableHooks: Hook[] = allHooks.filter(
      (h) => !isValidHook(h) && !entitledHookSet.includes(h.entitlementKey)
    )

    return { availableHooks, nonAvailableHooks }
  }, [entitledHookSet, authConfig])

  if (!canUpdateAuthHook) {
    return (
      <ButtonTooltip
        disabled
        type={type}
        tooltip={{
          content: { side: 'bottom', text: 'You need additional permissions to add auth hooks' },
        }}
      >
        {buttonText}
      </ButtonTooltip>
    )
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button type={type} iconRight={<ChevronDown />}>
          {buttonText}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-76" align={align}>
        <div>
          {availableHooks.length === 0 && (
            <DropdownMenuLabel className="text-foreground-light">
              All available hooks have been added
            </DropdownMenuLabel>
          )}
          {availableHooks.map((h) => (
            <DropdownMenuItem key={h.title} onClick={() => onSelectHook(h.title)}>
              {h.title}
            </DropdownMenuItem>
          ))}
        </div>
        {nonAvailableHooks.length > 0 && (
          <>
            {availableHooks.length > 0 && <DropdownMenuSeparator />}

            <DropdownMenuLabel className="grid gap-1 bg-surface-200">
              <p className="text-foreground-light">Team or Enterprise Plan required</p>
              <p className="text-foreground-lighter text-xs">
                The following hooks are not available on{' '}
                <InlineLink href={`/org/${organization?.slug ?? '_'}/billing`}>
                  your plan
                </InlineLink>
                .
              </p>
            </DropdownMenuLabel>

            {nonAvailableHooks.map((h) => (
              <DropdownMenuItem key={h.title} disabled={true}>
                {h.title}
              </DropdownMenuItem>
            ))}
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}