✨ Add new config format

2025-11-12 00:15:48 +01:00 · 2022-12-04 17:36:30 +01:00
parent b2f5149527
commit d5a3b3f3ba
76 changed files with 2461 additions and 1034 deletions
--- a/src/components/Settings/Common/ConfigActions.tsx
+++ b/src/components/Settings/Common/ConfigActions.tsx
@@ -0,0 +1,102 @@
+import { Button, Center, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import { IconCheck, IconDownload, IconPlus, IconTrash, IconX } from '@tabler/icons';
+import { useMutation } from '@tanstack/react-query';
+import fileDownload from 'js-file-download';
+import { useTranslation } from 'next-i18next';
+import { useConfigContext } from '../../../config/provider';
+import Tip from '../../layout/Tip';
+import { CreateConfigCopyModal } from './ConfigActions/CreateCopyModal';
+
+export default function ConfigActions() {
+  const { t } = useTranslation(['settings/general/config-changer', 'settings/common']);
+  const [createCopyModalOpened, createCopyModal] = useDisclosure(false);
+  const { config } = useConfigContext();
+  const { mutateAsync } = useDeleteConfigMutation(config?.configProperties.name ?? 'default');
+
+  if (!config) return null;
+
+  const handleDownload = () => {
+    // TODO: remove secrets
+    fileDownload(JSON.stringify(config, null, '\t'), `${config?.configProperties.name}.json`);
+  };
+
+  const handleDeletion = async () => {
+    await mutateAsync();
+  };
+
+  return (
+    <>
+      <CreateConfigCopyModal
+        opened={createCopyModalOpened}
+        closeModal={createCopyModal.close}
+        initialConfigName={config.configProperties.name}
+      />
+      <Group spacing="xs" position="center">
+        <Button
+          size="xs"
+          leftIcon={<IconDownload size={18} />}
+          variant="default"
+          onClick={handleDownload}
+        >
+          {t('buttons.download')}
+        </Button>
+        <Button
+          size="xs"
+          leftIcon={<IconTrash size={18} />}
+          variant="default"
+          onClick={handleDeletion}
+        >
+          {t('buttons.delete.text')}
+        </Button>
+        <Button
+          size="xs"
+          leftIcon={<IconPlus size={18} />}
+          variant="default"
+          onClick={createCopyModal.open}
+        >
+          {t('buttons.saveCopy')}
+        </Button>
+      </Group>
+
+      <Center>
+        <Tip>{t('settings/common:tips.configTip')}</Tip>
+      </Center>
+    </>
+  );
+}
+
+const useDeleteConfigMutation = (configName: string) => {
+  const { t } = useTranslation(['settings/general/config-changer']);
+
+  return useMutation({
+    mutationKey: ['config/delete', { configName }],
+    mutationFn: () => fetchDeletion(configName),
+    onSuccess() {
+      showNotification({
+        title: t('buttons.delete.notifications.deleted.title'),
+        icon: <IconCheck />,
+        color: 'green',
+        autoClose: 1500,
+        radius: 'md',
+        message: t('buttons.delete.notifications.deleted.message'),
+      });
+      // TODO: set config to default config and use fallback config if necessary
+    },
+    onError() {
+      showNotification({
+        title: t('buttons.delete.notifications.deleteFailed.title'),
+        icon: <IconX />,
+        color: 'red',
+        autoClose: 1500,
+        radius: 'md',
+        message: t('buttons.delete.notifications.deleteFailed.message'),
+      });
+    },
+  });
+};
+
+const fetchDeletion = async (configName: string) => {
+  return await (await fetch(`/api/configs/${configName}`)).json();
+};