From 5e9e9381e9d4c08e59859f8e4b72eba0c9b436bb Mon Sep 17 00:00:00 2001
From: Kartik Gupta <gupta.kartik18kg@gmail.com>
Date: Wed, 4 Dec 2024 13:59:29 +0530
Subject: [PATCH] download event for table in server side pagination (#10330)

---
 .../AppBuilder/WidgetManager/widgets/table.js |  1 +
 .../Widgets/Table/Components/Footer.jsx       | 78 ++++++++++++-------
 .../src/AppBuilder/Widgets/Table/Table.jsx    |  5 ++
 .../AppBuilder/_stores/slices/eventsSlice.js  |  1 +
 server/src/helpers/widget-config/table.js     |  1 +
 5 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/table.js b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
index ff815bab07..8a89701494 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/table.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
@@ -289,6 +289,7 @@ export const tableConfig = {
     onCellValueChanged: { displayName: 'Cell value changed' },
     onFilterChanged: { displayName: 'Filter changed' },
     onNewRowsAdded: { displayName: 'Add new rows' },
+    onTableDataDownload: { displayName: 'Download data' },
   },
   styles: {
     textColor: {
diff --git a/frontend/src/AppBuilder/Widgets/Table/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/Table/Components/Footer.jsx
index 3d983d59fc..45a3fd19b2 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Components/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Components/Footer.jsx
@@ -58,6 +58,7 @@ export const Footer = React.memo(
     showAddNewRowPopup,
     downlaodPopover,
     getToggleHideAllColumnsProps,
+    isDownloadTableDataEventAssociated,
   }) => {
     function hideColumnsPopover() {
       return (
@@ -223,32 +224,57 @@ export const Footer = React.memo(
                 )}
                 {!loadingState && showDownloadButton && (
                   <div>
-                    <Tooltip id="tooltip-for-download" className="tooltip" />
-                    <OverlayTriggerComponent
-                      trigger="click"
-                      overlay={downlaodPopover()}
-                      rootClose={true}
-                      placement={'top-end'}
-                    >
-                      <ButtonSolid
-                        variant="ghostBlack"
-                        className={`tj-text-xsm `}
-                        customStyles={{
-                          minWidth: '32px',
-                        }}
-                        leftIcon="filedownload"
-                        fill={`var(--icons-default)`}
-                        iconWidth="16"
-                        size="md"
-                        data-tooltip-id="tooltip-for-download"
-                        data-tooltip-content="Download"
-                        onClick={(e) => {
-                          if (document.activeElement === e.currentTarget) {
-                            e.currentTarget.blur();
-                          }
-                        }}
-                      ></ButtonSolid>
-                    </OverlayTriggerComponent>
+                    {
+                      // if server side pagination is enabled and download event is associated with the table, then directly fire download event without displaying popover
+                      isDownloadTableDataEventAssociated && !clientSidePagination ? (
+                        <>
+                          <Tooltip id="tooltip-for-download-serverside-pagingation" className="tooltip" />
+                          <ButtonSolid
+                            variant="ghostBlack"
+                            className={`tj-text-xsm `}
+                            customStyles={{
+                              minWidth: '32px',
+                            }}
+                            leftIcon="filedownload"
+                            fill={`var(--icons-default)`}
+                            iconWidth="16"
+                            size="md"
+                            data-tooltip-id="tooltip-for-download-serverside-pagingation"
+                            data-tooltip-content="Download"
+                            onClick={() => fireEvent('onTableDataDownload')}
+                          ></ButtonSolid>
+                        </>
+                      ) : (
+                        <>
+                          <Tooltip id="tooltip-for-download" className="tooltip" />
+                          <OverlayTriggerComponent
+                            trigger="click"
+                            overlay={downlaodPopover()}
+                            rootClose={true}
+                            placement={'top-end'}
+                          >
+                            <ButtonSolid
+                              variant="ghostBlack"
+                              className={`tj-text-xsm `}
+                              customStyles={{
+                                minWidth: '32px',
+                              }}
+                              leftIcon="filedownload"
+                              fill={`var(--icons-default)`}
+                              iconWidth="16"
+                              size="md"
+                              data-tooltip-id="tooltip-for-download"
+                              data-tooltip-content="Download"
+                              onClick={(e) => {
+                                if (document.activeElement === e.currentTarget) {
+                                  e.currentTarget.blur();
+                                }
+                              }}
+                            ></ButtonSolid>
+                          </OverlayTriggerComponent>
+                        </>
+                      )
+                    }
                   </div>
                 )}
                 {!loadingState && !hideColumnSelectorButton && (
diff --git a/frontend/src/AppBuilder/Widgets/Table/Table.jsx b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
index c38294eab7..17714791cf 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Table.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
@@ -154,6 +154,7 @@ export const Table = React.memo(
     const [tableDetails, dispatch] = useReducer(reducer, initialState());
     const [hoverAdded, setHoverAdded] = useState(false);
     const [generatedColumn, setGeneratedColumn] = useState([]);
+    const [isDownloadTableDataEventAssociated, setIsDownloadTableDataEventAssociated] = useState(false);
 
     const mergeToTableDetails = useCallback((payload) => dispatch(reducerActions.mergeToTableDetails(payload)), []);
     const mergeToFilterDetails = (payload) => dispatch(reducerActions.mergeToFilterDetails(payload));
@@ -175,6 +176,9 @@ export const Table = React.memo(
     useEffect(() => mergeToTableDetails({ columnProperties: properties?.columns }), [properties?.columns]);
 
     useEffect(() => {
+      const isDownloadTableDataEventAssociated = tableEvents.some((event) => event?.name === 'onTableDataDownload');
+      if (isDownloadTableDataEventAssociated) setIsDownloadTableDataEventAssociated(true);
+      else setIsDownloadTableDataEventAssociated(false);
       const hoverEvent = tableEvents?.find(({ event }) => {
         return event?.eventId == 'onRowHovered';
       });
@@ -1167,6 +1171,7 @@ export const Table = React.memo(
           {loadingState ? <LoadingState /> : page.length === 0 ? <EmptyState /> : null}
         </div>
         <Footer
+          isDownloadTableDataEventAssociated={isDownloadTableDataEventAssociated}
           enablePagination={enablePagination}
           tableDetails={tableDetails}
           loadingState={loadingState}
diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index 6817e6aa39..43b567732a 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -361,6 +361,7 @@ export const createEventsSlice = (set, get) => ({
           'onSubmit',
           'onInvalid',
           'onNewRowsAdded',
+          'onTableDataDownload',
         ].includes(eventName)
       ) {
         executeActionsForEventId(eventName, events, mode, customVariables);
diff --git a/server/src/helpers/widget-config/table.js b/server/src/helpers/widget-config/table.js
index bd2580b7b6..735feccbc7 100644
--- a/server/src/helpers/widget-config/table.js
+++ b/server/src/helpers/widget-config/table.js
@@ -289,6 +289,7 @@ export const tableConfig = {
     onCellValueChanged: { displayName: 'Cell value changed' },
     onFilterChanged: { displayName: 'Filter changed' },
     onNewRowsAdded: { displayName: 'Add new rows' },
+    onTableDataDownload: { displayName: 'Download data' },
   },
   styles: {
     textColor: {