From 94a23dadcd75fe6f9f7534c81375737dbb985ad5 Mon Sep 17 00:00:00 2001
From: arpitnath <arpitnath42@gmail.com>
Date: Tue, 12 Sep 2023 18:20:32 +0530
Subject: [PATCH] fixes: table column updates to component definition

---
 .../Inspector/Components/Table/Table.jsx      | 21 +++++++++----------
 frontend/src/_stores/utils.js                 |  9 ++++++--
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
index df4b0a9be1..a7ba9e9c38 100644
--- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
@@ -70,13 +70,13 @@ class TableComponent extends React.Component {
   onActionButtonPropertyChanged = (index, property, value) => {
     const actions = this.props.component.component.definition.properties.actions;
     actions.value[index][property] = value;
-    this.props.paramUpdated({ name: 'actions' }, 'value', actions.value, 'properties');
+    this.props.paramUpdated({ name: 'actions' }, 'value', actions.value, 'properties', true);
   };
 
   actionButtonEventsChanged = (events, index) => {
     let actions = this.props.component.component.definition.properties.actions.value;
     actions[index]['events'] = events;
-    this.props.paramUpdated({ name: 'actions' }, 'value', actions, 'properties');
+    this.props.paramUpdated({ name: 'actions' }, 'value', actions, 'properties', true);
   };
 
   actionButtonEventUpdated = (event, value, extraData) => {
@@ -88,7 +88,7 @@ class TableComponent extends React.Component {
       actionId: value,
     };
 
-    this.props.paramUpdated({ name: 'actions' }, 'value', newValues, 'properties');
+    this.props.paramUpdated({ name: 'actions' }, 'value', newValues, 'properties', true);
   };
 
   actionButtonEventOptionUpdated = (event, option, value, extraData) => {
@@ -103,7 +103,7 @@ class TableComponent extends React.Component {
       [option]: value,
     };
 
-    this.props.paramUpdated({ name: 'actions' }, 'value', newValues, 'properties');
+    this.props.paramUpdated({ name: 'actions' }, 'value', newValues, 'properties', true);
   };
 
   columnEventChanged = (columnForWhichEventsAreChanged, events) => {
@@ -870,20 +870,20 @@ class TableComponent extends React.Component {
     const columns = this.props.component.component.definition.properties.columns;
     const newValue = columns.value;
     newValue.push({ name: this.generateNewColumnName(columns.value), id: uuidv4() });
-    this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties');
+    this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true);
   };
 
   addNewAction = () => {
     const actions = this.props.component.component.definition.properties.actions;
     const newValue = actions ? actions.value : [];
     newValue.push({ name: computeActionName(actions), buttonText: 'Button', events: [] });
-    this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties');
+    this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties', true);
   };
 
   removeAction = (index) => {
     const newValue = this.props.component.component.definition.properties.actions.value;
     newValue.splice(index, 1);
-    this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties');
+    this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties', true);
   };
 
   onColumnItemChange = (index, item, value) => {
@@ -906,7 +906,7 @@ class TableComponent extends React.Component {
     const columns = this.props.component.component.definition.properties.columns;
     const newValue = columns.value;
     const removedColumns = newValue.splice(index, 1);
-    this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties');
+    this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true);
 
     const existingcolumnDeletionHistory =
       this.props.component.component.definition.properties.columnDeletionHistory?.value ?? [];
@@ -914,14 +914,14 @@ class TableComponent extends React.Component {
       ...existingcolumnDeletionHistory,
       ...removedColumns.map((column) => column.key || column.name),
     ];
-    this.props.paramUpdated({ name: 'columnDeletionHistory' }, 'value', newcolumnDeletionHistory, 'properties');
+    this.props.paramUpdated({ name: 'columnDeletionHistory' }, 'value', newcolumnDeletionHistory, 'properties', true);
   };
 
   reorderColumns = (startIndex, endIndex) => {
     const result = this.props.component.component.definition.properties.columns.value;
     const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
-    this.props.paramUpdated({ name: 'columns' }, 'value', result, 'properties');
+    this.props.paramUpdated({ name: 'columns' }, 'value', result, 'properties', true);
   };
 
   onDragEnd({ source, destination }) {
@@ -939,7 +939,6 @@ 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;
diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js
index bfd67d7d75..d155269795 100644
--- a/frontend/src/_stores/utils.js
+++ b/frontend/src/_stores/utils.js
@@ -77,7 +77,12 @@ function getValueFromJson(json, path) {
 
 function updateValueInJson(json, path, value) {
   let obj = json;
-  const keys = path.split('.');
+  const keys = path?.split('.');
+
+  if (!keys) {
+    return null;
+  }
+
   const lastKey = keys.pop();
   keys.forEach((key) => {
     obj = obj[key];
@@ -90,7 +95,7 @@ export const computeComponentPropertyDiff = (appDiff, definition, opts) => {
   if (!opts?.isParamFromTableColumn) {
     return appDiff;
   }
-  const path = generatePath(appDiff, 'columns');
+  const path = generatePath(appDiff, 'columns') || generatePath(appDiff, 'actions');
 
   const value2 = getValueFromJson(definition, path);