feat: add user created by (#3235)

Adds the user created by avatar and name to the notification.

frontend/src/component/common/Notifications/Notification.tsx

@@ -1,5 +1,11 @@
-import { ListItemButton, useTheme } from '@mui/material';
-import { Box, Typography, styled } from '@mui/material';
+import {
+    Box,
+    Typography,
+    styled,
+    Avatar,
+    ListItemButton,
+    useTheme,
+} from '@mui/material';
 import {
     NotificationsSchemaItem,
     NotificationsSchemaItemNotificationType,
@@ -7,6 +13,7 @@ import {
 import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
 import TimeAgo from 'react-timeago';
 import { ToggleOffOutlined } from '@mui/icons-material';
+import { flexRow } from 'themes/themeStyles';
 
 const StyledContainerBox = styled(Box, {
     shouldForwardProp: prop => prop !== 'readAt',
@@ -45,8 +52,9 @@ const StyledNotificationMessageBox = styled(Box)(({ theme }) => ({
 
 const StyledSecondaryInfoBox = styled(Box)(({ theme }) => ({
     display: 'flex',
-    justifyContent: 'flex-end',
-    margin: theme.spacing(1, 0, 1, 0),
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: theme.spacing(1.5, 0, 1.5, 0),
 }));
 
 const StyledMessageTypography = styled(Typography, {
@@ -63,6 +71,21 @@ const StyledTimeAgoTypography = styled(Typography)(({ theme }) => ({
     color: theme.palette.neutral.main,
 }));
 
+const StyledUserContainer = styled(Box)(({ theme }) => ({
+    ...flexRow,
+}));
+
+const StyledAvatar = styled(Avatar)(({ theme }) => ({
+    width: '18px',
+    height: '18px',
+}));
+
+const StyledCreatedBy = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    color: theme.palette.neutral.main,
+    marginLeft: theme.spacing(1),
+}));
+
 interface INotificationProps {
     notification: NotificationsSchemaItem;
     onNotificationClick: (notification: NotificationsSchemaItem) => void;
@@ -116,6 +139,15 @@ export const Notification = ({
                     {notification.message}
                 </StyledMessageTypography>
                 <StyledSecondaryInfoBox>
+                    <StyledUserContainer>
+                        <StyledAvatar
+                            src={notification.createdBy.imageUrl || ''}
+                        />
+                        <StyledCreatedBy>
+                            Created by {notification.createdBy.username}
+                        </StyledCreatedBy>
+                    </StyledUserContainer>
+
                     <StyledTimeAgoTypography>
                         <TimeAgo date={new Date(notification.createdAt)} />
                     </StyledTimeAgoTypography>

frontend/src/component/common/Notifications/Notifications.tsx

@@ -82,7 +82,9 @@ export const Notifications = () => {
     const { trackEvent } = usePlausibleTracker();
     const [showUnread, setShowUnread] = useState(false);
 
-    const onNotificationClick = (notification: NotificationsSchemaItem) => {
+    const onNotificationClick = async (
+        notification: NotificationsSchemaItem
+    ) => {
         if (notification.link) {
             navigate(notification.link);
         }
@@ -95,22 +97,21 @@ export const Notifications = () => {
 
         setShowNotifications(false);
 
-        // Intentionally not wait for this request. We don't want to hold the user back
-        // only to mark a notification as read.
         try {
-            markAsRead({
+            await markAsRead({
                 notifications: [notification.id],
             });
+            refetchNotifications();
         } catch (e) {
             // No need to display this in the UI. Minor inconvinence if this call fails.
             console.error('Error marking notification as read: ', e);
         }
     };
 
-    const onMarkAllAsRead = () => {
+    const onMarkAllAsRead = async () => {
         try {
             if (notifications && notifications.length > 0) {
-                markAsRead({
+                await markAsRead({
                     notifications: notifications.map(
                         notification => notification.id
                     ),
@@ -155,6 +156,10 @@ export const Notifications = () => {
             />
         ));
 
+    const shouldShowFeedback = Boolean(
+        notifications && notifications.length > 0 && !showUnread
+    );
+
     return (
         <StyledPrimaryContainerBox>
             <IconButton
@@ -215,11 +220,7 @@ export const Notifications = () => {
                                 {notificationComponents}
                             </NotificationsList>
                             <ConditionallyRender
-                                condition={Boolean(
-                                    notifications &&
-                                        notifications.length > 0 &&
-                                        !showUnread
-                                )}
+                                condition={shouldShowFeedback}
                                 show={
                                     <>
                                         <Feedback

frontend/src/hooks/api/getters/useNotifications/useNotifications.ts

@@ -21,6 +21,7 @@ export const useNotifications = (options: SWRConfiguration = {}) => {
         error,
         loading: !error && !data,
         refetchNotifications,
+        mutateNotifications: mutate,
     };
 };