[TM-1531] add bulk update call on clear

src/components/elements/Notification/FloatNotification.tsx

@@ -1,9 +1,10 @@
 import classNames from "classnames";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { When } from "react-if";
 
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import { useDelayedJobs } from "@/connections/DelayedJob";
+import { triggerBulkUpdate, useDelayedJobs } from "@/connections/DelayedJob";
+import { DelayedJobData, DelayedJobDto } from "@/generated/v3/jobService/jobServiceSchemas";
 
 import Text from "../Text/Text";
 
@@ -21,9 +22,19 @@ const FloatNotification = () => {
   const [openModalNotification, setOpenModalNotification] = useState(false);
   const [isLoaded, { delayedJobs }] = useDelayedJobs();
 
-  useEffect(() => {
-    console.log("delayedJobs", delayedJobs);
-  }, [isLoaded, delayedJobs]);
+  const clearJobs = () => {
+    if (delayedJobs === undefined) return;
+    const newJobsData: DelayedJobData[] = delayedJobs.map((job: DelayedJobDto) => {
+      return {
+        uuid: job.uuid,
+        type: "delayedJobs",
+        attributes: {
+          isAcknowledged: true
+        }
+      };
+    });
+    triggerBulkUpdate(newJobsData);
+  };
   return (
     <div className="fixed bottom-10 right-10 z-50">
       <div className="relative">
@@ -42,7 +53,7 @@ const FloatNotification = () => {
               <Text variant="text-14-light" className="text-neutral-400">
                 Actions Taken
               </Text>
-              <Text variant="text-12-semibold" className="text-primary">
+              <Text variant="text-12-semibold" className="text-primary" onClick={clearJobs}>
                 Clear completed
               </Text>
             </div>

src/connections/DelayedJob.ts

@@ -1,12 +1,17 @@
 import { createSelector } from "reselect";
 
-import { listDelayedJobs } from "@/generated/v3/jobService/jobServiceComponents";
-import { listDelayedJobsFetchFailed } from "@/generated/v3/jobService/jobServicePredicates";
-import { DelayedJobDto } from "@/generated/v3/jobService/jobServiceSchemas";
+import { bulkUpdateJobs, listDelayedJobs } from "@/generated/v3/jobService/jobServiceComponents";
+import {
+  bulkUpdateJobsFetchFailed,
+  bulkUpdateJobsIsFetching,
+  listDelayedJobsFetchFailed
+} from "@/generated/v3/jobService/jobServicePredicates";
+import { DelayedJobData, DelayedJobDto } from "@/generated/v3/jobService/jobServiceSchemas";
 import { ApiDataStore } from "@/store/apiSlice";
 import { Connection } from "@/types/connection";
-import { connectionHook } from "@/utils/connectionShortcuts";
+import { connectionHook, connectionLoader } from "@/utils/connectionShortcuts";
 
+// --- Delayed Jobs Connection ---
 type DelayedJobsConnection = {
   delayedJobs?: DelayedJobDto[];
   isLoading: boolean;
@@ -44,4 +49,39 @@ const delayedJobsConnection: Connection<DelayedJobsConnection> = {
   )
 };
 
+export const triggerBulkUpdate = (jobs: DelayedJobData[]) => {
+  return bulkUpdateJobs({ body: { data: jobs } });
+};
+
+const bulkUpdateJobsSelector = (store: ApiDataStore) => {
+  const bulkUpdateState = store.delayedJobs || {};
+  return {
+    isLoading: bulkUpdateJobsIsFetching(store),
+    hasLoadFailed: bulkUpdateJobsFetchFailed(store) != null,
+    response: bulkUpdateState.response
+  };
+};
+
+const bulkUpdateJobsConnection: Connection<DelayedJobsConnection, { jobs: DelayedJobData[] }> = {
+  load: async (connection, { jobs }) => {
+    const isLoaded = connectionBulkUpdateIsLoaded(connection);
+    if (!isLoaded) {
+      await bulkUpdateJobs({ body: { data: jobs } });
+    }
+  },
+
+  isLoaded: state => !state.isLoading,
+
+  selector: createSelector([store => bulkUpdateJobsSelector(store)], ({ isLoading, hasLoadFailed, response }) => ({
+    isLoading,
+    hasLoadFailed,
+    response
+  }))
+};
+
+const connectionBulkUpdateIsLoaded = ({ isLoading, hasLoadFailed }: { isLoading: boolean; hasLoadFailed: boolean }) => {
+  return !isLoading && !hasLoadFailed;
+};
+
 export const useDelayedJobs = connectionHook(delayedJobsConnection);
+export const useBulkUpdateJobs = connectionLoader(bulkUpdateJobsConnection);

src/generated/v3/jobService/jobServiceSchemas.ts

@@ -4,6 +4,10 @@
  * @version 1.0
  */
 export type DelayedJobDto = {
+  /**
+   * The unique identifier for the delayed job.
+   */
+  uuid: string;
   /**
    * The current status of the job. If the status is not pending, the payload and statusCode will be provided.
    */

src/store/apiSlice.ts

@@ -45,6 +45,7 @@ export type Relationships = {
 };
 
 export type StoreResource<AttributeType> = {
+  id?: string;
   attributes: AttributeType;
   // We do a bit of munging on the shape from the API, removing the intermediate "data" member, and
   // ensuring there's always an array, to make consuming the data clientside a little smoother.