✨ Fix namespace for copy config name translations and add proper validation

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

@@ -12,7 +12,8 @@
         "configName": {
           "label": "Config name",
           "validation": {
-            "required": "Config name is required"
+            "required": "Config name is required",
+            "notUnique": "Config name is already in use"
           },
           "placeholder": "Your new config name"
         },

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

@@ -13,6 +13,7 @@ import { showNotification } from '@mantine/notifications';
 import { IconAlertTriangle, IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons';
 import fileDownload from 'js-file-download';
 import { Trans, useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useDeleteConfigMutation } from '../../../../tools/config/mutations/useDeleteConfigMutation';
@@ -20,6 +21,7 @@ import Tip from '../../../layout/Tip';
 import { CreateConfigCopyModal } from './CreateCopyModal';
 
 export default function ConfigActions() {
+  const router = useRouter();
   const { t } = useTranslation(['settings/general/config-changer', 'settings/common', 'common']);
   const [createCopyModalOpened, createCopyModal] = useDisclosure(false);
   const { config } = useConfigContext();
@@ -79,6 +81,8 @@ export default function ConfigActions() {
         });
 
         removeConfig(config?.configProperties.name ?? 'default');
+
+        router.push('/');
       },
     });
   };

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

@@ -1,6 +1,8 @@
 import { Button, Group, Modal, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 import { useCopyConfigMutation } from '../../../../tools/config/mutations/useCopyConfigMutation';
 
 interface CreateConfigCopyModalProps {
@@ -14,6 +16,7 @@ export const CreateConfigCopyModal = ({
   closeModal,
   initialConfigName,
 }: CreateConfigCopyModalProps) => {
+  const { configs } = useConfigStore();
   const { t } = useTranslation(['settings/general/config-changer']);
 
   const form = useForm({
@@ -21,8 +24,21 @@ export const CreateConfigCopyModal = ({
       configName: initialConfigName,
     },
     validate: {
-      configName: (v) => (!v ? t('modal.form.configName.validation.required') : null),
+      configName: (value) => {
+        if (!value) {
+          return t('modal.copy.form.configName.validation.required');
+        }
+
+        const configNames = configs.map((x) => x.value.configProperties.name);
+        if (configNames.includes(value)) {
+          return t('modal.copy.form.configName.validation.notUnique');
+        }
+
+        return undefined;
+      },
     },
+    validateInputOnChange: true,
+    validateInputOnBlur: true,
   });
 
   const { mutateAsync } = useCopyConfigMutation(form.values.configName);
@@ -44,16 +60,18 @@ export const CreateConfigCopyModal = ({
       radius="md"
       opened={opened}
       onClose={handleClose}
-      title={<Title order={4}>{t('modal.title')}</Title>}
+      title={<Title order={4}>{t('modal.copy.title')}</Title>}
     >
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <TextInput
-          label={t('modal.form.configName.label')}
+          label={t('modal.copy.form.configName.label')}
-          placeholder={t('modal.form.configName.placeholder')}
+          placeholder={t('modal.copy.form.configName.placeholder')}
           {...form.getInputProps('configName')}
         />
         <Group position="right" mt="md">
-          <Button type="submit">{t('modal.form.submitButton')}</Button>
+          <Button type="submit" disabled={!form.isValid()}>
+            {t('modal.copy.form.submitButton')}
+          </Button>
         </Group>
       </form>
     </Modal>