Add auto update setting (#519)

package-lock.json

@@ -60,7 +60,7 @@
         "js-cookie": "^3.0.5",
         "lodash": "^4.17.21",
         "lucide-react": "^0.539.0",
-        "next": "^14.2.28",
+        "next": "^14.2.35",
         "next-themes": "^0.2.1",
         "punycode": "^2.3.1",
         "react": "^18.3.1",
@@ -765,9 +765,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.32.tgz",
-      "integrity": "sha512-n9mQdigI6iZ/DF6pCTwMKeWgF2e8lg7qgt5M7HXMLtyhZYMnf/u905M18sSpPmHL9MKp9JHo56C6jrD2EvWxng==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -811,9 +811,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.32.tgz",
-      "integrity": "sha512-osHXveM70zC+ilfuFa/2W6a1XQxJTvEhzEycnjUaVE8kpUS09lDpiDDX2YLdyFCzoUbvbo5r0X1Kp4MllIOShw==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
       "cpu": [
         "arm64"
       ],
@@ -827,9 +827,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.32.tgz",
-      "integrity": "sha512-P9NpCAJuOiaHHpqtrCNncjqtSBi1f6QUdHK/+dNabBIXB2RUFWL19TY1Hkhu74OvyNQEYEzzMJCMQk5agjw1Qg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
       "cpu": [
         "x64"
       ],
@@ -843,9 +843,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.32.tgz",
-      "integrity": "sha512-v7JaO0oXXt6d+cFjrrKqYnR2ubrD+JYP7nQVRZgeo5uNE5hkCpWnHmXm9vy3g6foMO8SPwL0P3MPw1c+BjbAzA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
       "cpu": [
         "arm64"
       ],
@@ -859,9 +859,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.32.tgz",
-      "integrity": "sha512-tA6sIKShXtSJBTH88i0DRd6I9n3ZTirmwpwAqH5zdJoQF7/wlJXR8DkPmKwYl5mFWhEKr5IIa3LfpMW9RRwKmQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
       "cpu": [
         "arm64"
       ],
@@ -875,9 +875,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.32.tgz",
-      "integrity": "sha512-7S1GY4TdnlGVIdeXXKQdDkfDysoIVFMD0lJuVVMeb3eoVjrknQ0JNN7wFlhCvea0hEk0Sd4D1hedVChDKfV2jw==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
       "cpu": [
         "x64"
       ],
@@ -891,9 +891,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.32.tgz",
-      "integrity": "sha512-OHHC81P4tirVa6Awk6eCQ6RBfWl8HpFsZtfEkMpJ5GjPsJ3nhPe6wKAJUZ/piC8sszUkAgv3fLflgzPStIwfWg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
       "cpu": [
         "x64"
       ],
@@ -907,9 +907,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.32.tgz",
-      "integrity": "sha512-rORQjXsAFeX6TLYJrCG5yoIDj+NKq31Rqwn8Wpn/bkPNy5rTHvOXkW8mLFonItS7QC6M+1JIIcLe+vOCTOYpvg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
       "cpu": [
         "arm64"
       ],
@@ -923,9 +923,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.32.tgz",
-      "integrity": "sha512-jHUeDPVHrgFltqoAqDB6g6OStNnFxnc7Aks3p0KE0FbwAvRg6qWKYF5mSTdCTxA3axoSAUwxYdILzXJfUwlHhA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
       "cpu": [
         "ia32"
       ],
@@ -939,9 +939,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.32.tgz",
-      "integrity": "sha512-2N0lSoU4GjfLSO50wvKpMQgKd4HdI2UHEhQPPPnlgfBJlOgJxkjpkYBqzk08f1gItBB6xF/n+ykso2hgxuydsA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
       "cpu": [
         "x64"
       ],
@@ -7405,12 +7405,12 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "node_modules/next": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.32.tgz",
-      "integrity": "sha512-fg5g0GZ7/nFc09X8wLe6pNSU8cLWbLRG3TZzPJ1BJvi2s9m7eF991se67wliM9kR5yLHRkyGKU49MMx58s3LJg==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.32",
+        "@next/env": "14.2.35",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -7425,15 +7425,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.32",
-        "@next/swc-darwin-x64": "14.2.32",
-        "@next/swc-linux-arm64-gnu": "14.2.32",
-        "@next/swc-linux-arm64-musl": "14.2.32",
-        "@next/swc-linux-x64-gnu": "14.2.32",
-        "@next/swc-linux-x64-musl": "14.2.32",
-        "@next/swc-win32-arm64-msvc": "14.2.32",
-        "@next/swc-win32-ia32-msvc": "14.2.32",
-        "@next/swc-win32-x64-msvc": "14.2.32"
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",

package.json

@@ -65,7 +65,7 @@
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "lucide-react": "^0.539.0",
-    "next": "^14.2.28",
+    "next": "^14.2.35",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18.3.1",

src/interfaces/Account.ts

@@ -22,6 +22,7 @@ export interface Account {
     dns_domain: string;
     network_range?: string;
     lazy_connection_enabled: boolean;
+    auto_update_version: string;
   };
   onboarding?: AccountOnboarding;
 }

src/modules/settings/ClientSettingsTab.tsx

@@ -1,16 +1,27 @@
 import Breadcrumbs from "@components/Breadcrumbs";
+import Button from "@components/Button";
 import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import HelpText from "@components/HelpText";
 import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
 import { notify } from "@components/Notification";
