diff --git a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts index 0b17164227b..6c6ba1dc023 100644 --- a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts +++ b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.test.ts @@ -151,4 +151,50 @@ describe('ResourcesListLayout', () => { expect(emitted()['update:pagination-and-sort']).toBeTruthy(); expect(emitted()['update:pagination-and-sort'].pop()).toEqual([TEST_LOCAL_STORAGE_VALUES]); }); + + it('should display info text if filters are applied', async () => { + const { getByTestId } = renderComponent({ + props: { + resources: TEST_WORKFLOWS, + type: 'list-paginated', + showFiltersDropdown: true, + filters: { + search: '', + homeProject: '', + showArchived: true, + testFilter: true, + }, + }, + }); + + await waitAllPromises(); + expect(getByTestId('resources-list-filters-applied-info')).toBeInTheDocument(); + expect(getByTestId('workflows-filter-reset')).toBeInTheDocument(); + expect(getByTestId('resources-list-filters-applied-info').textContent).toContain( + 'Some workflows may be hidden since filters are applied.', + ); + }); + + it('should display different info text if all applied filters display more results', async () => { + const { getByTestId } = renderComponent({ + props: { + resources: TEST_WORKFLOWS, + type: 'list-paginated', + showFiltersDropdown: true, + filters: { + search: '', + homeProject: '', + tags: [], + showArchived: true, + }, + }, + }); + + await waitAllPromises(); + expect(getByTestId('resources-list-filters-applied-info')).toBeInTheDocument(); + expect(getByTestId('workflows-filter-reset')).toBeInTheDocument(); + expect(getByTestId('resources-list-filters-applied-info').textContent).toContain( + 'Filters are applied.', + ); + }); }); diff --git a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue index d34f5e69a8e..69be1bdf9d6 100644 --- a/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue +++ b/packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue @@ -334,20 +334,32 @@ const focusSearchInput = () => { } }; -const hasAppliedFilters = (): boolean => { - return !!filterKeys.value.find((key) => { - if (key === 'search') return false; +const isFilterApplied = (key: string): boolean => { + if (key === 'search') return false; - if (typeof props.filters[key] === 'boolean') { - return props.filters[key]; - } + if (typeof props.filters[key] === 'boolean') { + return props.filters[key]; + } - if (Array.isArray(props.filters[key])) { - return props.filters[key].length > 0; - } + if (Array.isArray(props.filters[key])) { + return props.filters[key].length > 0; + } - return props.filters[key] !== ''; + return props.filters[key] !== ''; +}; + +const hasOnlyFiltersThatShowMoreResults = computed(() => { + const activeFilters = filterKeys.value.filter(isFilterApplied); + + const filtersThatShowMoreResults = ['showArchived']; + + return activeFilters.every((filter) => { + return filtersThatShowMoreResults.includes(filter); }); +}); + +const hasAppliedFilters = (): boolean => { + return !!filterKeys.value.find(isFilterApplied); }; const setRowsPerPage = async (numberOfRowsPerPage: number) => { @@ -667,9 +679,18 @@ defineExpose({ -
+
- {{ i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey) }} + {{ + hasOnlyFiltersThatShowMoreResults + ? i18n.baseText(`${resourceKey}.filters.active.shortText` as BaseTextKey) + : i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey) + }} {{ i18n.baseText(`${resourceKey}.filters.active.reset` as BaseTextKey) }} diff --git a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json b/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json index e3e45a71b40..d231f4593fa 100644 --- a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json +++ b/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json @@ -2498,6 +2498,7 @@ "workflows.filters.apply": "Apply filters", "workflows.filters.reset": "Reset all", "workflows.filters.active": "Some workflows may be hidden since filters are applied.", + "workflows.filters.active.shortText": "Filters are applied.", "workflows.filters.active.reset": "Remove filters", "workflows.sort.lastUpdated": "Sort by last updated", "workflows.sort.lastCreated": "Sort by last created",