Skip to content

Commit

Permalink
Update disabled backend component (#4747)
Browse files Browse the repository at this point in the history 
* Update disabled backend component

* fix test message

* it's ruff out there

---------

Co-authored-by: Khaleel Al-Adhami <[email protected]>
  • Loading branch information
@carlosabadia @adhami3310
carlosabadia and adhami3310 authored Feb 5, 2025
1 parent 88f9424 commit d0ffc9b
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 22 deletions.
114 changes: 95 additions & 19 deletions reflex/components/core/banner.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
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 (
Expand Down Expand Up @@ -330,36 +329,113 @@ def create(cls, **props) -> Component:
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.vstack(
rx.text(
"This app is paused",
font_size="1.5rem",
font_weight="600",
line_height="1.25rem",
letter_spacing="-0.0375rem",
),
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.callout(
rx.fragment(
"Please upgrade your plan or raise your compute credits at ",
rx.link(
"Reflex Cloud.",
href="https://cloud.reflex.dev/",
),
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%",
icon="info",
variant="surface",
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,
),
font_size="20px",
font_family='"Inter", "Helvetica", "Arial", sans-serif',
variant="classic",
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,
Expand Down
4 changes: 1 addition & 3 deletions tests/integration/test_connection_banner.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit d0ffc9b

Please sign in to comment.