diff --git a/ui/components/providers/no-providers-added.tsx b/ui/components/providers/no-providers-added.tsx index 5bfb8836ea..a9cc9d351c 100644 --- a/ui/components/providers/no-providers-added.tsx +++ b/ui/components/providers/no-providers-added.tsx @@ -11,10 +11,21 @@ const NO_PROVIDERS_ADDED_ACTION = { LINK: "link", } as const; +// "page" is the full-screen empty state (Providers page); "hint" is a compact +// horizontal banner that sits above other content (Scans page). +const NO_PROVIDERS_ADDED_VARIANT = { + PAGE: "page", + HINT: "hint", +} as const; + +type NoProvidersAddedVariant = + (typeof NO_PROVIDERS_ADDED_VARIANT)[keyof typeof NO_PROVIDERS_ADDED_VARIANT]; + interface NoProvidersAddedBaseProps { containerClassName?: string; // Tour anchor for the CTA; needed because this empty state replaces the table's AddProviderButton. ctaTourId?: string; + variant?: NoProvidersAddedVariant; } interface NoProvidersAddedButtonProps extends NoProvidersAddedBaseProps { @@ -33,14 +44,23 @@ type NoProvidersAddedProps = | NoProvidersAddedButtonProps | NoProvidersAddedLinkProps; -const renderCta = (props: NoProvidersAddedProps) => { +const renderCta = ( + props: NoProvidersAddedProps, + variant: NoProvidersAddedVariant, +) => { + const isHint = variant === NO_PROVIDERS_ADDED_VARIANT.HINT; + const className = isHint + ? "w-full justify-center md:w-fit" + : "w-full max-w-xs justify-center"; + const size = isHint ? undefined : "lg"; + if (props.action === NO_PROVIDERS_ADDED_ACTION.LINK) { return ( @@ -50,9 +70,9 @@ const renderCta = (props: NoProvidersAddedProps) => { return (