[Course Search] Search Modal: Results

[bradenmacdonald]

"As a course author, when I search for content I want to see a summary of each result including where it's located within the course"

Figma designs

Requirements:

1. In the search modal ([Course Search] Trigger Course Search Modal in Course Authoring MFE #199), change the display of results to match the UX (see Figma for details, not just this screenshot):
   
2. Display the specified message when no keywords or filters have been selected yet:
   
3. Display the specified message when there are no hits.
   
4. If any errors occur during the search or when initially loading the search modal, display the details using a Paragon Alert:
   
5. Clicking on the results will open the relevant page in Studio (either in a new tab or the current tab, depending on which part was clicked), and highlight the result - see details in Figma.
   • The highlighting should already be partially implemented - see the ?show query parameter on the outline page. Not sure about the unit page. If the highlighting as shown in the UX is too complicated, it can be spun out to a separate story.

Notes:

• For this ticket, we're just focusing on the results (hits). The filter options above like "This Course / All Courses", "Tags", "Content Type", "Search Tips", etc. are part of [Course Search] Search Modal: Filters #201.
• The current prototype includes both library and course results in the same modal. Though we'll probably exclude library search for now, it would be nice (but not necessary) if this has the code to correctly display and link to library results too.
• Lean heavily on the InstantSearch UI components like <Hits> that already provide most of the functionality we need. To customize them to integrate with Paragon widgets, use the "hook" versions of each, e.g. useHits