Add VNC allow and approval settings to MDM policy

client/ui/frontend/src/modules/settings/SettingsNavigation.tsx

@@ -21,6 +21,7 @@ export const SettingsNavigation = () => {
     const { updateAvailable } = useClientVersion();
     const { mdm, features } = useRestrictions();
     const showSsh = mdm.allowServerSSH ?? !features.disableUpdateSettings;
+    const showVnc = mdm.allowServerVNC ?? !features.disableUpdateSettings;
 
     const aboutAdornment = updateAvailable ? (
         <Tooltip content={t("settings.tabs.updateAvailable")} side={"right"}>
@@ -64,7 +65,7 @@ export const SettingsNavigation = () => {
                         title={t("settings.tabs.ssh")}
                     />
                 )}
-                {!features.disableUpdateSettings && (
+                {showVnc && (
                     <VerticalTabs.Trigger
                         value={"vnc"}
                         icon={MonitorIcon}

client/ui/frontend/src/modules/settings/SettingsPage.tsx

@@ -58,13 +58,18 @@ export const SettingsPage = () => {
             [Tab.Security]: editable,
             [Tab.Profiles]: !features.disableProfiles,
             [Tab.SSH]: mdm.allowServerSSH ?? editable,
-            [Tab.VNC]: editable,
+            [Tab.VNC]: mdm.allowServerVNC ?? editable,
             [Tab.Advanced]: editable,
             [Tab.Troubleshooting]: true,
             [Tab.About]: true,
         };
         return (Object.keys(visibility) as Tab[]).filter((t) => visibility[t]);
-    }, [features.disableUpdateSettings, features.disableProfiles, mdm.allowServerSSH]);
+    }, [
+        features.disableUpdateSettings,
+        features.disableProfiles,
+        mdm.allowServerSSH,
+        mdm.allowServerVNC,
+    ]);
 
     const defaultTab = visibleTabs[0];
     const [active, setActive] = useState<string>(() => navState?.tab ?? defaultTab);

client/ui/frontend/src/modules/settings/SettingsVNC.tsx

@@ -2,11 +2,14 @@ import { useTranslation } from "react-i18next";
 import FancyToggleSwitch from "@/components/switches/FancyToggleSwitch";
 import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
 import { useSettings } from "@/contexts/SettingsContext.tsx";
+import { useRestrictions } from "@/contexts/RestrictionsContext.tsx";
 
 export function SettingsVNC() {
     const { t } = useTranslation();
     const { config, setField } = useSettings();
+    const { mdm } = useRestrictions();
     const isVNCServerEnabled = config.serverVncAllowed;
+    const vncServerManaged = mdm.allowServerVNC != null;
 
     return (
         <>
@@ -16,17 +19,23 @@ export function SettingsVNC() {
                     onChange={(v) => setField("serverVncAllowed", v)}
                     label={t("settings.vnc.server.label")}
                     helpText={t("settings.vnc.server.help")}
+                    disabled={vncServerManaged}
                 />
             </SectionGroup>
 
-            <SectionGroup title={t("settings.vnc.section.approval")} disabled={!isVNCServerEnabled}>
-                <FancyToggleSwitch
-                    value={!config.disableVncApproval}
-                    onChange={(v) => setField("disableVncApproval", !v)}
-                    label={t("settings.vnc.approval.label")}
-                    helpText={t("settings.vnc.approval.help")}
-                />
-            </SectionGroup>
+            {!mdm.disableVNCApproval && (
+                <SectionGroup
+                    title={t("settings.vnc.section.approval")}
+                    disabled={!isVNCServerEnabled}
+                >
+                    <FancyToggleSwitch
+                        value={!config.disableVncApproval}
+                        onChange={(v) => setField("disableVncApproval", !v)}
+                        label={t("settings.vnc.approval.label")}
+                        helpText={t("settings.vnc.approval.help")}
+                    />
+                </SectionGroup>
+            )}
         </>
     );
 }