From 0964526809885bceb9aa29034d9e9af6ad9f1003 Mon Sep 17 00:00:00 2001
From: arpitnath <arpitnath42@gmail.com>
Date: Thu, 28 Sep 2023 13:21:08 +0530
Subject: [PATCH] fixes: cascade events for table actions and colulmns

---
 .../Inspector/Components/Table/Table.jsx      | 31 ++++++++++++++++---
 .../src/Editor/Inspector/EventManager.jsx     |  9 ++++++
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
index d4e066b545..951dc14724 100644
--- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
@@ -17,6 +17,7 @@ import List from '@/ToolJetUI/List/List';
 import { capitalize, has } from 'lodash';
 import NoListItem from './NoListItem';
 import { ProgramaticallyHandleProperties } from './ProgramaticallyHandleProperties';
+import { useAppDataStore } from '@/_stores/appDataStore';
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -747,6 +748,18 @@ class TableComponent extends React.Component {
     );
   };
 
+  deletEvents = (ref, eventTarget) => {
+    const events = useAppDataStore.getState().events?.filter((e) => e.target === eventTarget);
+
+    const toDelete = events?.filter((e) => e.event?.ref === ref.ref);
+
+    return new Promise.all(
+      toDelete?.forEach((e) => {
+        return useAppDataStore.getState().actions.deleteAppVersionEventHandler(e.id);
+      })
+    );
+  };
+
   actionPopOver = (action, index) => {
     const dummyComponentForActionButton = {
       component: {
@@ -756,6 +769,8 @@ class TableComponent extends React.Component {
       },
     };
 
+    const actionRef = { ref: `${action?.name}-${index}` };
+
     return (
       <Popover id="popover-basic" className={`${this.props.darkMode && 'dark-theme'}`}>
         <Popover.Body>
@@ -827,6 +842,7 @@ class TableComponent extends React.Component {
             component={dummyComponentForActionButton}
             sourceId={this.props?.component?.id}
             eventSourceType="table_action"
+            customEventRefs={actionRef}
             eventMetaDefinition={{ events: { onClick: { displayName: 'On click' } } }}
             currentState={this.state.currentState}
             dataQueries={this.props.dataQueries}
@@ -839,7 +855,10 @@ class TableComponent extends React.Component {
             }}
             pages={this.props.pages}
           />
-          <button className="btn btn-sm btn-outline-danger mt-2 col" onClick={() => this.removeAction(index)}>
+          <button
+            className="btn btn-sm btn-outline-danger mt-2 col"
+            onClick={() => this.removeAction(index, actionRef)}
+          >
             {this.props.t('widget.Table.remove', 'Remove')}
           </button>
         </Popover.Body>
@@ -900,10 +919,11 @@ class TableComponent extends React.Component {
     this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties', true);
   };
 
-  removeAction = (index) => {
+  removeAction = (index, ref) => {
     const newValue = this.props.component.component.definition.properties.actions.value;
     newValue.splice(index, 1);
     this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties', true);
+    this.deletEvents(ref, 'table-action');
   };
 
   onColumnItemChange = (index, item, value) => {
@@ -922,7 +942,7 @@ class TableComponent extends React.Component {
     ...draggableStyle,
   });
 
-  removeColumn = (index) => {
+  removeColumn = (index, ref) => {
     const columns = this.props.component.component.definition.properties.columns;
     const newValue = columns.value;
     const removedColumns = newValue.splice(index, 1);
@@ -935,6 +955,8 @@ class TableComponent extends React.Component {
       ...removedColumns.map((column) => column.key || column.name),
     ];
     this.props.paramUpdated({ name: 'columnDeletionHistory' }, 'value', newcolumnDeletionHistory, 'properties', true);
+
+    this.deletEvents(ref, 'table_column');
   };
 
   reorderColumns = (startIndex, endIndex) => {
@@ -1055,7 +1077,8 @@ class TableComponent extends React.Component {
                                       enableActionsMenu
                                       isEditable={item.isEditable === '{{true}}'}
                                       onMenuOptionClick={(listItem, menuOptionLabel) => {
-                                        if (menuOptionLabel === 'Delete') this.removeColumn(index);
+                                        if (menuOptionLabel === 'Delete')
+                                          this.removeColumn(index, `${item.name}-${index}`);
                                       }}
                                       darkMode={darkMode}
                                       menuActions={[
diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index a7875cfa9f..372d2e228f 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -37,7 +37,9 @@ export const EventManager = ({
   pages,
   hideEmptyEventsAlert,
   callerQueryId,
+  customEventRefs = {},
 }) => {
+  console.log('---arpit:: customRef', { customEventRefs });
   const dataQueries = useDataQueriesStore(({ dataQueries = [] }) => {
     if (callerQueryId) {
       //filter the same query getting attached to itself
@@ -51,6 +53,12 @@ export const EventManager = ({
     useAppDataActions();
 
   const currentEvents = allAppEvents.filter((event) => {
+    if (customEventRefs) {
+      if (event.event.ref !== customEventRefs.ref) {
+        return false;
+      }
+    }
+
     return event.sourceId === sourceId && event.target === eventSourceType;
   });
 
@@ -259,6 +267,7 @@ export const EventManager = ({
         actionId: 'show-alert',
         message: 'Hello world!',
         alertType: 'info',
+        ...customEventRefs,
       },
       eventType: eventSourceType,
       attachedTo: sourceId,