Merge #1105

1105: Fix multi words filters not formatted correctly r=bidoubiwa a=bidoubiwa

fixes: #1083 

Facets containing multiple words, for example `In stock`, were wrongly formatted. Meilisearch requires multi-words in filters to be wrapped in double quotes. The solution provided is to wrap every facet attribute and facet value in double quotes.

Before:
'In stock="value"'
After
'"In stock"="value"'



Co-authored-by: Charlotte Vermandel <[email protected]>

Author: meili-bors[bot]

.changeset/tender-dancers-check.md

@@ -0,0 +1,5 @@
+---
+"@meilisearch/instant-meilisearch": patch
+---
+
+Fixes a bug where if a facet contained multiple words it failed

packages/instant-meilisearch/src/adapter/search-request-adapter/__tests__/search-params.test.ts

@@ -26,14 +26,25 @@ describe('Parameters adapter', () => {
     })
 
     expect(searchParams.filter).toStrictEqual([
-      ['genres="Drama"', 'genres="Thriller"'],
-      ['title="Ariel"'],
+      ['"genres"="Drama"', '"genres"="Thriller"'],
+      ['"title"="Ariel"'],
     ])
     expect(searchParams.sort).toStrictEqual(['id < 1'])
     expect(searchParams.attributesToHighlight).toContain('*')
     expect(searchParams.attributesToHighlight?.length).toBe(1)
   })
 
+  test('adapting multi-word filters', () => {
+    const searchParams = adaptSearchParams({
+      ...DEFAULT_CONTEXT,
+      facetFilters: [['My Genre:Science Fiction']],
+    })
+
+    expect(searchParams.filter).toStrictEqual([
+      ['"My Genre"="Science Fiction"'],
+    ])
+  })
+
   test('adapting a searchContext with matching strategy', () => {
     const searchParams = adaptSearchParams({
       ...DEFAULT_CONTEXT,
@@ -55,8 +66,8 @@ describe('Geo filter adapter', () => {
 
     expect(searchParams.filter).toStrictEqual([
       '_geoBoundingBox([0, 0], [0, 0])',
-      ['genres="Drama"', 'genres="Thriller"'],
-      ['title="Ariel"'],
+      ['"genres"="Drama"', '"genres"="Thriller"'],
+      ['"title"="Ariel"'],
     ])
     expect(searchParams.sort).toStrictEqual(['id < 1'])
     expect(searchParams.attributesToHighlight).toContain('*')
@@ -72,8 +83,8 @@ describe('Geo filter adapter', () => {
 
     expect(searchParams.filter).toEqual([
       '_geoBoundingBox([0, 0], [0, 0])',
-      ['genres="Drama"', 'genres="Thriller"'],
-      ['title="Ariel"'],
+      ['"genres"="Drama"', '"genres"="Thriller"'],
+      ['"title"="Ariel"'],
     ])
     expect(searchParams.attributesToHighlight).toContain('*')
     expect(searchParams.attributesToHighlight?.length).toBe(1)

packages/instant-meilisearch/src/adapter/search-request-adapter/filter-adapter.ts

@@ -1,26 +1,41 @@
 import type { Filter, SearchContext } from '../../types'
-import { replaceColonByEqualSign } from '../../utils'
 
 /**
- * Transform InstantSearch filter to Meilisearch filter.
- * Change sign from `:` to `=` in nested filter object.
- * example: [`genres:comedy`] becomes [`genres=comedy`]
+ * Transform InstantSearch filter to Meilisearch compatible filter format.
+ * Change sign from `:` to `=`
+ * "facet:facetValue" becomes "facet=facetValue"
+ *
+ * Wrap both the facet and its facet value between quotes.
+ * This avoid formating issues on facets containing multiple words.
+ *
+ * 'My facet:My facet value' becomes '"My facet":"My facet value"'
+ *
+ * @param  {string} filter?
+ * @returns {Filter}
+ */
+function transformFilter(filter: string): string {
+  return filter.replace(/(.*):(.*)/i, '"$1"="$2"')
+}
+
+/**
+ * Itterate over all filters.
+ * Return the filters in a Meilisearch compatible format.
  *
  * @param  {SearchContext['facetFilters']} filters?
  * @returns {Filter}
  */
-function transformFilter(filters?: SearchContext['facetFilters']): Filter {
+function transformFilters(filters?: SearchContext['facetFilters']): Filter {
   if (typeof filters === 'string') {
-    return replaceColonByEqualSign(filters)
+    return transformFilter(filters)
   } else if (Array.isArray(filters))
     return filters
       .map((filter) => {
         if (Array.isArray(filter))
           return filter
-            .map((nestedFilter) => replaceColonByEqualSign(nestedFilter))
+            .map((nestedFilter) => transformFilter(nestedFilter))
             .filter((elem) => elem)
         else {
-          return replaceColonByEqualSign(filter)
+          return transformFilter(filter)
         }
       })
       .filter((elem) => elem)
@@ -89,8 +104,8 @@ export function adaptFilters(
   numericFilters: SearchContext['numericFilters'],
   facetFilters: SearchContext['facetFilters']
 ): Filter {
-  const transformedFilter = transformFilter(facetFilters || [])
-  const transformedNumericFilter = transformFilter(numericFilters || [])
+  const transformedFilter = transformFilters(facetFilters || [])
+  const transformedNumericFilter = transformFilters(numericFilters || [])
 
   return mergeFilters(
     transformedFilter,

packages/instant-meilisearch/src/utils/string.ts

@@ -6,15 +6,6 @@ export function isString(str: any): boolean {
   return typeof str === 'string' || str instanceof String
 }
 
-/**
- * @param  {string} filter
- * @returns {string}
- */
-export function replaceColonByEqualSign(filter: string): string {
-  // will only change first occurence of `:`
-  return filter.replace(/:(.*)/i, '="$1"')
-}
-
 /**
  * @param  {any[]} arr
  * @returns {string}