feat: [M3-8229] - Volume & Images search and filtering

[abailly-akamai]

Description 📝

This PR implements search/filtering for both the /volumes & /images landing pages.

The context surrounding this feature is due to the fact that we don't have landing pages for both those entities. When searching through the main search bar, while the entities return in the search suggestions, clicking on them will bring the user to the landing page without any filtering (user would have to do a text search on the page to locate the record). For large accounts, the problem is even worse since the record can be paginated and not visible on the page.

In order to improve this experience, the PR adds search capability on the landing pages, with a query param lookup to auto-populate the field when a main search bar search points to a record.

For coverage, the PR implements two new e2e tests as they are more reliable than units for this particular behavior (API filtering) and mocking wouldn't add too much value.

Changes 🔄

For both images and volumes:

• Add search query params to search results
• Add search bars to landing pages
• implement filtering and loading behaviors
• write e2e suites

Target release date 🗓️

6/24/2024

Preview 📷

Volumes	Images
Screen.Recording.2024-06-13.at.12.12.12.mov	Screen.Recording.2024-06-13.at.12.15.04.mov

How to test 🧪

⚠️ These steps apply to both the /volumes & /images landing pages.

Reproduction steps

• In production, search for a volume or image in the main search and notice the poor experience

Verification steps

• As seen in the videos, have a few entities created and test search/filtering
  • landing page search
  • main search bar searching/linking

ℹ️: images feature quite a constricting rate limiting. While debounced, over searching may get you a 400. This is a known issue which hopefully can be addressed soon (will have an ARB ticket for this).

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[abailly-akamai]

This may feel verbose but i like our trend of being super explicit in useEffects (and in logic blocks in general) to make things clear and readable, including early returns when possible.

[abailly-akamai]

Why did I not use the DebouncedSearchTextField? I am glad you asked. Cause that component is essentially crap and needs a complete refactor. There's even a customValue on that component to bypass the debouncing which does not make sense at all. All we need is to debounce on the onChange which is done here directly.

We already have a ticket to refactor the DebouncedSearchTextField component but I am wondering if we need a component at all for this. TBD

[abailly-akamai]

5 years later, yay! 🎉 (we were still showing the volume icon for images)

[gitkcosby]

Looks good to me. And, a great improvement.

[github-actions]

Coverage Report: ✅
Base Coverage: 82.85%
Current Coverage: 82.85%

[bnussman-akamai]

If you start searching from page 2 for example, results won't show because they are one page 1. Maybe we need to reset to page 1 on search?

Screen.Recording.2024-06-13.at.5.33.23.PM.mov

[bnussman-akamai]

I'd be in favor of removing this loading state. I think the spinner on the Search field is good enough, this one just causes the page to shift more

[abailly-akamai]

Am going to keep it for now and see about more feedback. On the fence, it's nice for large accounts where the pagination shows

[bnussman-akamai]

Still feel like we could do without this. It also causes shifting when the order is changed, which we don't do elsewhere in the app:

Screen.Recording.2024-06-14.at.10.26.41.AM.mov

[abailly-akamai]

yeah i took it out but the search spinner isn't enough IMO - that's a bigger problem with a missing pattern in the app for this case - some tables have a circular loader for this case but that's annoying as well. i'll live with this

[carrillo-erik]

The failing landing-page-empty-state.spec.ts test is valid. I was able to confirm that Volumes landing page not rendered when a user does NOT have any volumes on their account. It appears the same is happening with Images landing page, although the test results do not reflect it.

See images below.

Expected	Received

[carrillo-erik]

Great! ✅

[bnussman-akamai]

Looks good! 🔍

[abailly-akamai]

Thanks for the continued reviews and pushing for cleanest solution @bnussman-akamai 🥇

[bnussman-akamai]

No problem! Thanks for jumping on this so quickly! 🛻💨