Merge pull request meshery#9264 from aabidsofi19/notif/avatar

[UI] Make the eventActors avatar overlapping stack
captain-Akshay · Nov 1, 2023 · ba56fea · ba56fea
2 parents 2e31041 + d61e3ce
commit ba56fea
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 18 deletions.
diff --git a/ui/components/NotificationCenter/metadata.js b/ui/components/NotificationCenter/metadata.js
@@ -96,7 +96,17 @@ export const ErrorMetadataFormatter = ({ metadata, event }) => {
 };
 
 const EmptyState = ({ event }) => {
-  return <Typography variant="body1"> {event.description} </Typography>;
+  return (
+    <Typography
+      variant="body1"
+      style={{
+        marginBlock: '0.5rem',
+      }}
+    >
+      {' '}
+      {event.description}{' '}
+    </Typography>
+  );
 };
 
 export const FormattedMetadata = ({ event }) => {

diff --git a/ui/components/NotificationCenter/notification.js b/ui/components/NotificationCenter/notification.js
@@ -90,6 +90,7 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'start',
+    paddingTop: '1rem',
   },
 
   descriptionHeading: {
@@ -113,6 +114,35 @@ export const canTruncateDescription = (description) => {
   return description.length > MAX_NOTIFICATION_DESCRIPTION_LENGTH;
 };
 
+const AvatarStack = ({ avatars, direction }) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: direction,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '0',
+
+        '& .MuiAvatar-root': {
+          width: '2rem',
+          height: '2rem',
+          border: '0.05rem solid ' + theme.palette.secondary.menuActionText,
+        },
+      }}
+    >
+      {avatars.map((avatar, index) => (
+        <Tooltip title={avatar.name} placement="top" key={index}>
+          <div style={{ zIndex: avatars.length - index, marginTop: '-0.4rem' }}>
+            <Avatar alt={avatar.name} src={avatar.avatar_url} />
+          </div>
+        </Tooltip>
+      ))}
+    </Box>
+  );
+};
+
 const useMenuStyles = makeStyles((theme) => {
   return {
     paper: {
@@ -324,6 +354,21 @@ export const Notification = withErrorBoundary(({ event_id }) => {
     );
   };
 
+  const eventActors = [
+    ...(event.user_id && user
+      ? [{ name: userName, avatar_url: userAvatarUrl, tooltip: userName }]
+      : []),
+    ...(event.system_id
+      ? [
+          {
+            name: 'Meshery',
+            avatar_url: '/static/img/meshery-logo.png',
+            tooltip: `System ID: ${event.system_id}`,
+          },
+        ]
+      : []),
+  ];
+
   return (
     <Slide
       in={isVisible}
@@ -380,24 +425,13 @@ export const Notification = withErrorBoundary(({ event_id }) => {
           <ErrorBoundary>
             <Grid container className={classes.expanded}>
               <Grid item sm={1} className={classes.actorAvatar}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    gridGap: '0.5rem',
-                    flexDirection: { xs: 'row', md: 'column' },
+                <AvatarStack
+                  avatars={eventActors}
+                  direction={{
+                    xs: 'row',
+                    md: 'column',
                   }}
-                >
-                  {event.user_id && user && (
-                    <Tooltip title={userName} placement="top">
-                      <Avatar alt={userName} src={userAvatarUrl} />
-                    </Tooltip>
-                  )}
-                  {event.system_id && (
-                    <Tooltip title={`System ID: ${event.system_id}`} placement="top">
-                      <Avatar src="/static/img/meshery-logo.png" />
-                    </Tooltip>
-                  )}
-                </Box>
+                />
               </Grid>
               <Grid
                 item