Fix notification user filtering

src/components/Tables/notification-history/NotificationHistoryListFilters.tsx

@@ -4,6 +4,10 @@ import InputGroup from "@/components/FormElements/InputGroup";
 import { Select } from "@/components/FormElements/select";
 import { Button } from "@/components/ui-elements/button";
 import InlineListFiltersPanel from "@/components/ui/InlineListFiltersPanel";
+import { useUser } from "@/contexts";
+import { apiDefaultParams } from "@/constants/Api_Params";
+import { userService } from "@/lib/api/services/user-services";
+import { ILabelValue } from "@/types/shared";
 import {
   FieldValues,
   UseFormHandleSubmit,
@@ -34,11 +38,38 @@ function countActive(values: Record<string, unknown>): number {
   ) {
     n++;
   }
+  const userId = values.user_id;
+  if (
+    userId !== undefined &&
+    userId !== null &&
+    userId !== "" &&
+    String(userId).trim()
+  ) {
+    n++;
+  }
   const searchVal = values.search;
   if (typeof searchVal === "string" && searchVal.trim()) n++;
   return n;
 }
 
+const searchUsers = async (query: string): Promise<ILabelValue[]> => {
+  const response = await userService.adminsList({
+    ...apiDefaultParams,
+    search: query,
+    offset: 0,
+    limit: 20,
+  });
+
+  return (response.data?.users ?? []).map((user) => ({
+    value: user.id,
+    label:
+      user.full_name ||
+      user.username ||
+      user.email ||
+      user.id,
+  }));
+};
+
 const NotificationHistoryListFilters = ({
   filterRegister,
   isMutating,
@@ -48,7 +79,22 @@ const NotificationHistoryListFilters = ({
   setValue,
   onClearAll,
 }: NotificationHistoryListFiltersProps) => {
+  const { user } = useUser();
   const watched = watch();
+  const currentUserOption = useMemo<ILabelValue[]>(() => {
+    if (!user?.id) return [];
+
+    return [
+      {
+        value: user.id,
+        label:
+          user.full_name ||
+          user.username ||
+          user.email ||
+          user.id,
+      },
+    ];
+  }, [user?.email, user?.full_name, user?.id, user?.username]);
   const activeCount = useMemo(
     () => countActive(watched as Record<string, unknown>),
     [watched],
@@ -68,7 +114,7 @@ const NotificationHistoryListFilters = ({
         onSubmit={handleFilterSubmit(search)}
         data-cy="notification-history-filter-form"
       >
-        <div className="grid gap-4 sm:grid-cols-2">
+        <div className="grid gap-4 lg:grid-cols-3">
           <Select
             {...filterRegister("seen")}
             items={[
@@ -82,6 +128,22 @@ const NotificationHistoryListFilters = ({
             value={watch("seen")}
             onClear={() => setValue("seen", undefined)}
           />
+          <Select
+            {...filterRegister("user_id")}
+            items={currentUserOption}
+            label="User"
+            name="user_id"
+            placeholder="Current user"
+            clearable
+            searchable
+            searchMode="server"
+            searchPlaceholder="Search users"
+            searchQueryKey={["notification-history-user-filter"]}
+            searchFn={searchUsers}
+            value={watch("user_id")}
+            onClear={() => setValue("user_id", undefined)}
+            dataCy="notification-history-filter-user-select"
+          />
           <InputGroup
             {...filterRegister("search")}
             name="search"

src/components/Tables/notification-history/useNotificationHistoryTablePresenter.ts

@@ -83,7 +83,7 @@ const useNotificationHistoryTablePresenter = () => {
   };
 
   const clearAllFilters = useCallback(() => {
-    filterFormReset({ seen: undefined, search: "" });
+    filterFormReset({ seen: undefined, search: "", user_id: undefined });
     router.push(pathName);
   }, [pathName, router, filterFormReset]);