Move multihop settings to separate folders

4 files changed, 81 insertions, 75 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
index b61a7e0681..6beb8c4d6b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
@@ -1,24 +1,16 @@
-import { useCallback } from 'react';
-import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { strings } from '../../../../shared/constants';
 import { messages } from '../../../../shared/gettext';
-import log from '../../../../shared/logging';
-import { useScrollToListItem } from '../../../hooks';
 import { Flex } from '../../../lib/components';
-import { useRelaySettingsUpdater } from '../../../lib/constraint-updater';
 import { useHistory } from '../../../lib/history';
-import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../..';
-import { AriaDescription } from '../../AriaGroup';
 import * as Cell from '../../cell';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../SettingsHeader';
-import { ToggleListItem } from '../../toggle-list-item';
+import { MultihopSetting } from './components';
 
 const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
 
@@ -65,69 +57,3 @@ export function MultihopSettingsView() {
     </BackAction>
   );
 }
-
-function MultihopSetting() {
-  const relaySettings = useSelector((state) => state.settings.relaySettings);
-  const relaySettingsUpdater = useRelaySettingsUpdater();
-
-  const { ref, animation } = useScrollToListItem('multihop-setting');
-
-  const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
-  const unavailable =
-    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
-
-  const setMultihop = useCallback(
-    async (enabled: boolean) => {
-      try {
-        await relaySettingsUpdater((settings) => {
-          settings.wireguardConstraints.useMultihop = enabled;
-          return settings;
-        });
-      } catch (e) {
-        const error = e as Error;
-        log.error('Failed to update WireGuard multihop settings', error.message);
-      }
-    },
-    [relaySettingsUpdater],
-  );
-
-  return (
-    <>
-      <ToggleListItem
-        ref={ref}
-        animation={animation}
-        disabled={unavailable}
-        checked={multihop && !unavailable}
-        onCheckedChange={setMultihop}>
-        <ToggleListItem.Label>{messages.gettext('Enable')}</ToggleListItem.Label>
-        <ToggleListItem.Switch />
-      </ToggleListItem>
-      {unavailable ? (
-        <Cell.CellFooter>
-          <AriaDescription>
-            <Cell.CellFooterText>{featureUnavailableMessage()}</Cell.CellFooterText>
-          </AriaDescription>
-        </Cell.CellFooter>
-      ) : null}
-    </>
-  );
-}
-
-function featureUnavailableMessage() {
-  const tunnelProtocol = messages.pgettext('vpn-settings-view', 'Tunnel protocol');
-  const multihop = messages.pgettext('wireguard-settings-view', 'Multihop');
-
-  return sprintf(
-    messages.pgettext(
-      // TRANSLATORS: Informs the user that the feature is only available when WireGuard
-      // TRANSLATORS: is selected.
-      // TRANSLATORS: Available placeholders:
-      // TRANSLATORS: %(wireguard)s - will be replaced with WireGuard
-      // TRANSLATORS: %(tunnelProtocol)s - the name of the tunnel protocol setting
-      // TRANSLATORS: %(setting)s - the name of the setting
-      'wireguard-settings-view',
-      'Switch to “%(wireguard)s” in Settings > %(tunnelProtocol)s to make %(setting)s available.',
-    ),
-    { wireguard: strings.wireguard, tunnelProtocol, setting: multihop },
-  );
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/index.ts
new file mode 100644
index 0000000000..bf74f1e5ae
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/index.ts
@@ -0,0 +1 @@
+export * from './multihop-setting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx
new file mode 100644
index 0000000000..2716bbe05b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx
@@ -0,0 +1,78 @@
+import { useCallback } from 'react';
+import { sprintf } from 'sprintf-js';
+
+import { strings } from '../../../../../../shared/constants';
+import { messages } from '../../../../../../shared/gettext';
+import log from '../../../../../../shared/logging';
+import { useScrollToListItem } from '../../../../../hooks';
+import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+import { ToggleListItem } from '../../../../toggle-list-item';
+
+export function MultihopSetting() {
+  const relaySettings = useSelector((state) => state.settings.relaySettings);
+  const relaySettingsUpdater = useRelaySettingsUpdater();
+
+  const { ref, animation } = useScrollToListItem('multihop-setting');
+
+  const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
+  const unavailable =
+    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
+
+  const setMultihop = useCallback(
+    async (enabled: boolean) => {
+      try {
+        await relaySettingsUpdater((settings) => {
+          settings.wireguardConstraints.useMultihop = enabled;
+          return settings;
+        });
+      } catch (e) {
+        const error = e as Error;
+        log.error('Failed to update WireGuard multihop settings', error.message);
+      }
+    },
+    [relaySettingsUpdater],
+  );
+
+  return (
+    <>
+      <ToggleListItem
+        ref={ref}
+        animation={animation}
+        disabled={unavailable}
+        checked={multihop && !unavailable}
+        onCheckedChange={setMultihop}>
+        <ToggleListItem.Label>{messages.gettext('Enable')}</ToggleListItem.Label>
+        <ToggleListItem.Switch />
+      </ToggleListItem>
+      {unavailable ? (
+        <Cell.CellFooter>
+          <AriaDescription>
+            <Cell.CellFooterText>{featureUnavailableMessage()}</Cell.CellFooterText>
+          </AriaDescription>
+        </Cell.CellFooter>
+      ) : null}
+    </>
+  );
+}
+
+function featureUnavailableMessage() {
+  const tunnelProtocol = messages.pgettext('vpn-settings-view', 'Tunnel protocol');
+  const multihop = messages.pgettext('wireguard-settings-view', 'Multihop');
+
+  return sprintf(
+    messages.pgettext(
+      // TRANSLATORS: Informs the user that the feature is only available when WireGuard
+      // TRANSLATORS: is selected.
+      // TRANSLATORS: Available placeholders:
+      // TRANSLATORS: %(wireguard)s - will be replaced with WireGuard
+      // TRANSLATORS: %(tunnelProtocol)s - the name of the tunnel protocol setting
+      // TRANSLATORS: %(setting)s - the name of the setting
+      'wireguard-settings-view',
+      'Switch to “%(wireguard)s” in Settings > %(tunnelProtocol)s to make %(setting)s available.',
+    ),
+    { wireguard: strings.wireguard, tunnelProtocol, setting: multihop },
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/index.ts
new file mode 100644
index 0000000000..d89481bb22
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/index.ts
@@ -0,0 +1 @@
+export * from './MultihopSetting';