Move select location buttons components into separate folders

11 files changed, 63 insertions, 52 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/ConnectionPanel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/ConnectionPanel.tsx
index 9b4424e9d6..f990320649 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/ConnectionPanel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/ConnectionPanel.tsx
@@ -15,8 +15,8 @@ import {
   FeatureIndicators,
   Hostname,
   Location,
+  SelectLocationButtons,
 } from './components';
-import SelectLocationButton from './components/select-location-button/SelectLocationButton';
 
 const PANEL_MARGIN = '16px';
 
@@ -120,7 +120,7 @@ export function ConnectionPanel() {
           </StyledAccordion>
         </StyledCustomScrollbars>
         <StyledConnectionButtonContainer>
-          <SelectLocationButton />
+          <SelectLocationButtons />
           <ConnectionActionButton />
         </StyledConnectionButtonContainer>
       </StyledConnectionPanel>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/index.ts
index a043c8a614..54f1c0ee72 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/index.ts
@@ -6,4 +6,4 @@ export * from './disconnect-button';
 export * from './feature-indicators';
 export * from './hostname';
 export * from './location';
-export * from './select-location-button';
+export * from './select-location-buttons';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/SelectLocationButtons.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/SelectLocationButtons.tsx
new file mode 100644
index 0000000000..8627fa9837
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/SelectLocationButtons.tsx
@@ -0,0 +1,12 @@
+import { useSelector } from '../../../../../../../redux/store';
+import { MultiButton, ReconnectButton, SelectLocationButton } from './components';
+
+export function SelectLocationButtons() {
+  const tunnelState = useSelector((state) => state.connection.status.state);
+
+  if (tunnelState === 'connecting' || tunnelState === 'connected') {
+    return <MultiButton mainButton={SelectLocationButton} sideButton={ReconnectButton} />;
+  } else {
+    return <SelectLocationButton />;
+  }
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/index.ts
new file mode 100644
index 0000000000..60087864c4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/index.ts
@@ -0,0 +1,3 @@
+export * from './multi-button';
+export * from './reconnect-button';
+export * from './select-location-button';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/multi-button/MultiButton.tsx
index e3d773888a..b7d5afcf55 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/multi-button/MultiButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Button, ButtonProps } from '../lib/components';
+import { Button, ButtonProps } from '../../../../../../../../../lib/components';
 
 const ButtonRow = styled.div({
   display: 'flex',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/multi-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/multi-button/index.ts
new file mode 100644
index 0000000000..225bc69e2e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/multi-button/index.ts
@@ -0,0 +1 @@
+export * from './MultiButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/reconnect-button/ReconnectButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/reconnect-button/ReconnectButton.tsx
new file mode 100644
index 0000000000..f0a656492f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/reconnect-button/ReconnectButton.tsx
@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { messages } from '../../../../../../../../../../shared/gettext';
+import log from '../../../../../../../../../../shared/logging';
+import { useAppContext } from '../../../../../../../../../context';
+import { Button, ButtonProps, Icon } from '../../../../../../../../../lib/components';
+
+const StyledReconnectButton = styled(Button)({
+  minWidth: '40px',
+});
+
+export function ReconnectButton(props: ButtonProps) {
+  const { reconnectTunnel } = useAppContext();
+
+  const onReconnect = useCallback(async () => {
+    try {
+      await reconnectTunnel();
+    } catch (e) {
+      const error = e as Error;
+      log.error(`Failed to reconnect the tunnel: ${error.message}`);
+    }
+  }, [reconnectTunnel]);
+
+  return (
+    <StyledReconnectButton
+      onClick={onReconnect}
+      width="fit"
+      aria-label={messages.gettext('Reconnect')}
+      {...props}>
+      <Icon icon="reconnect" />
+    </StyledReconnectButton>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/reconnect-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/reconnect-button/index.ts
new file mode 100644
index 0000000000..2b314bc9c9
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/reconnect-button/index.ts
@@ -0,0 +1 @@
+export * from './ReconnectButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-button/SelectLocationButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/select-location-button/SelectLocationButton.tsx
index 40c099e0ff..df42394dfc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-button/SelectLocationButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/select-location-button/SelectLocationButton.tsx
@@ -1,30 +1,16 @@
 import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
-import { ICustomList } from '../../../../../../../../shared/daemon-rpc-types';
-import { messages, relayLocations } from '../../../../../../../../shared/gettext';
-import log from '../../../../../../../../shared/logging';
-import { RoutePath } from '../../../../../../../../shared/routes';
-import { useAppContext } from '../../../../../../../context';
-import { Button, ButtonProps, Icon } from '../../../../../../../lib/components';
-import { TransitionType, useHistory } from '../../../../../../../lib/history';
+import { ICustomList } from '../../../../../../../../../../shared/daemon-rpc-types';
+import { messages, relayLocations } from '../../../../../../../../../../shared/gettext';
+import { RoutePath } from '../../../../../../../../../../shared/routes';
+import { Button, ButtonProps } from '../../../../../../../../../lib/components';
+import { TransitionType, useHistory } from '../../../../../../../../../lib/history';
 import {
   IRelayLocationCountryRedux,
   RelaySettingsRedux,
-} from '../../../../../../../redux/settings/reducers';
-import { useSelector } from '../../../../../../../redux/store';
-import { MultiButton } from '../../../../../../MultiButton';
-
-export default function SelectLocationButtons() {
-  const tunnelState = useSelector((state) => state.connection.status.state);
-
-  if (tunnelState === 'connecting' || tunnelState === 'connected') {
-    return <MultiButton mainButton={SelectLocationButton} sideButton={ReconnectButton} />;
-  } else {
-    return <SelectLocationButton />;
-  }
-}
+} from '../../../../../../../../../redux/settings/reducers';
+import { useSelector } from '../../../../../../../../../redux/store';
 
 export function SelectLocationButton(props: ButtonProps) {
   const { push } = useHistory();
@@ -113,30 +99,3 @@ function getRelayName(
     throw new Error('Unsupported relay settings.');
   }
 }
-
-const StyledReconnectButton = styled(Button)({
-  minWidth: '40px',
-});
-
-function ReconnectButton(props: ButtonProps) {
-  const { reconnectTunnel } = useAppContext();
-
-  const onReconnect = useCallback(async () => {
-    try {
-      await reconnectTunnel();
-    } catch (e) {
-      const error = e as Error;
-      log.error(`Failed to reconnect the tunnel: ${error.message}`);
-    }
-  }, [reconnectTunnel]);
-
-  return (
-    <StyledReconnectButton
-      onClick={onReconnect}
-      width="fit"
-      aria-label={messages.gettext('Reconnect')}
-      {...props}>
-      <Icon icon="reconnect" />
-    </StyledReconnectButton>
-  );
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/select-location-button/index.ts
index e2eb11039c..e2eb11039c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-button/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/components/select-location-button/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/index.ts
new file mode 100644
index 0000000000..2865f5ee58
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-buttons/index.ts
@@ -0,0 +1 @@
+export * from './SelectLocationButtons';