Add AlertComponent for displaying alerts in the GUI

frontend/taipy-gui/src/components/Taipy/Notification.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Alert from "@mui/material/Alert"; 
+import { TaipyBaseProps } from "./utils";
+
+interface NotificationProps extends TaipyBaseProps {
+ severity?: "error" | "warning" | "info" | "success";
+ message: string | (() => string); // Dynamic string handling
+ variant?: "filled" | "outlined" | "standard";
+}
+
+const Notification = (props: NotificationProps) => { 
+ const { severity = "info", message, variant = "filled" } = props;
+
+ // Handle dynamic string by checking if `message` is a function and calling it
+ const displayMessage = typeof message === "function" ? message() : message;
+
+ return (
+ <Alert severity={severity} variant={variant} id={props.id} className={props.className}>
+ {displayMessage}
+ </Alert>
+ );
+};
+
+export default Notification;

frontend/taipy-gui/src/components/Taipy/index.ts

@@ -41,6 +41,7 @@ import StatusList from "./StatusList";
 import Table from "./Table";
 import Toggle from "./Toggle";
 import TreeView from "./TreeView";
+import Notification from "./Notification";
 
 const registeredComponents: Record<string, ComponentType> = {};
 
@@ -66,6 +67,7 @@ export const getRegisteredComponents = () => {
  MenuCtl: MenuCtl,
  Metric: Metric,
  NavBar: NavBar,
+ Notification: Notification,
  PageContent: PageContent,
  Pane: Pane,
  Part: Part,

taipy/gui/_renderers/factory.py

@@ -30,6 +30,7 @@ class _Factory:
  __TAIPY_NAME_SPACE = "taipy."
 
  __CONTROL_DEFAULT_PROP_NAME = {
+ "alert": "message",
  "button": "label",
  "chat": "messages",
  "chart": "data",
@@ -618,6 +619,18 @@ class _Factory:
  ]
  )
  ._set_propagate(),
+ "alert": lambda gui, control_type, attrs: _Builder(
+ gui=gui,
+ control_type=control_type,
+ element_name="Notification", 
+ attributes=attrs,
+ )
+ .set_value_and_default(var_type=PropertyType.dynamic_string) 
+ .set_attributes(
+ [
+ ("severity", PropertyType.string), # severity is a simple string property
+ ]
+ ),
  }
 
  # TODO: process \" in property value

taipy/gui/viselements.json

@@ -1735,7 +1735,36 @@
  }
  ]
  }
- ]
+ ],
+ [
+ "alert", 
+ {
+ "inherits": ["shared"],
+ "properties": [
+ {
+ "name": "severity",
+ "default_property": false,
+ "type": "dynamic(str)",
+ "default_value": "\"info\"",
+ "doc": "Defines the severity level of the notification. Valid values: \"error\", \"warning\", \"info\", \"success\"."
+ },
+ {
+ "name": "message",
+ "default_property": true, 
+ "type": "dynamic(str)",
+ "default_value": "\"\"",
+ "doc": "The message displayed in the notification. Can be a dynamic string."
+ },
+ {
+ "name": "variant",
+ "default_property": false,
+ "type": "str",
+ "default_value": "\"filled\"",
+ "doc": "Defines the variant of the notification. Valid values: \"filled\", \"outlined\", \"standard\"."
+ }
+ ]
+ }
+ ] 
  ],
  "blocks": [
  [