From 9e44a1ebf4d8d9e986acce7c9b6547f8a35a75f7 Mon Sep 17 00:00:00 2001
From: default <davidiii@fraley.us>
Date: Wed, 26 Aug 2026 19:01:23 +0000
Subject: [PATCH] fix(site/src/pages/DeploymentSettingsPage): gate browser-only
 paywall on entitlement

The Security settings page showed the premium paywall whenever the browser_only feature was not enabled. Enabled means the deployment turned browser-only connections on (CODER_BROWSER_ONLY), so licensed premium and trial deployments that leave the feature off saw an upgrade paywall for a feature they already have.

Gate the paywall on the browser_only entitlement instead, keeping the enabled flag for the Enabled/Disabled badge.
---
 .../SecuritySettingsPage.tsx                  |  3 ++
 .../SecuritySettingsPageView.stories.tsx      | 45 +++++++++++++++++++
 .../SecuritySettingsPageView.tsx              |  6 ++-
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
index 5c1a9bf5752..ebcf2b3248f 100644
--- a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
@@ -14,6 +14,9 @@ const SecuritySettingsPage: FC = () => {
 
 			<SecuritySettingsPageView
 				options={deploymentConfig.options}
+				isBrowserOnlyEntitled={
+					entitlements.features.browser_only.entitlement !== "not_entitled"
+				}
 				featureBrowserOnlyEnabled={entitlements.features.browser_only.enabled}
 			/>
 		</>
diff --git a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx
index 654ba812359..1af6d1d1436 100644
--- a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx
@@ -49,6 +49,7 @@ const meta: Meta<typeof SecuritySettingsPageView> = {
 				hidden: false,
 			},
 		],
+		isBrowserOnlyEntitled: true,
 		featureBrowserOnlyEnabled: true,
 	},
 };
@@ -66,6 +67,50 @@ export const Page: Story = {
 			"href",
 			docs("/admin/networking#browser-only-connections"),
 		);
+		await expect(
+			canvas.getByRole("heading", {
+				name: /Browser-Only Connections Enabled/,
+			}),
+		).toBeInTheDocument();
+		await expect(
+			canvas.queryByRole("link", { name: /Start trial for free/ }),
+		).not.toBeInTheDocument();
+	},
+};
+
+export const EntitledAndTurnedOff: Story = {
+	args: {
+		isBrowserOnlyEntitled: true,
+		featureBrowserOnlyEnabled: false,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByRole("heading", {
+				name: /Browser-Only Connections Disabled/,
+			}),
+		).toBeInTheDocument();
+		await expect(
+			canvas.queryByRole("link", { name: /Start trial for free/ }),
+		).not.toBeInTheDocument();
+	},
+};
+
+export const NotEntitled: Story = {
+	args: {
+		isBrowserOnlyEntitled: false,
+		featureBrowserOnlyEnabled: false,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByRole("heading", {
+				name: /Browser-Only Connections Disabled/,
+			}),
+		).toBeInTheDocument();
+		await expect(
+			canvas.getByRole("link", { name: /Start trial for free/ }),
+		).toBeInTheDocument();
 	},
 };
 
diff --git a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
index 2e30086a166..0e535de0b72 100644
--- a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
@@ -21,11 +21,15 @@ import OptionsTable from "../OptionsTable";
 
 type SecuritySettingsPageViewProps = {
 	options: SerpentOption[];
+	/** True when the license covers browser-only connections. */
+	isBrowserOnlyEntitled: boolean;
+	/** True when the deployment has browser-only connections turned on. */
 	featureBrowserOnlyEnabled: boolean;
 };
 
 export const SecuritySettingsPageView: FC<SecuritySettingsPageViewProps> = ({
 	options,
+	isBrowserOnlyEntitled,
 	featureBrowserOnlyEnabled,
 }) => {
 	const tlsOptions = options.filter((o) =>
@@ -78,7 +82,7 @@ export const SecuritySettingsPageView: FC<SecuritySettingsPageViewProps> = ({
 					</SettingsHeaderDescription>
 				</SettingsHeader>
 
-				{!featureBrowserOnlyEnabled ? (
+				{!isBrowserOnlyEntitled ? (
 					<PremiumPaywallSmall
 						source="browser_only"
 						message="Browser-Only Connections"