🐛 Fix config changer and critical bug in copy config

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

@@ -1,6 +1,7 @@
 {
   "configSelect": {
     "label": "Config changer",
+    "description": "{{configCount}} configurations are available",
     "loadingNew": "Loading your config...",
     "pleaseWait": "Please wait until your new config is loaded!"
   },

src/components/Config/ConfigChanger.tsx

@@ -3,15 +3,17 @@ import { useToggle } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { setCookie } from 'cookies-next';
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useConfigContext } from '../../config/provider';
 
 export default function ConfigChanger() {
-  const { t } = useTranslation('settings/general/config-changer');
-  const { name: configName } = useConfigContext();
-  // const loadConfig = useConfigStore((x) => x.loadConfig);
+  const router = useRouter();
 
-  const { data: configs, isLoading, isError } = useConfigsQuery();
+  const { t } = useTranslation('settings/general/config-changer');
+  const { name: configName, setConfigName } = useConfigContext();
+
+  const { data: configs, isLoading } = useConfigsQuery();
   const [activeConfig, setActiveConfig] = useState(configName);
   const [isRefreshing, toggle] = useToggle();
 
@@ -22,14 +24,13 @@ export default function ConfigChanger() {
     });
     setActiveConfig(value);
     toggle();
-    // Use timeout to wait for the cookie to be set
-    setTimeout(() => {
-      window.location.reload();
-    }, 1000);
+
+    router.push(`/${value}`);
+    setConfigName(value);
   };
 
   // If configlist is empty, return a loading indicator
-  if (isLoading || !configs || configs?.length === 0 || !configName) {
+  if (isLoading || !configs || configs.length === 0 || !configName) {
     return (
       <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
         <Center>
@@ -43,6 +44,7 @@ export default function ConfigChanger() {
     <>
       <Select
         label={t('configSelect.label')}
+        description={t('configSelect.description', { configCount: configs.length })}
         value={activeConfig}
         onChange={onConfigChange}
         data={configs}

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

@@ -20,7 +20,6 @@ export default function ConfigActions() {
   if (!config) return null;
 
   const handleDownload = () => {
-    // TODO: remove secrets
     fileDownload(JSON.stringify(config, null, '\t'), `${config?.configProperties.name}.json`);
   };
 

src/tools/config/getFrontendConfig.ts

@@ -1,9 +1,13 @@
+import Consola from 'consola';
+
 import { ConfigType } from '../../types/config';
 import { getConfig } from './getConfig';
 
 export const getFrontendConfig = (name: string): ConfigType => {
   const config = getConfig(name);
 
+  Consola.info(`Requested frontend content of configuration '${name}'`);
+
   return {
     ...config,
     apps: config.apps.map((app) => ({

src/tools/config/mutations/useCopyConfigMutation.tsx

@@ -40,6 +40,9 @@ const fetchCopy = async (configName: string, config: ConfigType | undefined) =>
     throw new Error('config is not defiend');
   }
 
+  const copiedConfig = config;
+  copiedConfig.configProperties.name = configName;
+
   const response = await fetch(`/api/configs/${configName}`, {
     method: 'PUT',
     headers: {