✨ Add confirmation modal for config deletion

public/locales/en/settings/general/config-changer.json

@@ -6,29 +6,39 @@
     "pleaseWait": "Please wait until your new config is loaded!"
   },
   "modal": {
-    "title": "Choose the name of your new config",
+    "copy": {
-    "form": {
+      "title": "Choose the name of your new config",
-      "configName": {
+      "form": {
-        "label": "Config name",
+        "configName": {
-        "validation": {
+          "label": "Config name",
-          "required": "Config name is required"
+          "validation": {
+            "required": "Config name is required"
+          },
+          "placeholder": "Your new config name"
         },
-        "placeholder": "Your new config name"
+        "submitButton": "Confirm"
       },
-      "submitButton": "Confirm"
+      "events": {
+        "configSaved": {
+          "title": "Config saved",
+          "message": "Config saved as {{configName}}"
+        },
+        "configCopied": {
+          "title": "Config copied",
+          "message": "Config copied as {{configName}}"
+        },
+        "configNotCopied": {
+          "title": "Unable to copy config",
+          "message": "Your config was not copied as {{configName}}"
+        }
+      }
     },
-    "events": {
+    "confirmDeletion": {
-      "configSaved": {
+      "title": "Confirm deletion of your config",
-        "title": "Config saved",
+      "warningText": "You're about to delete '<b>{{configName}}</b>'",
-        "message": "Config saved as {{configName}}"
+      "text": "Please note, that the deletion is not invertible and your data will be lost permanently. After clicking this button, the file will be permanently deleted from your disk. Make sure to create an adequate backup of your configuration.",
-      },
+      "buttons": {
-      "configCopied": {
+        "confirm": "Yes, delete '<b>{{configName}}</b>'"
-        "title": "Config copied",
-        "message": "Config copied as {{configName}}"
-      },
-      "configNotCopied": {
-        "title": "Unable to copy config",
-        "message": "Your config was not copied as {{configName}}"
       }
     }
   },

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -1,9 +1,18 @@
-import { ActionIcon, Center, createStyles, Flex, Text, useMantineTheme } from '@mantine/core';
+import {
+  ActionIcon,
+  Alert,
+  Center,
+  createStyles,
+  Flex,
+  Text,
+  useMantineTheme,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { openConfirmModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons';
+import { IconAlertTriangle, IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons';
 import fileDownload from 'js-file-download';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useDeleteConfigMutation } from '../../../../tools/config/mutations/useDeleteConfigMutation';
@@ -11,7 +20,7 @@ import Tip from '../../../layout/Tip';
 import { CreateConfigCopyModal } from './CreateCopyModal';
 
 export default function ConfigActions() {
-  const { t } = useTranslation(['settings/general/config-changer', 'settings/common']);
+  const { t } = useTranslation(['settings/general/config-changer', 'settings/common', 'common']);
   const [createCopyModalOpened, createCopyModal] = useDisclosure(false);
   const { config } = useConfigContext();
   const { removeConfig } = useConfigStore();
@@ -24,26 +33,54 @@ export default function ConfigActions() {
   };
 
   const handleDeletion = async () => {
-    const response = await mutateAsync();
+    openConfirmModal({
+      title: t('modal.confirmDeletion.title'),
+      children: (
+        <>
+          <Alert icon={<IconAlertTriangle />} mb="md">
+            <Trans
+              i18nKey="settings/general/config-changer:modal.confirmDeletion.warningText"
+              values={{ configName: config.configProperties.name ?? 'default' }}
+              components={{ b: <b />, code: <code /> }}
+            />
+          </Alert>
+          <Text>{t('modal.confirmDeletion.text')}</Text>
+        </>
+      ),
+      labels: {
+        confirm: (
+          <Trans
+            i18nKey="settings/general/config-changer:modal.confirmDeletion.buttons.confirm"
+            values={{ configName: config.configProperties.name ?? 'default' }}
+            components={{ b: <b />, code: <code /> }}
+          />
+        ),
+        cancel: t('common:cancel'),
+      },
+      zIndex: 201,
+      onConfirm: async () => {
+        const response = await mutateAsync();
 
-    if (response.message) {
+        if (response.message) {
-      showNotification({
+          showNotification({
-        title: t('buttons.delete.notifications.deleteFailedDefaultConfig.title'),
+            title: t('buttons.delete.notifications.deleteFailedDefaultConfig.title'),
-        message: t('buttons.delete.notifications.deleteFailedDefaultConfig.message'),
+            message: t('buttons.delete.notifications.deleteFailedDefaultConfig.message'),
-      });
+          });
-      return;
+          return;
-    }
+        }
 
-    showNotification({
+        showNotification({
-      title: t('buttons.delete.notifications.deleted.title'),
+          title: t('buttons.delete.notifications.deleted.title'),
-      icon: <IconCheck />,
+          icon: <IconCheck />,
-      color: 'green',
+          color: 'green',
-      autoClose: 1500,
+          autoClose: 1500,
-      radius: 'md',
+          radius: 'md',
-      message: t('buttons.delete.notifications.deleted.message'),
+          message: t('buttons.delete.notifications.deleted.message'),
+        });
+
+        removeConfig(config?.configProperties.name ?? 'default');
+      },
     });
-
-    removeConfig(config?.configProperties.name ?? 'default');
   };
 
   const { classes } = useStyles();