Update DialogContext.Snackbar(#647)

Update snackbar to accept ReactNode as message
bcgov · Nov 19, 2021 · 54d031e · 54d031e
1 parent cc2f638
commit 54d031e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/app/src/contexts/dialogContext.tsx b/app/src/contexts/dialogContext.tsx
@@ -4,7 +4,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import { Color } from '@material-ui/lab/Alert';
 import { ErrorDialog, IErrorDialogProps } from 'components/dialog/ErrorDialog';
 import YesNoDialog, { IYesNoDialogProps } from 'components/dialog/YesNoDialog';
-import React, { createContext, useState } from 'react';
+import React, { createContext, ReactNode, useState } from 'react';
 
 export interface IDialogContext {
   /**
@@ -55,12 +55,11 @@ export interface IDialogContext {
 }
 
 export interface ISnackbarProps {
-  snackbarText: string;
   open: boolean;
   onClose: () => void;
   severity?: Color;
   color?: Color;
-  snackbarMessage?: string;
+  snackbarMessage: ReactNode;
 }
 
 export const defaultYesNoDialogProps: IYesNoDialogProps = {
@@ -91,7 +90,7 @@ export const defaultErrorDialogProps: IErrorDialogProps = {
 };
 
 export const defaultSnackbarProps: ISnackbarProps = {
-  snackbarText: '',
+  snackbarMessage: '',
   open: false,
   onClose: () => {
     // default do nothing
@@ -159,7 +158,7 @@ export const DialogContextProvider: React.FC = (props) => {
         open={snackbarProps.open}
         autoHideDuration={6000}
         onClose={() => setSnackbar({ open: false })}
-        message={snackbarProps.snackbarText}
+        message={snackbarProps.snackbarMessage}
         action={
           <React.Fragment>
             <IconButton size="small" aria-label="close" color="inherit" onClick={() => setSnackbar({ open: false })}>

diff --git a/app/src/features/admin/users/ActiveUsersList.tsx b/app/src/features/admin/users/ActiveUsersList.tsx
@@ -59,7 +59,7 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
     dialogContext.setSnackbar({ ...textDialogProps, open: true });
   };
 
-  const handleRemoveUserClick = (row: any) => {
+  const handleRemoveUserClick = (row: IGetUserResponse) => {
     dialogContext.setYesNoDialog({
       dialogTitle: 'Remove user?',
       dialogContent: (
@@ -90,14 +90,23 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
     });
   };
 
-  const deActivateSystemUser = async (user: any) => {
+  const deActivateSystemUser = async (user: IGetUserResponse) => {
     if (!user?.id) {
       return;
     }
     try {
       await biohubApi.user.deleteSystemUser(user.id);
 
-      showSnackBar({ snackbarText: 'Success! User removed', snackbarMessage: 'User successfully removed', open: true });
+      showSnackBar({
+        snackbarMessage: (
+          <>
+            <Typography variant="body2" component="div">
+              User <strong>{user.user_identifier}</strong> removed.
+            </Typography>
+          </>
+        ),
+        open: true
+      });
 
       props.getUsers(true);
     } catch (error) {