Merge branch 'add-server-ip-override-ui-des-422'

Author: raksooo

CHANGELOG.md

@@ -32,6 +32,7 @@ Line wrap the file at 100 chars.                                              Th
   circumvent censorship by proxying API traffic.
 - Add confirmation dialog when deleting a custom list.
 - Add support for custom SOCKS5 OpenVPN bridges running locally.
+- Add ability to import server IP overrides in GUI.
 
 #### Android
 - Add support for all screen orientations.

gui/assets/images/icon-checkmark.svg

@@ -145,6 +145,9 @@ msgstr ""
 msgid "Got it!"
 msgstr ""
 
+msgid "Import"
+msgstr ""
+
 msgid "IPv4"
 msgstr ""
 
@@ -1324,6 +1327,77 @@ msgctxt "select-location-view"
 msgid "While connected, your traffic will be routed through two secure locations, the entry point and the exit point (needs to be two different VPN servers)."
 msgstr ""
 
+msgctxt "settings-import"
+msgid "Clear all overrides"
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Clear all overrides?"
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Clearing the imported overrides changes the server IPs, in the Select location view, back to default."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "If you are having issues connecting to VPN servers, please contact support."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Import file"
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Import files or text with new IP addresses for the servers in the Select location view."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Import of file %(fileName)s was successful, overrides are now active."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Import of file %(fileName)s was unsuccessful, please try again."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Import of text was successful, overrides are now active."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "Import of text was unsuccessful, please try again."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "IMPORT SUCCESSFUL"
+msgstr ""
+
+#. Title label in navigation bar
+msgctxt "settings-import"
+msgid "Import via text"
+msgstr ""
+
+msgctxt "settings-import"
+msgid "NO OVERRIDES IMPORTED"
+msgstr ""
+
+msgctxt "settings-import"
+msgid "On some networks, where various types of censorship are being used, our server IP addresses are sometimes blocked."
+msgstr ""
+
+msgctxt "settings-import"
+msgid "OVERRIDES ACTIVE"
+msgstr ""
+
+#. Title label in navigation bar. This is for a feature that lets
+#. users import server IP settings.
+msgctxt "settings-import"
+msgid "Server IP override"
+msgstr ""
+
+msgctxt "settings-import"
+msgid "To circumvent this you can import a file or a text, provided by our support team, with new IP addresses that override the default addresses of the servers in the Select location view."
+msgstr ""
+
 #. Navigation button to the 'API access methods' view
 msgctxt "settings-view"
 msgid "API access"
@@ -1768,6 +1842,10 @@ msgctxt "vpn-settings-view"
 msgid "Malware"
 msgstr ""
 
+msgctxt "vpn-settings-view"
+msgid "Server IP override"
+msgstr ""
+
 #. Label for settings that enables block of social media.
 msgctxt "vpn-settings-view"
 msgid "Social media"

gui/assets/images/icon-cross.svg

@@ -697,6 +697,14 @@ export class DaemonRpc {
     return result.getValue();
   }
 
+  public async applyJsonSettings(settings: string): Promise<void> {
+    await this.callString(this.client.applyJsonSettings, settings);
+  }
+
+  public async clearAllRelayOverrides(): Promise<void> {
+    await this.callEmpty(this.client.clearAllRelayOverrides);
+  }
+
   private subscriptionId(): number {
     const current = this.nextSubscriptionId;
     this.nextSubscriptionId += 1;
@@ -711,11 +719,14 @@ export class DaemonRpc {
     return Date.now() + CHANNEL_STATE_TIMEOUT;
   }
 
-  private callEmpty<R>(fn: CallFunctionArgument<Empty, R>): Promise<R> {
+  private callEmpty<R = Empty>(fn: CallFunctionArgument<Empty, R>): Promise<R> {
     return this.call<Empty, R>(fn, new Empty());
   }
 
-  private callString<R>(fn: CallFunctionArgument<StringValue, R>, value?: string): Promise<R> {
+  private callString<R = Empty>(
+    fn: CallFunctionArgument<StringValue, R>,
+    value?: string,
+  ): Promise<R> {
     const googleString = new StringValue();
 
     if (value !== undefined) {
@@ -1164,6 +1175,7 @@ function convertFromSettings(settings: grpcTypes.Settings): ISettings | undefine
   const obfuscationSettings = convertFromObfuscationSettings(settingsObject.obfuscationSettings);
   const customLists = convertFromCustomListSettings(settings.getCustomLists());
   const apiAccessMethods = convertFromApiAccessMethodSettings(settings.getApiAccessMethods()!);
+  const relayOverrides = settingsObject.relayOverridesList;
   return {
     ...settings.toObject(),
     bridgeState,
@@ -1174,6 +1186,7 @@ function convertFromSettings(settings: grpcTypes.Settings): ISettings | undefine
     obfuscationSettings,
     customLists,
     apiAccessMethods,
+    relayOverrides,
   };
 }
 

gui/locales/messages.pot

@@ -77,6 +77,7 @@ export function getDefaultSettings(): ISettings {
     },
     customLists: [],
     apiAccessMethods: getDefaultApiAccessMethods(),
+    relayOverrides: [],
   };
 }
 

gui/src/main/daemon-rpc.ts

@@ -822,6 +822,9 @@ class ApplicationMain
         await shell.openExternal(url);
       }
     });
