Add and use format device name hook and util function

7 files changed, 16 insertions, 13 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
index 61db44db59..1e7005c554 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -5,13 +5,13 @@ import { urls } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { RoutePath } from '../../shared/routes';
-import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
 import { Button, Flex } from '../lib/components';
 import { FlexColumn } from '../lib/components/flex-column';
 import { useHistory } from '../lib/history';
 import { useExclusiveTask } from '../lib/hooks/use-exclusive-task';
 import { IconBadge } from '../lib/icon-badge';
+import { formatDeviceName } from '../lib/utils';
 import { useSelector } from '../redux/store';
 import { AppMainHeader } from './app-main-header';
 import * as Cell from './cell';
@@ -138,7 +138,7 @@ function WelcomeView() {
             // TRANSLATORS: %(deviceName)s - The name of the current device
             messages.pgettext('device-management', 'Device name: %(deviceName)s'),
             {
-              deviceName: capitalizeEveryWord(account.deviceName ?? ''),
+              deviceName: formatDeviceName(account.deviceName ?? ''),
             },
           )}
         </StyledDeviceLabel>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
index f1a52371c9..c7dfa3c5ff 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 import { closeToExpiry, formatRemainingTime, hasExpired } from '../../../../shared/account-expiry';
 import { messages } from '../../../../shared/gettext';
-import { capitalizeEveryWord } from '../../../../shared/string-helpers';
 import { Flex, FootnoteMini } from '../../../lib/components';
+import { formatDeviceName } from '../../../lib/utils';
 import { useSelector } from '../../../redux/store';
 
 const StyledTimeLeftLabel = styled(FootnoteMini)({
@@ -41,7 +41,7 @@ export const AppMainHeaderDeviceInfo = () => {
           // TRANSLATORS: %(deviceName)s - The name of the current device
           messages.pgettext('device-management', 'Device name: %(deviceName)s'),
           {
-            deviceName: capitalizeEveryWord(deviceName ?? ''),
+            deviceName: formatDeviceName(deviceName ?? ''),
           },
         )}
       </StyledDeviceLabel>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx
index 9371f556f8..ef85339eca 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx
@@ -3,12 +3,12 @@ import styled, { css } from 'styled-components';
 
 import { IDevice } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { capitalizeEveryWord } from '../../../shared/string-helpers';
 import { Text } from '../../lib/components';
 import { FlexColumn } from '../../lib/components/flex-column';
 import { ListItem, ListItemProps } from '../../lib/components/list-item';
 import { spacings } from '../../lib/foundations';
 import { useBoolean } from '../../lib/utility-hooks';
+import { formatDeviceName } from '../../lib/utils';
 import { DeviceListItemProvider, useDeviceListItemContext } from './';
 import { ConfirmDialog, ErrorDialog, RemoveButton } from './components';
 import { useFormattedDate, useIsCurrentDevice } from './hooks';
@@ -34,7 +34,6 @@ function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'de
   const { device, deleting, confirmDialogVisible, error } = useDeviceListItemContext();
   const createdDate = useFormattedDate(device.created);
   const isCurrentDevice = useIsCurrentDevice();
-  const deviceName = capitalizeEveryWord(device.name);
 
   return (
     <>
@@ -42,7 +41,7 @@ function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'de
         <ListItem.Item>
           <ListItem.Content>
             <FlexColumn>
-              <ListItem.Label>{deviceName}</ListItem.Label>
+              <ListItem.Label>{formatDeviceName(device.name)}</ListItem.Label>
               <ListItem.Text variant="footnoteMini">
                 {sprintf(
                   // TRANSLATORS: Label informing the user when a device was created.
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/confirm-dialog/ConfirmDialog.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/confirm-dialog/ConfirmDialog.tsx
index 1fbeed96cf..3750286726 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/confirm-dialog/ConfirmDialog.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/confirm-dialog/ConfirmDialog.tsx
@@ -1,9 +1,9 @@
 import { sprintf } from 'sprintf-js';
 
 import { messages } from '../../../../../shared/gettext';
-import { capitalizeEveryWord } from '../../../../../shared/string-helpers';
 import { Button, Text } from '../../../../lib/components';
 import { formatHtml } from '../../../../lib/html-formatter';
+import { formatDeviceName } from '../../../../lib/utils';
 import { IModalAlertProps, ModalAlert, ModalAlertType, ModalMessage } from '../../../Modal';
 import { useDeviceListItemContext } from '../../DeviceListItemContext';
 import { useHandleRemoveDevice } from './hooks';
@@ -14,8 +14,6 @@ export function ConfirmDialog({ isOpen }: ConfirmDialogProps) {
   const { device, hideConfirmDialog, deleting } = useDeviceListItemContext();
   const handleRemoveDevice = useHandleRemoveDevice();
 
-  const deviceName = capitalizeEveryWord(device.name);
-
   return (
     <ModalAlert
       isOpen={isOpen}
@@ -42,7 +40,7 @@ export function ConfirmDialog({ isOpen }: ConfirmDialogProps) {
             // TRANSLATORS: Available placeholders:
             // TRANSLATORS: %(deviceName)s - The name of the device to log out.
             messages.pgettext('device-management', 'Remove <em>%(deviceName)s?</em>'),
-            { deviceName },
+            { deviceName: formatDeviceName(device.name) },
           ),
         )}
       </ModalMessage>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-device.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-device.ts
index 5acb10f6f5..3d4f2b0318 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-device.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/new-device.ts
@@ -2,7 +2,7 @@ import { sprintf } from 'sprintf-js';
 
 import { messages } from '../../../shared/gettext';
 import { InAppNotification, InAppNotificationProvider } from '../../../shared/notifications';
-import { capitalizeEveryWord } from '../../../shared/string-helpers';
+import { formatDeviceName } from '../utils';
 
 interface NewDeviceNotificationContext {
   shouldDisplay: boolean;
@@ -27,7 +27,7 @@ export class NewDeviceNotificationProvider implements InAppNotificationProvider
           'in-app-notifications',
           'This device is now named <em>%(deviceName)s</em>. See more under "Manage devices" in Account.',
         ),
-        { deviceName: capitalizeEveryWord(this.context.deviceName) },
+        { deviceName: formatDeviceName(this.context.deviceName) },
       ),
       action: { type: 'close', close: this.context.close },
     };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/utils/format-device-name.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/utils/format-device-name.ts
new file mode 100644
index 0000000000..88f18d4750
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/utils/format-device-name.ts
@@ -0,0 +1,5 @@
+import { capitalizeEveryWord } from '../../../shared/string-helpers';
+
+export function formatDeviceName(deviceName: string) {
+  return capitalizeEveryWord(deviceName);
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/utils/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/utils/index.ts
new file mode 100644
index 0000000000..3a910e173a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/utils/index.ts
@@ -0,0 +1 @@
+export * from './format-device-name';