fixes: table column updates

frontend/src/Editor/EditorFunc.jsx

@@ -8,18 +8,7 @@ import {
 } from '@/_services';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import _, {
-  defaults,
-  cloneDeep,
-  isEqual,
-  isEmpty,
-  debounce,
-  omit,
-  update,
-  difference,
-  isNull,
-  isUndefined,
-} from 'lodash';
+import _, { cloneDeep, isEqual, isEmpty, debounce, omit, isNull, isUndefined } from 'lodash';
 import { Container } from './Container';
 import { EditorKeyHooks } from './EditorKeyHooks';
 import { CustomDragLayer } from './CustomDragLayer';
@@ -47,7 +36,7 @@ import { WidgetManager } from './WidgetManager';
 import config from 'config';
 import queryString from 'query-string';
 import { toast } from 'react-hot-toast';
-const { produce, enablePatches, setAutoFreeze, applyPatches } = require('immer');
+const { produce, enablePatches, setAutoFreeze } = require('immer');
 import { createWebsocketConnection } from '@/_helpers/websocketConnection';
 import RealtimeCursors from '@/Editor/RealtimeCursors';
 import { initEditorWalkThrough } from '@/_helpers/createWalkThrough';
@@ -66,7 +55,7 @@ import { useDataQueries, useDataQueriesStore } from '@/_stores/dataQueriesStore'
 import { useAppVersionStore, useAppVersionActions } from '@/_stores/appVersionStore';
 import { useQueryPanelStore } from '@/_stores/queryPanelStore';
 import { useCurrentStateStore, useCurrentState } from '@/_stores/currentStateStore';
-import { computeAppDiff, resetAllStores } from '@/_stores/utils';
+import { computeAppDiff, computeComponentPropertyDiff, resetAllStores } from '@/_stores/utils';
 import { setCookie } from '@/_helpers/cookie';
 import { shallow } from 'zustand/shallow';
 import { useEditorActions, useEditorState, useEditorStore } from '@/_stores/editorStore';
@@ -820,7 +809,9 @@ const EditorComponent = (props) => {
         isUpdatingEditorStateInProcess: false,
       });
     } else if (!isEmpty(props?.editingVersion)) {
-      const updateDiff = computeAppDiff(appDefinitionDiff, currentPageId, appDiffOptions);
+      // param diff ofr table columns needs the complte column data or else the json structure is not correct computeComponentPropertyDiff function handles this
+      const paramDiff = computeComponentPropertyDiff(appDefinitionDiff, appDefinition, appDiffOptions);
+      const updateDiff = computeAppDiff(paramDiff, currentPageId, appDiffOptions);
 
       updateAppVersion(appId, props.editingVersion?.id, currentPageId, updateDiff, isUserSwitchedVersion)
         .then(() => {

frontend/src/Editor/Inspector/Components/Table/Table.jsx

@@ -893,7 +893,8 @@ class TableComponent extends React.Component {
     column[item] = value;
     const newColumns = columns.value;
     newColumns[index] = column;
-    this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties');
+
+    this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties', true);
   };
 
   getItemStyle = (isDragging, draggableStyle) => ({
@@ -938,7 +939,7 @@ class TableComponent extends React.Component {
 
     const columns = component.component.definition.properties.columns;
     const actions = component.component.definition.properties.actions || { value: [] };
-
+    console.log('-arpit---newCol Inspector----', { columns, component });
     if (!component.component.definition.properties.displaySearchBox)
       paramUpdated({ name: 'displaySearchBox' }, 'value', true, 'properties');
     const displaySearchBox = component.component.definition.properties.displaySearchBox.value;

frontend/src/Editor/Inspector/Inspector.jsx

@@ -119,7 +119,7 @@ export const Inspector = ({
     return null;
   };
 
-  function paramUpdated(param, attr, value, paramType) {
+  function paramUpdated(param, attr, value, paramType, isParamFromTableColumn = false) {
     console.log({ param, attr, value, paramType });
     let newComponent = JSON.parse(JSON.stringify(component));
     let newDefinition = _.cloneDeep(newComponent.component.definition);
@@ -146,7 +146,10 @@ export const Inspector = ({
     }
     newDefinition[paramType] = allParams;
     newComponent.component.definition = newDefinition;
-    componentDefinitionChanged(newComponent, { componentPropertyUpdated: true });
+    componentDefinitionChanged(newComponent, {
+      componentPropertyUpdated: true,
+      isParamFromTableColumn: isParamFromTableColumn,
+    });
   }
 
   function layoutPropertyChanged(param, attr, value, paramType) {

frontend/src/_stores/utils.js

@@ -48,6 +48,57 @@ export const computeAppDiff = (appDiff, currentPageId, opts) => {
   return { updateDiff, type, operation };
 };
 
+// for table column diffs, we need to compute the diff for each column separately and send the the entire column data
+function generatePath(obj, targetKey, currentPath = '') {
+  for (const key in obj) {
+    const newPath = currentPath ? currentPath + '.' + key : key;
+
+    if (key === targetKey) {
+      return newPath;
+    }
+
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      const result = generatePath(obj[key], targetKey, newPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+function getValueFromJson(json, path) {
+  let value = json;
+  path.split('.').forEach((key) => {
+    value = value[key];
+  });
+  return value;
+}
+
+function updateValueInJson(json, path, value) {
+  let obj = json;
+  const keys = path.split('.');
+  const lastKey = keys.pop();
+  keys.forEach((key) => {
+    obj = obj[key];
+  });
+  obj[lastKey] = value;
+  return json;
+}
+
+export const computeComponentPropertyDiff = (appDiff, definition, opts) => {
+  if (!opts?.isParamFromTableColumn) {
+    return appDiff;
+  }
+  const path = generatePath(appDiff, 'columns');
+
+  const value2 = getValueFromJson(definition, path);
+
+  const _diff = updateValueInJson(_.cloneDeep(appDiff), path, value2);
+
+  return _diff;
+};
+
 const updateFor = (appDiff, currentPageId, opts) => {
   const updateTypeMappings = [
     {