From 17fdf58cefd36d133d42f208c0371d746470aafd Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin@tooljet.io>
Date: Mon, 24 Jan 2022 15:37:12 +0530
Subject: [PATCH] [HotFix] Set table action usability issues (#1923)

* Expose setPage action of table on application load itself

* Coalesce target pageIndex to 1 for set table page action

* Do not fire onPageChanged for set table page action

* Change exposed pageIndex when set table page action is fired

* Use setExposedVariable to set pageIndex on set table page action

* Do not display functions on side bar inspector
---
 frontend/src/Editor/Components/Table/Table.jsx       | 10 +++++++---
 frontend/src/Editor/LeftSidebar/SidebarInspector.jsx |  2 +-
 frontend/src/_helpers/appUtils.js                    |  4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index ae8cd49855..c5398a3631 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -39,6 +39,7 @@ export function Table({
   onComponentOptionsChanged,
   darkMode,
   fireEvent,
+  setExposedVariable,
   registerAction,
 }) {
   const color = component.definition.styles.textColor.value;
@@ -747,13 +748,16 @@ export function Table({
     }
   );
 
-  useEffect(() => {
+  const registerSetPageAction = () => {
     registerAction('setPage', (targetPageIndex) => {
       setPaginationInternalPageIndex(targetPageIndex);
-      onPageIndexChanged(targetPageIndex);
+      setExposedVariable('pageIndex', targetPageIndex);
       if (!serverSidePagination && clientSidePagination) gotoPage(targetPageIndex - 1);
     });
-  }, [serverSidePagination, clientSidePagination]);
+  };
+
+  useEffect(registerSetPageAction, []);
+  useEffect(registerSetPageAction, [serverSidePagination, clientSidePagination]);
 
   useEffect(() => {
     const selectedRowsOriginalData = selectedFlatRows.map((row) => row.original);
diff --git a/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx b/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx
index bad0a99520..f83edaf1d3 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarInspector.jsx
@@ -41,7 +41,7 @@ export const LeftSidebarInspector = ({ darkMode, globals, components, queries })
             collapseStringsAfterLength={1000}
           />
           <ReactJson
-            src={components}
+            src={JSON.parse(JSON.stringify(components))}
             theme={darkMode ? 'shapeshifter' : 'rjv-default'}
             name={'components'}
             style={{ fontSize: '0.7rem' }}
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 8d1b0f2e71..a0ff4e0aae 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -239,7 +239,7 @@ function executeAction(_ref, event, mode) {
       }
 
       case 'set-table-page': {
-        setTablePageIndex(_ref, event.table, event.pageIndex);
+        return setTablePageIndex(_ref, event.table, event.pageIndex);
       }
     }
   }
@@ -691,7 +691,7 @@ function setTablePageIndex(_ref, table, index) {
 
   const tableMeta = _ref.state.currentState.components[table.name];
   const newPageIndex = resolveReferences(index, _ref.state.currentState);
-  tableMeta.setPage(newPageIndex);
+  tableMeta.setPage(newPageIndex ?? 1);
   return Promise.resolve();
 }