Review fixes

frontend/src/hooks/api/notifications/mutations.tsx

@@ -23,17 +23,21 @@ export const useMarkAllNotificationsAsRead = () => {
   });
 };
 
-export const useMarkNotificationAsRead = () => {
+export const useUpdateNotification = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (notificationId: string) => {
-      await apiRequest.post(`/api/v1/notifications/user/${notificationId}/mark-as-read`);
+    mutationFn: async ({ notificationId, isRead }: { notificationId: string; isRead: boolean }) => {
+      const { data } = await apiRequest.patch<{ notification: TUserNotification }>(
+        `/api/v1/notifications/user/${notificationId}`,
+        { isRead }
+      );
+      return data.notification;
     },
-    onSuccess: (_, notificationId) => {
+    onSuccess: (updatedNotification) => {
       queryClient.setQueryData<TUserNotification[]>(notificationKeys.list(), (oldData) => {
         if (!oldData) return oldData;
         return oldData.map((notification) =>
-          notification.id === notificationId ? { ...notification, isRead: true } : notification
+          notification.id === updatedNotification.id ? updatedNotification : notification
         );
       });
     }

frontend/src/hooks/api/notifications/queries.tsx

@@ -20,6 +20,6 @@ export const useGetMyNotifications = () => {
       );
       return notifications;
     },
-    refetchInterval: 10 * 1000 // Poll every 10 seconds
+    refetchInterval: 30 * 1000 // Poll every 30 seconds
   });
 };

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -1,6 +1,6 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
-import { faBell, faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faArrowUpRightFromSquare,
   faBook,
@@ -25,7 +25,6 @@ import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
   BreadcrumbContainer,
   Button,
-  ContentLoader,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -43,19 +42,13 @@ import { useToggle } from "@app/hooks";
 import { useGetOrganizations, useLogoutUser, workspaceKeys } from "@app/hooks/api";
 import { authKeys, selectOrganization } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
-import {
-  useDeleteNotification,
-  useMarkAllNotificationsAsRead,
-  useMarkNotificationAsRead
-} from "@app/hooks/api/notifications/mutations";
-import { useGetMyNotifications } from "@app/hooks/api/notifications/queries";
 import { getAuthToken } from "@app/hooks/api/reactQuery";
 import { SubscriptionPlan } from "@app/hooks/api/types";
 import { AuthMethod } from "@app/hooks/api/users/types";
 import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
 import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
-import { Notification } from "./Notification";
+import { NotificationDropdown } from "./NotificationDropdown";
 
 const getPlan = (subscription: SubscriptionPlan) => {
   if (subscription.groups) return "Enterprise";
@@ -127,16 +120,6 @@ export const Navbar = () => {
   const router = useRouter();
   const queryClient = useQueryClient();
 
-  const { data: notifications, isLoading } = useGetMyNotifications();
-  const { mutate: markAllAsRead } = useMarkAllNotificationsAsRead();
-  const { mutate: markNotificationAsRead } = useMarkNotificationAsRead();
-  const { mutate: deleteNotification } = useDeleteNotification();
-
-  const unreadCount = useMemo(
-    () => notifications?.filter((n) => !n.isRead).length || 0,
-    [notifications]
-  );
-
   const location = useLocation();
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
@@ -377,86 +360,7 @@ export const Navbar = () => {
           )}
         </DropdownMenuContent>
       </DropdownMenu>
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger>
-          <div className="relative border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
-            <FontAwesomeIcon icon={faBell} className="text-mineshaft-200" />
-            {unreadCount > 0 && (
-              <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-yellow-400 px-1 text-[10px] text-black">
-                {unreadCount > 99 ? "99+" : unreadCount}
-              </span>
-            )}
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          align="end"
-          side="bottom"
-          className="mt-3 flex h-[550px] w-[400px] overflow-hidden rounded-lg"
-        >
-          <div className="flex w-full flex-col">
-            <div className="flex items-center justify-between border-b border-mineshaft-500 px-4 py-2">
-              <span className="text-xl font-semibold text-white">Notifications</span>
-              <button
-                type="button"
-                className="text-xs font-medium text-mineshaft-300 hover:text-primary-400 disabled:pointer-events-none disabled:opacity-50"
-                onClick={(e) => {
-                  e.preventDefault();
-                  markAllAsRead();
-                }}
-                disabled={unreadCount === 0}
-              >
-                Mark all as read
-              </button>
-            </div>
-            <div className="flex h-full w-full overflow-auto">
-              {isLoading && (
-                <div className="flex h-full w-full items-center justify-center">
-                  <ContentLoader className="pointer-events-none" lottieClassName="size-10" />
-                </div>
-              )}
-              {!isLoading && notifications?.length === 0 && (
-                <div className="flex h-full w-full flex-col items-center justify-center">
-                  <FontAwesomeIcon icon={faBell} size="3x" className="text-mineshaft-400" />
-                  <span className="mt-4 text-sm text-mineshaft-300">No new notifications</span>
-                  <span className="text-xs text-mineshaft-400">
-                    We&apos;ll let you know when something important happens.
-                  </span>
-                </div>
-              )}
-              {!isLoading && notifications && notifications.length > 0 && (
-                <div className="flex w-full flex-col">
-                  {notifications.map((notification) => (
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      key={notification.id}
-                      onClick={() => {
-                        if (!notification.isRead) {
-                          markNotificationAsRead(notification.id);
-                        }
-                        if (notification.link) {
-                          router.navigate({ to: notification.link });
-                        }
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key !== "Enter") return;
-                        if (!notification.isRead) {
-                          markNotificationAsRead(notification.id);
-                        }
-                        if (notification.link) {
-                          router.navigate({ to: notification.link });
-                        }
-                      }}
-                    >
-                      <Notification notification={notification} onDelete={deleteNotification} />
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <NotificationDropdown />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <div className="rounded-r-md border border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">

frontend/src/layouts/OrganizationLayout/components/NavBar/Notification.tsx

@@ -26,9 +26,9 @@ export const Notification = ({ notification, onDelete }: Props) => {
           {!notification.isRead && (
             <FontAwesomeIcon icon={faCircle} className="mt-1.5 size-2 text-yellow-400" />
           )}
-          <Tooltip content={notification.title} delayDuration={300}>
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap font-medium leading-5 text-mineshaft-100">
-              <Markdown>{notification.title}</Markdown>
+          <Tooltip content={<Markdown>{notification.title}</Markdown>} delayDuration={300}>
+            <span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-5 text-mineshaft-100">
+              <Markdown components={{ p: "span" }}>{notification.title}</Markdown>
             </span>
           </Tooltip>
           <span className="ml-auto mt-px whitespace-nowrap text-xs text-mineshaft-400">
@@ -36,7 +36,7 @@ export const Notification = ({ notification, onDelete }: Props) => {
           </span>
         </div>
         {notification.body && (
-          <span className="max-w-[350px] text-sm text-mineshaft-300">
+          <span className="max-w-[350px] text-xs text-mineshaft-300">
             <Markdown>{notification.body}</Markdown>
           </span>
         )}

frontend/src/layouts/OrganizationLayout/components/NavBar/NotificationDropdown.tsx

@@ -0,0 +1,116 @@
+import { useMemo } from "react";
+import { faBell } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "@tanstack/react-router";
+
+import {
+  ContentLoader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "@app/components/v2";
+import {
+  useDeleteNotification,
+  useMarkAllNotificationsAsRead,
+  useUpdateNotification
+} from "@app/hooks/api/notifications/mutations";
+import { useGetMyNotifications } from "@app/hooks/api/notifications/queries";
+
+import { Notification } from "./Notification";
+
+export const NotificationDropdown = () => {
+  const router = useRouter();
+
+  const { data: notifications, isLoading } = useGetMyNotifications();
+  const { mutate: markAllAsRead } = useMarkAllNotificationsAsRead();
+  const { mutate: updateNotification } = useUpdateNotification();
+  const { mutate: deleteNotification } = useDeleteNotification();
+
+  const unreadCount = useMemo(
+    () => notifications?.filter((n) => !n.isRead).length || 0,
+    [notifications]
+  );
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger>
+        <div className="relative border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
+          <FontAwesomeIcon icon={faBell} className="text-mineshaft-200" />
+          {unreadCount > 0 && (
+            <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-yellow-400 px-1 text-[10px] text-black">
+              {unreadCount > 99 ? "99+" : unreadCount}
+            </span>
+          )}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        side="bottom"
+        className="mt-3 flex h-[550px] w-[400px] overflow-hidden rounded-lg"
+      >
+        <div className="flex w-full flex-col">
+          <div className="flex items-center justify-between border-b border-mineshaft-500 px-4 py-2">
+            <span className="font-semibold text-white">Notifications</span>
+            <button
+              type="button"
+              className="text-xs font-medium text-mineshaft-300 hover:text-primary-400 disabled:pointer-events-none disabled:opacity-50"
+              onClick={(e) => {
+                e.preventDefault();
+                markAllAsRead();
+              }}
+              disabled={unreadCount === 0}
+            >
+              Mark all as read
+            </button>
+          </div>
+          <div className="flex h-full w-full overflow-auto">
+            {isLoading && (
+              <div className="flex h-full w-full items-center justify-center">
+                <ContentLoader className="pointer-events-none" lottieClassName="size-10" />
+              </div>
+            )}
+            {!isLoading && notifications?.length === 0 && (
+              <div className="flex h-full w-full flex-col items-center justify-center">
+                <FontAwesomeIcon icon={faBell} size="3x" className="text-mineshaft-400" />
+                <span className="mt-4 text-sm text-mineshaft-300">No new notifications</span>
+                <span className="text-xs text-mineshaft-400">
+                  We&apos;ll let you know when something important happens.
+                </span>
+              </div>
+            )}
+            {!isLoading && notifications && notifications.length > 0 && (
+              <div className="flex w-full flex-col">
+                {notifications.map((notification) => (
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    key={notification.id}
+                    onClick={() => {
+                      if (!notification.isRead) {
+                        updateNotification({ notificationId: notification.id, isRead: true });
+                      }
+                      if (notification.link) {
+                        router.navigate({ to: notification.link });
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key !== "Enter") return;
+                      if (!notification.isRead) {
+                        updateNotification({ notificationId: notification.id, isRead: true });
+                      }
+                      if (notification.link) {
+                        router.navigate({ to: notification.link });
+                      }
+                    }}
+                  >
+                    <Notification notification={notification} onDelete={deleteNotification} />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};