Refactor device list item remove button into separate component

4 files changed, 32 insertions, 18 deletions

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 93186de4a5..bfb834fd5a 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
@@ -4,13 +4,13 @@ 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 { IconButton, Text } from '../../lib/components';
+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 { DeviceListItemProvider, useDeviceListItemContext } from './';
-import { ConfirmDialog, ErrorDialog } from './components';
+import { ConfirmDialog, ErrorDialog, RemoveButton } from './components';
 import { useIsCurrentDevice } from './hooks';
 
 export type SettingsToggleListItemProps = {
@@ -31,8 +31,7 @@ const StyledListItem = styled(ListItem)<{ $isCurrentDevice: boolean }>(
 );
 
 function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'device'>) {
-  const { device, deleting, showConfirmDialog, confirmDialogVisible, error } =
-    useDeviceListItemContext();
+  const { device, deleting, confirmDialogVisible, error } = useDeviceListItemContext();
   const isCurrentDevice = useIsCurrentDevice();
   const deviceName = capitalizeEveryWord(device.name);
   const createdDate = device.created.toISOString().split('T')[0];
@@ -65,20 +64,7 @@ function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'de
                   }
                 </Text>
               ) : (
-                <IconButton
-                  variant="secondary"
-                  onClick={showConfirmDialog}
-                  disabled={deleting}
-                  aria-label={sprintf(
-                    // TRANSLATORS: Button action description provided to accessibility tools such as screen
-                    // TRANSLATORS: readers.
-                    // TRANSLATORS: Available placeholders:
-                    // TRANSLATORS: %(deviceName)s - The device name to remove.
-                    messages.pgettext('accessibility', 'Remove device named %(deviceName)s'),
-                    { deviceName: device.name },
-                  )}>
-                  <IconButton.Icon icon="cross-circle" />
-                </IconButton>
+                <RemoveButton />
               )}
             </ListItem.Group>
           </ListItem.Content>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/index.ts
index 27e8a9ffe6..75769df7f5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/index.ts
@@ -1,2 +1,3 @@
 export * from './confirm-dialog';
+export * from './remove-button';
 export * from './error-dialog';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/remove-button/RemoveButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/remove-button/RemoveButton.tsx
new file mode 100644
index 0000000000..2e551c6a2d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/remove-button/RemoveButton.tsx
@@ -0,0 +1,26 @@
+import { sprintf } from 'sprintf-js';
+
+import { messages } from '../../../../../shared/gettext';
+import { IconButton } from '../../../../lib/components';
+import { useDeviceListItemContext } from '../..';
+
+export function RemoveButton() {
+  const { device, deleting, showConfirmDialog } = useDeviceListItemContext();
+
+  return (
+    <IconButton
+      variant="secondary"
+      onClick={showConfirmDialog}
+      disabled={deleting}
+      aria-label={sprintf(
+        // TRANSLATORS: Button action description provided to accessibility tools such as screen
+        // TRANSLATORS: readers.
+        // TRANSLATORS: Available placeholders:
+        // TRANSLATORS: %(deviceName)s - The device name to remove.
+        messages.pgettext('accessibility', 'Remove device named %(deviceName)s'),
+        { deviceName: device.name },
+      )}>
+      <IconButton.Icon icon="cross-circle" />
+    </IconButton>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/remove-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/remove-button/index.ts
new file mode 100644
index 0000000000..38a9e24aac
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/components/remove-button/index.ts
@@ -0,0 +1 @@
+export * from './RemoveButton';