Update disabled backend component (#4747)

* Update disabled backend component

* fix test message

* it's ruff out there

---------

Co-authored-by: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
This commit is contained in:
Carlos 2025-02-05 19:35:48 +01:00 committed by Masen Furer
parent 35954f749a
commit 2832a3c67c
No known key found for this signature in database
GPG Key ID: B0008AD22B3B3A95
2 changed files with 100 additions and 26 deletions

View File

@ -7,7 +7,6 @@ from typing import Optional
from reflex import constants
from reflex.components.component import Component
from reflex.components.core.cond import cond
from reflex.components.datadisplay.logo import svg_logo
from reflex.components.el.elements.typography import Div
from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.components.dialog import (
@ -330,36 +329,113 @@ class BackendDisabled(Div):
rx.cond(
is_backend_disabled,
rx.box(
rx.el.link(
rel="preconnect",
href="https://fonts.googleapis.com",
),
rx.el.link(
rel="preconnect",
href="https://fonts.gstatic.com",
crossorigin="",
),
rx.el.link(
href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,500;0,600&display=swap",
rel="stylesheet",
),
rx.box(
rx.card(
rx.vstack(
svg_logo(),
rx.text(
"You ran out of compute credits.",
),
rx.callout(
rx.fragment(
"Please upgrade your plan or raise your compute credits at ",
rx.link(
"Reflex Cloud.",
href="https://cloud.reflex.dev/",
),
),
width="100%",
icon="info",
variant="surface",
),
rx.vstack(
rx.text(
"This app is paused",
font_size="1.5rem",
font_weight="600",
line_height="1.25rem",
letter_spacing="-0.0375rem",
),
font_size="20px",
font_family='"Inter", "Helvetica", "Arial", sans-serif',
variant="classic",
rx.hstack(
rx.el.svg(
rx.el.svg.path(
d="M6.90816 1.34341C7.61776 1.10786 8.38256 1.10786 9.09216 1.34341C9.7989 1.57799 10.3538 2.13435 10.9112 2.91605C11.4668 3.69515 12.0807 4.78145 12.872 6.18175L12.9031 6.23672C13.6946 7.63721 14.3085 8.72348 14.6911 9.60441C15.0755 10.4896 15.267 11.2539 15.1142 11.9881C14.9604 12.7275 14.5811 13.3997 14.0287 13.9079C13.4776 14.4147 12.7273 14.6286 11.7826 14.7313C10.8432 14.8334 9.6143 14.8334 8.0327 14.8334H7.9677C6.38604 14.8334 5.15719 14.8334 4.21778 14.7313C3.27301 14.6286 2.52269 14.4147 1.97164 13.9079C1.41924 13.3997 1.03995 12.7275 0.88613 11.9881C0.733363 11.2539 0.92483 10.4896 1.30926 9.60441C1.69184 8.72348 2.30573 7.63721 3.09722 6.23671L3.12828 6.18175C3.91964 4.78146 4.53355 3.69515 5.08914 2.91605C5.64658 2.13435 6.20146 1.57799 6.90816 1.34341ZM7.3335 11.3334C7.3335 10.9652 7.63063 10.6667 7.99716 10.6667H8.00316C8.3697 10.6667 8.66683 10.9652 8.66683 11.3334C8.66683 11.7016 8.3697 12.0001 8.00316 12.0001H7.99716C7.63063 12.0001 7.3335 11.7016 7.3335 11.3334ZM7.3335 8.66675C7.3335 9.03495 7.63196 9.33341 8.00016 9.33341C8.36836 9.33341 8.66683 9.03495 8.66683 8.66675V6.00008C8.66683 5.63189 8.36836 5.33341 8.00016 5.33341C7.63196 5.33341 7.3335 5.63189 7.3335 6.00008V8.66675Z",
fill_rule="evenodd",
clip_rule="evenodd",
fill=rx.color("amber", 11),
),
width="16",
height="16",
viewBox="0 0 16 16",
fill="none",
xmlns="http://www.w3.org/2000/svg",
margin_top="0.125rem",
flex_shrink="0",
),
rx.text(
"If you are the owner of this app, visit ",
rx.link(
"Reflex Cloud",
color=rx.color("amber", 11),
underline="always",
_hover={
"color": rx.color("amber", 11),
"text_decoration_color": rx.color(
"amber", 11
),
},
text_decoration_color=rx.color("amber", 10),
href="https://cloud.reflex.dev/",
font_weight="600",
is_external=True,
),
" for more information on how to resume your app.",
font_size="0.875rem",
font_weight="500",
line_height="1.25rem",
letter_spacing="-0.01094rem",
color=rx.color("amber", 11),
),
align="start",
gap="0.625rem",
border_radius="0.75rem",
border_width="1px",
border_color=rx.color("amber", 5),
background_color=rx.color("amber", 3),
padding="0.625rem",
),
rx.link(
rx.el.button(
"Resume app",
color="rgba(252, 252, 253, 1)",
font_size="0.875rem",
font_weight="600",
line_height="1.25rem",
letter_spacing="-0.01094rem",
height="2.5rem",
padding="0rem 0.75rem",
width="100%",
border_radius="0.75rem",
background=f"linear-gradient(180deg, {rx.color('violet', 9)} 0%, {rx.color('violet', 10)} 100%)",
_hover={
"background": f"linear-gradient(180deg, {rx.color('violet', 10)} 0%, {rx.color('violet', 10)} 100%)",
},
),
width="100%",
underline="none",
href="https://cloud.reflex.dev/",
is_external=True,
),
gap="1rem",
),
font_family='"Instrument Sans", "Helvetica", "Arial", sans-serif',
position="fixed",
top="50%",
left="50%",
transform="translate(-50%, -50%)",
width="40ch",
width="60ch",
max_width="90vw",
border_radius="0.75rem",
border_width="1px",
border_color=rx.color("slate", 4),
padding="1.5rem",
background_color=rx.color("slate", 1),
box_shadow="0px 2px 5px 0px light-dark(rgba(28, 32, 36, 0.03), rgba(0, 0, 0, 0.00))",
),
position="fixed",
z_index=9999,

View File

@ -119,9 +119,7 @@ def has_cloud_banner(driver: WebDriver) -> bool:
True if the banner is displayed, False otherwise.
"""
try:
driver.find_element(
By.XPATH, "//*[ contains(text(), 'You ran out of compute credits.') ]"
)
driver.find_element(By.XPATH, "//*[ contains(text(), 'This app is paused') ]")
except NoSuchElementException:
return False
else: