fix(settings): save only the existing values [EE-4903] (#8326)

app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx

@@ -5,14 +5,13 @@ import { useCallback, useEffect } from 'react';
 import { baseHref } from '@/portainer/helpers/pathHelper';
 import { notifySuccess } from '@/portainer/services/notifications';
 import { useUpdateSettingsMutation } from '@/react/portainer/settings/queries';
+import { Settings } from '@/react/portainer/settings/types';
 
 import { LoadingButton } from '@@/buttons/LoadingButton';
 import { FormControl } from '@@/form-components/FormControl';
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { Input } from '@@/form-components/Input';
 
-import { Settings } from '../types';
-
 import { EnabledWaitingRoomSwitch } from './EnableWaitingRoomSwitch';
 
 interface FormValues {

app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/DeploymentSyncOptions.tsx

@@ -43,8 +43,13 @@ export function DeploymentSyncOptions() {
     return null;
   }
 
-  const initialValues = {
-    Edge: settingsQuery.data.Edge,
+  const initialValues: FormValues = {
+    Edge: {
+      AsyncMode: settingsQuery.data.Edge.AsyncMode,
+      CommandInterval: settingsQuery.data.Edge.CommandInterval,
+      PingInterval: settingsQuery.data.Edge.PingInterval,
+      SnapshotInterval: settingsQuery.data.Edge.SnapshotInterval,
+    },
     EdgeAgentCheckinInterval: settingsQuery.data.EdgeAgentCheckinInterval,
   };
 

app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx

@@ -2,6 +2,7 @@ import { Formik, Form } from 'formik';
 import { Laptop } from 'lucide-react';
 
 import { EdgeCheckinIntervalField } from '@/react/edge/components/EdgeCheckInIntervalField';
+import { Settings } from '@/react/portainer/settings/types';
 
 import { Switch } from '@@/form-components/SwitchField/Switch';
 import { FormControl } from '@@/form-components/FormControl';
@@ -10,8 +11,6 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
 import { TextTip } from '@@/Tip/TextTip';
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 
-import { Settings } from '../types';
-
 import { validationSchema } from './EdgeComputeSettings.validation';
 import { FormValues } from './types';
 import { AddDeviceButton } from './AddDeviceButton';
@@ -26,6 +25,16 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
     return null;
   }
 
+  const initialValues: FormValues = {
+    EnableEdgeComputeFeatures: settings.EnableEdgeComputeFeatures,
+    EdgePortainerUrl: settings.EdgePortainerUrl,
+    Edge: {
+      TunnelServerAddress: settings.Edge.TunnelServerAddress,
+    },
+    EdgeAgentCheckinInterval: settings.EdgeAgentCheckinInterval,
+    EnforceEdgeID: settings.EnforceEdgeID,
+  };
+
   return (
     <div className="row">
       <Widget>
@@ -41,7 +50,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
 
         <WidgetBody>
           <Formik
-            initialValues={settings}
+            initialValues={initialValues}
             enableReinitialize
             validationSchema={() => validationSchema()}
             onSubmit={onSubmit}

app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/types.ts

@@ -1,5 +1,9 @@
 export interface FormValues {
   EnableEdgeComputeFeatures: boolean;
+  EdgePortainerUrl: string;
   EnforceEdgeID: boolean;
   EdgeAgentCheckinInterval: number;
+  Edge: {
+    TunnelServerAddress: string;
+  };
 }

app/react/portainer/settings/EdgeComputeView/types.ts

@@ -1,7 +0,0 @@
-export interface Settings {
-  EdgeAgentCheckinInterval: number;
-  EnableEdgeComputeFeatures: boolean;
-  TrustOnFirstConnect: boolean;
-  EnforceEdgeID: boolean;
-  EdgePortainerUrl: string;
-}

app/react/portainer/settings/settings.service.ts

@@ -28,7 +28,11 @@ export async function getSettings() {
   }
 }
 
-export async function updateSettings(settings: Partial<Settings>) {
+type OptionalSettings = Omit<Partial<Settings>, 'Edge'> & {
+  Edge?: Partial<Settings['Edge']>;
+};
+
+export async function updateSettings(settings: OptionalSettings) {
   try {
     await axios.put(buildUrl(), settings);
   } catch (e) {

app/react/portainer/settings/types.ts

@@ -134,6 +134,7 @@ export interface Settings {
     SnapshotInterval: number;
     CommandInterval: number;
     AsyncMode: boolean;
+    TunnelServerAddress: string;
   };
 }