[QA] Notifications tests

vizro-core/changelog.d/20251218_123929_alexey_snigir_enable_alerts_tests.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/examples/scratch_dev/app.py

@@ -164,7 +164,7 @@
     ],
 )
 
-dashboard = vm.Dashboard(pages=[page_1, page_two])
+dashboard = vm.Dashboard(pages=[page_1, page_two], title="Test Dashboard")
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/src/vizro/actions/_notifications.py

@@ -103,7 +103,7 @@ def set_variant_defaults(self):
 
     @property
     def outputs(self) -> _IdOrIdProperty:  # type: ignore[override]
-        return "vizro_notifications.sendNotifications"
+        return "vizro-notifications.sendNotifications"
 
     @_log_call
     def function(self):

vizro-core/src/vizro/models/_page.py

@@ -237,7 +237,7 @@ def build(self) -> _PageBuildType:
                 dcc.Location(id="vizro_url", refresh="callback-nav"),
                 dmc.NotificationContainer(
                     position="top-right",
-                    id="vizro_notifications",
+                    id="vizro-notifications",
                 ),
             ]
         )

vizro-core/src/vizro/static/css/layout.css

@@ -249,7 +249,7 @@ Current logic:
 
   #header,
   #right-side,
-  #notification-container {
+  #vizro-notifications {
     zoom: 80%;
   }
 }

vizro-core/src/vizro/static/css/notifications.css

@@ -1,9 +1,14 @@
+#vizro-notifications > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
 .alert-info, .alert-success, .alert-warning, .alert-error {
   align-items: flex-start;
   background: var(--surfaces-bg-card-inverted);
   box-shadow: var(--bs-box-shadow);
   display: flex;
-  margin-top: 12px;
   padding: 12px 8px;
 }
 

vizro-core/tests/e2e/vizro/dashboards/default/dashboard.py

@@ -33,6 +33,7 @@
     layout_flex_with_wrap_param_and_ag_grid,
     layout_flex_without_params,
 )
+from pages.notifications_page import static_notifications_page
 from pages.parameters_multi_page import parameters_multi_page
 from pages.parameters_page import parameters_page
 from pages.set_control_cross_filter_page import (
@@ -106,6 +107,7 @@
         action_model_field_shortcut_page,
         action_ag_grid_underlying_id_shortcut_page,
         action_control_shortcut_page,
+        static_notifications_page,
     ],
     navigation=vm.Navigation(
         pages={
@@ -166,6 +168,7 @@
                 cnst.ACTION_MODEL_FIELD_SHORTCUT_PAGE,
                 cnst.ACTION_AG_GRID_UNDERLYING_ID_SHORTCUT_PAGE,
                 cnst.ACTION_CONTROL_SHORTCUT_PAGE,
+                cnst.STATIC_NOTIFICATIONS_PAGE,
             ],
         }
     ),

vizro-core/tests/e2e/vizro/dashboards/default/pages/notifications_page.py

@@ -0,0 +1,134 @@
+import e2e.vizro.constants as cnst
+
+import vizro.actions as va
+import vizro.models as vm
+import vizro.plotly.express as px
+
+df = px.data.iris()
+
+static_notifications_page = vm.Page(
+    title=cnst.STATIC_NOTIFICATIONS_PAGE,
+    layout=vm.Flex(),
+    components=[
+        vm.Button(
+            id=cnst.SUCCESS_NOTIFICATION_BUTTON,
+            icon=cnst.SUCCESS_NOTIFICATION_ICON,
+            text="Success Notification",
+            actions=[
+                va.show_notification(
+                    id=cnst.SUCCESS_NOTIFICATION_ID,
+                    text=cnst.SUCCESS_NOTIFICATION_MESSAGE,
+                    variant="success",
+                    auto_close=False,
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.WARNING_NOTIFICATION_BUTTON,
+            icon=cnst.WARNING_NOTIFICATION_ICON,
+            text="Warning Notification",
+            actions=[
+                va.show_notification(
+                    id=cnst.WARNING_NOTIFICATION_ID,
+                    text=cnst.WARNING_NOTIFICATION_MESSAGE,
+                    variant="warning",
+                    auto_close=False,
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.ERROR_NOTIFICATION_BUTTON,
+            icon=cnst.ERROR_NOTIFICATION_ICON,
+            text="Error Notification",
+            actions=[
+                va.show_notification(
+                    id=cnst.ERROR_NOTIFICATION_ID,
+                    text=cnst.ERROR_NOTIFICATION_MESSAGE,
+                    variant="error",
+                    auto_close=False,
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.INFO_NOTIFICATION_BUTTON,
+            icon=cnst.INFO_NOTIFICATION_ICON,
+            text="Info Notification",
+            actions=[
+                va.show_notification(
+                    id=cnst.INFO_NOTIFICATION_ID,
+                    text=cnst.INFO_NOTIFICATION_MESSAGE,
+                    variant="info",
+                    auto_close=False,
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.CUSTOM_NOTIFICATION_BUTTON,
+            icon=cnst.CUSTOM_NOTIFICATION_ICON,
+            text="Custom Notification",
+            actions=[
+                va.show_notification(
+                    id=cnst.CUSTOM_NOTIFICATION_ID,
+                    text=cnst.CUSTOM_NOTIFICATION_MESSAGE,
+                    title=cnst.CUSTOM_NOTIFICATION_TITLE,
+                    variant="success",
+                    icon=cnst.CUSTOM_NOTIFICATION_ICON,
+                    auto_close=False,
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.PROGRESS_NOTIFICATION_BUTTON,
+            text="1. Show Loading",
+            icon="hourglass_empty",
+            actions=[
+                va.show_notification(
+                    id=cnst.UPDATE_NOTIFICATION_ID,
+                    text=cnst.PROGRESS_NOTIFICATION_MESSAGE,
+                    title=cnst.PROGRESS_NOTIFICATION_TITLE,
+                    variant="progress",
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.UPDATE_NOTIFICATION_BUTTON,
+            text="2. Update to Complete",
+            icon="check_circle",
+            actions=[
+                va.update_notification(
+                    notification=cnst.UPDATE_NOTIFICATION_ID,
+                    text=cnst.UPDATE_NOTIFICATION_MESSAGE,
+                    title=cnst.UPDATE_NOTIFICATION_TITLE,
+                    variant="success",
+                    auto_close=False,
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.LINK_NOTIFICATION_BUTTON,
+            text="Markdown with Link",
+            icon="link",
+            actions=[
+                va.show_notification(
+                    id=cnst.LINK_NOTIFICATION_ID,
+                    text=cnst.LINK_NOTIFICATION_MESSAGE,
+                    title=cnst.LINK_NOTIFICATION_TITLE,
+                    auto_close=False,
+                )
+            ],
+        ),
+        vm.Button(
+            id=cnst.AUTO_CLOSE_NOTIFICATION_BUTTON,
+            text="Auto-Close",
+            icon="close",
+            actions=[
+                va.show_notification(
+                    id=cnst.AUTO_CLOSE_NOTIFICATION_ID,
+                    text=cnst.AUTO_CLOSE_NOTIFICATION_MESSAGE,
+                    title=cnst.AUTO_CLOSE_NOTIFICATION_TITLE,
+                    variant="info",
+                )
+            ],
+        ),
+    ],
+)