From 4a548021c3e096d0510bf5eb8dbf4424a8dce75f Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 19 Mar 2025 10:52:04 -0300
Subject: [PATCH] fix: close popover when notification settings are clicked
 (#17001)

When a user clicks in the notification settings does not make sense to
keep the popover open, instead, we want to close it.
---
 .../notifications/NotificationsInbox/InboxPopover.tsx | 11 ++++++++---
 .../NotificationsInbox/NotificationsInbox.tsx         |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
index b180891889..e487d4303f 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
@@ -8,7 +8,7 @@ import {
 import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { Spinner } from "components/Spinner/Spinner";
 import { RefreshCwIcon, SettingsIcon } from "lucide-react";
-import type { FC } from "react";
+import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { cn } from "utils/cn";
 import { InboxButton } from "./InboxButton";
@@ -34,8 +34,10 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 	onMarkAllAsRead,
 	onMarkNotificationAsRead,
 }) => {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+
 	return (
-		<Popover defaultOpen={defaultOpen}>
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
 			<PopoverTrigger asChild>
 				<InboxButton unreadCount={unreadCount} />
 			</PopoverTrigger>
@@ -61,7 +63,10 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 								Mark all as read
 							</Button>
 							<Button variant="outline" size="icon" asChild>
-								<RouterLink to="/settings/notifications">
+								<RouterLink
+									to="/settings/notifications"
+									onClick={() => setIsOpen(false)}
+								>
 									<SettingsIcon />
 									<span className="sr-only">Notification settings</span>
 								</RouterLink>
diff --git a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
index bf8d3622e3..bee4d7482b 100644
--- a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
@@ -6,7 +6,7 @@ import type {
 } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { useEffectEvent } from "hooks/hookPolyfills";
-import { type FC, useEffect, useRef } from "react";
+import { type FC, useEffect } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { InboxPopover } from "./InboxPopover";