Story

As a user of RHDH, I want to use a search bar in the global header so that I can quickly and efficiently search for entities, resources, or documentation across the platform without navigating to separate menus or pages.

Figma

Background

The current implementation of the search functionality in RHDH uses a search button in the sidebar that opens a separate popup window for searching. However, in the global header plugin, we want to provide a new search bar feature which lists first a few results in a dropdown menu while user types in the search bar and provide a link to the search results page.

Dependencies and Blockers

Ensure the new search bar can interact with the existing search APIs to fetch and display real-time results.

Acceptance Criteria

• The global header includes a functional search bar that dynamically generates a list of matching results as the user types.
• The search bar should match the Figma page.
• The search bar includes a link that navigates to a dedicated search results page, listing the complete set of results for the user’s query.
• Matching results are displayed in real-time, with no noticeable lag or performance issues.
• The search bar gracefully handles errors, such as no results found or API errors, by displaying appropriate messages.
• Unit tests should be included.