fix(plugins): add translations for query suggestions and recent searches plugins (#1283)

Closes #1282

Author: justinedelson

packages/autocomplete-plugin-query-suggestions/src/__tests__/createQuerySuggestionsPlugin.test.ts

@@ -645,4 +645,140 @@ describe('createQuerySuggestionsPlugin', () => {
       },
     ]);
   });
+
+  test('accepts translation', async () => {
+    const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+      searchClient,
+      indexName: 'indexName',
+      translations: {
+        fillQueryTitle: (query) => `TEST FILL "${query}"`,
+      },
+    });
+
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+
+    autocomplete({
+      container,
+      panelContainer,
+      plugins: [querySuggestionsPlugin],
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'a' } });
+
+    await waitFor(() => {
+      expect(
+        within(
+          panelContainer.querySelector(
+            '[data-autocomplete-source-id="querySuggestionsPlugin"]'
+          )
+        )
+          .getAllByRole('option')
+          .map((option) => option.children)
+      ).toMatchInlineSnapshot(`
+        Array [
+          HTMLCollection [
+            <div
+              class="aa-ItemWrapper"
+            >
+              <div
+                class="aa-ItemContent"
+              >
+                <div
+                  class="aa-ItemIcon aa-ItemIcon--noBorder"
+                >
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="aa-ItemContentBody"
+                >
+                  <div
+                    class="aa-ItemContentTitle"
+                  >
+                    cooktop
+                  </div>
+                </div>
+              </div>
+              <div
+                class="aa-ItemActions"
+              >
+                <button
+                  class="aa-ItemActionButton"
+                  title="TEST FILL \\"cooktop\\""
+                >
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>,
+          ],
+          HTMLCollection [
+            <div
+              class="aa-ItemWrapper"
+            >
+              <div
+                class="aa-ItemContent"
+              >
+                <div
+                  class="aa-ItemIcon aa-ItemIcon--noBorder"
+                >
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="aa-ItemContentBody"
+                >
+                  <div
+                    class="aa-ItemContentTitle"
+                  >
+                    range
+                  </div>
+                </div>
+              </div>
+              <div
+                class="aa-ItemActions"
+              >
+                <button
+                  class="aa-ItemActionButton"
+                  title="TEST FILL \\"range\\""
+                >
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>,
+          ],
+        ]
+      `);
+    });
+  });
 });

packages/autocomplete-plugin-query-suggestions/src/constants.ts

@@ -0,0 +1,6 @@
+import { AutocompleteSuggestionsPluginTranslations } from './types';
+
+export const defaultTranslations: Required<AutocompleteSuggestionsPluginTranslations> =
+  {
+    fillQueryTitle: (text: string) => `Fill query with "${text}"`,
+  };

packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts

@@ -8,8 +8,13 @@ import { getAttributeValueByPath } from '@algolia/autocomplete-shared';
 import { SearchOptions } from '@algolia/client-search';
 import { SearchClient } from 'algoliasearch/lite';
 
+import { defaultTranslations } from './constants';
 import { getTemplates } from './getTemplates';
-import { AutocompleteQuerySuggestionsHit, QuerySuggestionsHit } from './types';
+import {
+  AutocompleteQuerySuggestionsHit,
+  AutocompleteSuggestionsPluginTranslations,
+  QuerySuggestionsHit,
+} from './types';
 
 export type CreateQuerySuggestionsPluginParams<
   TItem extends QuerySuggestionsHit
@@ -64,6 +69,13 @@ export type CreateQuerySuggestionsPluginParams<
    * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions/createQuerySuggestionsPlugin/#param-categoriesperitem
    */
   categoriesPerItem?: number;
+
+  /**
+   * A mapping of translation strings.
+   *
+   * Defaults to English values.
+   */
+  translations?: Partial<AutocompleteSuggestionsPluginTranslations>;
 };
 
 export function createQuerySuggestionsPlugin<
@@ -79,6 +91,7 @@ export function createQuerySuggestionsPlugin<
     categoryAttribute,
     itemsWithCategories,
     categoriesPerItem,
+    translations,
   } = getOptions(options);
 
   return {
@@ -156,7 +169,7 @@ export function createQuerySuggestionsPlugin<
                 },
               });
             },
-            templates: getTemplates({ onTapAhead }),
+            templates: getTemplates({ onTapAhead, translations }),
           },
           onTapAhead,
           state: state as AutocompleteState<TItem>,
@@ -176,5 +189,9 @@ function getOptions<TItem extends AutocompleteQuerySuggestionsHit>(
     itemsWithCategories: 1,
     categoriesPerItem: 1,
     ...options,
+    translations: {
+      ...defaultTranslations,
+      ...options.translations,
+    },
   };
 }

packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx

@@ -2,14 +2,19 @@
 /** @jsx createElement */
 import { SourceTemplates } from '@algolia/autocomplete-js';
 
-import { QuerySuggestionsHit } from './types';
+import {
+  AutocompleteSuggestionsPluginTranslations,
+  QuerySuggestionsHit,
+} from './types';
 
 export type GetTemplatesParams<TItem extends QuerySuggestionsHit> = {
   onTapAhead(item: TItem): void;
+  translations: AutocompleteSuggestionsPluginTranslations;
 };
 
 export function getTemplates<TItem extends QuerySuggestionsHit>({
   onTapAhead,
+  translations,
 }: GetTemplatesParams<TItem>): SourceTemplates<TItem> {
   return {
     item({ item, createElement, components }) {
@@ -48,7 +53,7 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
           <div className="aa-ItemActions">
             <button
               className="aa-ItemActionButton"
-              title={`Fill query with "${item.query}"`}
+              title={translations.fillQueryTitle(item.query)}
               onClick={(event) => {
                 event.preventDefault();
                 event.stopPropagation();

packages/autocomplete-plugin-query-suggestions/src/types/Translations.ts

@@ -0,0 +1,3 @@
+export type AutocompleteSuggestionsPluginTranslations = {
+  fillQueryTitle: (text: string) => string;
+};

packages/autocomplete-plugin-query-suggestions/src/types/index.ts

@@ -1 +1,2 @@
 export * from './QuerySuggestionsHit';
+export * from './Translations';