Add link to manage devices in account view

1 files changed, 18 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx
index 1687fe0473..c47489de6a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx
@@ -1,6 +1,11 @@
+import React from 'react';
 import styled from 'styled-components';
 
+import { messages } from '../../../../../../shared/gettext';
+import { RoutePath } from '../../../../../../shared/routes';
 import { Flex, Text } from '../../../../../lib/components';
+import { Link } from '../../../../../lib/components/link';
+import { TransitionType, useHistory } from '../../../../../lib/history';
 import { useSelector } from '../../../../../redux/store';
 import DeviceInfoButton from '../../../../DeviceInfoButton';
 
@@ -9,14 +14,27 @@ const StyledText = styled(Text)`
 `;
 
 export function DeviceNameRow() {
+  const history = useHistory();
   const deviceName = useSelector((state) => state.account.deviceName);
 
+  const navigateToManageDevices = React.useCallback(() => {
+    history.push(RoutePath.manageDevices, { transition: TransitionType.push });
+  }, [history]);
+
   return (
     <Flex $justifyContent="space-between">
       <Flex $gap="small" $alignItems="center">
         <StyledText variant="bodySmallSemibold">{deviceName}</StyledText>
         <DeviceInfoButton />
       </Flex>
+      <Link as="button" onClick={navigateToManageDevices}>
+        <Link.Text>
+          {
+            // TRANSLATORS: Link text in the account view to navigate to the manage devices view.
+            messages.pgettext('account-view', 'Manage devices')
+          }
+        </Link.Text>
+      </Link>
     </Flex>
   );
 }