From a7b26e3c0d04c2eb2560066c036e361f0a83ddfd Mon Sep 17 00:00:00 2001 From: Eduard Gert Date: Wed, 20 May 2026 16:20:40 +0200 Subject: [PATCH] add updating dialog --- client/ui/CLAUDE.md | 9 +- client/ui/frontend/CLAUDE.md | 18 +- client/ui/frontend/src/app.tsx | 4 +- .../frontend/src/i18n/locales/de/common.json | 5 +- .../frontend/src/i18n/locales/en/common.json | 5 +- .../frontend/src/i18n/locales/hu/common.json | 3 +- client/ui/frontend/src/layouts/Header.tsx | 7 +- .../auto-update/ClientVersionContext.tsx | 125 +++++------- .../auto-update/InstallProgressDialog.tsx | 182 ++++++++++++++++++ .../modules/auto-update/UpdateVersionCard.tsx | 5 +- .../modules/auto-update/UpdatingOverlay.tsx | 118 ------------ .../modules/settings/SettingsDevelopment.tsx | 94 +++++++-- .../src/modules/settings/SettingsProfiles.tsx | 6 +- client/ui/frontend/src/pages/Update.tsx | 135 ------------- client/ui/frontend/src/screens/Update.tsx | 78 -------- client/ui/services/windowmanager.go | 65 +++++++ 16 files changed, 408 insertions(+), 451 deletions(-) create mode 100644 client/ui/frontend/src/modules/auto-update/InstallProgressDialog.tsx delete mode 100644 client/ui/frontend/src/modules/auto-update/UpdatingOverlay.tsx delete mode 100644 client/ui/frontend/src/pages/Update.tsx delete mode 100644 client/ui/frontend/src/screens/Update.tsx diff --git a/client/ui/CLAUDE.md b/client/ui/CLAUDE.md index 24e094c54..0ec89ea45 100644 --- a/client/ui/CLAUDE.md +++ b/client/ui/CLAUDE.md @@ -34,8 +34,8 @@ All services live in `services/` and assume a build tag `!android && !ios && !fr | `Networks` | `network.go` | `List` / `Select` / `Deselect` of routed networks. | | `Forwarding` | `forwarding.go` | `List` exposed/forwarded services from the daemon's reverse-proxy table. | | `Debug` | `debug.go` | `Bundle` (debug bundle creation + optional upload) / `Get|SetLogLevel` / `RevealFile` (cross-platform "show in file manager"). | -| `Update` | `update.go` | `Trigger` (enforced installer) / `GetInstallerResult` / `Quit` (used by the `/update` page after a successful install). | -| `WindowManager` | `windowmanager.go` | `OpenSettings(tab)` / `OpenBrowserLogin(uri)` / `CloseBrowserLogin` / `OpenSessionExpired` / `OpenSessionAboutToExpire(seconds)`. `OpenSettings("")` opens the General tab; pass a tab id (e.g. `"profiles"`) to deep-link, encoded as `?tab=…` in the start URL. Auxiliary windows are created on first open and **destroyed** on close (Wails-recommended singleton pattern; prevents the macOS dock-reopen from resurrecting hidden windows). | +| `Update` | `update.go` | `GetState` / `Trigger` (enforced installer) / `GetInstallerResult` / `Quit`. The install-progress UI lives in its own auxiliary window (`/#/install-progress`), opened by `WindowManager.OpenInstallProgress` — the daemon goes unreachable mid-install so it can't be inside the main window. | +| `WindowManager` | `windowmanager.go` | `OpenSettings(tab)` / `OpenBrowserLogin(uri)` / `CloseBrowserLogin` / `OpenSessionExpired` / `OpenSessionAboutToExpire(seconds)` / `OpenInstallProgress(version)` / `CloseInstallProgress`. `OpenSettings("")` opens the General tab; pass a tab id (e.g. `"profiles"`) to deep-link, encoded as `?tab=…` in the start URL. `OpenInstallProgress` is `AlwaysOnTop` and hides every other visible window for the duration of the install (restored on close). Auxiliary windows are created on first open and **destroyed** on close (Wails-recommended singleton pattern; prevents the macOS dock-reopen from resurrecting hidden windows). | | `I18n` | `i18n.go` | Thin facade over `i18n.Bundle`. `Languages()` returns the shipped locales (`_index.json`); `Bundle(code)` returns the full key→text map for one language so the React layer can drive its own translation library. | | `Preferences` | `preferences.go` | Thin facade over `preferences.Store`. `Get()` returns `{language}`; `SetLanguage(code)` validates against `i18n.Bundle.HasLanguage`, persists, and broadcasts `netbird:preferences:changed`. | @@ -91,8 +91,9 @@ The main window is created up front in `main.go`. Auxiliary windows are created - **Settings** (`/#/settings`) — opened from the header gear icon (`layouts/Header.tsx → WindowManager.OpenSettings("")`), the tray's Settings menu entry (`tray.go openSettings`), and the profile dropdown's "Manage Profiles" entry (`WindowManager.OpenSettings("profiles")`, which sets `?tab=profiles` in the start URL — `Settings.tsx` reads it via `useSearchParams`). The window hosts every settings tab — including **Profiles** (`SettingsProfiles.tsx`, `UserCircle` icon, sits between Security and SSH), which lists profiles in a table with Deregister/Delete in a per-row kebab and an Add Profile button. Both call sites go through `WindowManager` so the user sees the same dedicated frameless window from either trigger — the tray used to repurpose the main window via `SetURL("/#/settings")`, which replaced the main UI in place. Frameless-look (translucent macOS backdrop, hidden inset title bar), fixed 900×640, no resize, no minimise/maximise. - **BrowserLogin** (`/#/browser-login?uri=…`) — opened by the connection toggle's SSO flow (`layouts/ConnectionStatusSwitch.tsx`). 460×440, fixed size. The close button (red X) fires `EventBrowserLoginCancel` so the JS-side `startLogin()` can tear down the daemon's pending `WaitSSOLogin`. `WindowManager.CloseBrowserLogin` closes it programmatically when the flow completes. - **SessionExpired** (`/#/session-expired`) and **SessionAboutToExpire** (`/#/session-about-to-expire?seconds=`) — opened by `WindowManager.OpenSessionExpired` / `OpenSessionAboutToExpire(seconds)`. 460×380, fixed size, `AlwaysOnTop: true` (the user can't miss them). The React-side buttons close the window via `WindowManager.CloseSession*` and (for Sign-in / Stay-connected) emit `EventTriggerLogin` so the main window's `startLogin()` orchestrator handles the SSO flow. Currently triggered only by the DEV-only "Development" Settings tab; daemon-status integration is a follow-up. +- **InstallProgress** (`/#/install-progress?version=`) — opened by `WindowManager.OpenInstallProgress(version)` from `ClientVersionContext` (force-install branch on `installing` flip, user-driven enforced branch from `triggerUpdate`). 360-wide auto-sized via `useAutoSizeWindow`, `AlwaysOnTop`. Owns its own polling loop against `Update.GetInstallerResult` with the 5-second daemon-down-grace (sustained gRPC failure = success → call `Update.Quit()`). Hides every other visible window on open (restored on close). The DEV-only "Development" tab has a "Show updating dialog" button that opens this window directly for preview. -All four auxiliary windows are **destroyed** on close (mutex-guarded singleton; `closing` hook nils the field). Destroying rather than hiding is deliberate — Wails' macOS dock-reopen handler resurrects hidden windows, which we don't want for auxiliaries. +All five auxiliary windows are **destroyed** on close (mutex-guarded singleton; `closing` hook nils the field). Destroying rather than hiding is deliberate — Wails' macOS dock-reopen handler resurrects hidden windows, which we don't want for auxiliaries. The main window is **hidden** on close (the `WindowClosing` hook calls `e.Cancel(); window.Hide()`). The user reaches "really quit" through the tray → Quit menu entry. @@ -125,7 +126,7 @@ User-actionable operation failures (config save, profile switch, debug bundle, u Confirmations use `Dialogs.Warning` with explicit `Buttons`. The promise resolves with the **button Label string**, not an index — pin the label into a variable before comparing (especially with i18n, where labels translate). Full API in `WAILS-DIALOGS.md`. -**Skip native dialogs** for: inline form validation (`Input.tsx`, URL-format checks — too heavy for keystroke feedback); transient link errors on the dashboard (flap in/out with daemon — use an inline indicator); "partial success" notes inside an otherwise-OK flow (e.g. "bundle saved but upload failed" stays inline); dedicated screens like `/update` may show an additional inline header alongside the dialog so the screen isn't blank after dismissal. +**Skip native dialogs** for: inline form validation (`Input.tsx`, URL-format checks — too heavy for keystroke feedback); transient link errors on the dashboard (flap in/out with daemon — use an inline indicator); "partial success" notes inside an otherwise-OK flow (e.g. "bundle saved but upload failed" stays inline). The install-progress window owns its own error UI in-place (timeout/canceled/failed phases) — no native dialog needed there. ### OS notifications diff --git a/client/ui/frontend/CLAUDE.md b/client/ui/frontend/CLAUDE.md index 2097400c9..1b08673f9 100644 --- a/client/ui/frontend/CLAUDE.md +++ b/client/ui/frontend/CLAUDE.md @@ -25,13 +25,13 @@ React 18 + TS 5.7 (`strict`, `noImplicitAny: false`) + Vite 6 + Tailwind 3 (`dar | `/` | `Main` | `AppLayout` | Main window default route | | `/quick` | `QuickActions` | none | Standalone — **prototype**, not currently invoked by the Go side | | `/browser-login` | `WaitingForBrowserDialog` (modules/authentication) | none | Auxiliary window (Go `WindowManager.OpenBrowserLogin`) | -| `/update` | `Update` (pages) | none | Main window during enforced-update install | +| `/install-progress` | `InstallProgressDialog` (modules/auto-update) | none | Auxiliary window (Go `WindowManager.OpenInstallProgress(version)`, always-on-top). Owns the install-result polling + 5s daemon-down-grace; calls `Update.Quit()` on success. Opened by `ClientVersionContext.triggerUpdate` (enforced user-driven branch) and on the `installing` flip from `netbird:update:state` (force-install branch). Dev "Show updating dialog" button in `SettingsDevelopment` opens it directly. | | `/session-expired` | `SessionExpiredDialog` (modules/authentication) | none | Auxiliary window (Go `WindowManager.OpenSessionExpired`, always-on-top) | | `/session-about-to-expire` | `SessionAboutToExpireDialog` (modules/authentication) | none | Auxiliary window (Go `WindowManager.OpenSessionAboutToExpire(seconds)`, always-on-top, mm:ss countdown via `?seconds=`) | | `/settings` | `Settings` | `SettingsLayout` | Auxiliary window (Go `WindowManager.OpenSettings(tab)`). The `Profiles` tab (`modules/settings/SettingsProfiles.tsx`, `UserCircle` icon, between Security and SSH) lists profiles in a table with Deregister/Delete in a per-row kebab and an Add Profile button. The header `ProfileDropdown`'s "Manage Profiles" entry calls `OpenSettings("profiles")` — `Settings.tsx` reads `?tab=` via `useSearchParams` so the window opens at that tab. | | `*` | `` | `AppLayout` | Catch-all | -`AppLayout` wraps `Header + ` in this provider order: `StatusProvider → ProfileProvider → DebugBundleProvider → ClientVersionProvider`. `StatusProvider` (in `modules/daemon-status/StatusContext.tsx`) owns the single `Peers.Get` + `netbird:status` subscription, exposes `{ status, error, refresh, isReady, isDaemonAvailable, isDaemonUnavailable }`, **and only renders its children when the daemon is reachable** — until the first `Peers.Get` resolves and on `DaemonUnavailable` it short-circuits to just the `` (also owned by the provider). The consequence: every context downstream (`ProfileProvider`, `DebugBundleProvider`, `ClientVersionProvider`) can assume the daemon is reachable at mount time — no per-context `useStatus` gating. When the daemon flips back to unavailable the whole downstream subtree unmounts and remounts fresh once it returns. The remaining order is structural — `DebugBundleProvider` reads `useProfile`, and `ClientVersionProvider` paints `` so it has to be outermost in z-index but innermost in the tree. `AppLayout` also owns the wide/narrow `expanded` state as plain `useState` (no persistence) and passes it to `Header` via props and to `Main` via Outlet context (`MainOutletContext`). +`AppLayout` wraps `Header + ` in this provider order: `StatusProvider → ProfileProvider → DebugBundleProvider → ClientVersionProvider`. `StatusProvider` (in `modules/daemon-status/StatusContext.tsx`) owns the single `Peers.Get` + `netbird:status` subscription, exposes `{ status, error, refresh, isReady, isDaemonAvailable, isDaemonUnavailable }`, **and only renders its children when the daemon is reachable** — until the first `Peers.Get` resolves and on `DaemonUnavailable` it short-circuits to just the `` (also owned by the provider). The consequence: every context downstream (`ProfileProvider`, `DebugBundleProvider`, `ClientVersionProvider`) can assume the daemon is reachable at mount time — no per-context `useStatus` gating. When the daemon flips back to unavailable the whole downstream subtree unmounts and remounts fresh once it returns. `ClientVersionProvider` no longer paints any inline overlay; install progress lives in its own auxiliary window (see `/install-progress` route). `AppLayout` also owns the wide/narrow `expanded` state as plain `useState` (no persistence) and passes it to `Header` via props and to `Main` via Outlet context (`MainOutletContext`). `SettingsLayout` uses the same provider stack minus the `Header`. It also reserves a 38px `wails-draggable` strip at the top so the macOS traffic-light buttons (the window uses `MacTitleBarHiddenInset`) don't overlap content. @@ -49,7 +49,9 @@ Subscribe with `Events.On(name, handler)`. The handler receives `{ data: ` + `` so every screen inherits them. **Dev preview flags at the top of the file** (`FORCE_UPDATE_AVAILABLE`, `FORCE_UPDATING`, `FORCE_VERSION`, `HIDE_UPDATE_AVAILABLE`, `FORCE_ERROR`, `FORCE_ERROR_MSG`) override daemon state for UI preview. `FORCE_UPDATE_AVAILABLE = true` is currently committed — flip back to `false` before a real release. `UpdateAvailableBanner` additionally returns null in `import.meta.env.DEV`. +- **`ClientVersionContext`** (`modules/auto-update/`) — seeds from `Update.GetState()` and subscribes to `netbird:update:state`; exposes `{ updateAvailable, updateVersion, enforced, installing, triggerUpdate, updating }`. **Three branches**: + 1. `available && !enforced` — download-only. `UpdateVersionCard` shows "Version X is available for download" + "Download installer" → opens GitHub releases. + 2. `available && enforced && !installing` — user-driven enforced. `UpdateVersionCard` shows "Version X is available for install" + "Install now" → `triggerUpdate` opens `/install-progress` window then calls `Update.Trigger()`. + 3. `available && enforced && installing` — daemon already installing (force-install). The `installing` flip auto-opens `/install-progress` via `WindowManager.OpenInstallProgress`. + Dev preview: `SettingsDevelopment` toggles emit `netbird:dev:overrides`, which this provider listens for and overrides `available / enforced / version`. No more module-level `FORCE_*` constants. ### Wide/narrow panel + no client-side persistence @@ -150,7 +156,7 @@ Defined in `tailwind.config.ts`. `nb-gray` is the neutral palette (background = ## Wails-specific quirks -- **Window dragging.** Use class `wails-draggable` on regions that should drag the OS window (the Header, the SettingsLayout title strip, the UpdatingOverlay). Use `wails-no-draggable` on interactive children inside a draggable region (buttons, inputs) — otherwise the drag swallows their click. +- **Window dragging.** Use class `wails-draggable` on regions that should drag the OS window (the Header, the SettingsLayout title strip, dialog wrappers like `ConfirmDialog`). Use `wails-no-draggable` on interactive children inside a draggable region (buttons, inputs) — otherwise the drag swallows their click. - **Webview asset access.** Background images / fonts go through Vite at build time, so reference them with `import url from "@/assets/.../foo.svg"`. The Wails dev server proxies `/` to Vite, but absolute filesystem paths won't work in either dev or prod. - **`Window.SetSize(w, h)`.** Called from `Header.tsx` to switch between 380-wide and 925-wide layouts. There's a one-time initial sync on mount so localStorage's `expanded` flag wins over the Go-side default of 925. - **`Browser.OpenURL(url)`.** Used by `SettingsAbout` for legal links and by the `BrowserLogin` page's "Try again". Has a `window.open` fallback in `SettingsAbout` for the case where Wails refuses (non-http schemes are rejected by Wails). @@ -160,10 +166,8 @@ Defined in `tailwind.config.ts`. `nb-gray` is the neutral palette (background = - **`screens/Peers.tsx`** uses live `Peers.Get` data. **`modules/peers/Peers.tsx`** uses `mockPeers.ts`. The mock-driven one is mounted under `Main.tsx`'s `MainRightSide` and is what the user sees today; the real-data one isn't wired into the route table. - **`screens/Profiles.tsx`** still imports bindings via the deep relative path. It's the example of the preferred `ProfileSwitcher.SwitchActive` flow but otherwise pre-AppLayout. - **`pages/Debug.tsx`** is the legacy debug-bundle screen. The polished flow is in `modules/settings/SettingsTroubleshooting.tsx` (via `useDebugBundle`). `pages/Debug.tsx` isn't currently routed. -- **`pages/Update.tsx`** and **`screens/Update.tsx`** are two different update pages. The route table points at `pages/Update.tsx` (the production one with the 15-minute timeout, daemon-down-grace, and error-mapping). The `screens/Update.tsx` is an older simpler variant. - **`modules/authentication/SessionExpiredDialog.tsx`** and **`modules/authentication/SessionAboutToExpireDialog.tsx`** are the always-on-top auxiliary windows. Today they're only triggered via the DEV-only "Development" tab in Settings (`SettingsDevelopment.tsx`) — a daemon-status hook (status `SessionExpired`, plus a future "about-to-expire" signal) will drive them later. Sign-in / Stay-connected emit `EventTriggerLogin` so the main window's `startLogin()` orchestrator handles the SSO flow; Logout uses `Connection.Logout({profileName, username})`. - **`screens/QuickActions.tsx`** is wired to `/quick` in the route table but nothing on the Go side currently navigates there. -- **`UpdateAvailableBanner`** is force-enabled via `FORCE_UPDATE_AVAILABLE = true` and additionally TODO-commented for the "only when management has auto updates enabled + force updates is disabled" case. ## Wails Go API reference diff --git a/client/ui/frontend/src/app.tsx b/client/ui/frontend/src/app.tsx index e3205998b..eab586fec 100644 --- a/client/ui/frontend/src/app.tsx +++ b/client/ui/frontend/src/app.tsx @@ -5,7 +5,7 @@ import { HashRouter, Navigate, Route, Routes } from "react-router-dom"; import QuickActions from "@/screens/QuickActions.tsx"; import SessionExpiredDialog from "@/modules/authentication/SessionExpiredDialog.tsx"; import SessionAboutToExpireDialog from "@/modules/authentication/SessionAboutToExpireDialog.tsx"; -import Update from "@/screens/Update.tsx"; +import InstallProgressDialog from "@/modules/auto-update/InstallProgressDialog.tsx"; import { AppLayout } from "@/layouts/AppLayout.tsx"; import { SettingsLayout } from "@/layouts/SettingsLayout.tsx"; import { Main } from "@/layouts/Main.tsx"; @@ -33,7 +33,7 @@ initI18n() } /> } /> - } /> + } /> } /> } /> }> diff --git a/client/ui/frontend/src/i18n/locales/de/common.json b/client/ui/frontend/src/i18n/locales/de/common.json index 68edbfb2a..6127b63a6 100644 --- a/client/ui/frontend/src/i18n/locales/de/common.json +++ b/client/ui/frontend/src/i18n/locales/de/common.json @@ -221,10 +221,11 @@ "update.banner.message": "NetBird {version} ist installationsbereit.", "update.banner.later": "Später", "update.banner.installNow": "Jetzt installieren", - "update.card.versionAvailable": "Version {version} ist verfügbar.", + "update.card.versionAvailableDownload": "Version {version} ist zum Herunterladen verfügbar.", + "update.card.versionAvailableInstall": "Version {version} ist zur Installation verfügbar.", "update.card.whatsNew": "Was ist neu?", "update.card.installNow": "Jetzt installieren", - "update.card.getInstaller": "Installer holen", + "update.card.getInstaller": "Installer herunterladen", "update.card.lastChecked": "Zuletzt geprüft am {date}", "update.card.changelog": "Änderungsprotokoll", "update.card.checkForUpdates": "Nach Updates suchen", diff --git a/client/ui/frontend/src/i18n/locales/en/common.json b/client/ui/frontend/src/i18n/locales/en/common.json index ed8acc4a7..a5d3d3b5d 100644 --- a/client/ui/frontend/src/i18n/locales/en/common.json +++ b/client/ui/frontend/src/i18n/locales/en/common.json @@ -242,10 +242,11 @@ "update.banner.message": "NetBird {version} is ready to install.", "update.banner.later": "Later", "update.banner.installNow": "Install now", - "update.card.versionAvailable": "Version {version} is available.", + "update.card.versionAvailableDownload": "Version {version} is available for download.", + "update.card.versionAvailableInstall": "Version {version} is available for install.", "update.card.whatsNew": "What's new?", "update.card.installNow": "Install now", - "update.card.getInstaller": "Get installer", + "update.card.getInstaller": "Download installer", "update.card.lastChecked": "Last checked on {date}", "update.card.changelog": "Changelog", "update.card.checkForUpdates": "Check for updates", diff --git a/client/ui/frontend/src/i18n/locales/hu/common.json b/client/ui/frontend/src/i18n/locales/hu/common.json index 910f48b37..f00c2908b 100644 --- a/client/ui/frontend/src/i18n/locales/hu/common.json +++ b/client/ui/frontend/src/i18n/locales/hu/common.json @@ -221,7 +221,8 @@ "update.banner.message": "A NetBird {version} telepítésre kész.", "update.banner.later": "Később", "update.banner.installNow": "Telepítés most", - "update.card.versionAvailable": "Elérhető a {version} verzió.", + "update.card.versionAvailableDownload": "A {version} verzió letöltésre elérhető.", + "update.card.versionAvailableInstall": "A {version} verzió telepítésre elérhető.", "update.card.whatsNew": "Mi az újdonság?", "update.card.installNow": "Telepítés most", "update.card.getInstaller": "Telepítő letöltése", diff --git a/client/ui/frontend/src/layouts/Header.tsx b/client/ui/frontend/src/layouts/Header.tsx index 4ea1561cf..8d431522b 100644 --- a/client/ui/frontend/src/layouts/Header.tsx +++ b/client/ui/frontend/src/layouts/Header.tsx @@ -51,16 +51,13 @@ export const Header = () => { )} >
-
+
- + diff --git a/client/ui/frontend/src/modules/auto-update/ClientVersionContext.tsx b/client/ui/frontend/src/modules/auto-update/ClientVersionContext.tsx index b96afd577..096ea315d 100644 --- a/client/ui/frontend/src/modules/auto-update/ClientVersionContext.tsx +++ b/client/ui/frontend/src/modules/auto-update/ClientVersionContext.tsx @@ -4,14 +4,13 @@ import { useContext, useEffect, useMemo, + useRef, useState, type ReactNode, } from "react"; import { Events } from "@wailsio/runtime"; -import { Update as UpdateSvc } from "@bindings/services"; +import { Update as UpdateSvc, WindowManager } from "@bindings/services"; import type { State as UpdateState } from "@bindings/updater/models.js"; -import { UpdateAvailableBanner } from "@/modules/auto-update/UpdateAvailableBanner"; -import { UpdatingOverlay } from "@/modules/auto-update/UpdatingOverlay"; type ClientVersionContextValue = { updateAvailable: boolean; @@ -20,42 +19,22 @@ type ClientVersionContextValue = { installing: boolean; triggerUpdate: () => void; updating: boolean; - updateError: string | null; - dismissUpdateError: () => void; -}; - -// Dev toggles — flip to preview UI states without triggering real flows. -const FORCE_UPDATE_AVAILABLE = false; -const FORCE_UPDATING = false; -const FORCE_ENFORCED = true; -const FORCE_VERSION = "0.65.0"; -// Hide all "update available" UI (header trigger, settings badge, banner) -// regardless of what the daemon reports. -const HIDE_UPDATE_AVAILABLE = false; -// FORCE_ERROR options: -// null → no error (loading state) -// "timeout" → "Update timed out" state -// "cancel" → "Update canceled" state -// "fail" → generic "Update failed" state (uses FORCE_ERROR_MSG) -type ForceError = "timeout" | "cancel" | "fail" | null; -const FORCE_ERROR = null as ForceError; -const FORCE_ERROR_MSG = "installer exited with code 1"; - -const forcedErrorMessage = (): string | null => { - switch (FORCE_ERROR) { - case "timeout": - return "update timed out after 15m"; - case "cancel": - return "update canceled by user"; - case "fail": - return FORCE_ERROR_MSG; - default: - return null; - } }; const EVENT_UPDATE_STATE = "netbird:update:state"; +// Dev tab in Settings emits this with { updateAvailable, enforced, version }. +// Lives only in-memory in the main window for the session — losing it when +// Settings closes is acceptable per the dev-toggle scope (no daemon write, +// no persistence). See SettingsDevelopment.tsx. +const EVENT_DEV_OVERRIDES = "netbird:dev:overrides"; + +type DevOverrides = { + updateAvailable: boolean; + enforced: boolean; + version: string; +}; + const emptyState: UpdateState = { available: false, version: "", @@ -76,11 +55,8 @@ export const useClientVersion = () => { export const ClientVersionProvider = ({ children }: { children: ReactNode }) => { const [state, setState] = useState(emptyState); const [updating, setUpdating] = useState(false); - const [updateError, setUpdateError] = useState(null); + const [devOverride, setDevOverride] = useState(null); - // Pull the current state once on mount so a banner / overlay that - // re-renders later in the session still has the right baseline, then - // subscribe to the push channel for live updates. useEffect(() => { let cancelled = false; UpdateSvc.GetState() @@ -100,40 +76,53 @@ export const ClientVersionProvider = ({ children }: { children: ReactNode }) => }; }, []); - // Merge the live state with dev overrides. The overrides win so designers - // can preview any branch without involving the daemon. + useEffect(() => { + const off = Events.On(EVENT_DEV_OVERRIDES, (ev: { data: DevOverrides }) => { + if (ev?.data) setDevOverride(ev.data); + }); + return () => { + off?.(); + }; + }, []); + + // Dev override only kicks in when it explicitly forces updateAvailable on. + // Otherwise daemon truth wins. const effective = useMemo(() => { - if (HIDE_UPDATE_AVAILABLE) return emptyState; - if (FORCE_UPDATE_AVAILABLE || FORCE_UPDATING) { + if (devOverride && devOverride.updateAvailable) { return { available: true, - version: FORCE_VERSION, - enforced: FORCE_ENFORCED, - installing: FORCE_UPDATING, + version: devOverride.version || "0.65.0", + enforced: devOverride.enforced, + installing: state.installing, }; } return state; - }, [state]); + }, [state, devOverride]); + // Force-install branch: daemon's progress_window:show flipped installing + // to true while the UI was idle. Open the install window so the user + // sees the progress UI without having to click anything. + const prevInstallingRef = useRef(false); + useEffect(() => { + if (effective.installing && !prevInstallingRef.current) { + WindowManager.OpenInstallProgress(effective.version || "").catch(console.error); + } + prevInstallingRef.current = effective.installing; + }, [effective.installing, effective.version]); + + // Enforced user-driven branch: kick Trigger() in the background, then + // hand off to the install window. The window owns the polling loop and + // the final Quit() — this provider just fires the trigger. const triggerUpdate = useCallback(() => { - setUpdateError(null); setUpdating(true); + WindowManager.OpenInstallProgress(effective.version || "").catch(console.error); UpdateSvc.Trigger() - .then((result) => { - if (!result?.success) { - setUpdateError(result?.errorMsg || "Update failed"); - setUpdating(false); - } + .catch(() => { + // The daemon may already be down (force-install branch raced + // us). The install window's polling loop handles it. }) - .catch((e: unknown) => { - setUpdateError(String(e)); - setUpdating(false); - }); - }, []); - - const dismissUpdateError = useCallback(() => setUpdateError(null), []); - - const showOverlay = updating || effective.installing || updateError || FORCE_ERROR; + .finally(() => setUpdating(false)); + }, [effective.version]); const value = useMemo( () => ({ @@ -143,23 +132,13 @@ export const ClientVersionProvider = ({ children }: { children: ReactNode }) => installing: effective.installing, triggerUpdate, updating, - updateError, - dismissUpdateError, }), - [effective, triggerUpdate, updating, updateError, dismissUpdateError], + [effective, triggerUpdate, updating], ); return ( {children} - - {showOverlay && ( - - )} ); }; diff --git a/client/ui/frontend/src/modules/auto-update/InstallProgressDialog.tsx b/client/ui/frontend/src/modules/auto-update/InstallProgressDialog.tsx new file mode 100644 index 000000000..a0c327e57 --- /dev/null +++ b/client/ui/frontend/src/modules/auto-update/InstallProgressDialog.tsx @@ -0,0 +1,182 @@ +import { useEffect, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useSearchParams } from "react-router-dom"; +import { Loader2, XCircle } from "lucide-react"; +import { Update as UpdateSvc, WindowManager } from "@bindings/services"; +import { Button } from "@/components/Button"; +import { ConfirmDialog } from "@/components/ConfirmDialog"; +import { DialogActions } from "@/components/DialogActions"; +import { DialogDescription } from "@/components/DialogDescription"; +import { DialogHeading } from "@/components/DialogHeading"; +import { SquareIcon } from "@/components/SquareIcon"; +import { useAutoSizeWindow } from "@/lib/useAutoSizeWindow"; + +const TIMEOUT_MS = 15 * 60 * 1000; +const POLL_INTERVAL_MS = 2000; +// Sustained gRPC failure during install is taken as success — the daemon +// gets restarted by the installer mid-flight, mirroring the legacy Fyne +// UI's branch in client/ui/update.go. +const DAEMON_DOWN_GRACE_MS = 5000; +const WINDOW_WIDTH = 360; + +type Phase = + | { kind: "running" } + | { kind: "timeout" } + | { kind: "canceled" } + | { kind: "failed"; message: string }; + +export default function InstallProgressDialog() { + const { t } = useTranslation(); + const [params] = useSearchParams(); + const version = params.get("version") ?? ""; + const [phase, setPhase] = useState({ kind: "running" }); + const phaseRef = useRef(phase); + phaseRef.current = phase; + const contentRef = useAutoSizeWindow(WINDOW_WIDTH); + + useEffect(() => { + let cancelled = false; + const start = Date.now(); + let firstUnreachableAt: number | null = null; + + const timer = setInterval(async () => { + if (cancelled) return; + if (phaseRef.current.kind !== "running") return; + + if (Date.now() - start > TIMEOUT_MS) { + clearInterval(timer); + setPhase({ kind: "timeout" }); + return; + } + + try { + const r = await UpdateSvc.GetInstallerResult(); + firstUnreachableAt = null; + if (r.success) { + clearInterval(timer); + UpdateSvc.Quit(); + return; + } + if (r.errorMsg) { + clearInterval(timer); + setPhase(mapInstallError(r.errorMsg)); + } + } catch { + const now = Date.now(); + if (firstUnreachableAt === null) { + firstUnreachableAt = now; + } else if (now - firstUnreachableAt >= DAEMON_DOWN_GRACE_MS) { + clearInterval(timer); + UpdateSvc.Quit(); + } + } + }, POLL_INTERVAL_MS); + + return () => { + cancelled = true; + clearInterval(timer); + }; + }, []); + + const isError = phase.kind !== "running"; + const errorInfo = isError ? classifyPhase(phase, version, t) : null; + + return ( + + {isError ? ( + + ) : ( + + )} + +
+ + {isError + ? errorInfo!.title + : version + ? t("update.overlay.updatingVersion", { version }) + : t("update.overlay.updating")} + + + {isError ? ( + <> + {errorInfo!.description} + {errorInfo!.message && ( + <> +
+ + {errorInfo!.message} + + + )} + + ) : ( + t("update.overlay.description") + )} + +
+ + {isError && ( + + + + )} + + ); +} + +function mapInstallError(msg: string): Phase { + const m = msg.trim().toLowerCase(); + if (m === "") return { kind: "failed", message: "unknown update error" }; + if (m.includes("deadline exceeded") || m.includes("timeout") || m.includes("timed out")) { + return { kind: "timeout" }; + } + if (m.includes("canceled") || m.includes("cancelled") || m.includes("cancel")) { + return { kind: "canceled" }; + } + return { kind: "failed", message: msg }; +} + +type Variant = { title: string; description: string; message?: string }; + +function classifyPhase( + phase: Phase, + version: string, + t: (key: string, options?: Record) => string, +): Variant { + const target = version + ? t("update.overlay.error.targetVersion", { version }) + : t("update.overlay.error.targetFallback"); + switch (phase.kind) { + case "timeout": + return { + title: t("update.overlay.error.timeoutTitle"), + description: t("update.overlay.error.timeoutDescription", { target }), + }; + case "canceled": + return { + title: t("update.overlay.error.canceledTitle"), + description: t("update.overlay.error.canceledDescription", { target }), + }; + case "failed": + return { + title: t("update.overlay.error.failTitle"), + description: t("update.overlay.error.failDescription", { target }), + message: phase.message || t("update.overlay.error.unknownMessage"), + }; + default: + return { title: "", description: "" }; + } +} diff --git a/client/ui/frontend/src/modules/auto-update/UpdateVersionCard.tsx b/client/ui/frontend/src/modules/auto-update/UpdateVersionCard.tsx index 814c9f038..0eff79a0f 100644 --- a/client/ui/frontend/src/modules/auto-update/UpdateVersionCard.tsx +++ b/client/ui/frontend/src/modules/auto-update/UpdateVersionCard.tsx @@ -25,10 +25,13 @@ export function UpdateVersionCard() { const { updateVersion, enforced, triggerUpdate } = useClientVersion(); if (updateVersion) { + const titleKey = enforced + ? "update.card.versionAvailableInstall" + : "update.card.versionAvailableDownload"; return (
- {t("update.card.versionAvailable", { version: updateVersion })} + {t(titleKey, { version: updateVersion })} diff --git a/client/ui/frontend/src/modules/auto-update/UpdatingOverlay.tsx b/client/ui/frontend/src/modules/auto-update/UpdatingOverlay.tsx deleted file mode 100644 index 470c09196..000000000 --- a/client/ui/frontend/src/modules/auto-update/UpdatingOverlay.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { useTranslation } from "react-i18next"; -import { Loader2, XCircle } from "lucide-react"; -import { Button } from "@/components/Button"; - -type Props = { - version: string | null; - error: string | null; - onDismiss: () => void; -}; - -type Variant = { - title: string; - description: string; - message?: string; -}; - -function classifyError( - msg: string, - version: string | null, - t: (key: string, options?: Record) => string, -): Variant { - const lower = msg.toLowerCase(); - const target = version - ? t("update.overlay.error.targetVersion", { version }) - : t("update.overlay.error.targetFallback"); - if (lower.includes("timeout") || lower.includes("timed out")) { - return { - title: t("update.overlay.error.timeoutTitle"), - description: t("update.overlay.error.timeoutDescription", { target }), - }; - } - if (lower.includes("cancel")) { - return { - title: t("update.overlay.error.canceledTitle"), - description: t("update.overlay.error.canceledDescription", { target }), - }; - } - return { - title: t("update.overlay.error.failTitle"), - description: t("update.overlay.error.failDescription", { target }), - message: msg || t("update.overlay.error.unknownMessage"), - }; -} - -export const UpdatingOverlay = ({ version, error, onDismiss }: Props) => { - const { t } = useTranslation(); - const isError = Boolean(error); - const errorInfo = error ? classifyError(error, version, t) : null; - - return ( -
{ - if (isError) return; - e.preventDefault(); - e.stopPropagation(); - }} - onKeyDown={(e) => { - if (isError) return; - e.preventDefault(); - e.stopPropagation(); - }} - > -
- {isError ? ( -
- -
- ) : ( -
- -
- )} - -
-

- {isError - ? errorInfo!.title - : version - ? t("update.overlay.updatingVersion", { version }) - : t("update.overlay.updating")} -

-

- {isError ? ( - <> - {errorInfo!.description} - {errorInfo!.message && ( - <> -
- - {errorInfo!.message} - - - )} - - ) : ( - t("update.overlay.description") - )} -

-
- - {isError && ( -
- -
- )} -
-
- ); -}; diff --git a/client/ui/frontend/src/modules/settings/SettingsDevelopment.tsx b/client/ui/frontend/src/modules/settings/SettingsDevelopment.tsx index a61e9348b..929128923 100644 --- a/client/ui/frontend/src/modules/settings/SettingsDevelopment.tsx +++ b/client/ui/frontend/src/modules/settings/SettingsDevelopment.tsx @@ -1,30 +1,84 @@ +import { useEffect, useState } from "react"; +import { Events } from "@wailsio/runtime"; import { Button } from "@/components/Button"; +import FancyToggleSwitch from "@/components/FancyToggleSwitch"; import { WindowManager } from "@bindings/services"; import { SectionGroup } from "@/modules/settings/SettingsSection.tsx"; +// Cross-window dev override: ClientVersionContext in the main window +// listens for this and replaces daemon-reported update state with the +// toggle values. Resets when the Settings window closes (no persistence +// by design). +const EVENT_DEV_OVERRIDES = "netbird:dev:overrides"; +const PREVIEW_VERSION = "0.65.0"; + export function SettingsDevelopment() { + const [updateAvailable, setUpdateAvailable] = useState(false); + const [enforced, setEnforced] = useState(false); + + useEffect(() => { + void Events.Emit(EVENT_DEV_OVERRIDES, { + updateAvailable, + enforced, + version: PREVIEW_VERSION, + }); + }, [updateAvailable, enforced]); + return ( - -
- - -
- + /> +
+ +
+ + + +
+ + +
+ + ); } diff --git a/client/ui/frontend/src/modules/settings/SettingsProfiles.tsx b/client/ui/frontend/src/modules/settings/SettingsProfiles.tsx index 4e91abeda..19a0470a8 100644 --- a/client/ui/frontend/src/modules/settings/SettingsProfiles.tsx +++ b/client/ui/frontend/src/modules/settings/SettingsProfiles.tsx @@ -1,7 +1,7 @@ import { useLayoutEffect, useRef, useState, type ReactNode } from "react"; import { useTranslation } from "react-i18next"; import { Dialogs } from "@wailsio/runtime"; -import { LogOut, PlusCircle, Trash2, UserCircle } from "lucide-react"; +import { CircleMinus, PlusCircle, Trash2, UserCircle } from "lucide-react"; import type { Profile } from "@bindings/services/models.js"; import { Badge } from "@/components/Badge"; import { Button } from "@/components/Button"; @@ -251,7 +251,7 @@ const RowActions = ({ canDeregister, canDelete, onDeregister, onDelete }: RowAct