Enable search for Countries, Cities, and Regions Details views (#4436)

* enable search for locations details views

* update changelog

CHANGELOG.md

@@ -8,7 +8,7 @@ All notable changes to this project will be documented in this file.
 - Support contains filter for goals
 - UI to edit funnels
 - Add Details views for browsers, browser versions, os-s, os versions, and screen sizes reports
-- Add a search functionality in all Details views, except for Countries, Regions, and Cities
+- Add a search functionality in all Details views
 - Icons for browsers plausible/analytics#4239
 - Automatic custom property selection in the dashboard Properties report
 - Add `does_not_contain` filter support to dashboard

assets/js/dashboard/stats/modals/locations-modal.js

@@ -7,6 +7,7 @@ import * as metrics from "../reports/metrics";
 import * as url from "../../util/url";
 import { useQueryContext } from "../../query-context";
 import { useSiteContext } from "../../site-context";
+import { addFilter } from "../../query";
 
 const VIEWS = {
   countries: { title: 'Top Countries', dimension: 'country', endpoint: '/countries', dimensionLabel: 'Country' },
@@ -29,6 +30,10 @@ function LocationsModal({ currentView }) {
     }
   }, [reportInfo.dimension])
 
+  const addSearchFilter = useCallback((query, searchString) => {
+    return addFilter(query, ['contains', `${reportInfo.dimension}_name`, [searchString]])
+  }, [reportInfo.dimension])
+
   function chooseMetrics() {
     if (hasGoalFilter(query)) {
       return [
@@ -63,7 +68,7 @@ function LocationsModal({ currentView }) {
         metrics={chooseMetrics()}
         getFilterInfo={getFilterInfo}
         renderIcon={renderIcon}
-        searchEnabled={false}
+        addSearchFilter={addSearchFilter}
       />
     </Modal>
   )