Add compatibility with searchable in Refinemenlist widget (#1192)

* Prototype beta/prototype search for facet values (#1144)

* Add prototype beta changeset

* Add compatibility with searchable on facetRefinements

* Add changeset for searchable parameter

* Merge

* Add a facet search context

* Update changeset

* Update pre mode

* Update pre mode

* Update pre mode

* Version Packages (prototype-search-for-facet-values) (#1158)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Update README.md

* Remove pre changeset mode

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: meili-bot <[email protected]>
Co-authored-by: meili-bors[bot] <89034592+meili-bors[bot]@users.noreply.github.com>

* Remove changelog

* Rollback unexpected changes

* Update meilisearch to latest rc

* Fix cypress tests

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: meili-bot <[email protected]>
Co-authored-by: meili-bors[bot] <89034592+meili-bors[bot]@users.noreply.github.com>

Author: 4 people

.changeset/config.json

@@ -13,6 +13,8 @@
     "@meilisearch/angular-playground",
     "@meilisearch/vue3-ts-playground",
     "@meilisearch/react-playground",
-    "@meilisearch/local-react-playground"
+    "@meilisearch/local-react-playground",
+    "@meilisearch/node-playground",
+    "@meilisearch/autocomplete-playground"
   ]
 }

.changeset/curly-elephants-juggle.md

@@ -0,0 +1,5 @@
+---
+"@meilisearch/instant-meilisearch": patch
+---
+
+Add compatibility with the `searchable` parameter of the [`RefinementList`](https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/) widget

packages/instant-meilisearch/README.md

@@ -707,11 +707,11 @@ The `refinementList` widget is one of the most common widgets you can find in a
 - ✅ limit: How many facet values to retrieve.
 - ✅ showMore: Whether to display a button that expands the number of items.
 - ✅ showMoreLimit: The maximum number of displayed items. Does not work when showMoreLimit > limit.
-- ❌ searchable: Whether to add a search input to let the user search for more facet values. Not supported by Meilisearch. If you'd like to see it implemented [please vote](https://roadmap.meilisearch.com/c/64-search-for-facet-values?utm_medium=social&utm_source=portal_share).
-- ❌ searchablePlaceholder: The value of the search input’s placeholder. Not supported, see `searchable`.
-- ❌ searchableIsAlwaysActive: When false, disables the facet search input. Not supported, see `searchable`.
-- ❌ searchableEscapeFacetValues: When true, escapes the facet values. Not supported, see `searchable`.
-- ❌ sortBy: Not supported natively but can be implemented manually using `transformItems` options.
+- ✅ searchable: Whether to add a search input to let the user search for more facet values. Not supported by Meilisearch. If you'd like to see it implemented [please vote](https://roadmap.meilisearch.com/c/64-search-for-facet-values?utm_medium=social&utm_source=portal_share).
+- ✅ searchablePlaceholder: The value of the search input’s placeholder. Not supported, see `searchable`.
+- ✅ searchableIsAlwaysActive: When false, disables the facet search input. Not supported, see `searchable`.
+- ❌ searchableEscapeFacetValues: When true, escapes the facet values.
+- ❌ sortBy: Not supported but can be implemented manually using `transformItems` options.
 - ✅ transformItems: A function to transform the items passed to the templates.
 - ✅ templates: The templates to use for the widget.
 - ✅ cssClasses: The CSS classes to override.

packages/instant-meilisearch/package.json

@@ -50,7 +50,7 @@
     "templates"
   ],
   "dependencies": {
-    "meilisearch": "^0.33.0"
+    "meilisearch": "0.35.0-v1.3.0-pre-release.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",

packages/instant-meilisearch/src/client/instant-meilisearch-client.ts

@@ -8,6 +8,8 @@ import {
   FacetDistribution,
   PaginationState,
   MeilisearchConfig,
+  AlgoliaSearchForFacetValuesRequests,
+  AlgoliaSearchForFacetValuesResponse,
 } from '../types'
 import {
   getApiKey,
@@ -19,7 +21,7 @@ import {
   adaptSearchParams,
   SearchResolver,
 } from '../adapter'
-import { createSearchContext } from '../contexts'
+import { createSearchContext, createFacetSearchContext } from '../contexts'
 import {
   SearchCache,
   initFacetDistribution,
@@ -132,13 +134,48 @@ export function instantMeiliSearch(
         throw new Error(e)
       }
     },
-    searchForFacetValues: async function (_: any) {
-      return await new Promise((resolve, reject) => {
-        reject(
-          new Error('SearchForFacetValues is not compatible with Meilisearch')
+    searchForFacetValues: async function (
+      requests: AlgoliaSearchForFacetValuesRequests
+    ): Promise<AlgoliaSearchForFacetValuesResponse[]> {
+      const results = []
+      for (const request of requests) {
+        const searchContext: SearchContext = createFacetSearchContext(
+          request,
+          instantMeiliSearchOptions
         )
-        resolve([]) // added here to avoid compilation error
-      })
+
+        const meilisearchSearchQuery = adaptSearchParams(searchContext)
+
+        const index = request.indexName
+
+        const meilisearchRequest: any = {
+          ...meilisearchSearchQuery,
+          facetQuery: request.params.facetQuery,
+          facetName: request.params.facetName,
+        }
+
+        delete meilisearchRequest.indexUid
+
+        const meilisearchResponse = await meilisearchClient
+          .index(index)
+          .searchForFacetValues(meilisearchRequest)
+
+        const facetHits = meilisearchResponse.facetHits.map((facetHit) => ({
+          ...facetHit,
+          // not currently supported
+          highlighted: facetHit.value,
+        }))
+
+        const result = {
+          facetHits,
+          exhaustiveFacetsCount: false,
+          processingTimeMS: meilisearchResponse.processingTimeMs,
+        }
+
+        results.push(result)
+      }
+
+      return results
     },
   }
 }

packages/instant-meilisearch/src/contexts/index.ts

@@ -1 +1 @@
-export { createSearchContext } from './search-context'
+export { createSearchContext, createFacetSearchContext } from './search-context'

packages/instant-meilisearch/src/contexts/search-context.ts

@@ -2,6 +2,7 @@ import {
   InstantMeiliSearchOptions,
   AlgoliaMultipleQueriesQuery,
   SearchContext,
+  AlgoliaSearchForFacetValuesRequest,
 } from '../types'
 import { splitSortString } from './sort-context'
 import { createPaginationState } from './pagination-context'
@@ -54,3 +55,36 @@ export function createSearchContext(
   }
   return searchContext
 }
+
+/**
+ * @param  {AlgoliaMultipleQueriesQuery} searchRequest
+ * @param  {Context} options
+ * @returns {SearchContext}
+ */
+export function createFacetSearchContext(
+  searchRequest: AlgoliaSearchForFacetValuesRequest,
+  options: InstantMeiliSearchOptions
+): SearchContext {
+  // Split index name and possible sorting rules
+  const [indexUid, ...sortByArray] = searchRequest.indexName.split(':')
+  const { params: instantSearchParams } = searchRequest
+
+  const paginationState = createPaginationState(
+    options.finitePagination,
+    instantSearchParams?.hitsPerPage,
+    instantSearchParams?.page
+  )
+
+  const sortState = splitSortString(sortByArray.join(':'))
+
+  const searchContext: SearchContext = {
+    ...options,
+    ...instantSearchParams,
+    sort: sortState,
+    indexUid,
+    pagination: paginationState,
+    placeholderSearch: options.placeholderSearch !== false, // true by default
+    keepZeroFacets: !!options.keepZeroFacets, // false by default
+  }
+  return searchContext
+}

packages/instant-meilisearch/src/types/types.ts

@@ -1,5 +1,8 @@
 import type { SearchClient } from 'instantsearch.js'
-import type { MultipleQueriesQuery as AlgoliaMultipleQueriesQuery } from '@algolia/client-search'
+import type {
+  MultipleQueriesQuery as AlgoliaMultipleQueriesQuery,
+  multipleSearchForFacetValues,
+} from '@algolia/client-search'
 import type {
   MultiSearchQuery as MeiliSearchMultiSearchParams,
   MultiSearchResult,
@@ -12,6 +15,13 @@ export type {
   SearchForFacetValuesResponse as AlgoliaSearchForFacetValuesResponse,
 } from '@algolia/client-search'
 
+export type AlgoliaSearchForFacetValuesRequests = Parameters<
+  ReturnType<typeof multipleSearchForFacetValues>
+>[0]
+
+export type AlgoliaSearchForFacetValuesRequest =
+  AlgoliaSearchForFacetValuesRequests[0]
+
 export type {
   Filter,
   FacetDistribution,

playgrounds/local-react/cypress/integration/search-ui.spec.js

@@ -38,7 +38,9 @@ describe(`${playground} playground test`, () => {
 
   it('Sort by recommendationCound ascending', () => {
     const select = `.ais-SortBy-select`
-    cy.get(select).select('games:recommendationCount:asc')
+    cy.get(select)
+      .select('games:recommendationCount:asc')
+      .should('have.value', 'games:recommendationCount:asc')
     cy.wait(1000)
     cy.get(HIT_ITEM_CLASS).eq(0).contains('Deathmatch Classic')
   })
@@ -61,7 +63,10 @@ describe(`${playground} playground test`, () => {
   })
 
   it('Search', () => {
-    cy.get('.ais-SearchBox-input').type('Half-Life')
+    cy.get('.right-panel')
+      .find('.ais-SearchBox-input')
+      .type('Half-Life')
+      .should('have.value', 'Half-Life')
     cy.wait(1000)
     cy.get(HIT_ITEM_CLASS).eq(0).contains('Half-Life')
   })

playgrounds/local-react/src/components/SingleIndex.jsx

@@ -50,9 +50,9 @@ const SingleIndex = () => (
           ]}
         />
         <h2>Genres</h2>
-        <RefinementList attribute="genres" />
+        <RefinementList attribute="genres" searchable={true} />
         <h2>Players</h2>
-        <RefinementList attribute="players" />
+        <RefinementList attribute="players" searchable={true} />
         <h2>Platforms</h2>
         <RefinementList attribute="platforms" />
         <h2>Misc</h2>