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 '{{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": {
+ "confirm": "Yes, delete '{{configName}}'"
}
}
},
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: (
+ <>
+ } mb="md">
+ , code: }}
+ />
+
+ {t('modal.confirmDeletion.text')}
+ >
+ ),
+ labels: {
+ confirm: (
+ , 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: ,
- color: 'green',
- autoClose: 1500,
- radius: 'md',
- message: t('buttons.delete.notifications.deleted.message'),
+ showNotification({
+ title: t('buttons.delete.notifications.deleted.title'),
+ icon: ,
+ 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();