From 1b892979d3356ced3d281a83986b98eafa1f83e9 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 13 Aug 2024 10:41:55 +0200
Subject: [PATCH] feat: add event creators data to filter (#7822)

Adds event creator data to the event creator filter.

It uses a new useEventCreators hook to fetch event creators from the new
API, and uses that to populate the event creators filter.
---
 .../events/EventLog/EventLogFilters.tsx       | 85 +++++++++++--------
 .../useEventCreators/useEventCreators.ts      | 13 +++
 2 files changed, 61 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/hooks/api/getters/useEventCreators/useEventCreators.ts

diff --git a/frontend/src/component/events/EventLog/EventLogFilters.tsx b/frontend/src/component/events/EventLog/EventLogFilters.tsx
index 80437afb31..2e80b9bb03 100644
--- a/frontend/src/component/events/EventLog/EventLogFilters.tsx
+++ b/frontend/src/component/events/EventLog/EventLogFilters.tsx
@@ -8,43 +8,49 @@ import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
 import { EventSchemaType } from 'openapi';
 import type { IProjectCard } from 'interfaces/project';
+import { useEventCreators } from 'hooks/api/getters/useEventCreators/useEventCreators';
 
-const sharedFilters: IFilterItem[] = [
-    {
-        label: 'Date From',
-        icon: 'today',
-        options: [],
-        filterKey: 'from',
-        dateOperators: ['IS'],
-    },
-    {
-        label: 'Date To',
-        icon: 'today',
-        options: [],
-        filterKey: 'to',
-        dateOperators: ['IS'],
-    },
-    {
-        // todo fill this in with actual values
-        label: 'Created by',
-        icon: 'person',
-        options: [],
-        filterKey: 'createdBy',
-        singularOperators: ['IS'],
-        pluralOperators: ['IS_ANY_OF'],
-    },
-    {
-        label: 'Event type',
-        icon: 'announcement',
-        options: Object.entries(EventSchemaType).map(([key, value]) => ({
-            label: key,
-            value: value,
-        })),
-        filterKey: 'type',
-        singularOperators: ['IS'],
-        pluralOperators: ['IS_ANY_OF'],
-    },
-];
+const useSharedFilters = (): IFilterItem[] => {
+    const { eventCreators } = useEventCreators();
+    return [
+        {
+            label: 'Date From',
+            icon: 'today',
+            options: [],
+            filterKey: 'from',
+            dateOperators: ['IS'],
+        },
+        {
+            label: 'Date To',
+            icon: 'today',
+            options: [],
+            filterKey: 'to',
+            dateOperators: ['IS'],
+        },
+        {
+            label: 'Created by',
+            icon: 'person',
+            options: eventCreators.map((creator) => ({
+                label: creator.name,
+                value: creator.id.toString(),
+            })),
+            filterKey: 'createdBy',
+            singularOperators: ['IS'],
+            pluralOperators: ['IS_ANY_OF'],
+        },
+        {
+            label: 'Event type',
+            icon: 'announcement',
+            options: Object.entries(EventSchemaType).map(([key, value]) => ({
+                label: key,
+                value: value,
+            })),
+            filterKey: 'type',
+            singularOperators: ['IS'],
+            pluralOperators: ['IS_ANY_OF'],
+        },
+    ];
+};
 
 type EventLogFiltersProps = {
     logType: 'flag' | 'project' | 'global';
@@ -60,6 +66,7 @@ export const EventLogFilters: FC<EventLogFiltersProps> = ({
 }) => {
     const { projects } = useProjects();
     const { features } = useFeatureSearch({});
+    const sharedFilters = useSharedFilters();
 
     const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
     useEffect(() => {
@@ -106,7 +113,11 @@ export const EventLogFilters: FC<EventLogFiltersProps> = ({
         ];
 
         setAvailableFilters(availableFilters);
-    }, [JSON.stringify(features), JSON.stringify(projects)]);
+    }, [
+        JSON.stringify(features),
+        JSON.stringify(projects),
+        JSON.stringify(sharedFilters),
+    ]);
 
     return (
         <Filters
diff --git a/frontend/src/hooks/api/getters/useEventCreators/useEventCreators.ts b/frontend/src/hooks/api/getters/useEventCreators/useEventCreators.ts
new file mode 100644
index 0000000000..39b4257353
--- /dev/null
+++ b/frontend/src/hooks/api/getters/useEventCreators/useEventCreators.ts
@@ -0,0 +1,13 @@
+import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter';
+import { formatApiPath } from 'utils/formatPath';
+import type { EventCreatorsSchema } from '../../../../openapi';
+
+export const useEventCreators = () => {
+    const PATH = `api/admin/event-creators`;
+    const { data, refetch, loading, error } = useApiGetter<EventCreatorsSchema>(
+        formatApiPath(PATH),
+        () => fetcher(formatApiPath(PATH), 'Event creators'),
+    );
+
+    return { eventCreators: data || [], refetch, error, loading };
+};