chore: add snackbar for showing success alert

web/src/components/snackbar.tsx

@@ -0,0 +1,62 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import Snackbar from '@mui/material/Snackbar'
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
+import Slide, { SlideProps } from '@mui/material/Slide'
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})
+
+const Transition = (props: SlideProps) => {
+  return <Slide {...props} direction="up" />
+}
+
+export enum AlertSeverityType {
+  Success = 'success',
+  Warning = 'warning',
+  Info = 'info',
+  Error = 'error'
+}
+
+type BootstrapSnackbarProps = {
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+  message: string
+  severity: AlertSeverityType
+}
+
+const BootstrapSnackbar = ({
+  open,
+  setOpen,
+  message,
+  severity
+}: BootstrapSnackbarProps) => {
+  const handleClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpen(false)
+  }
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={3000}
+      onClose={handleClose}
+      TransitionComponent={Transition}
+    >
+      <Alert onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
+        {message}
+      </Alert>
+    </Snackbar>
+  )
+}
+
+export default BootstrapSnackbar

web/src/containers/Settings/permission.tsx

@@ -29,6 +29,7 @@ import PermissionFilterModal from './permissionFilterModal'
 import AddPermissionModal from './addPermissionModal'
 import UpdatePermissionModal from './updatePermissionModal'
 import DeleteModal from './deletePermissionModal'
+import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
 
 import {
   GroupDetailsResponse,
@@ -52,6 +53,11 @@ const Permission = () => {
   const [openModal, setOpenModal] = useState(false)
   const [modalTitle, setModalTitle] = useState('')
   const [modalPayload, setModalPayload] = useState('')
+  const [openSnackbar, setOpenSnackbar] = useState(false)
+  const [snackbarMessage, setSnackbarMessage] = useState('')
+  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
+    AlertSeverityType.Success
+  )
   const [addPermissionModalOpen, setAddPermissionModalOpen] = useState(false)
   const [updatePermissionModalOpen, setUpdatePermissionModalOpen] =
     useState(false)
@@ -177,9 +183,9 @@ const Permission = () => {
       .post('/SASjsApi/permission', addPermissionPayload)
       .then((res: any) => {
         fetchPermissions()
-        setModalTitle('Success')
+        setSnackbarMessage('Permission added!')
-        setModalPayload('Permission added Successfully.')
+        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenModal(true)
+        setOpenSnackbar(true)
       })
       .catch((err) => {
         setModalTitle('Abort')
@@ -209,9 +215,9 @@ const Permission = () => {
       })
       .then((res: any) => {
         fetchPermissions()
-        setModalTitle('Success')
+        setSnackbarMessage('Permission updated!')
-        setModalPayload('Permission updated Successfully.')
+        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenModal(true)
+        setOpenSnackbar(true)
       })
       .catch((err) => {
         setModalTitle('Abort')
@@ -240,9 +246,9 @@ const Permission = () => {
       .delete(`/SASjsApi/permission/${selectedPermission?.permissionId}`)
       .then((res: any) => {
         fetchPermissions()
-        setModalTitle('Success')
+        setSnackbarMessage('Permission deleted!')
-        setModalPayload('Permission deleted Successfully.')
+        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenModal(true)
+        setOpenSnackbar(true)
       })
       .catch((err) => {
         setModalTitle('Abort')
@@ -294,6 +300,12 @@ const Permission = () => {
           />
         </Grid>
       </Grid>
+      <BootstrapSnackbar
+        open={openSnackbar}
+        setOpen={setOpenSnackbar}
+        message={snackbarMessage}
+        severity={snackbarSeverity}
+      />
       <Modal
         open={openModal}
         setOpen={setOpenModal}
@@ -454,7 +466,7 @@ const DisplayGroup = ({ group }: DisplayGroupProps) => {
         disableRestoreFocus
       >
         <Typography sx={{ p: 1 }} variant="h6" component="div">
-          Group Users
+          Group Members
         </Typography>
         {group.users.map((user) => (
           <Typography sx={{ p: 1 }} component="li">