new notifications (#13813)

Author: NANDINI-star

ui/litellm-dashboard/src/components/SCIM.tsx

@@ -21,7 +21,7 @@ import {
   PlusCircleOutlined
 } from "@ant-design/icons";
 import { parseErrorMessage } from "./shared/errorUtils";
-import NotificationManager from "./molecules/notifications_manager";
+import NotificationsManager from "./molecules/notifications_manager";
 
 interface SCIMConfigProps {
   accessToken: string | null;
@@ -52,7 +52,7 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
 
   const handleCreateSCIMToken = async (values: any) => {
     if (!accessToken || !userID) {
-      NotificationManager.fromBackend("You need to be logged in to create a SCIM token");
+      NotificationsManager.fromBackend("You need to be logged in to create a SCIM token");
       return;
     }
 
@@ -68,10 +68,10 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
 
       const response = await keyCreateCall(accessToken, userID, formData);
       setTokenData(response);
-      message.success("SCIM token created successfully");
+      NotificationsManager.success("SCIM token created successfully");
     } catch (error: any) {
       console.error("Error creating SCIM token:", error);
-      NotificationManager.fromBackend("Failed to create SCIM token: " + parseErrorMessage(error));
+      NotificationsManager.fromBackend("Failed to create SCIM token: " + parseErrorMessage(error));
     } finally {
       setIsCreatingToken(false);
     }
@@ -112,7 +112,7 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
               />
               <CopyToClipboard
                 text={scimBaseUrl}
-                onCopy={() => message.success("URL copied to clipboard")}
+                onCopy={() => NotificationsManager.success("URL copied to clipboard")}
               >
                 <TremorButton variant="primary" className="ml-2 flex items-center">
                   <CopyOutlined className="h-4 w-4 mr-1" />
@@ -183,7 +183,7 @@ const SCIMConfig: React.FC<SCIMConfigProps> = ({ accessToken, userID, proxySetti
                   />
                   <CopyToClipboard
                     text={tokenData.key}
-                    onCopy={() => message.success("Token copied to clipboard")}
+                    onCopy={() => NotificationsManager.success("Token copied to clipboard")}
                   >
                     <TremorButton variant="primary" className="flex items-center">
                       <CopyOutlined className="h-4 w-4 mr-1" />

ui/litellm-dashboard/src/components/SSOModals.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Modal, Form, Input, Button as Button2, Select, message } from "antd";
 import { Text, TextInput } from "@tremor/react";
 import { getSSOSettings, updateSSOSettings } from "./networking";
-import NotificationManager from "./molecules/notifications_manager";
+import NotificationsManager from "./molecules/notifications_manager";
 
 interface SSOModalsProps {
   isAddSSOModalVisible: boolean;
@@ -162,7 +162,7 @@ const SSOModals: React.FC<SSOModalsProps> = ({
   // Enhanced form submission handler
   const handleFormSubmit = async (formValues: Record<string, any>) => {
     if (!accessToken) {
-      NotificationManager.fromBackend("No access token available");
+      NotificationsManager.fromBackend("No access token available");
       return;
     }
 
@@ -174,14 +174,14 @@ const SSOModals: React.FC<SSOModalsProps> = ({
       handleShowInstructions(formValues);
     } catch (error) {
       console.error("Failed to save SSO settings:", error);
-      NotificationManager.fromBackend("Failed to save SSO settings");
+      NotificationsManager.fromBackend("Failed to save SSO settings");
     }
   };
 
   // Handle clearing SSO settings
   const handleClearSSO = async () => {
     if (!accessToken) {
-      NotificationManager.fromBackend("No access token available");
+      NotificationsManager.fromBackend("No access token available");
       return;
     }
 
@@ -214,10 +214,10 @@ const SSOModals: React.FC<SSOModalsProps> = ({
       // Close the main SSO modal and trigger refresh
       handleAddSSOOk();
 
-      message.success("SSO settings cleared successfully");
+      NotificationsManager.success("SSO settings cleared successfully");
     } catch (error) {
       console.error("Failed to clear SSO settings:", error);
-      NotificationManager.fromBackend("Failed to clear SSO settings");
+      NotificationsManager.fromBackend("Failed to clear SSO settings");
     }
   };
 

ui/litellm-dashboard/src/components/TeamSSOSettings.tsx

@@ -4,7 +4,7 @@ import { Typography, Spin, message, Switch, Select, Form } from "antd";
 import { getDefaultTeamSettings, updateDefaultTeamSettings, modelAvailableCall } from "./networking";
 import BudgetDurationDropdown, { getBudgetDurationLabel } from "./common_components/budget_duration_dropdown";
 import { getModelDisplayName } from "./key_team_helpers/fetch_available_models_team_key";
-import NotificationManager from "./molecules/notifications_manager";
+import NotificationsManager from "./molecules/notifications_manager";
 
 interface TeamSSOSettingsProps {
   accessToken: string | null;
@@ -48,7 +48,7 @@ const TeamSSOSettings: React.FC<TeamSSOSettingsProps> = ({ accessToken, userID,
         }
       } catch (error) {
         console.error("Error fetching team SSO settings:", error);
-        NotificationManager.fromBackend("Failed to fetch team settings");
+        NotificationsManager.fromBackend("Failed to fetch team settings");
       } finally {
         setLoading(false);
       }
@@ -65,10 +65,10 @@ const TeamSSOSettings: React.FC<TeamSSOSettingsProps> = ({ accessToken, userID,
       const updatedSettings = await updateDefaultTeamSettings(accessToken, editedValues);
       setSettings({...settings, values: updatedSettings.settings});
       setIsEditing(false);
-      message.success("Default team settings updated successfully");
+      NotificationsManager.success("Default team settings updated successfully");
     } catch (error) {
       console.error("Error updating team settings:", error);
-      NotificationManager.fromBackend("Failed to update team settings");
+      NotificationsManager.fromBackend("Failed to update team settings");
     } finally {
       setSaving(false);
     }

ui/litellm-dashboard/src/components/add_model/model_connection_test.tsx

@@ -3,7 +3,7 @@ import { Typography, Space, Button, Divider, message } from 'antd';
 import { WarningOutlined, InfoCircleOutlined, CopyOutlined } from '@ant-design/icons';
 import { testConnectionRequest } from "../networking";
 import { prepareModelAddRequest } from "./handle_add_model_submit";
-
+import NotificationsManager from '../molecules/notifications_manager';
 const { Text } = Typography;
 
 interface ModelConnectionTestProps {
@@ -59,7 +59,7 @@ const ModelConnectionTest: React.FC<ModelConnectionTestProps> = ({
 
       const response = await testConnectionRequest(accessToken, litellmParamsObj, modelInfoObj?.mode);
       if (response.status === "success") {
-        message.success("Connection test successful!");
+        NotificationsManager.success("Connection test successful!");
         setError(null);
         setIsSuccess(true);
       } else {
@@ -231,7 +231,7 @@ ${formattedBody}
                 icon={<CopyOutlined />} 
                 onClick={() => {
                   navigator.clipboard.writeText(curlCommand || '');
-                  message.success('Copied to clipboard');
+                  NotificationsManager.success('Copied to clipboard');
                 }}
               >
                 Copy to Clipboard

ui/litellm-dashboard/src/components/add_pass_through.tsx

@@ -28,7 +28,7 @@ import { list } from "postcss";
 import KeyValueInput from "./key_value_input";
 import { passThroughItem } from "./pass_through_settings";
 import RoutePreview from "./route_preview";
-import NotificationManager from "./molecules/notifications_manager";
+import NotificationsManager from "./molecules/notifications_manager";
 const { Option } = Select2;
 
 interface AddFallbacksProps {
@@ -81,22 +81,22 @@ const AddPassThroughEndpoint: React.FC<AddFallbacksProps> = ({
       const updatedPassThroughSettings = [...passThroughItems, createdEndpoint]
       setPassThroughItems(updatedPassThroughSettings)
 
-      message.success("Pass-through endpoint created successfully");
+      NotificationsManager.success("Pass-through endpoint created successfully");
       form.resetFields();
       setPathValue("");
       setTargetValue("");
       setIncludeSubpath(true);
       setIsModalVisible(false);
     } catch (error) {
-      NotificationManager.fromBackend("Error creating pass-through endpoint: " + error);
+      NotificationsManager.fromBackend("Error creating pass-through endpoint: " + error);
     } finally {
       setIsLoading(false);
     }
   };
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
-    message.success('Copied to clipboard!');
+    NotificationsManager.success('Copied to clipboard!');
   };
 
 

ui/litellm-dashboard/src/components/admins.tsx

@@ -46,7 +46,7 @@ import { ssoProviderConfigs } from './SSOModals';
 import SCIMConfig from "./SCIM";
 import UIAccessControlForm from "./UIAccessControlForm";
 import UsefulLinksManagement from "./useful_links_management";
-import NotificationManager from "./molecules/notifications_manager";
+import NotificationsManager from "./molecules/notifications_manager";
 
 interface AdminPanelProps {
   searchParams: any;
@@ -151,7 +151,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const handleShowAllowedIPs = async () => {
     try {
       if (premiumUser !== true) {
-        NotificationManager.fromBackend(
+        NotificationsManager.fromBackend(
           "This feature is only available for premium users. Please upgrade your account."
         )
         return
@@ -164,7 +164,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
       }
     } catch (error) {
       console.error("Error fetching allowed IPs:", error);
-      NotificationManager.fromBackend(`Failed to fetch allowed IPs ${error}`);
+      NotificationsManager.fromBackend(`Failed to fetch allowed IPs ${error}`);
       setAllowedIPs([all_ip_address_allowed]);
     } finally {
       if (premiumUser === true) {
@@ -180,11 +180,11 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
         // Fetch the updated list of IPs
         const updatedIPs = await getAllowedIPs(accessToken);
         setAllowedIPs(updatedIPs);
-        message.success('IP address added successfully');
+        NotificationsManager.success('IP address added successfully');
       }
     } catch (error) {
       console.error("Error adding IP:", error);
-      NotificationManager.fromBackend(`Failed to add IP address ${error}`);
+      NotificationsManager.fromBackend(`Failed to add IP address ${error}`);
     } finally {
       setIsAddIPModalVisible(false);
     }
@@ -202,10 +202,10 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
         // Fetch the updated list of IPs
         const updatedIPs = await getAllowedIPs(accessToken);
         setAllowedIPs(updatedIPs.length > 0 ? updatedIPs : [all_ip_address_allowed]);
-        message.success('IP address deleted successfully');
+        NotificationsManager.success('IP address deleted successfully');
       } catch (error) {
         console.error("Error deleting IP:", error);
-        NotificationManager.fromBackend(`Failed to delete IP address ${error}`);
+        NotificationsManager.fromBackend(`Failed to delete IP address ${error}`);
       } finally {
         setIsDeleteIPModalVisible(false);
         setIPToDelete(null);
@@ -426,7 +426,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const handleMemberUpdate = async (formValues: Record<string, any>) => {
     try {
       if (accessToken != null && admins != null) {
-        message.info("Making API Call");
+        NotificationsManager.info("Making API Call");
         const response: any = await userUpdateUserCall(
           accessToken,
           formValues,
@@ -447,7 +447,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
           // If new user is found, update it
           setAdmins(admins); // Set the new state
         }
-        message.success("Refresh tab to see updated user role");
+        NotificationsManager.success("Refresh tab to see updated user role");
         setIsUpdateModalModalVisible(false);
       }
     } catch (error) {
@@ -458,7 +458,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const handleMemberCreate = async (formValues: Record<string, any>) => {
     try {
       if (accessToken != null && admins != null) {
-        message.info("Making API Call");
+        NotificationsManager.info("Making API Call");
         const response: any = await userUpdateUserCall(
           accessToken,
           formValues,
@@ -497,7 +497,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const handleAdminCreate = async (formValues: Record<string, any>) => {
     try {
       if (accessToken != null && admins != null) {
-        message.info("Making API Call");
+        NotificationsManager.info("Making API Call");
         const user_role: Member = {
           role: "user",
           user_email: formValues.user_email,
@@ -565,7 +565,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
                 <div>
                   <Button 
                     style={{ width: '150px' }}
-                    onClick={() => premiumUser === true ? setIsAddSSOModalVisible(true) : NotificationManager.fromBackend("Only premium users can add SSO")}
+                    onClick={() => premiumUser === true ? setIsAddSSOModalVisible(true) : NotificationsManager.fromBackend("Only premium users can add SSO")}
                   >
                     {ssoConfigured ? "Edit SSO Settings" : "Add SSO"}
                   </Button>
@@ -581,7 +581,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
                 <div>
                   <Button 
                     style={{ width: '150px' }}
-                    onClick={() => premiumUser === true ? setIsUIAccessControlModalVisible(true) : NotificationManager.fromBackend("Only premium users can configure UI access control")}
+                    onClick={() => premiumUser === true ? setIsUIAccessControlModalVisible(true) : NotificationsManager.fromBackend("Only premium users can configure UI access control")}
                   >
                     UI Access Control
                   </Button>
@@ -691,7 +691,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
             accessToken={accessToken} 
             onSuccess={() => {
               handleUIAccessControlOk();
-              message.success("UI Access Control settings updated successfully");
+              NotificationsManager.success("UI Access Control settings updated successfully");
             }} 
           />
         </Modal>

ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx

@@ -18,6 +18,7 @@ import { InputNumber, message } from "antd";
 import { alertingSettingsCall, updateConfigFieldSetting } from "../networking";
 import { TrashIcon, CheckCircleIcon } from "@heroicons/react/outline";
 import DynamicForm from "./dynamic_form";
+import NotificationsManager from "../molecules/notifications_manager";
 interface alertingSettingsItem {
   field_name: string;
   field_type: string;
@@ -96,7 +97,7 @@ const AlertingSettings: React.FC<AlertingSettingsProps> = ({
         }
       }
       // update value in state
-      message.success("Wait 10s for proxy to update.");
+      NotificationsManager.success("Wait 10s for proxy to update.");
     } catch (error) {
       // do something
     }

ui/litellm-dashboard/src/components/budgets/budget_modal.tsx

@@ -18,7 +18,7 @@ import {
   message,
 } from "antd";
 import { budgetCreateCall } from "../networking";
-import NotificationManager from "../molecules/notifications_manager";
+import NotificationsManager from "../molecules/notifications_manager";
 
 interface BudgetModalProps {
   isModalVisible: boolean;
@@ -48,18 +48,18 @@ const BudgetModal: React.FC<BudgetModalProps> = ({
       return;
     }
     try {
-      message.info("Making API Call");
+      NotificationsManager.info("Making API Call");
       // setIsModalVisible(true);
       const response = await budgetCreateCall(accessToken, formValues);
       console.log("key create Response:", response);
       setBudgetList((prevData) =>
         prevData ? [...prevData, response] : [response]
       ); // Check if prevData is null
-      message.success("Budget Created");
+      NotificationsManager.success("Budget Created");
       form.resetFields();
     } catch (error) {
       console.error("Error creating the key:", error);
-      NotificationManager.fromBackend(`Error creating the key: ${error}`);
+      NotificationsManager.fromBackend(`Error creating the key: ${error}`);
     }
   };
 

ui/litellm-dashboard/src/components/budgets/budget_panel.tsx

@@ -39,7 +39,8 @@ import {
 } from "@heroicons/react/outline";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { getBudgetList, budgetDeleteCall } from "../networking";
-import { message } from "antd";
+import NotificationsManager from "../molecules/notifications_manager";
+
 interface BudgetSettingsPageProps {
   accessToken: string | null;
 }
@@ -84,15 +85,15 @@ const BudgetPanel: React.FC<BudgetSettingsPageProps> = ({ accessToken }) => {
       return;
     }
 
-    message.info("Request made");
+    NotificationsManager.info("Request made");
 
     await budgetDeleteCall(accessToken, budget_id);
 
     const newBudgetList = [...budgetList];
     newBudgetList.splice(index, 1);
     setBudgetList(newBudgetList);
 
-    message.success("Budget Deleted.");
+    NotificationsManager.success("Budget Deleted.");
   };
 
   const handleUpdateCall = async () => {