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({