[WEB-1501] chore: update selected entity details on entities list change (#4702)

* chore: update selected entity detials on entities list change

* chore: addd selectionHelpers as a prop

web/components/gantt-chart/chart/main-content.tsx

@@ -162,7 +162,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
               )}
             </div>
           </div>
-          <IssueBulkOperationsRoot />
+          <IssueBulkOperationsRoot selectionHelpers={helpers} />
         </>
       )}
     </MultipleSelectGroup>

web/components/issues/bulk-operations/root.tsx

@@ -3,9 +3,11 @@ import { observer } from "mobx-react";
 import { BulkOperationsUpgradeBanner } from "@/components/issues";
 // hooks
 import { useMultipleSelectStore } from "@/hooks/store";
+import { TSelectionHelper } from "@/hooks/use-multiple-select";
 
 type Props = {
   className?: string;
+  selectionHelpers: TSelectionHelper;
 };
 
 export const IssueBulkOperationsRoot: React.FC<Props> = observer((props) => {

web/components/issues/issue-layouts/list/default.tsx

@@ -170,7 +170,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                     )
                 )}
               </div>
-              <IssueBulkOperationsRoot />
+              <IssueBulkOperationsRoot selectionHelpers={helpers} />
             </>
           )}
         </MultipleSelectGroup>

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -107,7 +107,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                 )}
               </div>
             </div>
-            <IssueBulkOperationsRoot />
+            <IssueBulkOperationsRoot selectionHelpers={helpers} />
           </>
         )}
       </MultipleSelectGroup>

web/hooks/use-multiple-select.ts

@@ -33,6 +33,7 @@ export const useMultipleSelect = (props: Props) => {
   const router = useRouter();
   // store hooks
   const {
+    selectedEntityIds,
     updateSelectedEntityDetails,
     bulkUpdateSelectedEntityDetails,
     getActiveEntityDetails,
@@ -45,6 +46,7 @@ export const useMultipleSelect = (props: Props) => {
     clearSelection,
     getIsEntitySelected,
     getIsEntityActive,
+    getEntityDetailsFromEntityID,
   } = useMultipleSelectStore();
 
   const groups = useMemo(() => Object.keys(entities), [entities]);
@@ -248,10 +250,6 @@ export const useMultipleSelect = (props: Props) => {
     (groupID: string) => {
       const groupEntities = entitiesList.filter((entity) => entity.groupID === groupID);
       const groupSelectionStatus = isGroupSelected(groupID);
-      // groupEntities.map((entity) => {
-      //   console.log("group click");
-      //   handleEntitySelection(entity, false, groupSelectionStatus === "empty" ? "force-add" : "force-remove");
-      // });
       handleEntitySelection(groupEntities, false, groupSelectionStatus === "empty" ? "force-add" : "force-remove");
     },
     [entitiesList, handleEntitySelection, isGroupSelected]
@@ -346,6 +344,19 @@ export const useMultipleSelect = (props: Props) => {
     };
   }, [clearSelection, router.events]);
 
+  // when entities list change, remove entityIds from the selected entities array, which are not present in the new list
+  useEffect(() => {
+    selectedEntityIds.map((entityID) => {
+      const isEntityPresent = entitiesList.find((en) => en.entityID === entityID);
+      if (!isEntityPresent) {
+        const entityDetails = getEntityDetailsFromEntityID(entityID);
+        if (entityDetails) {
+          handleEntitySelection(entityDetails);
+        }
+      }
+    });
+  }, [entitiesList, getEntityDetailsFromEntityID, handleEntitySelection, selectedEntityIds]);
+
   /**
    * @description helper functions for selection
    */

web/store/multiple_select.store.ts

@@ -19,6 +19,7 @@ export type IMultipleSelectStore = {
   getPreviousActiveEntity: () => TEntityDetails | null;
   getNextActiveEntity: () => TEntityDetails | null;
   getActiveEntityDetails: () => TEntityDetails | null;
+  getEntityDetailsFromEntityID: (entityID: string) => TEntityDetails | null;
   // entity actions
   updateSelectedEntityDetails: (entityDetails: TEntityDetails, action: "add" | "remove") => void;
   bulkUpdateSelectedEntityDetails: (entitiesList: TEntityDetails[], action: "add" | "remove") => void;
@@ -119,6 +120,16 @@ export class MultipleSelectStore implements IMultipleSelectStore {
    */
   getActiveEntityDetails = computedFn(() => this.activeEntityDetails);
 
+  /**
+   * @description get the entity details from entityID
+   * @param {string} entityID
+   * @returns {TEntityDetails | null}
+   */
+  getEntityDetailsFromEntityID = computedFn(
+    (entityID: string): TEntityDetails | null =>
+      this.selectedEntityDetails.find((en) => en.entityID === entityID) ?? null
+  );
+
   // entity actions
   /**
    * @description add or remove entities
@@ -159,8 +170,11 @@ export class MultipleSelectStore implements IMultipleSelectStore {
         if (entitiesList.length > 0) this.updateLastSelectedEntityDetails(entitiesList[entitiesList.length - 1]);
       });
     } else {
+      const newEntities = differenceWith(this.selectedEntityDetails, entitiesList, (obj1, obj2) =>
+        isEqual(obj1.entityID, obj2.entityID)
+      );
       runInAction(() => {
-        this.selectedEntityDetails = differenceWith(this.selectedEntityDetails, entitiesList, isEqual);
+        this.selectedEntityDetails = newEntities;
       });
     }
   };