deprecate overlay_component (#5544)

* deprecate overlay_component

* fix deprecation message

Author: adhami3310

reflex/app.py

@@ -22,6 +22,7 @@
     Sequence,
 )
 from datetime import datetime
+from itertools import chain
 from pathlib import Path
 from timeit import default_timer as timer
 from types import SimpleNamespace
@@ -238,10 +239,6 @@ def default_error_boundary(*children: Component, **props) -> Component:
     )
 
 
-class OverlayFragment(Fragment):
-    """Alias for Fragment, used to wrap the overlay_component."""
-
-
 @dataclasses.dataclass(frozen=True)
 class UploadFile(StarletteUploadFile):
     """A file uploaded to the server.
@@ -369,6 +366,11 @@ class App(MiddlewareMixin, LifespanMixin):
         )
     )
 
+    # Extra app wraps to be applied to the whole app.
+    extra_app_wraps: dict[tuple[int, str], Callable[[bool], Component | None]] = (
+        dataclasses.field(default_factory=dict)
+    )
+
     # Components to add to the head of every page.
     head_components: list[Component] = dataclasses.field(default_factory=list)
 
@@ -1031,25 +1033,31 @@ def _should_compile(self) -> bool:
         # By default, compile the app.
         return True
 
-    def _add_overlay_to_component(self, component: Component) -> Component:
-        if self.overlay_component is None:
-            return component
-
+    def _add_overlay_to_component(
+        self, component: Component, overlay_component: Component
+    ) -> Component:
         children = component.children
-        overlay_component = self._generate_component(self.overlay_component)
 
         if children[0] == overlay_component:
             return component
 
-        # recreate OverlayFragment with overlay_component as first child
-        return OverlayFragment.create(overlay_component, *children)
+        return Fragment.create(overlay_component, *children)
 
     def _setup_overlay_component(self):
         """If a State is not used and no overlay_component is specified, do not render the connection modal."""
-        if self._state is None and self.overlay_component is default_overlay_component:
-            self.overlay_component = None
+        if self.overlay_component is None:
+            return
+        console.deprecate(
+            feature_name="overlay_component",
+            reason="Use `extra_app_wraps` to add the overlay component instead.",
+            deprecation_version="0.8.2",
+            removal_version="0.9.0",
+        )
+        overlay_component = self._generate_component(self.overlay_component)
         for k, component in self._pages.items():
-            self._pages[k] = self._add_overlay_to_component(component)
+            self._pages[k] = self._add_overlay_to_component(
+                component, overlay_component
+            )
 
     def _setup_sticky_badge(self):
         """Add the sticky badge to the app."""
@@ -1261,7 +1269,10 @@ def memoized_toast_provider():
             app_wrappers[(1, "ToasterProvider")] = toast_provider
 
         # Add the app wraps to the app.
-        for key, app_wrap in self.app_wraps.items():
+        for key, app_wrap in chain(
+            self.app_wraps.items(), self.extra_app_wraps.items()
+        ):
+            # If the app wrap is a callable, generate the component
             component = app_wrap(self._state is not None)
             if component is not None:
                 app_wrappers[key] = component

reflex/compiler/compiler.py

@@ -828,10 +828,9 @@ def compile_unevaluated_page(
                     enable_state = True
                     break
 
-        from reflex.app import OverlayFragment
         from reflex.utils.format import make_default_page_title
 
-        component = OverlayFragment.create(component)
+        component = Fragment.create(component)
 
         meta_args = {
             "title": (

reflex/istate/data.py

@@ -202,8 +202,8 @@ def page(self) -> PageData:
             The PageData object.
         """
         console.deprecate(
-            "RouterData.page",
-            "Use RouterData.url instead",
+            feature_name="RouterData.page",
+            reason="Use RouterData.url instead",
             deprecation_version="0.8.1",
             removal_version="0.9.0",
         )

reflex/utils/console.py

@@ -269,6 +269,7 @@ def _get_first_non_framework_frame() -> FrameType | None:
 
 
 def deprecate(
+    *,
     feature_name: str,
     reason: str,
     deprecation_version: str,

tests/units/test_app.py

@@ -24,7 +24,6 @@
 from reflex.app import (
     App,
     ComponentCallable,
-    OverlayFragment,
     default_overlay_component,
     process,
     upload,
@@ -1244,7 +1243,7 @@ async def test_process_events(mocker: MockerFixture, token: str):
 @pytest.mark.parametrize(
     ("state", "overlay_component", "exp_page_child"),
     [
-        (None, default_overlay_component, None),
+        (None, default_overlay_component, Fragment),
         (None, None, None),
         (None, Text.create("foo"), Text),
         (State, default_overlay_component, Fragment),
@@ -1269,10 +1268,10 @@ def test_overlay_component(
     app._setup_overlay_component()
     if exp_page_child is None:
         assert app.overlay_component is None
-    elif isinstance(exp_page_child, OverlayFragment):
+    elif isinstance(exp_page_child, Fragment):
         assert app.overlay_component is not None
         generated_component = app._generate_component(app.overlay_component)
-        assert isinstance(generated_component, OverlayFragment)
+        assert isinstance(generated_component, Fragment)
         assert isinstance(
             generated_component.children[0],
             Cond,  # ConnectionModal is a Cond under the hood