Add info dialog explaining where daemon caches the installer

7 files changed, 59 insertions, 2 deletions

diff --git a/desktop/packages/mullvad-vpn/src/main/app-upgrade.ts b/desktop/packages/mullvad-vpn/src/main/app-upgrade.ts
index ff50218d5e..3dbe7df04f 100644
--- a/desktop/packages/mullvad-vpn/src/main/app-upgrade.ts
+++ b/desktop/packages/mullvad-vpn/src/main/app-upgrade.ts
@@ -30,6 +30,8 @@ export default class AppUpgrade {
         );
       }
     });
+
+    IpcMainEventChannel.app.handleGetUpgradeCacheDir(() => this.daemonRpc.getAppUpgradeCacheDir());
   }
 
   public subscribeEvents() {
diff --git a/desktop/packages/mullvad-vpn/src/main/daemon-rpc.ts b/desktop/packages/mullvad-vpn/src/main/daemon-rpc.ts
index 35c1f775f4..aed89bb3c9 100644
--- a/desktop/packages/mullvad-vpn/src/main/daemon-rpc.ts
+++ b/desktop/packages/mullvad-vpn/src/main/daemon-rpc.ts
@@ -148,6 +148,11 @@ export class DaemonRpc extends GrpcClient {
     void this.callEmpty(this.client.appUpgradeAbort);
   }
 
+  public async getAppUpgradeCacheDir(): Promise<string> {
+    const response = await this.callEmpty<StringValue>(this.client.getAppUpgradeCacheDir);
+    return response.getValue();
+  }
+
   public unsubscribeAppUpgradeEventListener(listener: SubscriptionListener<DaemonAppUpgradeEvent>) {
     const id = listener.subscriptionId;
     if (id !== undefined) {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
index e705f76661..368654e475 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
@@ -445,6 +445,7 @@ export default class AppRenderer {
   public daemonPrepareRestart = (shutdown: boolean): void => {
     IpcRendererEventChannel.daemon.prepareRestart(shutdown);
   };
+  public getAppUpgradeCacheDir = () => IpcRendererEventChannel.app.getUpgradeCacheDir();
 
   public tryStartDaemon = () => {
     if (window.env.platform === 'win32') IpcRendererEventChannel.daemon.tryStart();
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx
index cac6f59b9c..4d227496de 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/UpgradeDetails.tsx
@@ -1,17 +1,22 @@
+import { sprintf } from 'sprintf-js';
+
 import { messages } from '../../../../../../shared/gettext';
 import { Container, Flex, TitleBig, TitleLarge } from '../../../../../lib/components';
+import { formatHtml } from '../../../../../lib/html-formatter';
 import { AppNavigationHeader } from '../../../../app-navigation-header';
 import { ChangelogList } from '../../../../changelog-list';
 import { SettingsContainer } from '../../../../Layout';
 import { NavigationContainer } from '../../../../NavigationContainer';
 import { NavigationScrollbars } from '../../../../NavigationScrollbars';
+import { HeaderSubTitle } from '../../../../SettingsHeader';
 import { NoChangelogUpdates } from './components';
-import { useChangelog, useShowChangelogList, useTitle } from './hooks';
+import { useCacheDir, useChangelog, useShowChangelogList, useTitle } from './hooks';
 
 export function UpgradeDetails() {
   const changelog = useChangelog();
   const showChangelogList = useShowChangelogList();
   const title = useTitle();
+  const cacheDir = useCacheDir();
 
   return (
     <SettingsContainer>
@@ -24,13 +29,26 @@ export function UpgradeDetails() {
         />
         <NavigationScrollbars>
           <Flex $flexDirection="column" $gap="large" $padding={{ bottom: 'medium' }}>
-            <Container size="4">
+            <Container size="4" $flexDirection="column" $gap="small">
               <TitleBig as="h2">
                 {
                   // TRANSLATORS: Main title for the update available view
                   messages.pgettext('app-upgrade-view', 'Update available')
                 }
               </TitleBig>
+              {cacheDir !== undefined && (
+                <HeaderSubTitle>
+                  {formatHtml(
+                    sprintf(
+                      messages.pgettext(
+                        'app-upgrade-view',
+                        'Installer will be downloaded to <b>%(cacheDir)s</b>.',
+                      ),
+                      { cacheDir },
+                    ),
+                  )}
+                </HeaderSubTitle>
+              )}
             </Container>
             <Flex $flexDirection="column" $gap="small">
               <Container size="4">
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/hooks/index.ts
index 41cfba9f0a..158c43eeac 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useChangelog';
 export * from './useShowChangelogList';
+export * from './useCacheDir';
 export * from './useTitle';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/hooks/useCacheDir.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/hooks/useCacheDir.ts
new file mode 100644
index 0000000000..296b33e999
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/hooks/useCacheDir.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+import log from '../../../../../../../shared/logging';
+import { useAppContext } from '../../../../../../context';
+import { useMounted } from '../../../../../../lib/utility-hooks';
+
+export function useCacheDir() {
+  const { getAppUpgradeCacheDir } = useAppContext();
+  const [cacheDir, setCacheDir] = useState<string>();
+  const isMounted = useMounted();
+
+  useEffect(() => {
+    const fetchCacheDir = async () => {
+      try {
+        const cacheDir = await getAppUpgradeCacheDir();
+        if (isMounted()) {
+          setCacheDir(cacheDir);
+        }
+      } catch (e) {
+        const error = e as Error;
+        log.warn(`Failed to fetch cache dir: ${error.message}`);
+      }
+    };
+
+    void fetchCacheDir();
+  }, [getAppUpgradeCacheDir, isMounted]);
+
+  return cacheDir;
+}
diff --git a/desktop/packages/mullvad-vpn/src/shared/ipc-schema.ts b/desktop/packages/mullvad-vpn/src/shared/ipc-schema.ts
index 4f2c9da0fd..48148d9498 100644
--- a/desktop/packages/mullvad-vpn/src/shared/ipc-schema.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/ipc-schema.ts
@@ -176,6 +176,7 @@ export const ipcSchema = {
     upgradeEvent: notifyRenderer<AppUpgradeEvent>(),
     upgradeError: notifyRenderer<AppUpgradeError>(),
     upgradeInstallerStart: send<string>(),
+    getUpgradeCacheDir: invoke<void, string>(),
   },
   tunnel: {
     '': notifyRenderer<TunnelState>(),