Move TunnelProtocolSetting component to separate folder

4 files changed, 127 insertions, 118 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
index 1280ee0170..bccbd03efa 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
@@ -1,22 +1,14 @@
-import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { strings, urls } from '../../../../shared/constants';
-import { TunnelProtocol } from '../../../../shared/daemon-rpc-types';
+import { strings } from '../../../../shared/constants';
 import { messages } from '../../../../shared/gettext';
-import log from '../../../../shared/logging';
 import { RoutePath } from '../../../../shared/routes';
-import { useRelaySettingsUpdater } from '../../../lib/constraint-updater';
 import { useHistory } from '../../../lib/history';
 import { useTunnelProtocol } from '../../../lib/relay-settings-hooks';
 import { RelaySettingsRedux } from '../../../redux/settings/reducers';
 import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../..';
-import { AriaDescription, AriaInputGroup } from '../../AriaGroup';
-import * as Cell from '../../cell';
-import Selector, { SelectorItem } from '../../cell/Selector';
 import CustomDnsSettings from '../../CustomDnsSettings';
-import { ExternalLink } from '../../ExternalLink';
 import { BackAction } from '../../KeyboardNavigation';
 import {
   Layout,
@@ -37,6 +29,7 @@ import {
   EnableIpv6,
   KillSwitchInfo,
   LockdownMode,
+  TunnelProtocolSetting,
 } from './components';
 
 export function VpnSettingsView() {
@@ -109,115 +102,6 @@ export function VpnSettingsView() {
   );
 }
 
-function TunnelProtocolSetting() {
-  const tunnelProtocol = useTunnelProtocol();
-
-  const relaySettingsUpdater = useRelaySettingsUpdater();
-
-  const relaySettings = useSelector((state) => state.settings.relaySettings);
-  const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
-  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
-  const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
-  const openVpnDisabled = daita || multihop || quantumResistant;
-
-  const featuresToDisableForOpenVpn = [];
-  if (daita) {
-    featuresToDisableForOpenVpn.push(strings.daita);
-  }
-  if (multihop) {
-    featuresToDisableForOpenVpn.push(messages.pgettext('wireguard-settings-view', 'Multihop'));
-  }
-  if (quantumResistant) {
-    featuresToDisableForOpenVpn.push(
-      messages.pgettext('wireguard-settings-view', 'Quantum-resistant tunnel'),
-    );
-  }
-
-  const setTunnelProtocol = useCallback(
-    async (tunnelProtocol: TunnelProtocol) => {
-      try {
-        await relaySettingsUpdater((settings) => ({
-          ...settings,
-          tunnelProtocol,
-        }));
-      } catch (e) {
-        const error = e as Error;
-        log.error('Failed to update tunnel protocol constraints', error.message);
-      }
-    },
-    [relaySettingsUpdater],
-  );
-
-  const tunnelProtocolItems: Array<SelectorItem<TunnelProtocol>> = useMemo(
-    () => [
-      {
-        label: strings.wireguard,
-        value: 'wireguard',
-      },
-      {
-        label: strings.openvpn,
-        value: 'openvpn',
-        disabled: openVpnDisabled,
-      },
-    ],
-    [openVpnDisabled],
-  );
-
-  return (
-    <AriaInputGroup>
-      <Selector
-        title={messages.pgettext('vpn-settings-view', 'Tunnel protocol')}
-        items={tunnelProtocolItems}
-        value={tunnelProtocol}
-        onSelect={setTunnelProtocol}
-      />
-      {openVpnDisabled && (
-        <Cell.CellFooter>
-          <AriaDescription>
-            <Cell.CellFooterText>
-              {sprintf(
-                messages.pgettext(
-                  'vpn-settings-view',
-                  'To select %(openvpn)s, please disable these settings: %(featureList)s.',
-                ),
-                { openvpn: strings.openvpn, featureList: featuresToDisableForOpenVpn.join(', ') },
-              )}
-            </Cell.CellFooterText>
-          </AriaDescription>
-        </Cell.CellFooter>
-      )}
-      {tunnelProtocol === 'openvpn' && (
-        <Cell.CellFooter>
-          <AriaDescription>
-            <Cell.CellFooterText>
-              {sprintf(
-                // TRANSLATORS: Footer text for tunnel protocol selector when OpenVPN is selected.
-                // TRANSLATORS: Available placeholders:
-                // TRANSLATORS: %(openvpn)s - Will be replaced with OpenVPN
-                messages.pgettext(
-                  'vpn-settings-view',
-                  'Attention: We are removing support for %(openVpn)s.',
-                ),
-                { openVpn: strings.openvpn },
-              )}{' '}
-            </Cell.CellFooterText>
-          </AriaDescription>
-          <ExternalLink variant="labelTiny" to={urls.removingOpenVpnBlog}>
-            <ExternalLink.Text>
-              {sprintf(
-                // TRANSLATORS: Link in tunnel protocol selector footer to blog post
-                // TRANSLATORS: about OpenVPN support ending.
-                messages.pgettext('vpn-settings-view', 'Read more'),
-              )}
-            </ExternalLink.Text>
-            <ExternalLink.Icon icon="external" size="small" />
-          </ExternalLink>
-        </Cell.CellFooter>
-      )}
-    </AriaInputGroup>
-  );
-}
-
 function mapRelaySettingsToProtocol(relaySettings: RelaySettingsRedux) {
   if ('normal' in relaySettings) {
     const { tunnelProtocol } = relaySettings.normal;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
index 405b881d61..2186f40d9e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
@@ -5,3 +5,4 @@ export * from './dns-blockers';
 export * from './enable-ipv6';
 export * from './kill-switch-info';
 export * from './lockdown-mode';
+export * from './tunnel-protocol-setting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocolSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocolSetting.tsx
new file mode 100644
index 0000000000..b1e29b8a37
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocolSetting.tsx
@@ -0,0 +1,123 @@
+import { useCallback, useMemo } from 'react';
+import { sprintf } from 'sprintf-js';
+
+import { strings, urls } from '../../../../../../shared/constants';
+import { TunnelProtocol } from '../../../../../../shared/daemon-rpc-types';
+import { messages } from '../../../../../../shared/gettext';
+import log from '../../../../../../shared/logging';
+import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
+import { useTunnelProtocol } from '../../../../../lib/relay-settings-hooks';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription, AriaInputGroup } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+import Selector, { SelectorItem } from '../../../../cell/Selector';
+import { ExternalLink } from '../../../../ExternalLink';
+
+export function TunnelProtocolSetting() {
+  const tunnelProtocol = useTunnelProtocol();
+
+  const relaySettingsUpdater = useRelaySettingsUpdater();
+
+  const relaySettings = useSelector((state) => state.settings.relaySettings);
+  const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
+  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
+  const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
+  const openVpnDisabled = daita || multihop || quantumResistant;
+
+  const featuresToDisableForOpenVpn = [];
+  if (daita) {
+    featuresToDisableForOpenVpn.push(strings.daita);
+  }
+  if (multihop) {
+    featuresToDisableForOpenVpn.push(messages.pgettext('wireguard-settings-view', 'Multihop'));
+  }
+  if (quantumResistant) {
+    featuresToDisableForOpenVpn.push(
+      messages.pgettext('wireguard-settings-view', 'Quantum-resistant tunnel'),
+    );
+  }
+
+  const setTunnelProtocol = useCallback(
+    async (tunnelProtocol: TunnelProtocol) => {
+      try {
+        await relaySettingsUpdater((settings) => ({
+          ...settings,
+          tunnelProtocol,
+        }));
+      } catch (e) {
+        const error = e as Error;
+        log.error('Failed to update tunnel protocol constraints', error.message);
+      }
+    },
+    [relaySettingsUpdater],
+  );
+
+  const tunnelProtocolItems: Array<SelectorItem<TunnelProtocol>> = useMemo(
+    () => [
+      {
+        label: strings.wireguard,
+        value: 'wireguard',
+      },
+      {
+        label: strings.openvpn,
+        value: 'openvpn',
+        disabled: openVpnDisabled,
+      },
+    ],
+    [openVpnDisabled],
+  );
+
+  return (
+    <AriaInputGroup>
+      <Selector
+        title={messages.pgettext('vpn-settings-view', 'Tunnel protocol')}
+        items={tunnelProtocolItems}
+        value={tunnelProtocol}
+        onSelect={setTunnelProtocol}
+      />
+      {openVpnDisabled && (
+        <Cell.CellFooter>
+          <AriaDescription>
+            <Cell.CellFooterText>
+              {sprintf(
+                messages.pgettext(
+                  'vpn-settings-view',
+                  'To select %(openvpn)s, please disable these settings: %(featureList)s.',
+                ),
+                { openvpn: strings.openvpn, featureList: featuresToDisableForOpenVpn.join(', ') },
+              )}
+            </Cell.CellFooterText>
+          </AriaDescription>
+        </Cell.CellFooter>
+      )}
+      {tunnelProtocol === 'openvpn' && (
+        <Cell.CellFooter>
+          <AriaDescription>
+            <Cell.CellFooterText>
+              {sprintf(
+                // TRANSLATORS: Footer text for tunnel protocol selector when OpenVPN is selected.
+                // TRANSLATORS: Available placeholders:
+                // TRANSLATORS: %(openvpn)s - Will be replaced with OpenVPN
+                messages.pgettext(
+                  'vpn-settings-view',
+                  'Attention: We are removing support for %(openVpn)s.',
+                ),
+                { openVpn: strings.openvpn },
+              )}{' '}
+            </Cell.CellFooterText>
+          </AriaDescription>
+          <ExternalLink variant="labelTiny" to={urls.removingOpenVpnBlog}>
+            <ExternalLink.Text>
+              {sprintf(
+                // TRANSLATORS: Link in tunnel protocol selector footer to blog post
+                // TRANSLATORS: about OpenVPN support ending.
+                messages.pgettext('vpn-settings-view', 'Read more'),
+              )}
+            </ExternalLink.Text>
+            <ExternalLink.Icon icon="external" size="small" />
+          </ExternalLink>
+        </Cell.CellFooter>
+      )}
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/index.ts
new file mode 100644
index 0000000000..9fdb5c666e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/index.ts
@@ -0,0 +1 @@
+export * from './TunnelProtocolSetting';