[Security Solution] [Timelines] Refresh notes table in thunk when del…

…eting (elastic#187428)

## Summary

Fixes an issue where the table was not being properly updated upon
deletion.

![delete_count_update](https://github.com/elastic/kibana/assets/56408403/efd1e463-266a-4ce3-b34b-2a963ce44ae4)


### Checklist


- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/plugins/security_solution/public/notes/components/delete_confirm_modal.tsx

@@ -27,7 +27,7 @@ export const DeleteConfirmModal = React.memo(() => {
   }, [dispatch]);
 
   const onConfirm = useCallback(() => {
-    dispatch(deleteNotes({ ids: pendingDeleteIds }));
+    dispatch(deleteNotes({ ids: pendingDeleteIds, refetch: true }));
   }, [dispatch, pendingDeleteIds]);
 
   return (

x-pack/plugins/security_solution/public/notes/components/utility_bar.tsx

@@ -28,14 +28,13 @@ export const NotesUtilityBar = React.memo(() => {
   const dispatch = useDispatch();
   const pagination = useSelector(selectNotesPagination);
   const sort = useSelector(selectNotesTableSort);
-  const totalItems = pagination.total ?? 0;
   const selectedItems = useSelector(selectNotesTableSelectedIds);
   const resultsCount = useMemo(() => {
-    const { perPage, page } = pagination;
+    const { perPage, page, total } = pagination;
     const startOfCurrentPage = perPage * (page - 1) + 1;
-    const endOfCurrentPage = Math.min(perPage * page, totalItems);
-    return perPage === 0 ? 'All' : `${startOfCurrentPage}-${endOfCurrentPage} of ${totalItems}`;
-  }, [pagination, totalItems]);
+    const endOfCurrentPage = Math.min(perPage * page, total);
+    return perPage === 0 ? 'All' : `${startOfCurrentPage}-${endOfCurrentPage} of ${total}`;
+  }, [pagination]);
   const deleteSelectedNotes = useCallback(() => {
     dispatch(userSelectedBulkDelete());
   }, [dispatch]);

x-pack/plugins/security_solution/public/notes/pages/note_management_page.tsx

@@ -72,7 +72,6 @@ export const NoteManagementPage = () => {
   const notes = useSelector(selectAllNotes);
   const pagination = useSelector(selectNotesPagination);
   const sort = useSelector(selectNotesTableSort);
-  const totalItems = pagination.total ?? 0;
   const notesSearch = useSelector(selectNotesTableSearch);
   const pendingDeleteIds = useSelector(selectNotesTablePendingDeleteIds);
   const isDeleteModalVisible = pendingDeleteIds.length > 0;
@@ -160,10 +159,10 @@ export const NoteManagementPage = () => {
     return {
       pageIndex: pagination.page - 1,
       pageSize: pagination.perPage,
-      totalItemCount: totalItems,
+      totalItemCount: pagination.total,
       pageSizeOptions,
     };
-  }, [pagination, totalItems]);
+  }, [pagination]);
 
   const selection = useMemo(() => {
     return {

x-pack/plugins/security_solution/public/notes/store/notes.slice.ts

@@ -127,11 +127,25 @@ export const createNote = createAsyncThunk<NormalizedEntity<Note>, { note: BareN
   }
 );
 
-export const deleteNotes = createAsyncThunk<string[], { ids: string[] }, {}>(
+export const deleteNotes = createAsyncThunk<string[], { ids: string[]; refetch?: boolean }, {}>(
   'notes/deleteNotes',
-  async (args) => {
-    const { ids } = args;
+  async (args, { dispatch, getState }) => {
+    const { ids, refetch } = args;
     await deleteNotesApi(ids);
+    if (refetch) {
+      const state = getState() as State;
+      const { search, pagination, sort } = state.notes;
+      dispatch(
+        fetchNotes({
+          page: pagination.page,
+          perPage: pagination.perPage,
+          sortField: sort.field,
+          sortOrder: sort.direction,
+          filter: '',
+          search,
+        })
+      );
+    }
     return ids;
   }
 );