From 4d01aa31a122ca1c3b52a51cdbb5a9e0fad1b4e3 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Wed, 17 Nov 2021 17:07:06 +0530
Subject: [PATCH] Fixes incorrect resolving of cellValue

---
 .../src/Editor/Components/Table/Table.jsx     | 211 +++++++++---------
 1 file changed, 105 insertions(+), 106 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 7fed01dac5..76f19473f2 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -324,7 +324,7 @@ export function Table({
           case 'string':
           case undefined:
           case 'default': {
-            const textColor = resolveReferences(column.textColor, currentState, { cellValue });
+            const textColor = resolveReferences(column.textColor, currentState, '', { cellValue });
 
             const cellStyles = {
               color: textColor ?? '',
@@ -561,65 +561,65 @@ export function Table({
   const leftActionsCellData =
     leftActions().length > 0
       ? [
-          {
-            id: 'leftActions',
-            Header: 'Actions',
-            accessor: 'edit',
-            width: columnSizes.leftActions || defaultColumn.width,
-            Cell: (cell) => {
-              return leftActions().map((action) => (
-                <button
-                  key={action.name}
-                  className="btn btn-sm m-1 btn-light"
-                  style={{ background: action.backgroundColor, color: action.textColor }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onEvent('onTableActionButtonClicked', {
-                      component,
-                      data: cell.row.original,
-                      rowId: cell.row.id,
-                      action,
-                    });
-                  }}
-                >
-                  {action.buttonText}
-                </button>
-              ));
-            },
+        {
+          id: 'leftActions',
+          Header: 'Actions',
+          accessor: 'edit',
+          width: columnSizes.leftActions || defaultColumn.width,
+          Cell: (cell) => {
+            return leftActions().map((action) => (
+              <button
+                key={action.name}
+                className="btn btn-sm m-1 btn-light"
+                style={{ background: action.backgroundColor, color: action.textColor }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEvent('onTableActionButtonClicked', {
+                    component,
+                    data: cell.row.original,
+                    rowId: cell.row.id,
+                    action,
+                  });
+                }}
+              >
+                {action.buttonText}
+              </button>
+            ));
           },
-        ]
+        },
+      ]
       : [];
 
   const rightActionsCellData =
     rightActions().length > 0
       ? [
-          {
-            id: 'rightActions',
-            Header: 'Actions',
-            accessor: 'edit',
-            width: columnSizes.rightActions || defaultColumn.width,
-            Cell: (cell) => {
-              return rightActions().map((action) => (
-                <button
-                  key={action.name}
-                  className="btn btn-sm m-1 btn-light"
-                  style={{ background: action.backgroundColor, color: action.textColor }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onEvent('onTableActionButtonClicked', {
-                      component,
-                      data: cell.row.original,
-                      rowId: cell.row.id,
-                      action,
-                    });
-                  }}
-                >
-                  {action.buttonText}
-                </button>
-              ));
-            },
+        {
+          id: 'rightActions',
+          Header: 'Actions',
+          accessor: 'edit',
+          width: columnSizes.rightActions || defaultColumn.width,
+          Cell: (cell) => {
+            return rightActions().map((action) => (
+              <button
+                key={action.name}
+                className="btn btn-sm m-1 btn-light"
+                style={{ background: action.backgroundColor, color: action.textColor }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEvent('onTableActionButtonClicked', {
+                    component,
+                    data: cell.row.original,
+                    rowId: cell.row.id,
+                    action,
+                  });
+                }}
+              >
+                {action.buttonText}
+              </button>
+            ));
           },
-        ]
+        },
+      ]
       : [];
 
   const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
@@ -835,9 +835,8 @@ export function Table({
                 return (
                   <tr
                     key={index}
-                    className={`table-row ${
-                      highlightSelectedRow && row.id === componentState.selectedRowId ? 'selected' : ''
-                    }`}
+                    className={`table-row ${highlightSelectedRow && row.id === componentState.selectedRowId ? 'selected' : ''
+                      }`}
                     {...row.getRowProps()}
                     onClick={(e) => {
                       e.stopPropagation();
@@ -899,62 +898,62 @@ export function Table({
         Object.keys(componentState.changeSet || {}).length > 0 ||
         showFilterButton ||
         showDownloadButton) && (
-        <div className="card-footer d-flex align-items-center jet-table-footer">
-          <div className="table-footer row">
-            <div className="col">
-              {(clientSidePagination || serverSidePagination) && (
-                <Pagination
-                  lastActivePageIndex={pageIndex}
-                  serverSide={serverSidePagination}
-                  autoGotoPage={gotoPage}
-                  autoCanNextPage={canNextPage}
-                  autoPageCount={pageCount}
-                  autoPageOptions={pageOptions}
-                  onPageIndexChanged={onPageIndexChanged}
-                />
-              )}
-            </div>
-
-            {showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0 && (
+          <div className="card-footer d-flex align-items-center jet-table-footer">
+            <div className="table-footer row">
               <div className="col">
-                <button
-                  className={`btn btn-primary btn-sm ${componentState.isSavingChanges ? 'btn-loading' : ''}`}
-                  onClick={() =>
-                    onEvent('onBulkUpdate', { component }).then(() => {
-                      handleChangesSaved();
-                    })
-                  }
-                >
-                  Save Changes
-                </button>
-                <button className="btn btn-light btn-sm mx-2" onClick={() => handleChangesDiscarded()}>
-                  Discard changes
-                </button>
+                {(clientSidePagination || serverSidePagination) && (
+                  <Pagination
+                    lastActivePageIndex={pageIndex}
+                    serverSide={serverSidePagination}
+                    autoGotoPage={gotoPage}
+                    autoCanNextPage={canNextPage}
+                    autoPageCount={pageCount}
+                    autoPageOptions={pageOptions}
+                    onPageIndexChanged={onPageIndexChanged}
+                  />
+                )}
               </div>
-            )}
 
-            <div className="col-auto">
-              {showFilterButton && (
-                <span data-tip="Filter data" className="btn btn-light btn-sm p-1 mx-2" onClick={() => showFilters()}>
-                  <img src="/assets/images/icons/filter.svg" width="13" height="13" />
-                  {filters.length > 0 && (
-                    <a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
-                  )}
-                </span>
-              )}
-              {showDownloadButton && (
-                <span
-                  data-tip="Download as CSV"
-                  className="btn btn-light btn-sm p-1"
-                  onClick={() => exportData('csv', true)}
-                >
-                  <img src="/assets/images/icons/download.svg" width="13" height="13" />
-                </span>
+              {showBulkUpdateActions && Object.keys(componentState.changeSet || {}).length > 0 && (
+                <div className="col">
+                  <button
+                    className={`btn btn-primary btn-sm ${componentState.isSavingChanges ? 'btn-loading' : ''}`}
+                    onClick={() =>
+                      onEvent('onBulkUpdate', { component }).then(() => {
+                        handleChangesSaved();
+                      })
+                    }
+                  >
+                    Save Changes
+                  </button>
+                  <button className="btn btn-light btn-sm mx-2" onClick={() => handleChangesDiscarded()}>
+                    Discard changes
+                  </button>
+                </div>
               )}
+
+              <div className="col-auto">
+                {showFilterButton && (
+                  <span data-tip="Filter data" className="btn btn-light btn-sm p-1 mx-2" onClick={() => showFilters()}>
+                    <img src="/assets/images/icons/filter.svg" width="13" height="13" />
+                    {filters.length > 0 && (
+                      <a className="badge bg-azure" style={{ width: '4px', height: '4px', marginTop: '5px' }}></a>
+                    )}
+                  </span>
+                )}
+                {showDownloadButton && (
+                  <span
+                    data-tip="Download as CSV"
+                    className="btn btn-light btn-sm p-1"
+                    onClick={() => exportData('csv', true)}
+                  >
+                    <img src="/assets/images/icons/download.svg" width="13" height="13" />
+                  </span>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
       {isFiltersVisible && (
         <div className="table-filters card">
           <div className="card-header row">