♻️ Add compability for legacy config in config loader

src/components/Config/LoadConfig.tsx

@@ -1,77 +1,94 @@
-import { Group, Text, useMantineTheme } from '@mantine/core';
+import { Group, Stack, Text, Title, useMantineTheme } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { IconCheck as Check, IconPhoto, IconUpload, IconX, IconX as X } from '@tabler/icons';
 import { setCookie } from 'cookies-next';
 import { useTranslation } from 'next-i18next';
 import { useConfigStore } from '../../config/store';
+import { migrateConfig } from '../../tools/config/migrateConfig';
 import { Config } from '../../tools/types';
+import { ConfigType } from '../../types/config';
 
-export default function LoadConfigComponent(props: any) {
-  const { updateConfig } = useConfigStore();
+export const LoadConfigComponent = () => {
+  const { addConfig } = useConfigStore();
   const theme = useMantineTheme();
   const { t } = useTranslation('settings/general/config-changer');
 
   return (
     <Dropzone.FullScreen
-      onDrop={(files) => {
-        files[0].text().then((e) => {
-          try {
-            JSON.parse(e) as Config;
-          } catch (e) {
-            showNotification({
-              autoClose: 5000,
-              title: <Text>{t('dropzone.notifications.invalidConfig.title')}</Text>,
-              color: 'red',
-              icon: <X />,
-              message: t('dropzone.notifications.invalidConfig.message'),
-            });
-            return;
-          }
-          const newConfig: Config = JSON.parse(e);
+      onDrop={async (files) => {
+        const fileName = files[0].name.replaceAll('.json', '');
+        const fileText = await files[0].text();
+
+        try {
+          JSON.parse(fileText) as ConfigType;
+        } catch (e) {
           showNotification({
             autoClose: 5000,
-            radius: 'md',
-            title: (
-              <Text>
-                {t('dropzone.notifications.loadedSuccessfully.title', {
-                  configName: newConfig.name,
-                })}
-              </Text>
-            ),
-            color: 'green',
-            icon: <Check />,
-            message: undefined,
+            title: <Text>{t('dropzone.notifications.invalidConfig.title')}</Text>,
+            color: 'red',
+            icon: <X />,
+            message: t('dropzone.notifications.invalidConfig.message'),
           });
-          setCookie('config-name', newConfig.name, {
-            maxAge: 60 * 60 * 24 * 30,
-            sameSite: 'strict',
-          });
-          updateConfig(newConfig.name, (previousConfig) => ({ ...previousConfig, newConfig }));
+          return;
+        }
+
+        let newConfig: ConfigType = JSON.parse(fileText);
+
+        if (!newConfig.schemaVersion) {
+          console.warn('a legacy configuration schema was deteced and migrated to the current schema');
+          const oldConfig = JSON.parse(fileText) as Config;
+          newConfig = migrateConfig(oldConfig);
+        }
+
+        await addConfig(fileName, newConfig, true);
+        showNotification({
+          autoClose: 5000,
+          radius: 'md',
+          title: (
+            <Text>
+              {t('dropzone.notifications.loadedSuccessfully.title', {
+                configName: fileName,
+              })}
+            </Text>
+          ),
+          color: 'green',
+          icon: <Check />,
+          message: undefined,
+        });
+        setCookie('config-name', fileName, {
+          maxAge: 60 * 60 * 24 * 30,
+          sameSite: 'strict',
         });
       }}
       accept={['application/json']}
     >
       <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
         <Dropzone.Accept>
-          <Text size="xl" inline>
+          <Stack align="center">
             <IconUpload
               size={50}
               stroke={1.5}
               color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
             />
-            {t('dropzone.accept.text')}
-          </Text>
+            <Title>{t('dropzone.accept.title')}</Title>
+            <Text size="xl" inline>
+              {t('dropzone.accept.text')}
+            </Text>
+          </Stack>
         </Dropzone.Accept>
         <Dropzone.Reject>
-          <Text size="xl" inline>
+          <Stack align="center">
             <IconX
               size={50}
               stroke={1.5}
               color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
             />
-            {t('dropzone.reject.text')}
-          </Text>
+            <Title>{t('dropzone.reject.title')}</Title>
+            <Text size="xl" inline>
+              {t('dropzone.reject.text')}
+            </Text>
+          </Stack>
         </Dropzone.Reject>
         <Dropzone.Idle>
           <IconPhoto size={50} stroke={1.5} />
@@ -79,4 +96,4 @@ export default function LoadConfigComponent(props: any) {
       </Group>
     </Dropzone.FullScreen>
   );
-}
+};

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -32,8 +32,6 @@ export const WidgetsEditModal = ({
 
   if (!configName || !innerProps.options) return null;
 
-  console.log(`loaded namespace modules/${innerProps.widgetId}`);
-
   const handleChange = (key: string, value: IntegrationOptionsValueType) => {
     setModuleProperties((prev) => {
       const copyOfPrev: any = { ...prev };