feat: add id as removable param for event list (#10289)

Also added ID as removable param, which can not be added from badge, but
can be added as query param.


![image](https://github.com/user-attachments/assets/fdb75dfa-b164-41b4-a57e-5cf5d2d9efea)

frontend/src/component/events/EventLog/EventLogFilters.test.tsx

@@ -81,3 +81,31 @@ test('When no groupId in URL params, should not include groupId filter', () => {
 
     expect(filterKeys).not.toContain('groupId');
 });
+
+test('When id is in URL params, should include id filter', () => {
+    const { result } = renderWithRouter(
+        () => useEventLogFilters([], []),
+        ['/?id=IS:456'],
+    );
+    const filterKeys = result.current.map((filter) => filter.filterKey);
+
+    expect(filterKeys).toContain('id');
+});
+
+test('When no id in URL params, should not include id filter', () => {
+    const { result } = renderWithRouter(() => useEventLogFilters([], []));
+    const filterKeys = result.current.map((filter) => filter.filterKey);
+
+    expect(filterKeys).not.toContain('id');
+});
+
+test('When both id and groupId are in URL params, should include both filters', () => {
+    const { result } = renderWithRouter(
+        () => useEventLogFilters([], []),
+        ['/?id=IS:456&groupId=IS:123'],
+    );
+    const filterKeys = result.current.map((filter) => filter.filterKey);
+
+    expect(filterKeys).toContain('id');
+    expect(filterKeys).toContain('groupId');
+});

frontend/src/component/events/EventLog/EventLogFilters.tsx

@@ -22,10 +22,42 @@ export const useEventLogFilters = (
     const location = useLocation();
     const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
 
+    const createRemovableFilterOptions = (
+        searchParams: URLSearchParams,
+        paramNames: string[],
+    ) => {
+        return paramNames.reduce(
+            (acc, paramName) => {
+                const hasParam = searchParams.has(paramName);
+                const paramValue = searchParams.get(paramName);
+
+                acc[paramName] =
+                    hasParam && paramValue
+                        ? (() => {
+                              const parsed = FilterItemParam.decode(paramValue);
+                              return parsed
+                                  ? [
+                                        {
+                                            label: parsed.values[0],
+                                            value: parsed.values[0],
+                                        },
+                                    ]
+                                  : [];
+                          })()
+                        : [];
+                return acc;
+            },
+            {} as Record<string, Array<{ label: string; value: string }>>,
+        );
+    };
+
     useEffect(() => {
         const searchParams = new URLSearchParams(location.search);
-        const hasGroupId = searchParams.has('groupId');
+
-        const groupIdValue = searchParams.get('groupId');
+        const removableOptions = createRemovableFilterOptions(searchParams, [
+            'id',
+            'groupId',
+        ]);
 
         const projectOptions =
             projects?.map((project: ProjectSchema) => ({
@@ -57,22 +89,6 @@ export const useEventLogFilters = (
                 value: env.name,
             })) ?? [];
 
-        const groupIdOptions =
-            hasGroupId && groupIdValue
-                ? (() => {
-                      const parsedGroupId =
-                          FilterItemParam.decode(groupIdValue);
-                      return parsedGroupId
-                          ? [
-                                {
-                                    label: parsedGroupId.values[0],
-                                    value: parsedGroupId.values[0],
-                                },
-                            ]
-                          : [];
-                  })()
-                : [];
-
         const availableFilters: IFilterItem[] = [
             {
                 label: 'Date From',
@@ -110,12 +126,25 @@ export const useEventLogFilters = (
                 singularOperators: ['IS'],
                 pluralOperators: ['IS_ANY_OF'],
             },
-            ...(hasGroupId
+            ...(removableOptions.id.length > 0
+                ? ([
+                      {
+                          label: 'Event ID',
+                          icon: 'tag',
+                          options: removableOptions.id,
+                          filterKey: 'id',
+                          singularOperators: ['IS'],
+                          pluralOperators: ['IS_ANY_OF'],
+                          persistent: false,
+                      },
+                  ] as IFilterItem[])
+                : []),
+            ...(removableOptions.groupId.length > 0
                 ? ([
                       {
                           label: 'Group ID',
-                          icon: 'group',
+                          icon: 'tag',
-                          options: groupIdOptions,
+                          options: removableOptions.groupId,
                           filterKey: 'groupId',
                           singularOperators: ['IS'],
                           pluralOperators: ['IS_ANY_OF'],

frontend/src/component/events/EventLog/useEventLogSearch.ts

@@ -72,7 +72,7 @@ export const useEventLogSearch = (
         createdBy: FilterItemParam,
         type: FilterItemParam,
         environment: FilterItemParam,
-        id: StringParam,
+        id: FilterItemParam,
         groupId: FilterItemParam,
         ...extraParameters(logType),
     };