Merge branch 'implement-move-information-in-popups-to-info-dialogs-des-1167'

Author: raksooo

desktop/packages/mullvad-vpn/locales/messages.pot

@@ -260,8 +260,6 @@ msgstr ""
 msgid "Test"
 msgstr ""
 
-#. Warning shown in dialog to users when they enable setting that increases
-#. network latency (decreases performance).
 msgid "This setting increases latency. Use only if needed."
 msgstr ""
 
@@ -1279,10 +1277,6 @@ msgctxt "openvpn-settings-view"
 msgid "Bridge mode"
 msgstr ""
 
-msgctxt "openvpn-settings-view"
-msgid "Enable bridge mode?"
-msgstr ""
-
 #. This is used as a description for the bridge mode
 #. setting.
 #. Available placeholders:
@@ -2041,13 +2035,6 @@ msgctxt "vpn-settings-view"
 msgid "The DNS server you want to add is a private IP. You must ensure that your network interfaces are configured to use it."
 msgstr ""
 
-#. Available placeholders:
-#. %(tunnelProtocol)s - the name of the tunnel protocol setting
-#. %(wireguard)s - will be replaced with "WireGuard"
-msgctxt "vpn-settings-view"
-msgid "The DNS server you want to add is public and will only work with %(wireguard)s. To ensure that it always works, set the \"%(tunnelProtocol)s\" (in Advanced settings) to %(wireguard)s."
-msgstr ""
-
 msgctxt "vpn-settings-view"
 msgid "This built-in feature prevents your traffic from leaking outside of the VPN tunnel if your network suddenly stops working or if the tunnel fails, it does this by blocking your traffic until your connection is reestablished."
 msgstr ""

desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { sprintf } from 'sprintf-js';
 
