fix: close popover when notification settings are clicked (#17001)

BrunoQuaresma · web-flow · commit 4a548021c3e0 · 2025-03-19T10:52:04.000-03:00
When a user clicks in the notification settings does not make sense to
keep the popover open, instead, we want to close it.
diff --git 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
@@ -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";
 
