Move MainView components to separate folders

24 files changed, 156 insertions, 123 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionActionButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionActionButton.tsx
deleted file mode 100644
index f33e32d27c..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionActionButton.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useCallback } from 'react';
-
-import { messages } from '../../../../shared/gettext';
-import log from '../../../../shared/logging';
-import { useAppContext } from '../../../context';
-import { Button } from '../../../lib/components';
-import { useSelector } from '../../../redux/store';
-
-export default function ConnectionActionButton() {
-  const tunnelState = useSelector((state) => state.connection.status.state);
-
-  if (tunnelState === 'disconnected' || tunnelState === 'disconnecting') {
-    return <ConnectButton disabled={tunnelState === 'disconnecting'} />;
-  } else {
-    return <DisconnectButton />;
-  }
-}
-
-function ConnectButton(props: Partial<Parameters<typeof Button>[0]>) {
-  const { connectTunnel } = useAppContext();
-
-  const onConnect = useCallback(async () => {
-    try {
-      await connectTunnel();
-    } catch (e) {
-      const error = e as Error;
-      log.error(`Failed to connect the tunnel: ${error.message}`);
-    }
-  }, [connectTunnel]);
-
-  return (
-    <Button variant="success" onClick={onConnect} {...props}>
-      <Button.Text>{messages.pgettext('tunnel-control', 'Connect')}</Button.Text>
-    </Button>
-  );
-}
-
-function DisconnectButton() {
-  const { disconnectTunnel } = useAppContext();
-  const tunnelState = useSelector((state) => state.connection.status.state);
-
-  const onDisconnect = useCallback(async () => {
-    try {
-      await disconnectTunnel();
-    } catch (e) {
-      const error = e as Error;
-      log.error(`Failed to disconnect the tunnel: ${error.message}`);
-    }
-  }, [disconnectTunnel]);
-
-  const displayAsCancel = tunnelState !== 'connected';
-
-  return (
-    <Button variant="destructive" onClick={onDisconnect}>
-      <Button.Text>
-        {displayAsCancel ? messages.gettext('Cancel') : messages.gettext('Disconnect')}
-      </Button.Text>
-    </Button>
-  );
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/MainView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/MainView.tsx
index 0b90a6d433..f524b8f9b2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/MainView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/MainView.tsx
@@ -6,7 +6,7 @@ import { AppMainHeader } from '../../app-main-header';
 import { Container, Layout } from '../../Layout';
 import Map from '../../Map';
 import NotificationArea from '../../NotificationArea';
-import ConnectionPanel from './ConnectionPanel';
+import { ConnectionPanel } from './components';
 
 const StyledContainer = styled(Container)({
   position: 'relative',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionPanel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/ConnectionPanel.tsx
index a30519702f..9b4424e9d6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionPanel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/ConnectionPanel.tsx
@@ -1,20 +1,22 @@
 import { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { IconButton } from '../../../lib/components';
-import { colors } from '../../../lib/foundations';
-import { useBoolean } from '../../../lib/utility-hooks';
-import { useSelector } from '../../../redux/store';
-import CustomScrollbars from '../../CustomScrollbars';
-import { BackAction } from '../../KeyboardNavigation';
-import ConnectionActionButton from './ConnectionActionButton';
-import ConnectionDetails from './ConnectionDetails';
-import ConnectionStatus from './ConnectionStatus';
-import FeatureIndicators from './FeatureIndicators';
-import Hostname from './Hostname';
-import Location from './Location';
-import SelectLocationButton from './SelectLocationButton';
-import { ConnectionPanelAccordion } from './styles';
+import { IconButton } from '../../../../../lib/components';
+import { colors } from '../../../../../lib/foundations';
+import { useBoolean } from '../../../../../lib/utility-hooks';
+import { useSelector } from '../../../../../redux/store';
+import CustomScrollbars from '../../../../CustomScrollbars';
+import { BackAction } from '../../../../KeyboardNavigation';
+import { ConnectionPanelAccordion } from '../../styles';
+import {
+  ConnectionActionButton,
+  ConnectionDetails,
+  ConnectionStatus,
+  FeatureIndicators,
+  Hostname,
+  Location,
+} from './components';
+import SelectLocationButton from './components/select-location-button/SelectLocationButton';
 
 const PANEL_MARGIN = '16px';
 
@@ -68,7 +70,7 @@ const StyledConnectionStatusContainer = styled.div<{
   transitionTimingFunction: 'ease-out',
 }));
 
-export default function ConnectionPanel() {
+export function ConnectionPanel() {
   const [expanded, expandImpl, collapse, toggleExpandedImpl] = useBoolean();
   const tunnelState = useSelector((state) => state.connection.status);
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connect-button/ConnectButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connect-button/ConnectButton.tsx
new file mode 100644
index 0000000000..fd2abafa2f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connect-button/ConnectButton.tsx
@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import { messages } from '../../../../../../../../shared/gettext';
+import log from '../../../../../../../../shared/logging';
+import { useAppContext } from '../../../../../../../context';
+import { Button } from '../../../../../../../lib/components';
+
+export function ConnectButton(props: Partial<Parameters<typeof Button>[0]>) {
+  const { connectTunnel } = useAppContext();
+
+  const onConnect = useCallback(async () => {
+    try {
+      await connectTunnel();
+    } catch (e) {
+      const error = e as Error;
+      log.error(`Failed to connect the tunnel: ${error.message}`);
+    }
+  }, [connectTunnel]);
+
+  return (
+    <Button variant="success" onClick={onConnect} {...props}>
+      <Button.Text>{messages.pgettext('tunnel-control', 'Connect')}</Button.Text>
+    </Button>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connect-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connect-button/index.ts
new file mode 100644
index 0000000000..916bf3f711
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connect-button/index.ts
@@ -0,0 +1 @@
+export * from './ConnectButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-action-button/ConnectionActionButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-action-button/ConnectionActionButton.tsx
new file mode 100644
index 0000000000..33accc2ce8
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-action-button/ConnectionActionButton.tsx
@@ -0,0 +1,12 @@
+import { useSelector } from '../../../../../../../redux/store';
+import { ConnectButton, DisconnectButton } from '../';
+
+export function ConnectionActionButton() {
+  const tunnelState = useSelector((state) => state.connection.status.state);
+
+  if (tunnelState === 'disconnected' || tunnelState === 'disconnecting') {
+    return <ConnectButton disabled={tunnelState === 'disconnecting'} />;
+  } else {
+    return <DisconnectButton />;
+  }
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-action-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-action-button/index.ts
new file mode 100644
index 0000000000..e398f98473
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-action-button/index.ts
@@ -0,0 +1 @@
+export * from './ConnectionActionButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/ConnectionDetails.tsx
index 5b2cd0c169..7d5d826222 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionDetails.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/ConnectionDetails.tsx
@@ -10,11 +10,11 @@ import {
   TunnelState,
   TunnelType,
   tunnelTypeToString,
-} from '../../../../shared/daemon-rpc-types';
-import { messages } from '../../../../shared/gettext';
-import { colors } from '../../../lib/foundations';
-import { useSelector } from '../../../redux/store';
-import { tinyText } from '../../common-styles';
+} from '../../../../../../../../shared/daemon-rpc-types';
+import { messages } from '../../../../../../../../shared/gettext';
+import { colors } from '../../../../../../../lib/foundations';
+import { useSelector } from '../../../../../../../redux/store';
+import { tinyText } from '../../../../../../common-styles';
 
 interface Endpoint {
   ip: string;
@@ -68,7 +68,7 @@ const StyledConnectionDetailsTitle = styled(StyledConnectionDetailsLabel)({
   whiteSpace: 'nowrap',
 });
 
-export default function ConnectionDetails() {
+export function ConnectionDetails() {
   const reduxConnection = useSelector((state) => state.connection);
   const [connection, setConnection] = useState(reduxConnection);
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/index.ts
new file mode 100644
index 0000000000..05c76b970d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/index.ts
@@ -0,0 +1 @@
+export * from './ConnectionDetails';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionStatus.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-status/ConnectionStatus.tsx
index e938d55353..527767caa6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/ConnectionStatus.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-status/ConnectionStatus.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
-import { TunnelState } from '../../../../shared/daemon-rpc-types';
-import { messages } from '../../../../shared/gettext';
-import { colors } from '../../../lib/foundations';
-import { useSelector } from '../../../redux/store';
-import { largeText } from '../../common-styles';
+import { TunnelState } from '../../../../../../../../shared/daemon-rpc-types';
+import { messages } from '../../../../../../../../shared/gettext';
+import { colors } from '../../../../../../../lib/foundations';
+import { useSelector } from '../../../../../../../redux/store';
+import { largeText } from '../../../../../../common-styles';
 
 const StyledConnectionStatus = styled.span<{ $color: string }>(largeText, (props) => ({
   minHeight: '24px',
@@ -12,7 +12,7 @@ const StyledConnectionStatus = styled.span<{ $color: string }>(largeText, (props
   marginBottom: '4px',
 }));
 
-export default function ConnectionStatus() {
+export function ConnectionStatus() {
   const tunnelState = useSelector((state) => state.connection.status);
 
   const color = getConnectionSTatusLabelColor(tunnelState);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-status/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-status/index.ts
new file mode 100644
index 0000000000..87d79f4de6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-status/index.ts
@@ -0,0 +1 @@
+export * from './ConnectionStatus';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/disconnect-button/DisconnectButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/disconnect-button/DisconnectButton.tsx
new file mode 100644
index 0000000000..2767318123
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/disconnect-button/DisconnectButton.tsx
@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+
+import { messages } from '../../../../../../../../shared/gettext';
+import log from '../../../../../../../../shared/logging';
+import { useAppContext } from '../../../../../../../context';
+import { Button } from '../../../../../../../lib/components';
+import { useSelector } from '../../../../../../../redux/store';
+
+export function DisconnectButton() {
+  const { disconnectTunnel } = useAppContext();
+  const tunnelState = useSelector((state) => state.connection.status.state);
+
+  const onDisconnect = useCallback(async () => {
+    try {
+      await disconnectTunnel();
+    } catch (e) {
+      const error = e as Error;
+      log.error(`Failed to disconnect the tunnel: ${error.message}`);
+    }
+  }, [disconnectTunnel]);
+
+  const displayAsCancel = tunnelState !== 'connected';
+
+  return (
+    <Button variant="destructive" onClick={onDisconnect}>
+      <Button.Text>
+        {displayAsCancel ? messages.gettext('Cancel') : messages.gettext('Disconnect')}
+      </Button.Text>
+    </Button>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/disconnect-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/disconnect-button/index.ts
new file mode 100644
index 0000000000..6404f45336
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/disconnect-button/index.ts
@@ -0,0 +1 @@
+export * from './DisconnectButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
index 5c6d9a5aaf..20d5691336 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/FeatureIndicators.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/FeatureIndicators.tsx
@@ -2,14 +2,14 @@ import { useEffect, useRef } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { strings } from '../../../../shared/constants';
-import { FeatureIndicator } from '../../../../shared/daemon-rpc-types';
-import { messages } from '../../../../shared/gettext';
-import { colors } from '../../../lib/foundations';
-import { useStyledRef } from '../../../lib/utility-hooks';
-import { useSelector } from '../../../redux/store';
-import { tinyText } from '../../common-styles';
-import { ConnectionPanelAccordion } from './styles';
+import { strings } from '../../../../../../../../shared/constants';
+import { FeatureIndicator } from '../../../../../../../../shared/daemon-rpc-types';
+import { messages } from '../../../../../../../../shared/gettext';
+import { colors } from '../../../../../../../lib/foundations';
+import { useStyledRef } from '../../../../../../../lib/utility-hooks';
+import { useSelector } from '../../../../../../../redux/store';
+import { tinyText } from '../../../../../../common-styles';
+import { ConnectionPanelAccordion } from '../../../../styles';
 
 const LINE_HEIGHT = 22;
 const GAP = 8;
@@ -98,7 +98,7 @@ interface FeatureIndicatorsProps {
 // after the second row or overlaps with the invisible ellipsis text will be set to invisible. Then
 // we can count those and add another ellipsis element which is visible and place it after the last
 // visible indicator.
-export default function FeatureIndicators(props: FeatureIndicatorsProps) {
+export function FeatureIndicators(props: FeatureIndicatorsProps) {
   const tunnelState = useSelector((state) => state.connection.status);
   const ellipsisRef = useStyledRef<HTMLSpanElement>();
   const ellipsisSpacerRef = useStyledRef<HTMLSpanElement>();
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/index.ts
new file mode 100644
index 0000000000..5045146ed2
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/index.ts
@@ -0,0 +1 @@
+export * from './FeatureIndicators';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/Hostname.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/hostname/Hostname.tsx
index fffb7ec8b6..27cd8d32c9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/Hostname.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/hostname/Hostname.tsx
@@ -1,13 +1,13 @@
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { messages } from '../../../../shared/gettext';
-import { colors } from '../../../lib/foundations';
-import { IConnectionReduxState } from '../../../redux/connection/reducers';
-import { useSelector } from '../../../redux/store';
-import { smallText } from '../../common-styles';
-import Marquee from '../../Marquee';
-import { ConnectionPanelAccordion } from './styles';
+import { messages } from '../../../../../../../../shared/gettext';
+import { colors } from '../../../../../../../lib/foundations';
+import { IConnectionReduxState } from '../../../../../../../redux/connection/reducers';
+import { useSelector } from '../../../../../../../redux/store';
+import { smallText } from '../../../../../../common-styles';
+import Marquee from '../../../../../../Marquee';
+import { ConnectionPanelAccordion } from '../../../../styles';
 
 const StyledAccordion = styled(ConnectionPanelAccordion)({
   flexShrink: 0,
@@ -20,7 +20,7 @@ const StyledHostname = styled.span(smallText, {
   minHeight: '1em',
 });
 
-export default function Hostname() {
+export function Hostname() {
   const tunnelState = useSelector((state) => state.connection.status.state);
   const connection = useSelector((state) => state.connection);
   const text = getHostnameText(connection);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/hostname/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/hostname/index.ts
new file mode 100644
index 0000000000..c7dcaa1c27
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/hostname/index.ts
@@ -0,0 +1 @@
+export * from './Hostname';
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
new file mode 100644
index 0000000000..a043c8a614
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/index.ts
@@ -0,0 +1,9 @@
+export * from './connect-button';
+export * from './connection-action-button';
+export * from './connection-details';
+export * from './connection-status';
+export * from './disconnect-button';
+export * from './feature-indicators';
+export * from './hostname';
+export * from './location';
+export * from './select-location-button';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/Location.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/location/Location.tsx
index a6fa492670..c9088ea23f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/Location.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/location/Location.tsx
@@ -1,18 +1,18 @@
 import styled from 'styled-components';
 
-import { TunnelState } from '../../../../shared/daemon-rpc-types';
-import { colors } from '../../../lib/foundations';
-import { useSelector } from '../../../redux/store';
-import { largeText } from '../../common-styles';
-import Marquee from '../../Marquee';
-import { ConnectionPanelAccordion } from './styles';
+import { TunnelState } from '../../../../../../../../shared/daemon-rpc-types';
+import { colors } from '../../../../../../../lib/foundations';
+import { useSelector } from '../../../../../../../redux/store';
+import { largeText } from '../../../../../../common-styles';
+import Marquee from '../../../../../../Marquee';
+import { ConnectionPanelAccordion } from '../../../../styles';
 
 const StyledLocation = styled.span(largeText, {
   color: colors.white,
   flexShrink: 0,
 });
 
-export default function Location() {
+export function Location() {
   const connection = useSelector((state) => state.connection);
   const text = getLocationText(connection.status, connection.country, connection.city);
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/location/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/location/index.ts
new file mode 100644
index 0000000000..c1b9a927d3
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/location/index.ts
@@ -0,0 +1 @@
+export * from './Location';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/SelectLocationButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-button/SelectLocationButton.tsx
index 673dd519f6..40c099e0ff 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/SelectLocationButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-button/SelectLocationButton.tsx
@@ -2,16 +2,19 @@ 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 { IRelayLocationCountryRedux, RelaySettingsRedux } from '../../../redux/settings/reducers';
-import { useSelector } from '../../../redux/store';
-import { MultiButton } from '../../MultiButton';
+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 {
+  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);
@@ -23,7 +26,7 @@ export default function SelectLocationButtons() {
   }
 }
 
-function SelectLocationButton(props: ButtonProps) {
+export function SelectLocationButton(props: ButtonProps) {
   const { push } = useHistory();
 
   const tunnelState = useSelector((state) => state.connection.status.state);
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-button/index.ts
new file mode 100644
index 0000000000..e2eb11039c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/select-location-button/index.ts
@@ -0,0 +1 @@
+export * from './SelectLocationButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/index.ts
new file mode 100644
index 0000000000..d96e9bcd56
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/index.ts
@@ -0,0 +1 @@
+export * from './ConnectionPanel';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/index.ts
new file mode 100644
index 0000000000..df6b296b90
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/index.ts
@@ -0,0 +1 @@
+export * from './connection-panel';