diff --git a/frontend/src/component/events/EventLog/EventLogFilters.test.tsx b/frontend/src/component/events/EventLog/EventLogFilters.test.tsx index dc7ac64905..1df098099a 100644 --- a/frontend/src/component/events/EventLog/EventLogFilters.test.tsx +++ b/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'); +}); diff --git a/frontend/src/component/events/EventLog/EventLogFilters.tsx b/frontend/src/component/events/EventLog/EventLogFilters.tsx index 5d089fe0bf..e26bcb6fb3 100644 --- a/frontend/src/component/events/EventLog/EventLogFilters.tsx +++ b/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>, + ); + }; + + 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'],