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

This commit is contained in:
Jaakko Husso
2025-05-08 13:17:42 +03:00
committed by GitHub
parent f6e5efc2e0
commit 539f4cc5be
3 changed files with 80 additions and 12 deletions

View File

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

View File

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