Background
In T392753, we implemented a tabbed structure for the "Adjust suggestions" dialog with the search bar positioned below the tabs. Post implementation, we've decided to switch this order to prioritize search functionality.
| Current | Proposed |
|---|---|
 |  |
Related Work
- T395307(Surface recently selected filters) - Updates the same dialog with a "Recent" section. The mockups in T395307 already reflect the search-above-tabs layout from this task.
Requirements
- Move the search bar component to appear above the tab navigation
- Maintain all existing search functionality
Acceptance Criteria
- Search bar appears above the tabs in the dialog
- All existing search functionality remains intact
Derived Requirement
Ensure that the search bar in the "Adjust suggestions" dialog is positioned above the tab navigation instead of below it. The change should maintain all existing search and filtering functionality, ensuring that UI behavior and interaction remain consistent after reordering.
Test Steps
Test Case 1: Verify search bar placement above tabs
- Open the "Adjust suggestions" dialog from the appropriate interface.
- Observe the layout of the dialog.
- ✅❓❌⬜ AC1: Confirm that the search bar appears above the tab navigation section.
Test Case 2: Validate existing search functionality
- In the "Adjust suggestions" dialog, type a search term into the search bar.
- ✅❓❌⬜ AC2: Confirm that search results update correctly based on the entered term.
- Clear the search input.
- ✅❓❌⬜ AC3: Confirm that all suggestions reappear after clearing the search.
Test Case 3: Validate tab functionality after layout change
- With the search bar now above the tabs, switch between available tabs (e.g., categories or filters).
- ✅❓❌⬜ AC4: Confirm that tab switching still functions correctly and updates the content area as expected.
Test Case 4: Cross-check layout consistency on different devices
- Open the "Adjust suggestions" dialog on desktop view.
- Switch to mobile view (Minerva skin).
- ✅❓❌⬜ AC5: Confirm that the same layout order (search above tabs) is maintained and responsive on mobile.
QA Results - TestWiki
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T398154#11247437 |
| 2 | ✅ | T398154#11247437 |
| 3 | ✅ | T398154#11247437 |
| 4 | ✅ | T398154#11247437 |
| 5 | ✅ | T398154#11247437 |
