Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update <Datagrid> and <SimpleList> empty message when a filter is active #10184

Merged
merged 18 commits into from
Sep 10, 2024

Conversation

erwanMarmelab
Copy link
Contributor

@erwanMarmelab erwanMarmelab commented Sep 5, 2024

Problem

When coming back to a list page with active filters and no results, the default message (“no results found”) is misleading when the active filters aren’t visible enough.

Solution

If the list is empty AND there is an active filter,

  • Replace “No [data] found” with “No [data] found using the current filters. Clear filters.”
  • Add a link on “Clear filter” which removes all active filters

To Do

  • Change dictionaries messages
  • Add the "Clear filter" button
  • Display this button if there is an active filter

Additional Checks

  • The PR targets master for a bugfix, or next for a feature
  • The PR includes unit tests
  • The PR includes one or several stories
    - [ ] The documentation is up to date

image

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Co-authored-by: Francois Zaninotto <francois@marmelab.com>
);
expect(screen.queryByText('ra.navigation.no_results')).not.toBeNull();
});

it('should display a message when there is no result but filters applied', async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why isn't this test in the FilterButton tests file?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we test the <SimpleList> logic here. I use the FilterButton's story to be able to test it with writing a new component. Do you prefer I write a new component to render that test ?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nvm

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But then, why the SimpleList and not the List? Should we do both? @fzaninotto

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In fact, the List?oResults is used by SimpleList and Datagrid, so in theory we should test both. Instead, I added a test for ListNoResults itself.


export const ListNoResults = memo(() => {
const translate = useTranslate();
const resource = useResourceContext();
const { setFilters } = useListController({ resource });
Copy link
Member

@fzaninotto fzaninotto Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useListContext, not useListController!

I fixed the mistake in 199fbae

@fzaninotto fzaninotto changed the title feat: Change the No result found message to “No [data] found using the current filters. Clear filters Update <Datagrid> and <SimpleList> empty message when a filter is active Sep 9, 2024
@djhi djhi added this to the 5.2.0 milestone Sep 10, 2024
@djhi djhi merged commit 8915772 into next Sep 10, 2024
14 checks passed
@djhi djhi deleted the feat/change_the_No-result-found_message branch September 10, 2024 07:10
fzaninotto added a commit that referenced this pull request Oct 29, 2024
## Problem

Since #10184, published in 5.2.0, `<SimpleList>` and `<Datagrid>` throw an error when used in standalone mode (i.e., outside of a ListContext) with an empty `data`.

## Solution

The problem comes from `ListNoResults`, which reads the `ListContext` to determine if there is an active filter.

## Solution

Use the alternative `useListContextWithProps` instead of `useListContext`.
quentin-decre pushed a commit to quentin-decre/react-admin that referenced this pull request Nov 13, 2024
## Problem

Since marmelab#10184, published in 5.2.0, `<SimpleList>` and `<Datagrid>` throw an error when used in standalone mode (i.e., outside of a ListContext) with an empty `data`.

## Solution

The problem comes from `ListNoResults`, which reads the `ListContext` to determine if there is an active filter.

## Solution

Use the alternative `useListContextWithProps` instead of `useListContext`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants