Add client side reload of the config with the newly added apps

src/components/Manage/Tools/Docker/docker-select-board.modal.tsx

@@ -6,7 +6,9 @@ import { IconCheck, IconX } from '@tabler/icons-react';
 import { ContainerInfo } from 'dockerode';
 import { Trans, useTranslation } from 'next-i18next';
 import { z } from 'zod';
+import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
+import { generateDefaultApp } from '~/tools/shared/app';
 import { api } from '~/utils/api';
 import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
 
@@ -23,15 +25,18 @@ export const DockerSelectBoardModal = ({ id, innerProps }: ContextModalProps<Inn
   const { t } = useTranslation('tools/docker');
   const { mutateAsync, isLoading } = api.boards.addAppsForContainers.useMutation();
   const { i18nZodResolver } = useI18nZodResolver();
-  const { updateConfig } = useConfigStore();
+  const { name: configName } = useConfigContext();
+
+  const updateConfig = useConfigStore((store) => store.updateConfig);
   const handleSubmit = async (values: FormType) => {
+    const newApps = innerProps.containers.map((container) => ({
+      name: (container.Names.at(0) ?? 'App').replace('/', ''),
+      port: container.Ports.at(0)?.PublicPort,
+      icon: container.icon,
+    }));
     await mutateAsync(
       {
-        apps: innerProps.containers.map((container) => ({
+        apps: newApps,
-          name: (container.Names.at(0) ?? 'App').replace('/', ''),
-          port: container.Ports.at(0)?.PublicPort,
-          icon: container.icon,
-        })),
         boardName: values.board,
       },
       {
@@ -42,7 +47,21 @@ export const DockerSelectBoardModal = ({ id, innerProps }: ContextModalProps<Inn
             icon: <IconCheck />,
             color: 'green',
           });
-          //TODO: Update config or reload it from server
+          updateConfig(configName!, (config) => {
+            const lowestWrapper = config?.wrappers.sort((a, b) => a.position - b.position)[0];
+            const defaultApp = generateDefaultApp(lowestWrapper.id);
+            return {
+              ...config,
+              apps: [
+                ...config.apps,
+                ...newApps.map((app) => ({
+                  ...defaultApp,
+                  ...app,
+                  wrapperId: lowestWrapper.id,
+                })),
+              ],
+            };
+          });
           modals.close(id);
         },
         onError: () => {
@@ -125,4 +144,3 @@ export const openDockerSelectBoardModal = (innerProps: InnerProps) => {
 function uuidv4(): any {
   throw new Error('Function not implemented.');
 }
-