[v17] Show app updater in UI (#58261)

* Integrate app updater with UI (#57491)

* Implement `checkForUpdates`, `download`, `cancelDownload`, `changeManagingCluster` and `quitAndInstall`

* Expose new APIs through Electron IPC

* Add app updater context to store updater state

* Add `AppUpdates` dialog

* Switch "Download" button to "Starting Download..." immediately after clicking it

* Clear managing cluster on logout

* Return correct error in `GetClusterVersions`

* Do not prepend `https://` to file URL, DefaultBaseURL already contains it, trim the checksum value before validating it

* Only try to download an update if it's available

* Remove separate `will-quit` handler

* Clarify comment

* Invert condition in `preventInstallingOutdatedUpdates`

* Add comments

* Move `closeAllConnections()` out of try catch

* Add specialized functions to serialize/deserialize errors

* Add tests

* Leave TODO

* Do not wait for `maybeRemoveAppUpdatesManagingCluster` in `useClusterLogout`

* Hide app updater for .tar.gz which is not supported

* Add missing mock

(cherry picked from commit 13aa750)

* Show update widget in login dialog (#57695)

* Add app updates widget to login dialog

* Adjust compatibility warning to app updates

* Simplify widget error state, do not show full error message

* Make the widget take up 100% width both in login modal an in story

* Fix LocalWithPasswordless story

* Use `alignItems="stretch"`

* Use `SpaceProps` instead of redefining `mx` manually

* Infer type

* Display buttons in the bottom of Alert

* Avoid moving content when scrollbar appears

* Destructure `Promise.all` result

* Add comment

---------

Co-authored-by: Rafał Cieślak <[email protected]>
(cherry picked from commit c59a4e6)

* Simplify auto updates multi-cluster view (#57709)

* Simplify auto updates multi-cluster view

* Improve labels

* Fix tests

(cherry picked from commit b574045)

* Connect: Force focus after a successful SSO login

* Move login functions from ClustersService to useClusterLogin

* Remove no longer used GetResourcesParams

* Remove clusters/types.ts

* Force focus on Connect after successful SSO login

* Update SSO prompt after login but before sync

* Add test for SSO prompts

* Use `Promise.withResolvers`

Co-authored-by: Grzegorz Zdunek <[email protected]>

* Update wait-for-sync prompt message

---------

Co-authored-by: Grzegorz Zdunek <[email protected]>

* Hardcode the lowest supported Connect versions that support managed updates (#58348)

* Provide the lowest supported app versions for managed updates

* Deserialize errors in the UI code, not in preload

Otherwise, the error name is lost.

* Bump version in tests

* Lint

* Show exact version in error message

* Do not hide UnsupportedVersionError

* Fix margin

* Make alert take 100% width

(cherry picked from commit d7e1352)

---------

Co-authored-by: Rafał Cieślak <[email protected]>

Author: gzdunek

lib/teleterm/autoupdate/service.go

@@ -96,7 +96,7 @@ func (s *Service) GetClusterVersions(ctx context.Context, _ *api.GetClusterVersi
 				mu.Lock()
 				unreachableClusters = append(unreachableClusters, &api.UnreachableCluster{
 					ClusterUri:   cluster.URI.String(),
-					ErrorMessage: err.Error(),
+					ErrorMessage: pingErr.Error(),
 				})
 				mu.Unlock()
 				return nil
@@ -147,6 +147,7 @@ func (s *Service) GetDownloadBaseUrl(_ context.Context, _ *api.GetDownloadBaseUr
 func resolveBaseURL() (string, error) {
 	envBaseURL := os.Getenv(autoupdate.BaseURLEnvVar)
 	if envBaseURL != "" {
+		// TODO(gzdunek): Validate if it's correct URL.
 		return envBaseURL, nil
 	}
 

web/packages/design/src/StepSlider/StepSlider.tsx

@@ -61,6 +61,7 @@ export function StepSlider<Flows>(props: Props<Flows>) {
     defaultStepIndex = 0,
     tDuration = 500,
     wrapping = false,
+    className,
     // extraProps are the props required by our step components defined in our flows.
     ...extraProps
   } = props;
@@ -274,7 +275,7 @@ export function StepSlider<Flows>(props: Props<Flows>) {
   const transitionRef = keyToNodeRef.current.get(key);
 
   return (
-    <Box ref={rootRef} style={rootStyle}>
+    <Box ref={rootRef} style={rootStyle} className={className}>
       {preMount && <HiddenBox>{$preContent}</HiddenBox>}
       <Wrap className={animationDirectionPrefix} tDuration={tDuration}>
         <TransitionGroup component={null}>
@@ -420,6 +421,8 @@ type Props<Flows> =
          * one and backwards from the first one to the last one.
          */
         wrapping?: boolean;
+        /** Allows styling of the container element. */
+        className?: string;
       } & ExtraProps // Extra props that are passed to each step component. Each step of each flow needs to accept the same set of extra props.
     : any;
 

web/packages/teleterm/src/mainProcess/fixtures/mocks.ts

@@ -177,6 +177,26 @@ export class MockMainProcessClient implements MainProcessClient {
   async selectDirectoryForDesktopSession() {
     return '';
   }
+
+  supportsAppUpdates() {
+    return true;
+  }
+  async changeAppUpdatesManagingCluster() {}
+  async maybeRemoveAppUpdatesManagingCluster() {}
+  async checkForAppUpdates() {}
+  async downloadAppUpdate() {}
+  async cancelAppUpdateDownload() {}
+  async quitAndInstallAppUpdate() {}
+  subscribeToAppUpdateEvents(): {
+    cleanup: () => void;
+  } {
+    return { cleanup: () => undefined };
+  }
+  subscribeToOpenAppUpdateDialog(): {
+    cleanup: () => void;
+  } {
+    return { cleanup: () => undefined };
+  }
 }
 
 export const makeRuntimeSettings = (

web/packages/teleterm/src/mainProcess/ipcSerializer.ts

@@ -0,0 +1,43 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export type SerializedError = {
+  name: string;
+  message: string;
+  stack?: string;
+  cause?: unknown;
+};
+
+/** Serializes an Error into a plain object for transport through Electron IPC. */
+export function serializeError(error: Error): SerializedError {
+  return {
+    name: error.name,
+    message: error.message,
+    cause: error.cause,
+    stack: error.stack,
+  };
+}
+
+/** Deserializes a plain object back into an Error instance. */
+export function deserializeError(serialized: SerializedError): Error {
+  const error = new Error(serialized.message);
+  error.name = serialized.name;
+  error.cause = serialized.cause;
+  error.stack = serialized.stack;
+  return error;
+}

web/packages/teleterm/src/mainProcess/mainProcess.ts

@@ -83,6 +83,7 @@ import {
   removeAgentDirectory,
   type CreateAgentConfigFileArgs,
 } from './createAgentConfigFile';
+import { serializeError } from './ipcSerializer';
 import { ResolveError, resolveNetworkAddress } from './resolveNetworkAddress';
 import { terminateWithTimeout } from './terminateWithTimeout';
 import { WindowsManager } from './windowsManager';
@@ -161,7 +162,15 @@ export default class MainProcess {
     this.appUpdater = new AppUpdater(
       makeAppUpdaterStorage(this.appStateFileStorage),
       getClusterVersions,
-      getDownloadBaseUrl
+      getDownloadBaseUrl,
+      event => {
+        if (event.kind === 'error') {
+          event.error = serializeError(event.error);
+        }
+        this.windowsManager
+          .getWindow()
+          .webContents.send(RendererIpc.AppUpdateEvent, event);
+      }
     );
   }
 
@@ -180,8 +189,8 @@ export default class MainProcess {
 
   async dispose(): Promise<void> {
     this.windowsManager.dispose();
-    this.appUpdater.dispose();
     await Promise.all([
+      this.appUpdater.dispose(),
       // sending usage events on tshd shutdown has 10-seconds timeout
       terminateWithTimeout(this.tshdProcess, 10_000, () => {
         this.gracefullyKillTshdProcess();
@@ -639,6 +648,46 @@ export default class MainProcess {
       }
     );
 
+    ipcMain.on(MainProcessIpc.SupportsAppUpdates, event => {
+      event.returnValue = this.appUpdater.supportsUpdates();
+    });
+
+    ipcMain.handle(MainProcessIpc.CheckForAppUpdates, () =>
+      this.appUpdater.checkForUpdates()
+    );
+
+    ipcMain.handle(
+      MainProcessIpc.ChangeAppUpdatesManagingCluster,
+      (
+        event,
+        args: {
+          clusterUri: RootClusterUri | undefined;
+        }
+      ) => this.appUpdater.changeManagingCluster(args.clusterUri)
+    );
+
+    ipcMain.handle(
+      MainProcessIpc.MaybeRemoveAppUpdatesManagingCluster,
+      (
+        event,
+        args: {
+          clusterUri: RootClusterUri;
+        }
+      ) => this.appUpdater.maybeRemoveManagingCluster(args.clusterUri)
+    );
+
+    ipcMain.handle(MainProcessIpc.DownloadAppUpdate, () =>
+      this.appUpdater.download()
+    );
+
+    ipcMain.handle(MainProcessIpc.CancelAppUpdateDownload, () =>
+      this.appUpdater.cancelDownload()
+    );
+
+    ipcMain.handle(MainProcessIpc.QuiteAndInstallAppUpdate, () =>
+      this.appUpdater.quitAndInstall()
+    );
+
     subscribeToTerminalContextMenuEvent(this.configService);
     subscribeToTabContextMenuEvent(
       this.settings.availableShells,
@@ -673,7 +722,28 @@ export default class MainProcess {
         };
 
     const macTemplate: MenuItemConstructorOptions[] = [
-      { role: 'appMenu' },
+      {
+        role: 'appMenu',
+        submenu: [
+          { role: 'about' },
+          {
+            label: 'Check for Updates…',
+            click: () => {
+              this.windowsManager
+                .getWindow()
+                .webContents.send(RendererIpc.OpenAppUpdateDialog);
+            },
+          },
+          { type: 'separator' },
+          { role: 'services' },
+          { type: 'separator' },
+          { role: 'hide' },
+          { role: 'hideOthers' },
+          { role: 'unhide' },
+          { type: 'separator' },
+          { role: 'quit' },
+        ],
+      },
       { role: 'editMenu' },
       viewMenuTemplate,
       {

web/packages/teleterm/src/mainProcess/mainProcessClient.ts

@@ -19,6 +19,7 @@
 import { ipcRenderer } from 'electron';
 
 import { CreateAgentConfigFileArgs } from 'teleterm/mainProcess/createAgentConfigFile';
+import { AppUpdateEvent } from 'teleterm/services/appUpdater';
 import { createFileStorageClient } from 'teleterm/services/fileStorage';
 import { RootClusterUri } from 'teleterm/ui/uri';
 
@@ -199,5 +200,54 @@ export default function createMainProcessClient(): MainProcessClient {
         args
       );
     },
+    supportsAppUpdates() {
+      return ipcRenderer.sendSync(MainProcessIpc.SupportsAppUpdates);
+    },
+    checkForAppUpdates() {
+      return ipcRenderer.invoke(MainProcessIpc.CheckForAppUpdates);
+    },
+    downloadAppUpdate() {
+      return ipcRenderer.invoke(MainProcessIpc.DownloadAppUpdate);
+    },
+    cancelAppUpdateDownload() {
+      return ipcRenderer.invoke(MainProcessIpc.CancelAppUpdateDownload);
+    },
+    quitAndInstallAppUpdate() {
+      return ipcRenderer.invoke(MainProcessIpc.QuiteAndInstallAppUpdate);
+    },
+    changeAppUpdatesManagingCluster(clusterUri) {
+      return ipcRenderer.invoke(
+        MainProcessIpc.ChangeAppUpdatesManagingCluster,
+        {
+          clusterUri,
+        }
+      );
+    },
+    maybeRemoveAppUpdatesManagingCluster(clusterUri) {
+      return ipcRenderer.invoke(
+        MainProcessIpc.MaybeRemoveAppUpdatesManagingCluster,
+        {
+          clusterUri,
+        }
+      );
+    },
+    subscribeToAppUpdateEvents: listener => {
+      const ipcListener = (_, updateEvent: AppUpdateEvent) => {
+        listener(updateEvent);
+      };
+
+      ipcRenderer.addListener(RendererIpc.AppUpdateEvent, ipcListener);
+      return {
+        cleanup: () =>
+          ipcRenderer.removeListener(RendererIpc.AppUpdateEvent, ipcListener),
+      };
+    },
+    subscribeToOpenAppUpdateDialog: listener => {
+      ipcRenderer.addListener(RendererIpc.OpenAppUpdateDialog, listener);
+      return {
+        cleanup: () =>
+          ipcRenderer.removeListener(RendererIpc.OpenAppUpdateDialog, listener),
+      };
+    },
   };
 }

web/packages/teleterm/src/mainProcess/types.ts

@@ -18,6 +18,7 @@
 
 import { DeepLinkParseResult } from 'teleterm/deepLinks';
 import { CreateAgentConfigFileArgs } from 'teleterm/mainProcess/createAgentConfigFile';
+import { AppUpdateEvent } from 'teleterm/services/appUpdater';
 import { FileStorage } from 'teleterm/services/fileStorage';
 import { Document } from 'teleterm/ui/services/workspacesService';
 import { RootClusterUri } from 'teleterm/ui/uri';
@@ -146,10 +147,10 @@ export type MainProcessClient = {
    * Tells the OS to focus the window. If wait is true, polls periodically for window status and
    * resolves when it's focused or after a short timeout.
    *
-   * Most of the time wait shouldn't be used, it's there for use cases where it's important for the
-   * app to be focused (e.g., the business logic needs to use the clipboard API). Even in that case,
-   * the logic must handle a scenario where focus wasn't received as focus cannot be guaranteed.
-   * Any app can steal focus at any time.
+   * Most of the time wait shouldn't be used. It's for use cases where the app must be focused
+   * before carrying out the rest of the logic (e.g., the clipboard API requires focus). Even in
+   * those cases, the logic must handle a scenario where focus wasn't received as focus cannot be
+   * guaranteed. Any app can steal focus at any time.
    */
   forceFocusWindow(
     args?: { wait?: false } | { wait: true; signal?: AbortSignal }
@@ -206,6 +207,23 @@ export type MainProcessClient = {
     desktopUri: string;
     login: string;
   }): Promise<string>;
+  changeAppUpdatesManagingCluster(
+    clusterUri: RootClusterUri | undefined
+  ): Promise<void>;
+  maybeRemoveAppUpdatesManagingCluster(
+    clusterUri: RootClusterUri
+  ): Promise<void>;
+  supportsAppUpdates(): boolean;
+  checkForAppUpdates(): Promise<void>;
+  downloadAppUpdate(): Promise<void>;
+  cancelAppUpdateDownload(): Promise<void>;
+  quitAndInstallAppUpdate(): Promise<void>;
+  subscribeToAppUpdateEvents(listener: (args: AppUpdateEvent) => void): {
+    cleanup: () => void;
+  };
+  subscribeToOpenAppUpdateDialog(listener: () => void): {
+    cleanup: () => void;
+  };
 };
 
 export type ChildProcessAddresses = {
@@ -311,6 +329,8 @@ export enum RendererIpc {
   NativeThemeUpdate = 'renderer-native-theme-update',
   ConnectMyComputerAgentUpdate = 'renderer-connect-my-computer-agent-update',
   DeepLinkLaunch = 'renderer-deep-link-launch',
+  OpenAppUpdateDialog = 'renderer-open-app-update-dialog',
+  AppUpdateEvent = 'renderer-app-update-event',
 }
 
 export enum MainProcessIpc {
@@ -322,6 +342,13 @@ export enum MainProcessIpc {
   SaveTextToFile = 'main-process-save-text-to-file',
   ForceFocusWindow = 'main-process-force-focus-window',
   SelectDirectoryForDesktopSession = 'main-process-select-directory-for-desktop-session',
+  CheckForAppUpdates = 'main-process-check-for-app-updates',
+  DownloadAppUpdate = 'main-process-download-app-update',
+  CancelAppUpdateDownload = 'main-process-cancel-app-update-download',
+  QuiteAndInstallAppUpdate = 'main-process-quit-and-install-app-update',
+  ChangeAppUpdatesManagingCluster = 'main-process-change-app-updates-managing-cluster',
+  MaybeRemoveAppUpdatesManagingCluster = 'main-process-maybe-remove-app-updates-managing-cluster',
+  SupportsAppUpdates = 'main-process-supports-app-updates',
 }
 
 export enum WindowsManagerIpc {