Normalize diacritics in segment search

plugins/CorePluginsAdmin/vue/src/FormField/FieldExpandableSelect.vue

@@ -30,7 +30,8 @@
           v-for="(options, index) in availableOptions"
           class="collection-item"
           v-show="options.values.filter(x =>
-           x.value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1).length"
+           normalize(x.value).indexOf(searchTerm) !== -1
+           || x.value.indexOf(searchTerm) !== -1).length"
           :key="index"
         >
           <h4
@@ -50,8 +51,10 @@
           <ul v-show="showCategory === options.group || searchTerm" class="collection secondLevel">
             <li
               class="expandableListItem collection-item valign-wrapper"
-              v-for="children in options.values.filter(x =>
-              x.value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)"
+              v-for="children in options.values.filter(
+                x => normalize(x.value).indexOf(searchTerm) !== -1
+                    || x.value.indexOf(searchTerm) !== -1
+              )"
               :key="children.key"
               @click="onValueClicked(children)"
             >
@@ -71,7 +74,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { FocusAnywhereButHere, FocusIf } from 'CoreHome';
+import { Matomo, FocusAnywhereButHere, FocusIf } from 'CoreHome';
 import AbortableModifiers from './AbortableModifiers';
 
 interface SelectValueInfo {
@@ -174,6 +177,9 @@ export default defineComponent({
     },
   },
   methods: {
+    normalize(value: string) {
+      return Matomo.helper.normalize(value);
+    },
     onBlur() {
       this.showSelect = false;
     },

plugins/CoreVue/types/index.d.ts

@@ -85,6 +85,7 @@ declare global {
     redirect(params?: any);
     htmlDecode(encoded: string): string;
     htmlEntities(value: string): string;
+    normalize(value: string): string;
     modalConfirm(element: JQuery|HTMLElement|string, callbacks?: ModalConfirmCallbacks, options?: ModalConfirmOptions);
     isReportingPage(): boolean;
     setMarginLeftToBeInViewport(elementToPosition: JQuery|Element|string): void;

plugins/Morpheus/javascripts/piwikHelper.js

@@ -164,6 +164,11 @@ window.piwikHelper = {
         return window.vueSanitize(value);
     },
 
+    normalize: function(value)
+    {
+        return value.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase();
+    },
+
 	/**
 	 * Add break points to a string so that it can be displayed more compactly
 	 */

plugins/SegmentEditor/javascripts/Segmentation.js

@@ -347,7 +347,10 @@ Segmentation = (function($) {
             $(self.target).find(".segmentList li").each(function () {
                 curTitle = $(this).prop('title');
                 $(this).hide();
-                if (curTitle.toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
+                if (
+                  piwikHelper.normalize(curTitle).indexOf(keyword) !== -1 ||
+                  curTitle.indexOf(keyword) !== -1
+                ) {
                     $(this).show();
                 }
             });
@@ -390,7 +393,7 @@ Segmentation = (function($) {
                     // for each visible segmentationContainer -> trigger click event to close and kill scrollpane - very important !
                     closeAllOpenLists();
                     self.target.closest('.segmentEditorPanel').addClass('expanded');
-                    self.target.find('.segmentFilter').val(self.translations['General_Search']).trigger('keyup');
+                    self.target.find('.segmentFilter').val('').trigger('keyup');
                 }
             });
 
@@ -448,26 +451,11 @@ Segmentation = (function($) {
 
             // attach event that will clear segment list filtering input after clicking x
             self.target.on('click', ".segmentFilterContainer span", function (e) {
-                $(e.target).parent().find(".segmentFilter").val(self.translations['General_Search']).trigger('keyup');
-            });
-
-            self.target.on('blur', ".segmentFilter", function (e) {
-                if ($(e.target).parent().find(".segmentFilter").val() == "") {
-                    $(e.target).parent().find(".segmentFilter").val(self.translations['General_Search'])
-                }
-            });
-
-            self.target.on('click', ".segmentFilter", function (e) {
-                if ($(e.target).val() == self.translations['General_Search']) {
-                    $(e.target).val("");
-                }
+                $(e.target).parent().find('.segmentFilter').val('').trigger('keyup');
             });
 
             self.target.on('keyup', ".segmentFilter", function (e) {
                 var search = $(e.currentTarget).val();
-                if (search == self.translations['General_Search']) {
-                    search = "";
-                }
 
                 if (search.length >= 2) {
                     clearTimeout(self.filterTimer);
@@ -577,22 +565,6 @@ Segmentation = (function($) {
             }
         }
 
-        var normalizeSearchString = function(search){
-            search = search.replace(/^\s+|\s+$/g, ''); // trim
-            search = search.toLowerCase();
-            // remove accents, swap ñ for n, etc
-            var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
-            var to   = "aaaaeeeeiiiioooouuuunc------";
-            for (var i=0, l=from.length ; i<l ; i++) {
-                search = search.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
-            }
-
-            search = search.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
-                .replace(/\s+/g, '_') // collapse whitespace and replace by underscore
-                .replace(/-+/g, '-'); // collapse dashes
-            return search;
-        };
-
         // Mode = 'new' or 'edit'
         var addForm = function(mode, segment){
 

plugins/SegmentEditor/templates/_segmentSelector.twig

@@ -5,7 +5,7 @@
         </a>
         <div class="dropdown dropdown-body">
             <div class="segmentFilterContainer">
-                <input class="segmentFilter browser-default" type="text" tabindex="4" value="{{ 'General_Search'|translate }}"/>
+                <input class="segmentFilter browser-default" type="text" tabindex="4" value="" placeholder="{{ 'General_Search'|translate }}"/>
                 <span></span>
             </div>
             <ul class="submenu">

plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js

@@ -124,7 +124,7 @@ describe("SegmentSelectorEditorTest", function () {
           await page.waitForTimeout(250);
         }
 
-        await page.type('input.edit_segment_name', 'new segment');
+        await page.type('input.edit_segment_name', 'new șégmênt');
         await page.click('.segmentRow0 .segment-or'); // click somewhere else to save new name
 
         await page.waitForTimeout(200);
@@ -151,6 +151,12 @@ describe("SegmentSelectorEditorTest", function () {
         expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('saved');
     });
 
+    it("should find the segment also when searching with diacritics", async function() {
+        await page.evaluate(() => $('.segmentationContainer .segmentFilter').val('segment').trigger('keyup'));
+        await page.waitForTimeout(500); // wait for search to be applied
+        expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('searched');
+    });
+
     it("should correctly load the new segment's details when the new segment is edited", async function() {
         await page.click('.segmentList li[data-idsegment="4"] .editSegment');
         await page.waitForNetworkIdle();