From 7783154afc60f96786810be9db9e182983fa773d Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin@tooljet.io>
Date: Tue, 28 Sep 2021 15:09:37 +0530
Subject: [PATCH] Minor linting changes in Table.jsx (#859)

---
 .../src/Editor/Components/Table/Table.jsx     | 188 +++++++++---------
 1 file changed, 95 insertions(+), 93 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 7e399042ec..beb0de4c1d 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -543,55 +543,55 @@ 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, 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, 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, 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, action });
+                  }}
+                >
+                  {action.buttonText}
+                </button>
+              ));
+            },
           },
-        },
-      ]
+        ]
       : [];
 
   const optionsData = columnData.map((column) => column.columnOptions?.selectOptions);
@@ -772,6 +772,8 @@ export function Table({
                       }
 
                       return (
+                        // Does not require key as its already being passed by react-table via cellProps
+                        // eslint-disable-next-line react/jsx-key
                         <td
                           className={cx({
                             'has-actions': cell.column.id === 'rightActions' || cell.column.id === 'leftActions',
@@ -805,62 +807,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={currentState.components[component.name]?.pageIndex ?? 1}
-                    serverSide={serverSidePagination}
-                    autoGotoPage={gotoPage}
-                    autoCanNextPage={canNextPage}
-                    autoPageCount={pageCount}
-                    autoPageOptions={pageOptions}
-                    onPageIndexChanged={onPageIndexChanged}
-                  />
-                )}
-              </div>
-
-              {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="card-footer d-flex align-items-center jet-table-footer">
+          <div className="table-footer row">
+            <div className="col">
+              {(clientSidePagination || serverSidePagination) && (
+                <Pagination
+                  lastActivePageIndex={currentState.components[component.name]?.pageIndex ?? 1}
+                  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>
+      )}
       {isFiltersVisible && (
         <div className="table-filters card">
           <div className="card-header row">