Merge 5a135cd into f364882

src/components/FilterSearch.tsx

@@ -105,6 +105,14 @@ export function FilterSearch({
   const searchParamFields = searchFields.map((searchField) => {
     return { ...searchField, fetchEntities: false };
   });
+  const matchingFieldIds: Set<string> = useMemo(() => {
+    const fieldIds = new Set(searchFields.map(s => s.fieldApiName));
+    if (fieldIds.has('builtin.location')) {
+      ['builtin.region', 'address.countryCode'].forEach(s => fieldIds.add(s));
+    }
+    return fieldIds;
+  }, [searchFields]);
+
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const [currentFilter, setCurrentFilter] = useState<StaticFilter>();
   const [filterQuery, setFilterQuery] = useState<string>();
@@ -113,9 +121,9 @@ export function FilterSearch({
     return staticFilters?.filter(({ filter, selected }) =>
       selected
       && filter.kind === 'fieldValue'
-      && searchFields.some(s => s.fieldApiName === filter.fieldId)
+      && matchingFieldIds.has(filter.fieldId)
     ) ?? [];
-  }, [staticFilters, searchFields]);
+  }, [staticFilters, matchingFieldIds]);
 
   const [
     filterSearchResponse,
@@ -132,7 +140,7 @@ export function FilterSearch({
   useEffect(() => {
     if (matchingFilters.length > 1 && !onSelect) {
       console.warn('More than one selected static filter found that matches the filter search fields: ['
-        + searchFields.map(s => s.fieldApiName).join(', ')
+        + [...matchingFieldIds].join(', ')
         + ']. Please update the state to remove the extra filters.'
         + ' Picking one filter to display in the input.');
     }
@@ -158,7 +166,7 @@ export function FilterSearch({
     executeFilterSearch,
     onSelect,
     matchingFilters,
-    searchFields
+    matchingFieldIds
   ]);
 
   const sections = useMemo(() => {
@@ -190,7 +198,7 @@ export function FilterSearch({
 
     if (matchingFilters.length > 1) {
       console.warn('More than one selected static filter found that matches the filter search fields: ['
-        + searchFields.map(s => s.fieldApiName).join(', ')
+        + [...matchingFieldIds].join(', ')
         + ']. Unselecting all existing matching filters and selecting the new filter.');
     }
     matchingFilters.forEach(f => searchActions.setFilterOption({ filter: f.filter, selected: false }));
@@ -213,7 +221,7 @@ export function FilterSearch({
     onSelect,
     searchOnSelect,
     matchingFilters,
-    searchFields
+    matchingFieldIds
   ]);
 
   const meetsSubmitCritera = useCallback(index => index >= 0, []);

tests/components/FilterSearch.test.tsx

@@ -350,6 +350,122 @@ describe('search with section labels', () => {
     expect(setFilterOption).not.toBeCalled();
   });
 
+  describe('searching on builtin.location', () => {
+    const locationSearchFieldsProp = [
+      ...searchFieldsProp,
+      {
+        fieldApiName: 'builtin.location',
+        entityType: 'ce_person'
+      }
+    ];
+    const mockedStateWithLocationFilters: Partial<State> = {
+      ...mockedState,
+      filters: {
+        static: [{
+          filter: {
+            kind: 'fieldValue',
+            fieldId: 'builtin.region',
+            matcher: Matcher.Equals,
+            value: 'VA'
+          },
+          selected: true,
+          displayName: 'Virginia'
+        }, {
+          filter: {
+            kind: 'fieldValue',
+            fieldId: 'address.countryCode',
+            matcher: Matcher.Equals,
+            value: 'US'
+          },
+          selected: true,
+          displayName: 'United States'
+        }, {
+          filter: {
+            kind: 'fieldValue',
+            fieldId: 'builtin.location',
+            matcher: Matcher.Equals,
+            value: 'P-place.2618194975855570'
+          },
+          selected: true,
+          displayName: 'New York City, New York, United States'
+        }]
+      }
+    };
+
+    it('displays text of other location fields in state and lists all fields in the warning', async () => {
+      const consoleWarnSpy = jest.spyOn(global.console, 'warn').mockImplementation();
+      renderFilterSearch({ searchFields: locationSearchFieldsProp }, mockedStateWithLocationFilters);
+      const searchBarElement = screen.getByRole('textbox');
+      expect(searchBarElement).toHaveValue('Virginia');
+      expect(consoleWarnSpy).toBeCalledWith(
+        'More than one selected static filter found that matches the filter search fields:'
+        + ' [name, builtin.location, builtin.region, address.countryCode].'
+        + ' Please update the state to remove the extra filters.'
+        + ' Picking one filter to display in the input.'
+      );
+    });
+
+    it('unselects all location filters in state and lists all location fields in the warning', async () => {
+      const consoleWarnSpy = jest.spyOn(global.console, 'warn').mockImplementation();
+      renderFilterSearch({ searchFields: locationSearchFieldsProp }, mockedStateWithLocationFilters);
+      const executeFilterSearch = jest
+        .spyOn(SearchHeadless.prototype, 'executeFilterSearch')
+        .mockResolvedValue(labeledFilterSearchResponse);
+      const setFilterOption = jest.spyOn(SearchHeadless.prototype, 'setFilterOption');
+      const searchBarElement = screen.getByRole('textbox');
+
+      userEvent.clear(searchBarElement);
+      userEvent.type(searchBarElement, 'f');
+      await waitFor(() => expect(executeFilterSearch).toHaveBeenCalled());
+      await waitFor(() => screen.findByText('first name 1'));
+      userEvent.type(searchBarElement, '{enter}');
+      await waitFor(() => {
+        expect(setFilterOption).toBeCalledWith({
+          filter: {
+            kind: 'fieldValue',
+            fieldId: 'builtin.region',
+            matcher: Matcher.Equals,
+            value: 'VA'
+          },
+          selected: false
+        });
+      });
+      expect(setFilterOption).toBeCalledWith({
+        filter: {
+          kind: 'fieldValue',
+          fieldId: 'address.countryCode',
+          matcher: Matcher.Equals,
+          value: 'US'
+        },
+        selected: false
+      });
+      expect(setFilterOption).toBeCalledWith({
+        filter: {
+          kind: 'fieldValue',
+          fieldId: 'address.countryCode',
+          matcher: Matcher.Equals,
+          value: 'US'
+        },
+        selected: false
+      });
+      expect(setFilterOption).toBeCalledWith({
+        filter: {
+          kind: 'fieldValue',
+          fieldId: 'name',
+          matcher: Matcher.Equals,
+          value: 'first name 1'
+        },
+        displayName: 'first name 1',
+        selected: true
+      });
+      expect(consoleWarnSpy).toBeCalledWith(
+        'More than one selected static filter found that matches the filter search fields:'
+        + ' [name, builtin.location, builtin.region, address.countryCode].'
+        + ' Unselecting all existing matching filters and selecting the new filter.'
+      );
+    });
+  });
+
   describe('searchOnSelect = true', () => {
     it('triggers a search on pressing "enter" when an autocomplete result is selected', async () => {
       const mockExecuteSearch = jest.spyOn(searchOperations, 'executeSearch');