fix(settings): send settings diff to Z2M instead of whole object (#2023)

* fix(settings): send settings diff to Z2M instead of whole object

* fix(ignore): updates

* fix(u): u

* fix(u): u

package.json

@@ -76,6 +76,7 @@
         "d3-selection": "~3.0.0",
         "d3-zoom": "~3.0.0",
         "deep-diff": "~1.0.2",
+        "deep-object-diff": "~1.1.9",
         "eslint": "~8.57.0",
         "eslint-config-prettier": "~9.0.0",
         "eslint-config-react": "~1.1.7",

src/components/device-page/DeviceSettings.tsx

@@ -5,6 +5,7 @@ import { ISubmitEvent, UiSchema } from '@rjsf/core';
 import { DescriptionField, TitleField } from '../../i18n/rjsf-translation-fields';
 import merge from 'lodash/merge';
 import { DeviceSettingsProps, DeviceSettingsState, Form, ParamValue } from './settings';
+import { computeSettingsDiff } from '../../utils';
 import { ReadTheDocsInfo } from '../ReadTheDocsInfo';
 
 const genericUiSchema: UiSchema = {
@@ -35,14 +36,12 @@ export class DeviceSettings extends Component<DeviceSettingsProps, DeviceSetting
         const { updatedDeviceConfig } = this.state;
         return merge({}, config?.device_options, config?.devices[device.ieee_address], updatedDeviceConfig);
     }
-    onFormChange = (params: ISubmitEvent<KVP | KVP[]>): void => {
-        const { formData } = params;
-        this.setState({ updatedDeviceConfig: formData });
-    };
     updateConfig = async (params: ISubmitEvent<KVP | KVP[]>): Promise<void> => {
         const { formData } = params;
+        const { data } = this.getSchemaAndConfig();
         const { setDeviceOptions, device } = this.props;
-        await setDeviceOptions(device.ieee_address, formData as Record<string, unknown>);
+        const diff = computeSettingsDiff(data, formData);
+        await setDeviceOptions(device.ieee_address, diff as Record<string, unknown>);
         this.setState({ updatedDeviceConfig: {} });
     };
 
@@ -64,7 +63,6 @@ export class DeviceSettings extends Component<DeviceSettingsProps, DeviceSetting
                     schema={schema}
                     formData={data}
                     onSubmit={this.updateConfig}
-                    onChange={this.onFormChange}
                     uiSchema={uiSchema}
                     fields={{ TitleField, DescriptionField }}
                 />

src/components/settings-page/index.tsx

@@ -15,7 +15,7 @@ import { WithTranslation, withTranslation } from 'react-i18next';
 import { DescriptionField, TitleField } from '../../i18n/rjsf-translation-fields';
 import { Stats } from './stats';
 import frontendPackageJson from './../../../package.json';
-import { formatDate } from '../../utils';
+import { computeSettingsDiff, formatDate } from '../../utils';
 import { saveAs } from 'file-saver';
 import Spinner from '../spinner';
 import { TranslatedImageLocaliser } from './image-localiser';
@@ -296,10 +296,11 @@ class SettingsPage extends Component<
         const { formData } = e;
         const { updateBridgeConfig } = this.props;
         const { keyName } = this.state;
+        const diff = computeSettingsDiff(this.getSettingsInfo().currentConfig, formData);
         if (keyName === ROOT_KEY_NAME) {
-            updateBridgeConfig(formData);
+            updateBridgeConfig(diff);
         } else {
-            updateBridgeConfig({ [keyName]: formData });
+            updateBridgeConfig({ [keyName]: diff });
         }
     };
 

src/utils.ts

@@ -6,6 +6,7 @@ import { saveAs } from 'file-saver';
 
 import local from 'store2';
 import debounce from 'lodash/debounce';
+import { diff } from 'deep-object-diff';
 
 
 export const genDeviceDetailsLink = (deviceIdentifier: string | number): string => (`/device/${deviceIdentifier}`);
@@ -133,6 +134,25 @@ export const download = async (data: Record<string, unknown>, filename: string)
     });
 }
 
+export const computeSettingsDiff = (before: object, after: object) => {
+    const diffObj = diff(before, after);
+
+    // diff converts arrays to objects, set original array back here
+    const setArrays = (localAfter: object, localDiff: object): void => {
+        for (const [key, value] of Object.entries(localDiff)) {
+            if (typeof value === 'object') {
+                if (Array.isArray(localAfter[key])) {
+                    localDiff[key] = localAfter[key];
+                } else {
+                    setArrays(localAfter[key], value);
+                }
+            }
+        }
+    }
+    setArrays(after, diffObj);
+    return diffObj;
+}
+
 export const sanitizeZ2MDeviceName = (deviceName?: string): string => deviceName ? deviceName.replace(/:|\s|\//g, "-") : "NA";
 
 export const getEndpoints = (obj: Device | Group): Endpoint[] => {