Add delete confirmation dialog

mullvad · Apr 5, 2024 · 47215e3 · 47215e3
1 parent e558998
commit 47215e3
Showing 1 changed file with 27 additions and 1 deletion.
diff --git a/gui/src/renderer/components/EditCustomBridge.tsx b/gui/src/renderer/components/EditCustomBridge.tsx
@@ -5,14 +5,18 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { convertToBridgeSettings } from '../lib/bridge-helper';
 import { useHistory } from '../lib/history';
+import { useBoolean } from '../lib/utilityHooks';
 import { useSelector } from '../redux/store';
 import { SettingsForm } from './cell/SettingsForm';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
+import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
 import { ProxyForm } from './ProxyForm';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
+import { SmallButton } from './SmallButton';
+import { SmallButtonColor } from './SmallButton';
 
 export function EditCustomBridge() {
   return (
@@ -27,6 +31,8 @@ function CustomBridgeForm() {
   const { updateBridgeSettings } = useAppContext();
   const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
 
+  const [deleteDialogVisible, showDeleteDialog, hideDeleteDialog] = useBoolean();
+
   const title =
     bridgeSettings.custom === undefined
       ? messages.pgettext('custom-bridge', 'Add custom bridge')
@@ -42,6 +48,7 @@ function CustomBridgeForm() {
 
   const onDelete = useCallback(() => {
     if (bridgeSettings.custom !== undefined) {
+      hideDeleteDialog();
       void updateBridgeSettings(
         convertToBridgeSettings({ ...bridgeSettings, type: 'normal', custom: undefined }),
       );
@@ -71,9 +78,28 @@ function CustomBridgeForm() {
                     proxy={bridgeSettings.custom}
                     onSave={onSave}
                     onCancel={history.pop}
-                    onDelete={bridgeSettings.custom === undefined ? undefined : onDelete}
+                    onDelete={bridgeSettings.custom === undefined ? undefined : showDeleteDialog}
                   />
                 </StyledSettingsContent>
+
+                <ModalAlert
+                  isOpen={deleteDialogVisible}
+                  type={ModalAlertType.warning}
+                  gridButtons={[
+                    <SmallButton key="cancel" onClick={hideDeleteDialog}>
+                      {messages.gettext('Cancel')}
+                    </SmallButton>,
+                    <SmallButton key="delete" color={SmallButtonColor.red} onClick={onDelete}>
+                      {messages.gettext('Delete')}
+                    </SmallButton>,
+                  ]}
+                  close={hideDeleteDialog}
+                  title={messages.pgettext('custom-bridge', 'Delete custom bridge?')}
+                  message={messages.pgettext(
+                    'custom-bridge',
+                    'Deleting the custom bridge will take you back to the select location view and the Automatic option will be selected instead.',
+                  )}
+                />
               </StyledContent>
             </StyledNavigationScrollbars>
           </NavigationContainer>