[catalog] 404 page when entity is not found

[shmidt-i]

Current implementation in plugins/catalog/src/hooks/useEntity is to redirect to catalog root if the entity is not found. This is not the pattern we want to have moving forward, instead we want to show a 404 page.

[BA1RY]

@shmidt-i I would like to work on this issue.
How do you want me to implement it?

[shmidt-i]

Hey @BA1RY, good question 😄
We will come back with suggestion during the week!

[shmidt-i]

So we discussed it and settled on a following solution:
If a route in the App doesn't have a corresponding match as in react-router route match, then we should show standard mic drop 404 page.
Have said that, everything under /catalog/* becomes delegated to the catalog plugin and App is not responsible for 404s there. Which leads us to the notion of "Empty state" for the catalog, particularly when the entity is not found. So if @katz95 and @nikek can chime in and help us with design, something very similar to the beautiful work done in #2179, but for the case of "entity doesn't exist", that would be super cool! 🙌

[BA1RY]

@shmidt-i Understood. So we'll need to create a separate 404 page for /catalog. I'll be happy to work on this.

[katz95]

Great work so far! Thanks for your work so far. Attaching an image of a design for this particular error state. You can access it the specs here https://www.figma.com/community/file/850673348101741100

[BA1RY]

@katz95 Thank you. It looks great.
@shmidt-i Do you want a page specifically for 404 Entity not found or a general Error page which can be used to show all errors related to catalog?

[shmidt-i]

@BA1RY let's start with 404 Entity not found and then can add a general error page for the catalog as a next step ;)

[BA1RY]

@shmidt-i Got it.
@shmidt-i @katz95 I just made a PR. Please have a look at it and let me know if there are any corrections to be made. Thanks a lot.
Also, is the favorite icon necessary as the entity itself is not present?

[benjdlambert]

Think we can close this now as the PR has been merged