fix: fix double ws connection for notifications (#17044)

BrunoQuaresma · web-flow · commit e40ea258dcb6 · 2025-03-21T14:12:22.000-03:00
**Issue:**
The UI was creating two web socket connections to receive notification
updates causing duplicated values.

**Cause:**
We were rendering the notification container twice. One for the desktop
nav and another for mobile.

**Fix:**
Only use one notification container for the nav.

**Improvements for later:**
I think would be better at some point to move the networking and data
logic into a provider but it would require testing and some tiny rework.
Since the actual fix works well, and it is not complex or difficult, I
think it is ok to stay with it until we require to load notifications in
more places.
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -55,17 +55,21 @@ export const NavbarView: FC<NavbarViewProps> = ({
 
 			<NavItems className="ml-4" />
 
-			<div className="hidden md:flex items-center gap-3 ml-auto">
+			<div className="flex items-center gap-3 ml-auto">
 				{proxyContextValue && (
-					<ProxyMenu proxyContextValue={proxyContextValue} />
+					<div className="hidden md:block">
+						<ProxyMenu proxyContextValue={proxyContextValue} />
+					</div>
 				)}
 
-				<DeploymentDropdown
-					canViewAuditLog={canViewAuditLog}
-					canViewOrganizations={canViewOrganizations}
-					canViewDeployment={canViewDeployment}
-					canViewHealth={canViewHealth}
-				/>
+				<div className="hidden md:block">
+					<DeploymentDropdown
+						canViewAuditLog={canViewAuditLog}
+						canViewOrganizations={canViewOrganizations}
+						canViewDeployment={canViewDeployment}
+						canViewHealth={canViewHealth}
+					/>
+				</div>
 
 				<NotificationsInbox
 					fetchNotifications={API.getInboxNotifications}
@@ -78,36 +82,28 @@ export const NavbarView: FC<NavbarViewProps> = ({
 				/>
 
 				{user && (
-					<UserDropdown
+					<div className="hidden md:block">
+						<UserDropdown
+							user={user}
+							buildInfo={buildInfo}
+							supportLinks={supportLinks}
+							onSignOut={onSignOut}
+						/>
+					</div>
+				)}
+
+				<div className="md:hidden">
+					<MobileMenu
+						proxyContextValue={proxyContextValue}
 						user={user}
-						buildInfo={buildInfo}
 						supportLinks={supportLinks}
 						onSignOut={onSignOut}
+						canViewAuditLog={canViewAuditLog}
+						canViewOrganizations={canViewOrganizations}
+						canViewDeployment={canViewDeployment}
+						canViewHealth={canViewHealth}
 					/>
-				)}
-			</div>
-
-			<div className="ml-auto flex items-center gap-3 md:hidden">
-				<NotificationsInbox
-					fetchNotifications={API.getInboxNotifications}
-					markAllAsRead={API.markAllInboxNotificationsAsRead}
-					markNotificationAsRead={(notificationId) =>
-						API.updateInboxNotificationReadStatus(notificationId, {
-							is_read: true,
-						})
-					}
-				/>
-
-				<MobileMenu
-					proxyContextValue={proxyContextValue}
-					user={user}
-					supportLinks={supportLinks}
-					onSignOut={onSignOut}
-					canViewAuditLog={canViewAuditLog}
-					canViewOrganizations={canViewOrganizations}
-					canViewDeployment={canViewDeployment}
-					canViewHealth={canViewHealth}
-				/>
+				</div>
 			</div>
 		</div>
 	);
