From 0bafc05c3780e0530ef559d09d0a39bff1a25e0b Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Sat, 28 Feb 2026 02:53:29 +1100
Subject: [PATCH] feat: add permission check around `<AppearanceSettingsPage
 />` (#22383)

This previously let auditors view the page though they can't update
anything. In a different fashion to #22382 the user will be able to see
all of this as they're logged in to the application anyway, we can
simply tell them `Sorry, no access`.
---
 .../AppearanceSettingsPage.tsx                | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
index 7dc8e6caeb..1ae73ba730 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
@@ -1,8 +1,10 @@
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import { appearanceConfigKey, updateAppearance } from "api/queries/appearance";
 import type { UpdateAppearanceConfig } from "api/typesGenerated";
+import { useAuthenticated } from "hooks";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
+import { RequirePermission } from "modules/permissions/RequirePermission";
 import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { toast } from "sonner";
@@ -18,6 +20,8 @@ const AppearanceSettingsPage: FC = () => {
 	const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility();
 	const queryClient = useQueryClient();
 	const updateAppearanceMutation = useMutation(updateAppearance(queryClient));
+	const { permissions } = useAuthenticated();
+	const canEditAppearance = permissions.editDeploymentConfig;
 
 	const onSaveAppearance = async (
 		newConfig: Partial<UpdateAppearanceConfig>,
@@ -47,14 +51,16 @@ const AppearanceSettingsPage: FC = () => {
 		<>
 			<title>{pageTitle("Appearance Settings")}</title>
 
-			<AppearanceSettingsPageView
-				appearance={appearance}
-				onSaveAppearance={onSaveAppearance}
-				isEntitled={
-					entitlements.features.appearance.entitlement !== "not_entitled"
-				}
-				isPremium={hasPremiumLicense}
-			/>
+			<RequirePermission isFeatureVisible={canEditAppearance}>
+				<AppearanceSettingsPageView
+					appearance={appearance}
+					onSaveAppearance={onSaveAppearance}
+					isEntitled={
+						entitlements.features.appearance.entitlement !== "not_entitled"
+					}
+					isPremium={hasPremiumLicense}
+				/>
+			</RequirePermission>
 		</>
 	);
 };