From 1a22d7ca1a0943fa9f0ddf78a4608b407ece44fe Mon Sep 17 00:00:00 2001
From: Manuel <manuel.ruwe@bluewin.ch>
Date: Tue, 17 Jan 2023 22:10:29 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20confirmation=20modal=20for=20?=
 =?UTF-8?q?config=20deletion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../en/settings/general/config-changer.json   | 50 +++++++-----
 .../Settings/Common/Config/ConfigActions.tsx  | 79 ++++++++++++++-----
 2 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/public/locales/en/settings/general/config-changer.json b/public/locales/en/settings/general/config-changer.json
index 7a5cf7988..538e46397 100644
--- a/public/locales/en/settings/general/config-changer.json
+++ b/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",
-    "form": {
-      "configName": {
-        "label": "Config name",
-        "validation": {
-          "required": "Config name is required"
+    "copy": {
+      "title": "Choose the name of your new config",
+      "form": {
+        "configName": {
+          "label": "Config name",
+          "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": {
-      "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}}"
+    "confirmDeletion": {
+      "title": "Confirm deletion of your config",
+      "warningText": "You're about to delete '<b>{{configName}}</b>'",
+      "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": {
+        "confirm": "Yes, delete '<b>{{configName}}</b>'"
       }
     }
   },
diff --git a/src/components/Settings/Common/Config/ConfigActions.tsx b/src/components/Settings/Common/Config/ConfigActions.tsx
index 200811564..1f439f7c8 100644
--- a/src/components/Settings/Common/Config/ConfigActions.tsx
+++ b/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) {
-      showNotification({
-        title: t('buttons.delete.notifications.deleteFailedDefaultConfig.title'),
-        message: t('buttons.delete.notifications.deleteFailedDefaultConfig.message'),
-      });
-      return;
-    }
+        if (response.message) {
+          showNotification({
+            title: t('buttons.delete.notifications.deleteFailedDefaultConfig.title'),
+            message: t('buttons.delete.notifications.deleteFailedDefaultConfig.message'),
+          });
+          return;
+        }
 
-    showNotification({
-      title: t('buttons.delete.notifications.deleted.title'),
-      icon: <IconCheck />,
-      color: 'green',
-      autoClose: 1500,
-      radius: 'md',
-      message: t('buttons.delete.notifications.deleted.message'),
+        showNotification({
+          title: t('buttons.delete.notifications.deleted.title'),
+          icon: <IconCheck />,
+          color: 'green',
+          autoClose: 1500,
+          radius: 'md',
+          message: t('buttons.delete.notifications.deleted.message'),
+        });
+
+        removeConfig(config?.configProperties.name ?? 'default');
+      },
     });
-
-    removeConfig(config?.configProperties.name ?? 'default');
   };
 
   const { classes } = useStyles();