Merge pull request #144 from mercedes-benz/VULCAN-941/GrayedOutButton

notification handler for rups package creation

Author: brahmprakashMishra

src/chart/table/TableChart.tsx

@@ -25,6 +25,7 @@ import { renderCellExpand } from '../../component/misc/DataGridExpandRenderer';
 import { getCheckboxes, hasCheckboxes, updateCheckBoxes } from './TableActionsHelper';
 import ApiService from '../../utils/apiService';
 import { AxiosResponse } from 'axios';
+import Notification from '../../component/custom/Notification';
 
 const TABLE_HEADER_HEIGHT = 32;
 const TABLE_FOOTER_HEIGHT = 62;
@@ -143,6 +144,13 @@ export const NeoTableChart = (props: ChartProps) => {
     setAnchorEl(null);
   };
 
+  const [alertOpen, setAlertOpen] = React.useState(false);
+  const [notificationMessage, setNotificationMessage] = React.useState('');
+  const [notificationSeverity, setNotificationSeverity] = React.useState<'success' | 'warning' | 'error'>('success');
+
+  const handleNotificationClose = () => {
+    setAlertOpen(false);
+  };
   const lineBreakColumns: string[] = props.settings?.lineBreaksAfterListEntry;
 
   const actionableFields = actionsRules.filter((r) => r.condition !== 'rowCheck').map((r) => r.field);
@@ -335,9 +343,15 @@ export const NeoTableChart = (props: ChartProps) => {
       }
 
       props.updateReportSetting('apiSpec', { ...props.settings?.apiSpec, response });
+      setNotificationMessage('RUPS package created. Please find the link above');
+      setNotificationSeverity('success');
+      setAlertOpen(true);
     } catch (error) {
       // Handle errors here
       console.error('API call error:', error);
+      setNotificationMessage('RUPS package creation is currently not working. Please try again later.');
+      setNotificationSeverity('error');
+      setAlertOpen(true);
     } finally {
       setApiLoading(false);
     }
@@ -401,6 +415,12 @@ export const NeoTableChart = (props: ChartProps) => {
 
   return (
     <ThemeProvider theme={theme}>
+      <Notification
+        open={alertOpen}
+        message={notificationMessage}
+        severity={notificationSeverity}
+        onClose={handleNotificationClose}
+      />
       {isApiSpecEnabled ? apiCallButton() : <></>}
       <div className={classes.root} style={tableStyle}>
         <Snackbar

src/component/custom/Notification.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+
+interface NotificationProps {
+  open: boolean;
+  message: string;
+  severity: 'success' | 'warning' | 'error';
+  onClose: () => void;
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />;
+});
+
+const Notification: React.FC<NotificationProps> = ({ open, message, severity, onClose }) => {
+  return (
+    <Snackbar open={open} autoHideDuration={6000} onClose={onClose}>
+      <Alert onClose={onClose} severity={severity}>
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default Notification;