Add Linux support for update download handling

5 files changed, 35 insertions, 4 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx
index 698c71f24a..4aa9811457 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/UpdateAvailableListItem.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 import { messages } from '../../../../../../shared/gettext';
-import { usePushAppUpgrade } from '../../../../../history/hooks';
 import { Flex, Icon } from '../../../../../lib/components';
 import { Dot } from '../../../../../lib/components/dot';
 import { ListItem } from '../../../../../lib/components/list-item';
 import { useConnectionIsBlocked, useVersionSuggestedUpgrade } from '../../../../../redux/hooks';
+import { useHandleClick, useIsLinux } from './hooks';
 
 const StyledText = styled(ListItem.Text)`
   margin-top: -4px;
@@ -15,12 +15,13 @@ export function UpdateAvailableListItem() {
   const { suggestedUpgrade } = useVersionSuggestedUpgrade();
   const { isBlocked } = useConnectionIsBlocked();
 
-  const pushAppUpgrade = usePushAppUpgrade();
+  const isLinux = useIsLinux();
+  const handleClick = useHandleClick();
 
   return (
     <ListItem disabled={isBlocked}>
       <ListItem.Item>
-        <ListItem.Trigger onClick={pushAppUpgrade}>
+        <ListItem.Trigger onClick={handleClick}>
           <ListItem.Content>
             <Flex $flexDirection="column">
               <ListItem.Label>
@@ -33,7 +34,7 @@ export function UpdateAvailableListItem() {
             </Flex>
             <ListItem.Group>
               <Dot variant="warning" size="small" />
-              <Icon icon="chevron-right" />
+              <Icon icon={isLinux ? 'external' : 'chevron-right'} />
             </ListItem.Group>
           </ListItem.Content>
         </ListItem.Trigger>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/index.ts
new file mode 100644
index 0000000000..153f4085e9
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useOpenDownloadUrl';
+export * from './useIsLinux';
+export * from './useHandleClick';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useHandleClick.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useHandleClick.tsx
new file mode 100644
index 0000000000..025cc2167e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useHandleClick.tsx
@@ -0,0 +1,10 @@
+import { usePushAppUpgrade } from '../../../../../../history/hooks';
+import { useIsLinux } from './useIsLinux';
+import { useOpenDownloadUrl } from './useOpenDownloadUrl';
+
+export const useHandleClick = () => {
+  const openDownloadUrl = useOpenDownloadUrl();
+  const pushAppUpgrade = usePushAppUpgrade();
+  const isLinux = useIsLinux();
+  return isLinux ? openDownloadUrl : pushAppUpgrade;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useIsLinux.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useIsLinux.tsx
new file mode 100644
index 0000000000..06798feb02
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useIsLinux.tsx
@@ -0,0 +1,3 @@
+export const useIsLinux = () => {
+  return window.env.platform === 'linux';
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useOpenDownloadUrl.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useOpenDownloadUrl.tsx
new file mode 100644
index 0000000000..babef27fb6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/update-available-list-item/hooks/useOpenDownloadUrl.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { getDownloadUrl } from '../../../../../../../shared/version';
+import { useAppContext } from '../../../../../../context';
+import { useVersionSuggestedIsBeta } from '../../../../../../redux/hooks';
+
+export const useOpenDownloadUrl = () => {
+  const { suggestedIsBeta } = useVersionSuggestedIsBeta();
+  const { openUrl } = useAppContext();
+  const openDownloadLink = React.useCallback(async () => {
+    await openUrl(getDownloadUrl(suggestedIsBeta));
+  }, [openUrl, suggestedIsBeta]);
+  return openDownloadLink;
+};