Skip to content

[dashboard] feat: add auto_update_always toggle to client settings #580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
heisbrot merged 3 commits into from
Mar 16, 2026
Merged

[dashboard] feat: add auto_update_always toggle to client settings #580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7f38dc
[dashboard] feat: add auto_update_always toggle to client settings
pappz Mar 9, 2026
6958bb5
[dashboard] fix: improve auto-update UI clarity and toggle label
pappz Mar 12, 2026
548ee66
Update src/modules/settings/ClientSettingsTab.tsx
pappz Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/interfaces/Account.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface Account {
lazy_connection_enabled: boolean;
embedded_idp_enabled?: boolean;
auto_update_version: string;
auto_update_always: boolean;
local_auth_disabled?: boolean;
};
onboarding?: AccountOnboarding;
Expand Down
48 changes: 45 additions & 3 deletions src/modules/settings/ClientSettingsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
SelectDropdown,
SelectOption,
} from "@components/select/SelectDropdown";
import { Callout } from "@components/Callout";
import { useHasChanges } from "@hooks/useHasChanges";
import * as Tabs from "@radix-ui/react-tabs";
import { useApiCall } from "@utils/api";
Expand All @@ -20,6 +21,7 @@ import {
ExternalLinkIcon,
FlaskConicalIcon,
MonitorSmartphoneIcon,
AlertTriangle,
RefreshCcw,
} from "lucide-react";
import React, { useMemo, useState } from "react";
Expand Down Expand Up @@ -84,6 +86,10 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
isCustomVersion ? autoUpdateSetting : "",
);

const [autoUpdateAlways, setAutoUpdateAlways] = useState(
account.settings?.auto_update_always ?? false,
);
Comment on lines +89 to +91
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Normalize autoUpdateAlways when auto updates are disabled.

This state is restored from Line 90 and always persisted again on Line 165, but nothing clears it when the update method becomes "disabled". A user can save auto_update_version: "disabled" together with auto_update_always: true, and after reload the force toggle comes back on but disabled.

💡 Suggested fix 
   const [autoUpdateAlways, setAutoUpdateAlways] = useState(
-    account.settings?.auto_update_always ?? false,
+    account.settings?.auto_update_version !== "disabled" &&
+      (account.settings?.auto_update_always ?? false),
   );
   const handleUpdateMethodChange = (value: string) => {
     setAutoUpdateMethod(value);
     if (value === "disabled" || value === "latest") {
       setAutoUpdateCustomVersion("");
     }
+    if (value === "disabled") {
+      setAutoUpdateAlways(false);
+    }
   };
             ...account.settings,
             auto_update_version: autoUpdateCustomVersion || autoUpdateMethod,
-            auto_update_always: autoUpdateAlways,
+            auto_update_always:
+              autoUpdateMethod === "disabled" ? false : autoUpdateAlways,
             peer_expose_enabled: peerExposeEnabled,

Also applies to: 164-166

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/modules/settings/ClientSettingsTab.tsx` around lines 89 - 91, The
autoUpdateAlways state (autoUpdateAlways / setAutoUpdateAlways) is never cleared
when the update method is set to "disabled", causing auto_update_always to be
restored incorrectly; update the component so that whenever
account.settings?.auto_update_version (or the local update method state) becomes
"disabled" you call setAutoUpdateAlways(false) to normalize the UI, and also
ensure the save payload sent from the save handler clears/persists
auto_update_always as false when auto_update_version === "disabled" so the
backend cannot store a true value alongside a disabled update method.


const [peerExposeEnabled, setPeerExposeEnabled] = useState<boolean>(
account?.settings?.peer_expose_enabled ?? false,
);
Expand All @@ -99,6 +105,7 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
const { hasChanges, updateRef } = useHasChanges([
autoUpdateMethod,
autoUpdateCustomVersion,
autoUpdateAlways,
peerExposeEnabled,
peerExposeGroupNames,
]);
Expand Down Expand Up @@ -155,6 +162,7 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
settings: {
...account.settings,
auto_update_version: autoUpdateCustomVersion || autoUpdateMethod,
auto_update_always: autoUpdateAlways,
peer_expose_enabled: peerExposeEnabled,
peer_expose_groups: peerExposeGroupIds,
},
Expand All @@ -164,6 +172,7 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
updateRef([
autoUpdateMethod,
autoUpdateCustomVersion,
autoUpdateAlways,
peerExposeEnabled,
peerExposeGroupNames,
]);
Expand Down Expand Up @@ -235,9 +244,9 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
/>
</Label>
<HelpText>
Select how NetBird clients handle automatic updates by choosing
the latest version, a custom version, or disabling updates
altogether. Automatic Updates require at least NetBird{" "}
Configure how NetBird clients receive update notifications.
When enabled, users will be prompted to install the selected
version. This requires at least NetBird{" "}
<span className={"text-white font-medium"}>v0.61.0</span>.{" "}
<InlineLink
href={"https://docs.netbird.io/manage/peers/auto-update"}
Expand Down Expand Up @@ -265,6 +274,39 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
}}
/>
</div>
<FancyToggleSwitch
className={"mt-4"}
value={autoUpdateAlways}
onChange={setAutoUpdateAlways}
label={
<>
<AlertTriangle size={15} className={"text-yellow-400"} />
Force Automatic Updates
</>
}
helpText={
"When enabled, updates are installed automatically in the background without user interaction."
}
disabled={
!permission.settings.update || autoUpdateMethod === "disabled"
}
/>
{autoUpdateAlways && autoUpdateMethod !== "disabled" && (
<Callout
className={"mt-3"}
variant={"warning"}
icon={
<AlertTriangle
size={14}
className={"shrink-0 relative top-[3px]"}
/>
}
>
Enabling automatic updates will restart the NetBird client
during updates, which can temporarily disrupt active
connections. Use with caution in production environments.
</Callout>
)}
</div>

<div>
Expand Down
Loading