feat(console): add toast notification system for user feedback

console/apps/webapp/src/Providers/GlobalProviders/GlobalProviders.tsx

@@ -18,8 +18,8 @@
 
 import { AuthProvider } from "@agent-management-platform/auth";
 import { ClientProvider } from "@agent-management-platform/api-client";
+import { NotificationProvider, ConfirmationDialogProvider } from "@agent-management-platform/shared-component";
 import { OxygenUIThemeProvider } from "@wso2/oxygen-ui";
-import { ConfirmationDialogProvider } from "@agent-management-platform/shared-component";
 
 export const GlobalProviders = ({
   children,
@@ -28,11 +28,13 @@ export const GlobalProviders = ({
 }) => {
   return (
     <OxygenUIThemeProvider radialBackground>
-      <AuthProvider>
-        <ClientProvider>
-          <ConfirmationDialogProvider>{children}</ConfirmationDialogProvider>
-        </ClientProvider>
-      </AuthProvider>
+      <NotificationProvider>
+        <AuthProvider>
+          <ClientProvider>
+            <ConfirmationDialogProvider>{children}</ConfirmationDialogProvider>
+          </ClientProvider>
+        </AuthProvider>
+      </NotificationProvider>
     </OxygenUIThemeProvider>
   );
 };

console/workspaces/libs/shared-component/src/components/BuildPanel.tsx

@@ -21,6 +21,7 @@ import { Wrench } from "@wso2/oxygen-ui-icons-react";
 import { Box, Button, Typography } from "@wso2/oxygen-ui";
 import { FormProvider, useForm } from "react-hook-form";
 import { TextInput, DrawerHeader, DrawerContent } from "@agent-management-platform/views";
+import { useNotification } from "../providers";
 
 interface BuildPanelProps {
     onClose: () => void;
@@ -41,41 +42,41 @@ export function BuildPanel({
     agentName,
 }: BuildPanelProps) {
     const { mutate: buildAgent, isPending } = useBuildAgent();
+    const { notify } = useNotification();
     const { data: agent, isLoading: isLoadingAgent } = useGetAgent({
         orgName,
         projName,
         agentName,
-    });    const methods = useForm<BuildFormData>({
+    });
+
+    const methods = useForm<BuildFormData>({
         defaultValues: {
             branch: "main",
             commitId: "",
         },
     });
 
-    const handleBuild = async () => {
-        try {
-            const formData = methods.getValues();
-            buildAgent({
-                params: {
-                    orgName,
-                    projName,
-                    agentName,
-                },
-                query: {
-                    commitId: formData.commitId || "",
-                },
-            }, {
-                onSuccess: () => {
-                    onClose();
-                },
-                onError: (error) => {
-                    console.error("Build trigger failed:", error);
-                },
-            });
-        }
-        catch (error) {
-            console.error("Build trigger failed:", error);
-        }
+    const handleBuild = () => {
+        const formData = methods.getValues();
+        buildAgent({
+            params: {
+                orgName,
+                projName,
+                agentName,
+            },
+            query: {
+                commitId: formData.commitId || "",
+            },
+        }, {
+            onSuccess: () => {
+                notify('success', 'Build triggered successfully');
+                onClose();
+            },
+            onError: (error) => {
+                const message = error instanceof Error ? error.message : 'Build trigger failed';
+                notify('error', message);
+            },
+        });
     };
 
     return (

console/workspaces/libs/shared-component/src/components/ConfirmDialog.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Typography,
+    CircularProgress,
+} from '@wso2/oxygen-ui';
+
+export interface ConfirmDialogProps {
+    open: boolean;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: 'error' | 'primary' | 'secondary';
+    onConfirm: () => void;
+    onCancel: () => void;
+    isLoading?: boolean;
+}
+
+/**
+ * Reusable confirmation dialog for destructive or important actions.
+ * Use for delete confirmations, irreversible operations, etc.
+ */
+export function ConfirmDialog({
+    open,
+    title,
+    message,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    confirmColor = 'error',
+    onConfirm,
+    onCancel,
+    isLoading = false,
+}: ConfirmDialogProps) {
+    return (
+        <Dialog open={open} onClose={onCancel} maxWidth="xs" fullWidth>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent>
+                <Typography variant="body2" color="text.secondary">
+                    {message}
+                </Typography>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    onClick={onCancel}
+                    variant="outlined"
+                    disabled={isLoading}
+                >
+                    {cancelLabel}
+                </Button>
+                <Button
+                    onClick={onConfirm}
+                    variant="contained"
+                    color={confirmColor}
+                    disabled={isLoading}
+                    startIcon={isLoading ? <CircularProgress size={16} color="inherit" /> : undefined}
+                >
+                    {isLoading ? 'Loading...' : confirmLabel}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

console/workspaces/libs/shared-component/src/components/DeploymentConfig.tsx

@@ -24,6 +24,7 @@ import { EnvironmentVariable } from "./EnvironmentVariable";
 import type { Environment, EnvironmentVariable as EnvVar } from "@agent-management-platform/types";
 import { useEffect } from "react";
 import { TextInput, DrawerHeader, DrawerContent } from "@agent-management-platform/views";
+import { useNotification } from "../providers";
 
 interface DeploymentConfigProps {
     onClose: () => void;
@@ -49,6 +50,7 @@ export function DeploymentConfig({
     imageId,
 }: DeploymentConfigProps) {
     const { mutate: deployAgent, isPending } = useDeployAgent();
+    const { notify } = useNotification();
     const { data: agent, isLoading: isLoadingAgent } = useGetAgent({
         orgName,
         projName,
@@ -77,34 +79,36 @@ export function DeploymentConfig({
         });
     }, [configurations, methods]);
 
-    const handleDeploy = async () => {
-        try {
-            const formData = methods.getValues();
+    const handleDeploy = () => {
+        const formData = methods.getValues();
 
-            const envVariables: EnvVar[] = formData.env
-                .filter((envVar: { key: string; value: string }) => envVar.key && envVar.value)
-                .map((envVar: { key: string; value: string }) => ({
-                    key: envVar.key,
-                    value: envVar.value,
-                }));
-            deployAgent({
-                params: {
-                    orgName,
-                    projName,
-                    agentName,
-                },
-                body: {
-                    imageId: imageId,
-                    env: envVariables.length > 0 ? envVariables : undefined,
-                },
-            }, {
-                onSuccess: () => {
-                    onClose();
-                },
-            });
-        } catch {
-            // Error handling is done by the mutation
-        }
+        const envVariables: EnvVar[] = formData.env
+            .filter((envVar: { key: string; value: string }) => envVar.key && envVar.value)
+            .map((envVar: { key: string; value: string }) => ({
+                key: envVar.key,
+                value: envVar.value,
+            }));
+
+        deployAgent({
+            params: {
+                orgName,
+                projName,
+                agentName,
+            },
+            body: {
+                imageId: imageId,
+                env: envVariables.length > 0 ? envVariables : undefined,
+            },
+        }, {
+            onSuccess: () => {
+                notify('success', 'Deployment started successfully');
+                onClose();
+            },
+            onError: (error) => {
+                const message = error instanceof Error ? error.message : 'Deployment failed';
+                notify('error', message);
+            },
+        });
     };
 
 

console/workspaces/libs/shared-component/src/components/index.ts

@@ -18,6 +18,7 @@
 
 export * from './BuildLogs';
 export * from './BuildPanel';
+export * from './ConfirmDialog';
 export * from './BuildSteps';
 export * from './CodeBlock';
 export * from './DeploymentConfig';

console/workspaces/libs/shared-component/src/index.ts

@@ -17,3 +17,4 @@
  */
 
 export * from './components';
+export * from './providers';

console/workspaces/libs/shared-component/src/providers/NotificationContext.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createContext } from 'react';
+
+// Notification severity types matching MUI Alert
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+
+// Shape of the context value
+export interface NotificationContextType {
+  notify: (type: NotificationType, message: string) => void;
+}
+
+// Context with null default - useNotification hook will throw if used outside provider
+export const NotificationContext = createContext<NotificationContextType | null>(null);

console/workspaces/libs/shared-component/src/providers/NotificationProvider.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { Alert, Snackbar } from '@wso2/oxygen-ui';
+import { NotificationContext, NotificationType } from './NotificationContext';
+
+interface Notification {
+  id: string;
+  type: NotificationType;
+  message: string;
+}
+
+interface NotificationProviderProps {
+  children: React.ReactNode;
+}
+
+const AUTO_HIDE_DURATION = 5000;
+
+export function NotificationProvider({ children }: NotificationProviderProps) {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  // Add a new notification
+  const notify = useCallback((type: NotificationType, message: string) => {
+    const id = Date.now().toString();
+    setNotifications((prev) => [...prev, { id, type, message }]);
+  }, []);
+
+  // Remove a notification by id
+  const removeNotification = useCallback((id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+
+  // Memoize context value to prevent unnecessary re-renders
+  const contextValue = useMemo(() => ({ notify }), [notify]);
+
+  return (
+    <NotificationContext.Provider value={contextValue}>
+      {children}
+      {/* Render notifications - show only the first one, queue the rest */}
+      {notifications.length > 0 && (
+        <Snackbar
+          open
+          autoHideDuration={AUTO_HIDE_DURATION}
+          onClose={() => removeNotification(notifications[0].id)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        >
+          <Alert
+            severity={notifications[0].type}
+            onClose={() => removeNotification(notifications[0].id)}
+            sx={{ width: '100%' }}
+          >
+            {notifications[0].message}
+          </Alert>
+        </Snackbar>
+      )}
+    </NotificationContext.Provider>
+  );
+}