Merge branch 'main' into feature/answers-to-search

merge with main.

docs/search-ui-react.renderentitypreviews.md

@@ -20,7 +20,7 @@ export declare type RenderEntityPreviews = (autocompleteLoading: boolean, vertic
 
 The autocomplete loading state is passed in as an optional param.
 
-An onSubmit function is provided to allow an entity preview to be submitted.
+Default props for rendering corresponding DropdownItems are passed in: an onClick function to allow an entity preview to be submitted, and an ariaLabel function that returns text for the screenreader
 
 For the entity previews to be navigable in the search bar's dropdown section, wrap each entity preview in a [DropdownItem()](./search-ui-react.dropdownitem.md) component.
 

src/components/FilterSearch.tsx

@@ -102,8 +102,9 @@ export function FilterSearch({
       }
       answersActions.setFilterOption({ ...newFilter, displayName: newDisplayName, selected: true });
       setCurrentFilter(newFilter);
-      answersActions.setOffset(0);
       if (select && searchOnSelect) {
+        answersActions.setOffset(0);
+        answersActions.resetFacets();
         executeSearch(answersActions);
       }
     }

src/components/SearchBar.tsx

@@ -85,7 +85,9 @@ export interface SearchBarCssClasses extends AutocompleteResultCssClasses {
  * @remarks
  * The autocomplete loading state is passed in as an optional param.
  *
- * An onSubmit function is provided to allow an entity preview to be submitted.
+ * Default props for rendering corresponding DropdownItems are passed in:
+ * an onClick function to allow an entity preview to be submitted, and
+ * an ariaLabel function that returns text for the screenreader
  *
  * For the entity previews to be navigable in the search bar's dropdown section,
  * wrap each entity preview in a {@link DropdownItem} component.

test-site/src/pages/PeoplePage.tsx

@@ -22,13 +22,20 @@ export function PeoplePage() {
   const answersActions = useAnswersActions();
   useLayoutEffect(() => {
     answersActions.setVertical('people');
+    answersActions.executeVerticalQuery();
   });
 
   return (
     <div>
       <SearchBar />
       <div className='flex'>
         <div className='w-56 shrink-0 mr-5'>
+          <FilterSearch
+            searchFields={[{ fieldApiName: 'name', entityType: 'ce_person' }]}
+            searchOnSelect={true}
+            label='Filters'
+          />
+          <div className='w-full h-px bg-gray-200 my-4' />
           <NumericalFacets searchOnChange={false} />
           <StandardFacets
             searchable={true}
@@ -50,7 +57,6 @@ export function PeoplePage() {
             searchOnChange={false}
           />
           <br />
-          <FilterSearch searchFields={[{ fieldApiName: 'name', entityType: 'ce_person' }]} />
           <ApplyFiltersButton />
         </div>
         <div className='flex-grow'>

test-site/src/pages/ProductsPage.tsx

@@ -15,6 +15,7 @@ export function ProductsPage() {
   const answersActions = useAnswersActions();
   useLayoutEffect(() => {
     answersActions.setVertical('products');
+    answersActions.executeVerticalQuery();
   });
 
   return (

test-site/src/pages/UniversalPage.tsx

@@ -56,6 +56,7 @@ export default function UniversalPage(): JSX.Element {
   const answersActions = useAnswersActions();
   useLayoutEffect(() => {
     answersActions.setUniversal();
+    answersActions.executeUniversalQuery();
   });
 
   return (

tests/components/FilterSearch.test.tsx

@@ -11,6 +11,7 @@ const actions = spyOnActions();
 
 const setFilterOption = jest.fn();
 const setOffset = jest.fn();
+const resetFacets = jest.fn();
 const searchFieldsProp = [{
   fieldApiName: 'name',
   entityType: 'ce_person'
@@ -21,6 +22,7 @@ describe('search with section labels', () => {
     mockAnswersActions({
       setFilterOption,
       setOffset,
+      resetFacets,
       executeFilterSearch: jest.fn().mockResolvedValue(labeledFilterSearchResponse)
     });
   });
@@ -174,12 +176,15 @@ describe('search with section labels', () => {
         expect(setFilterOption).toBeCalledWith(expectedSetFilterOptionParam);
       });
       expect(setOffset).toBeCalledWith(expectedSetOffsetParam);
+      expect(resetFacets).toBeCalled();
 
       const setFilterOptionCallOrder = setFilterOption.mock.invocationCallOrder[0];
       const setOffsetCallOrder = setOffset.mock.invocationCallOrder[0];
+      const resetFacetsCallOrder = resetFacets.mock.invocationCallOrder[0];
       const mockExecuteSearchCallOrder = mockExecuteSearch.mock.invocationCallOrder[0];
       expect(setFilterOptionCallOrder).toBeLessThan(mockExecuteSearchCallOrder);
       expect(setOffsetCallOrder).toBeLessThan(mockExecuteSearchCallOrder);
+      expect(resetFacetsCallOrder).toBeLessThan(mockExecuteSearchCallOrder);
     });
 
     it('does not trigger a search on pressing "enter" if no autocomplete result is selected', async () => {
@@ -193,6 +198,7 @@ describe('search with section labels', () => {
         expect(setFilterOption).not.toBeCalled();
       });
       expect(setOffset).not.toBeCalled();
+      expect(resetFacets).not.toBeCalled();
       expect(mockExecuteSearch).not.toBeCalled();
     });
 
@@ -216,12 +222,15 @@ describe('search with section labels', () => {
       userEvent.click(autocompleteSuggestion);
       expect(setFilterOption).toBeCalledWith(expectedSetFilterOptionParam);
       expect(setOffset).toBeCalledWith(expectedSetOffsetParam);
+      expect(resetFacets).toBeCalled();
 
       const setFilterOptionCallOrder = setFilterOption.mock.invocationCallOrder[0];
       const setOffsetCallOrder = setOffset.mock.invocationCallOrder[0];
+      const resetFacetsCallOrder = setOffset.mock.invocationCallOrder[0];
       const mockExecuteSearchCallOrder = mockExecuteSearch.mock.invocationCallOrder[0];
       expect(setFilterOptionCallOrder).toBeLessThan(mockExecuteSearchCallOrder);
       expect(setOffsetCallOrder).toBeLessThan(mockExecuteSearchCallOrder);
+      expect(resetFacetsCallOrder).toBeLessThan(mockExecuteSearchCallOrder);
     });
   });
 
@@ -244,7 +253,8 @@ describe('search with section labels', () => {
           selected: true
         });
       });
-      expect(setOffset).toBeCalledWith(0);
+      expect(setOffset).not.toHaveBeenCalled();
+      expect(resetFacets).not.toHaveBeenCalled();
       expect(mockExecuteSearch).not.toHaveBeenCalled();
     });
   });