-import { colors, strings } from '../../config.json';
+import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { formatHtml } from '../lib/html-formatter';
@@ -44,7 +43,6 @@ export default function CustomDnsSettings() {
   const [savingAdd, setSavingAdd] = useState(false);
   const [savingEdit, setSavingEdit] = useState(false);
   const willShowConfirmationDialog = useRef(false);
-  const addingLocalIp = useRef(false);
 
   const featureAvailable = useMemo(
     () =>
@@ -63,11 +61,13 @@ export default function CustomDnsSettings() {
   const inputContainerRef = useStyledRef<HTMLDivElement>();
 
   const confirm = useCallback(() => {
+    willShowConfirmationDialog.current = false;
     void confirmAction?.();
     setConfirmAction(undefined);
   }, [confirmAction]);
   const abortConfirmation = useCallback(() => {
     setConfirmAction(undefined);
+    willShowConfirmationDialog.current = false;
   }, []);
 
   const setCustomDnsEnabled = useCallback(
@@ -124,23 +124,11 @@ export default function CustomDnsSettings() {
 
         try {
           const ipAddress = IpAddress.fromString(address);
-          addingLocalIp.current = ipAddress.isLocal();
-          if (addingLocalIp.current) {
-            if (manualLocal) {
-              willShowConfirmationDialog.current = true;
-              setConfirmAction(() => async () => {
-                willShowConfirmationDialog.current = false;
-                await add();
-              });
-            } else {
-              await add();
-            }
-          } else {
+          if (ipAddress.isLocal() && manualLocal) {
             willShowConfirmationDialog.current = true;
-            setConfirmAction(() => async () => {
-              willShowConfirmationDialog.current = false;
-              await add();
-            });
+            setConfirmAction(() => add);
+          } else {
+            await add();
           }
         } catch {
           setInvalid();
@@ -172,25 +160,14 @@ export default function CustomDnsSettings() {
 
       const ipAddress = IpAddress.fromString(newAddress);
       return new Promise<void>((resolve) => {
-        addingLocalIp.current = ipAddress.isLocal();
-        if (addingLocalIp.current) {
-          if (manualLocal) {
-            willShowConfirmationDialog.current = true;
-            setConfirmAction(() => async () => {
-              willShowConfirmationDialog.current = false;
-              await edit();
-              resolve();
-            });
-          } else {
-            void edit().then(resolve);
-          }
-        } else {
+        if (ipAddress.isLocal() && manualLocal) {
           willShowConfirmationDialog.current = true;
           setConfirmAction(() => async () => {
-            willShowConfirmationDialog.current = false;
             await edit();
             resolve();
           });
+        } else {
+          void edit().then(resolve);
         }
       });
     },
@@ -304,7 +281,6 @@ export default function CustomDnsSettings() {
 
       <ConfirmationDialog
         isOpen={confirmAction !== undefined}
-        isLocal={addingLocalIp}
         confirm={confirm}
         abort={abortConfirmation}
       />
@@ -405,33 +381,15 @@ function CellListItem(props: ICellListItemProps) {
 
 interface IConfirmationDialogProps {
   isOpen: boolean;
-  isLocal: React.RefObject<boolean>;
   confirm: () => void;
   abort: () => void;
 }
 
 function ConfirmationDialog(props: IConfirmationDialogProps) {
-  let message;
-  if (props.isLocal.current) {
-    message = messages.pgettext(
-      'vpn-settings-view',
-      'The DNS server you want to add is a private IP. You must ensure that your network interfaces are configured to use it.',
-    );
-  } else {
-    message = sprintf(
-      // TRANSLATORS: Available placeholders:
-      // TRANSLATORS: %(tunnelProtocol)s - the name of the tunnel protocol setting
-      // TRANSLATORS: %(wireguard)s - will be replaced with "WireGuard"
-      messages.pgettext(
-        'vpn-settings-view',
-        'The DNS server you want to add is public and will only work with %(wireguard)s. To ensure that it always works, set the "%(tunnelProtocol)s" (in Advanced settings) to %(wireguard)s.',
-      ),
-      {
-        wireguard: strings.wireguard,
-        tunnelProtocol: messages.pgettext('vpn-settings-view', 'Tunnel protocol'),
-      },
-    );
-  }
+  const message = messages.pgettext(
+    'vpn-settings-view',
+    'The DNS server you want to add is a private IP. You must ensure that your network interfaces are configured to use it.',
+  );
   return (
     <ModalAlert
       isOpen={props.isOpen}
@@ -445,6 +403,7 @@ function ConfirmationDialog(props: IConfirmationDialogProps) {
         </AppButton.BlueButton>,
       ]}
       close={props.abort}
-      message={message}></ModalAlert>
+      message={message}
+    />
   );
 }

desktop/packages/mullvad-vpn/src/renderer/components/OpenVpnSettings.tsx

@@ -16,14 +16,13 @@ import { useAppContext } from '../context';
 import { useRelaySettingsUpdater } from '../lib/constraint-updater';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
-import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import Selector, { SelectorItem } from './cell/Selector';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
-import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
+import { ModalMessage } from './Modal';
 import {
   NavigationBar,
   NavigationContainer,
@@ -32,7 +31,6 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import { SmallButton } from './SmallButton';
 
 const MIN_MSSFIX_VALUE = 1000;
 const MAX_MSSFIX_VALUE = 1450;
@@ -279,8 +277,6 @@ function BridgeModeSelector() {
     [tunnelProtocol, transportProtocol],
   );
 
-  const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean();
-
   const setBridgeState = useCallback(
     async (bridgeState: BridgeState) => {
       try {
@@ -295,20 +291,11 @@ function BridgeModeSelector() {
 
   const onSelectBridgeState = useCallback(
     async (newValue: BridgeState) => {
-      if (newValue === 'on') {
-        showConfirmationDialog();
-      } else {
-        await setBridgeState(newValue);
-      }
+      await setBridgeState(newValue);
     },
-    [showConfirmationDialog, setBridgeState],
+    [setBridgeState],
   );
 
-  const confirmBridgeState = useCallback(async () => {
-    hideConfirmationDialog();
-    await setBridgeState('on');
-  }, [hideConfirmationDialog, setBridgeState]);
-
   const footerText = bridgeModeFooterText(bridgeState === 'on', tunnelProtocol, transportProtocol);
 
   return (
@@ -355,25 +342,6 @@ function BridgeModeSelector() {
           </Cell.CellFooter>
         )}
       </AriaInputGroup>
-      <ModalAlert
-        isOpen={confirmationDialogVisible}
-        type={ModalAlertType.caution}
-        title={messages.pgettext('openvpn-settings-view', 'Enable bridge mode?')}
-        message={
-          // TRANSLATORS: Warning shown in dialog to users when they enable setting that increases
-          // TRANSLATORS: network latency (decreases performance).
-          messages.gettext('This setting increases latency. Use only if needed.')
-        }
-        gridButtons={[
-          <SmallButton key="cancel" onClick={hideConfirmationDialog}>
-            {messages.gettext('Cancel')}
-          </SmallButton>,
-          <SmallButton key="confirm" onClick={confirmBridgeState} data-testid="enable-confirm">
-            {messages.gettext('Enable')}
-          </SmallButton>,
-        ]}
-        close={hideConfirmationDialog}
-      />
     </>
   );
 }