+    IpcMainEventChannel.app.handleGetPathBaseName((filePath) =>
+      Promise.resolve(path.basename(filePath)),
+    );
 
     IpcMainEventChannel.navigation.handleSetHistory((history) => {
       this.navigationHistory = history;

gui/src/main/default-settings.ts

@@ -1,3 +1,5 @@
+import fs from 'fs/promises';
+
 import BridgeSettingsBuilder from '../shared/bridge-settings-builder';
 import { ISettings } from '../shared/daemon-rpc-types';
 import { ICurrentAppVersionInfo } from '../shared/ipc-types';
@@ -90,6 +92,17 @@ export default class Settings implements Readonly<ISettings> {
       return this.daemonRpc.testCustomApiAccessMethod(method);
     });
 
+    IpcMainEventChannel.settings.handleClearAllRelayOverrides(() => {
+      return this.daemonRpc.clearAllRelayOverrides();
+    });
+    IpcMainEventChannel.settings.handleImportText((text) => {
+      return this.daemonRpc.applyJsonSettings(text);
+    });
+    IpcMainEventChannel.settings.handleImportFile(async (path) => {
+      const settings = await fs.readFile(path);
+      return this.daemonRpc.applyJsonSettings(settings.toString());
+    });
+
     IpcMainEventChannel.guiSettings.handleSetEnableSystemNotifications((flag: boolean) => {
       this.guiSettings.enableSystemNotifications = flag;
     });
@@ -160,6 +173,9 @@ export default class Settings implements Readonly<ISettings> {
   public get apiAccessMethods() {
     return this.settingsValue.apiAccessMethods;
   }
+  public get relayOverrides() {
+    return this.settingsValue.relayOverrides;
+  }
 
   public get gui() {
     return this.guiSettings;

gui/src/main/index.ts

@@ -69,6 +69,7 @@ export default class UserInterface implements WindowControllerDelegate {
         ...options,
       });
       this.browsingFiles = false;
+      this.showWindow();
       return response;
     });
 

gui/src/main/settings.ts

