From f4c56225fcf403c71e1cf890322177a6065b8e7f Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Fri, 3 Dec 2021 15:14:04 +0530
Subject: [PATCH 1/3] table string column input field max width fix (#1504)

* lint fixes

* fix
---
 .../src/Editor/Components/Table/Table.jsx     | 213 +++++++++---------
 1 file changed, 107 insertions(+), 106 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 76f19473f2..58aabcb25b 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -360,7 +360,7 @@ export function Table({
                 <div>
                   <input
                     type="text"
-                    style={cellStyles}
+                    style={{ ...cellStyles, maxWidth: width, minWidth: width - 10 }}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter') {
                         if (e.target.defaultValue !== e.target.value) {
@@ -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,8 +835,9 @@ 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();
@@ -898,62 +899,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="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={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>
+      )}
       {isFiltersVisible && (
         <div className="table-filters card">
           <div className="card-header row">

From 05ac0e470eecf740d6487924d475ff5928be007a Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Fri, 3 Dec 2021 15:17:34 +0530
Subject: [PATCH 2/3] Fixes #1498 - serverside pagination fix (#1500)

* lint fixes

* serverside pagination limits records to 10: fix
---
 frontend/src/Editor/Components/Table/Table.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 58aabcb25b..8dfac270b8 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -745,7 +745,7 @@ export function Table({
     if (!serverSidePagination && clientSidePagination) {
       setPageSize(10);
     }
-  }, [clientSidePagination, serverSidePagination]);
+  }, [clientSidePagination, serverSidePagination, rows]);
 
   useEffect(() => {
     const pageData = page.map((row) => row.original);

From f43b19960ccdd0920661812bbd89d9141828d5fb Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Fri, 3 Dec 2021 16:06:24 +0530
Subject: [PATCH 3/3] fixes: text type columns of tables cannot be marked as
 "not editable" (#1502)

* fix

* isEditable set to true, run handleCellValueChange function
---
 frontend/src/Editor/Components/Table/Table.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 8dfac270b8..9e75de5ad0 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -400,7 +400,9 @@ export function Table({
                 readOnly={!column.isEditable}
                 style={{ maxWidth: width, minWidth: width - 10 }}
                 onBlur={(e) => {
-                  handleCellValueChange(cell.row.index, column.key || column.name, e.target.value, cell.row.original);
+                  if (column.isEditable) {
+                    handleCellValueChange(cell.row.index, column.key || column.name, e.target.value, cell.row.original);
+                  }
                 }}
                 defaultValue={cellValue}
               ></textarea>