conditionally hide push notification button

johnstcn · johnstcn · commit 46f751955b67 · 2025-03-26T16:36:59.000Z
diff --git a/site/src/contexts/usePushNotifications.ts b/site/src/contexts/usePushNotifications.ts
@@ -7,6 +7,7 @@ import { useQuery } from "react-query";
 interface PushNotifications {
 	readonly subscribed: boolean;
 	readonly loading: boolean;
+	readonly enabled: boolean;
 
 	subscribe(): Promise<void>;
 	unsubscribe(): Promise<void>;
@@ -19,6 +20,17 @@ export const usePushNotifications = (): PushNotifications => {
 	const [subscribed, setSubscribed] = useState<boolean>(false);
 	const [loading, setLoading] = useState<boolean>(true);
 
+	// Disable push notifications if the server is not configured to send them.
+	const enabled = !!buildInfoQuery.data?.push_notifications_public_key;
+	if (!enabled) {
+		return {
+			enabled: false,
+			subscribed: false,
+			loading: false,
+			subscribe: async () => {},
+			unsubscribe: async () => {},
+		};
+	}
 	useEffect(() => {
 		// Check if browser supports push notifications
 		if (!("Notification" in window) || !("serviceWorker" in navigator)) {
@@ -95,6 +107,7 @@ export const usePushNotifications = (): PushNotifications => {
 	};
 
 	return {
+		enabled,
 		subscribed,
 		loading: loading || buildInfoQuery.isLoading,
 		subscribe,
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -44,7 +44,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	canViewAuditLog,
 	proxyContextValue,
 }) => {
-	const { subscribed, loading, subscribe, unsubscribe } =
+	const { enabled, subscribed, loading, subscribe, unsubscribe } =
 		usePushNotifications();
 
 	return (
@@ -59,13 +59,13 @@ export const NavbarView: FC<NavbarViewProps> = ({
 
 			<NavItems className="ml-4" />
 
-			{/* // TODO: styling required here.
-			{subscribed ? (
-				<button onClick={unsubscribe}>Unsubscribe</button>
-			) : (
-				<button onClick={subscribe}>Subscribe</button>
+			{enabled && (
+				subscribed ? (
+					<button onClick={unsubscribe}>Unsubscribe</button>
+				) : (
+					<button onClick={subscribe}>Subscribe</button>
+				)
 			)}
-			*/}
 
 			<div className=" hidden md:flex items-center gap-3 ml-auto">
 				{proxyContextValue && (
