feat: add generic removable params method

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

@@ -24,8 +24,38 @@ export const useEventLogFilters = (
 
     useEffect(() => {
         const searchParams = new URLSearchParams(location.search);
-        const hasGroupId = searchParams.has('groupId');
+
-        const groupIdValue = searchParams.get('groupId');
+        const createRemovableFilterOptions = (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 }>>,
+            );
+        };
+
+        const removableOptions = createRemovableFilterOptions([
+            'id',
+            'groupId',
+        ]);
 
         const projectOptions =
             projects?.map((project: ProjectSchema) => ({
@@ -57,22 +87,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 +124,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',
-                          options: groupIdOptions,
+                          options: removableOptions.groupId,
                           filterKey: 'groupId',
                           singularOperators: ['IS'],
                           pluralOperators: ['IS_ANY_OF'],