+import {
+  SelectDropdown,
+  SelectOption,
+} from "@components/select/SelectDropdown";
+import { useHasChanges } from "@hooks/useHasChanges";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useApiCall } from "@utils/api";
+import { validator } from "@utils/helpers";
 import {
   ClockFadingIcon,
   ExternalLinkIcon,
   FlaskConicalIcon,
   MonitorSmartphoneIcon,
+  RefreshCcw,
 } from "lucide-react";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import SettingsIcon from "@/assets/icons/SettingsIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
@@ -20,6 +31,21 @@ type Props = {
   account: Account;
 };
 
+const latestOrCustomVersion = [
+  {
+    label: "Disabled",
+    value: "disabled",
+  },
+  {
+    label: "Latest Version",
+    value: "latest",
+  },
+  {
+    label: "Custom Version",
+    value: "custom",
+  },
+] as SelectOption[];
+
 export default function ClientSettingsTab({ account }: Readonly<Props>) {
   const { permission } = usePermissions();
 
@@ -30,6 +56,77 @@ export default function ClientSettingsTab({ account }: Readonly<Props>) {
     account.settings?.lazy_connection_enabled ?? false,
   );
 
+  const autoUpdateSetting = account.settings?.auto_update_version;
+  const isAutoUpdateEnabled =
+    !!autoUpdateSetting && autoUpdateSetting !== "disabled";
+  const isCustomVersion = validator.isValidVersion(autoUpdateSetting);
+  const [autoUpdateMethod, setAutoUpdateMethod] = useState(
+    isAutoUpdateEnabled ? (isCustomVersion ? "custom" : "latest") : "disabled",
+  );
+
+  const [autoUpdateCustomVersion, setAutoUpdateCustomVersion] = useState(
+    isCustomVersion ? autoUpdateSetting : "",
+  );
+
+  const { hasChanges, updateRef } = useHasChanges([
+    autoUpdateMethod,
+    autoUpdateCustomVersion,
+  ]);
+
+  const handleUpdateMethodChange = (value: string) => {
+    setAutoUpdateMethod(value);
+    if (value === "disabled" || value === "latest") {
+      setAutoUpdateCustomVersion("");
+    }
+  };
+
+  const versionError = useMemo(() => {
+    const msg = "Please enter a valid version, e.g., 0.2, 0.2.0, 0.2.0-alpha.1";
+    if (autoUpdateCustomVersion == "") return "";
+    if (autoUpdateCustomVersion == "-") return "";
+    const validSemver = validator.isValidVersion(autoUpdateCustomVersion);
+    if (!validSemver) return msg;
+    return "";
+  }, [autoUpdateCustomVersion]);
+
+  const canSaveCustomVersion =
+    autoUpdateCustomVersion !== "" &&
+    autoUpdateMethod === "custom" &&
+    versionError === "";
+
+  const isSaveButtonDisabled = useMemo(() => {
+    return (
+      !hasChanges ||
+      !permission.settings.update ||
+      (autoUpdateMethod === "custom" && !canSaveCustomVersion)
+    );
+  }, [
+    hasChanges,
+    permission.settings.update,
+    autoUpdateMethod,
+    canSaveCustomVersion,
+  ]);
+
+  const saveChanges = async () => {
+    notify({
+      title: "Client Settings",
+      description: `Client settings successfully updated.`,
+      promise: saveRequest
+        .put({
+          id: account.id,
+          settings: {
+            ...account.settings,
+            auto_update_version: autoUpdateCustomVersion || autoUpdateMethod,
+          },
+        })
+        .then(() => {
+          mutate("/accounts");
+          updateRef([autoUpdateMethod, autoUpdateCustomVersion]);
+        }),
+      loadingMessage: "Updating client settings...",
+    });
+  };
+
   const toggleLazyConnection = async (toggle: boolean) => {
     notify({
       title: "Lazy Connections",
@@ -70,10 +167,48 @@ export default function ClientSettingsTab({ account }: Readonly<Props>) {
         </Breadcrumbs>
         <div className={"flex items-start justify-between"}>
           <h1>Clients</h1>
+          <Button
+            variant={"primary"}
+            disabled={isSaveButtonDisabled}
+            onClick={saveChanges}
+            data-cy={"save-clients-settings"}
+          >
+            Save Changes
+          </Button>
         </div>
 
         <div className={"flex flex-col gap-6 w-full mt-8"}>
-          <div className={"mt-0"}>
+          <div className={"flex flex-col relative"}>
+            <Label>
+              <RefreshCcw size={15} />
+              Automatic Updates
+            </Label>
+            <HelpText>
+              Select how NetBird clients handle automatic updates by choosing
+              the latest version, a custom version, or disabling updates
+              altogether.
+            </HelpText>
+            <div className={"gap-4 items-center grid grid-cols-2"}>
+              <SelectDropdown
+                value={autoUpdateMethod}
+                onChange={handleUpdateMethodChange}
+                options={latestOrCustomVersion}
+              />
+              <Input
+                value={autoUpdateCustomVersion}
+                customPrefix={"Version"}
+                placeholder={"e.g., 0.52.2"}
+                error={versionError}
+                errorTooltip={true}
+                disabled={autoUpdateMethod !== "custom"}
+                onChange={(v) => {
+                  setAutoUpdateCustomVersion(v.target.value);
+                }}
+              />
+            </div>
+          </div>
+
+          <div className={"mt-3"}>
             <h2 className={"text-lg font-medium"}>
               Experimental
               <FlaskConicalIcon