Display description & keyword matches in a pill

karenroldan commented 1 year ago

What Does This PR Add/Change?

This PR now displays the description matches! 🎉

If the search term matches the description or keyword, a pill with a generic text will be displayed.
If there are matches on the name and keyword/description, we don't display the pill and will highlight the matched name.
If there are matches on both the keyword and description, we only display the matched keyword.

Key changes:

Updated the whole reporting-config-search-results.tsx and separated it into more readable functions.
Match type is now stored directly in the search results
Hierarchy of matches (name > keyword > description) is now computed in the search results
On mobile, only the icon will be displayed

Screenshot 2023-05-12 at 09 38 35 Screenshot 2023-05-12 at 07 29 00

Screenshot 2023-05-12 at 07 28 50

Testing Instructions

I've added and updated the tests to cover all possible scenarios I could think of. Feel free to explore!
All tests should pass.

Issues

Related to #
Closes #

dpasque commented 1 year ago

I'm also realizing that a lot of these suggestions (both design and code refactor) might need further discussion or clarification, so please just feel free to spin up a Slack thread if it would be more helpful to discuss these! 🙂 👍

john-legg commented 1 year ago

I'm also realizing that a lot of these suggestions (both design and code refactor) might need further discussion or clarification, so please just feel free to spin up a Slack thread if it would be more helpful to discuss these! 🙂 👍

Yeah, a Slack thread might be a good idea! I'll go ahead and start one 👍

karenroldan commented 1 year ago

I feel so bad asking this after @karenroldan did such a nice job implementing it, but I'm wondering if we should literally just display the phrase "description match" in the pill without showing any keywords or scores. This is less information, but I think it makes the tree look less overwhelming, prevents wrapping in most cases, and also lets us simplify a lot of the code!

Don't worry about it! I like that we can keep on iterating and explore on different ideas. Let's continue to weigh the pros and cons and find the best solution! 💡

We can continue our discussion in this Slack thread: p1683670129349769-slack-CQD1HH4MA

Automattic / bugomattic