feat(editor): Change text when all applied filters add results (no-changelog) (#15198)

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.',
+		);
+	});
 });

packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -334,20 +334,32 @@ const focusSearchInput = () => {
 	}
 };
 
-const hasAppliedFilters = (): boolean => {
+const isFilterApplied = (key: string): boolean => {
-	return !!filterKeys.value.find((key) => {
+	if (key === 'search') return false;
-		if (key === 'search') return false;
 
-		if (typeof props.filters[key] === 'boolean') {
+	if (typeof props.filters[key] === 'boolean') {
-			return props.filters[key];
+		return props.filters[key];
-		}
+	}
 
-		if (Array.isArray(props.filters[key])) {
+	if (Array.isArray(props.filters[key])) {
-			return props.filters[key].length > 0;
+		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({
 
 					<slot name="callout"></slot>
 
-					<div v-if="showFiltersDropdown" v-show="hasFilters" class="mt-xs">
+					<div
+						v-if="showFiltersDropdown"
+						v-show="hasFilters"
+						class="mt-xs"
+						data-test-id="resources-list-filters-applied-info"
+					>
 						<n8n-info-tip :bold="false">
-							{{ i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey) }}
+							{{
+								hasOnlyFiltersThatShowMoreResults
+									? i18n.baseText(`${resourceKey}.filters.active.shortText` as BaseTextKey)
+									: i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey)
+							}}
 							<n8n-link data-test-id="workflows-filter-reset" size="small" @click="resetFilters">
 								{{ i18n.baseText(`${resourceKey}.filters.active.reset` as BaseTextKey) }}
 							</n8n-link>

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",