@@ -345,6 +345,7 @@ export default class AppRenderer {
   public viewLog = (path: string) => IpcRendererEventChannel.problemReport.viewLog(path);
   public quit = () => IpcRendererEventChannel.app.quit();
   public openUrl = (url: string) => IpcRendererEventChannel.app.openUrl(url);
+  public getPathBaseName = (path: string) => IpcRendererEventChannel.app.getPathBaseName(path);
   public showOpenDialog = (options: Electron.OpenDialogOptions) =>
     IpcRendererEventChannel.app.showOpenDialog(options);
   public createCustomList = (name: string) =>
@@ -365,6 +366,9 @@ export default class AppRenderer {
     IpcRendererEventChannel.settings.testApiAccessMethodById(id);
   public testCustomApiAccessMethod = (method: CustomProxy) =>
     IpcRendererEventChannel.settings.testCustomApiAccessMethod(method);
+  public importSettingsFile = (path: string) => IpcRendererEventChannel.settings.importFile(path);
+  public importSettingsText = (text: string) => IpcRendererEventChannel.settings.importText(text);
+  public clearAllRelayOverrides = () => IpcRendererEventChannel.settings.clearAllRelayOverrides();
   public getMapData = () => IpcRendererEventChannel.map.getData();
   public setAnimateMap = (displayMap: boolean): void =>
     IpcRendererEventChannel.guiSettings.setAnimateMap(displayMap);
@@ -812,6 +816,7 @@ export default class AppRenderer {
     reduxSettings.updateObfuscationSettings(newSettings.obfuscationSettings);
     reduxSettings.updateCustomLists(newSettings.customLists);
     reduxSettings.updateApiAccessMethods(newSettings.apiAccessMethods);
+    reduxSettings.updateRelayOverrides(newSettings.relayOverrides);
 
     this.setReduxRelaySettings(newSettings.relaySettings);
     this.setBridgeSettings(newSettings.bridgeSettings);

gui/src/main/user-interface.ts

@@ -24,7 +24,13 @@ import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
-import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
+import {
+  NavigationBar,
+  NavigationContainer,
+  NavigationInfoButton,
+  NavigationItems,
+  TitleBarItem,
+} from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
 import { SmallButton, SmallButtonColor, SmallButtonGroup } from './SmallButton';
@@ -33,10 +39,6 @@ const StyledContextMenuButton = styled(Cell.Icon)({
   marginRight: '8px',
 });
 
-const StyledTitleInfoButton = styled(InfoButton)({
-  marginLeft: '12px',
-});
-
 const StyledMethodInfoButton = styled(InfoButton)({
   marginRight: '11px',
 });
@@ -90,31 +92,29 @@ export default function ApiAccessMethods() {
                     messages.pgettext('navigation-bar', 'API access')
                   }
                 </TitleBarItem>
+                <NavigationInfoButton
+                  message={[
+                    messages.pgettext(
+                      'api-access-methods-view',
+                      'The app needs to communicate with a Mullvad API server to log you in, fetch server lists, and other critical operations.',
+                    ),
+                    messages.pgettext(
+                      'api-access-methods-view',
+                      'On some networks, where various types of censorship are being used, the API servers might not be directly reachable.',
+                    ),
+                    messages.pgettext(
+                      'api-access-methods-view',
+                      'This feature allows you to circumvent that censorship by adding custom ways to access the API via proxies and similar methods.',
+                    ),
+                  ]}
+                />
               </NavigationItems>
             </NavigationBar>
 
             <StyledNavigationScrollbars fillContainer>
               <StyledContent>
                 <SettingsHeader>
-                  <HeaderTitle>
-                    {messages.pgettext('navigation-bar', 'API access')}
-                    <StyledTitleInfoButton
-                      message={[
-                        messages.pgettext(
-                          'api-access-methods-view',
-                          'The app needs to communicate with a Mullvad API server to log you in, fetch server lists, and other critical operations.',
-                        ),
-                        messages.pgettext(
-                          'api-access-methods-view',
-                          'On some networks, where various types of censorship are being used, the API servers might not be directly reachable.',
-                        ),
-                        messages.pgettext(
-                          'api-access-methods-view',
-                          'This feature allows you to circumvent that censorship by adding custom ways to access the API via proxies and similar methods.',
-                        ),
-                      ]}
-                    />
-                  </HeaderTitle>
+                  <HeaderTitle>{messages.pgettext('navigation-bar', 'API access')}</HeaderTitle>
                   <HeaderSubTitle>
                     {messages.pgettext(
                       'api-access-methods-view',

gui/src/renderer/app.tsx

@@ -26,6 +26,8 @@ import OpenVpnSettings from './OpenVpnSettings';
 import ProblemReport from './ProblemReport';
 import SelectLanguage from './SelectLanguage';
 import Settings from './Settings';
+import SettingsImport from './SettingsImport';
+import SettingsTextImport from './SettingsTextImport';
 import SplitTunnelingSettings from './SplitTunnelingSettings';
 import Support from './Support';
 import TooManyDevices from './TooManyDevices';
@@ -83,6 +85,8 @@ export default function AppRouter() {
             <Route exact path={RoutePath.openVpnSettings} component={OpenVpnSettings} />
             <Route exact path={RoutePath.splitTunneling} component={SplitTunnelingSettings} />
             <Route exact path={RoutePath.apiAccessMethods} component={ApiAccessMethods} />
+            <Route exact path={RoutePath.settingsImport} component={SettingsImport} />
+            <Route exact path={RoutePath.settingsTextImport} component={SettingsTextImport} />
             <Route exact path={RoutePath.editApiAccessMethods} component={EditApiAccessMethod} />
             <Route exact path={RoutePath.support} component={Support} />
             <Route exact path={RoutePath.problemReport} component={ProblemReport} />

gui/src/renderer/components/ApiAccessMethods.tsx

@@ -18,28 +18,33 @@ const StyledInfoButton = styled.button({
 interface IInfoIconProps {
   className?: string;
   size?: number;
+  tintColor?: string;
+  tintHoverColor?: string;
 }
 
 export function InfoIcon(props: IInfoIconProps) {
   return (
     <ImageView
       source="icon-info"
       width={props.size ?? 18}
-      tintColor={colors.white}
-      tintHoverColor={colors.white80}
+      tintColor={props.tintColor ?? colors.white}
+      tintHoverColor={props.tintHoverColor ?? colors.white80}
       className={props.className}
     />
   );
 }
 
-interface IInfoButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface IInfoButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   message?: string | Array<string>;
   children?: React.ReactNode;
+  title?: string;
   size?: number;
+  tintColor?: string;
+  tintHoverColor?: string;
 }
 
 export default function InfoButton(props: IInfoButtonProps) {
-  const { message, children, size, ...otherProps } = props;
+  const { message, children, size, tintColor, tintHoverColor, ...otherProps } = props;
   const [isOpen, show, hide] = useBoolean(false);
 
   return (
@@ -48,10 +53,11 @@ export default function InfoButton(props: IInfoButtonProps) {
         onClick={show}
         aria-label={messages.pgettext('accessibility', 'More information')}
         {...otherProps}>
-        <InfoIcon size={size} />
+        <InfoIcon size={size} tintColor={tintColor} tintHoverColor={tintHoverColor} />
       </StyledInfoButton>
       <ModalAlert
         isOpen={isOpen}
+        title={props.title}
         message={props.message}
         type={ModalAlertType.info}
         buttons={[