16125266659

Committed 07 Jul 2025 06:46PM UTC coverage: 88.338% (+0.1%) from 88.189%

Build # 16125266659

Build Type

push

github

Committed by

web-flow

Commit Message

Use react-i18next for default translations (#543)

* Use react-i18next for default translations

The default translations live in the locales/ folder.
To enable translation on the react components, use <SearchI18nextProvider/> wrapper.
SearchI18nextProvider component accepts a seach headless instance and an optional translation overrides object.

J=WAT-3442,WAT-3443
TEST=manual

updated test-site to enable translation with some overrides. Spun up test-site and saw expected translations and overrides on initial load and upon locale changes.

* Removed fallbacks.

Manually tested on test-site and VLE locator.
1. Tested without SearchI18nextProvider wrapper, saw the strings rendered in English regardless of the locale.
2. Tested with SearchI18nextProvider wrapper, saw strings translated based on locale files and overrides are applied as expected.

Updated jest tests.

Coverage Stats

820 of 1025 branches covered (80.0%)

Branch coverage included in aggregate %.

96 of 100 new or added lines in 28 files covered. (96.0%)

1 existing line in 1 file now uncovered.

2066 of 2242 relevant lines covered (92.15%)

136.4 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

47.37

/src/components/ApplyFiltersButton.tsx

import { useTranslation } from 'react-i18next';
import { useSearchActions } from '@yext/search-headless-react';
import { useCallback } from 'react';
import { useComposedCssClasses } from '../hooks';
import { clearStaticRangeFilters, getSelectedNumericalFacetFields } from '../utils/filterutils';
import { executeSearch } from '../utils';
import React from 'react';

/**
 * Props for {@link ApplyFiltersButton}
 *
 * @public
 */
export interface ApplyFiltersButtonProps {
  /** The label for the button, defaults to 'Apply Filters' */
  label?: string,
  /** CSS classes for customizing the component styling. */
  customCssClasses?: ApplyFiltersButtonCssClasses
}

/**
 * The CSS class interface for {@link ApplyFiltersButtonProps}.
 *
 * @public
 */
export interface ApplyFiltersButtonCssClasses {
  button?: string
}

const builtInCssClasses: Readonly<ApplyFiltersButtonCssClasses> = {
  button: 'border border-gray-300 px-2.5 py-1 rounded-md text-primary bg-white shadow-md sticky bottom-3'
};

/**
 * Runs a vertical search.
 * By default has `position: sticky` styling that anchors it to the bottom of the page.
 *
 * @remarks
 * This is intended to be used when `searchOnChange` field is set to false on all
 * the Facets/StaticFilters components.
 *
 * @public
 */
export function ApplyFiltersButton({
  customCssClasses,
  label
}: ApplyFiltersButtonProps): JSX.Element {
  const { t } = useTranslation();
  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
  const searchActions = useSearchActions();
  const handleClick = useCallback(() => {
    searchActions.setOffset(0);
    clearStaticRangeFilters(searchActions, getSelectedNumericalFacetFields(searchActions));
    executeSearch(searchActions);
  }, [searchActions]);

  return (
    <button
      onClick={handleClick}
      className={cssClasses.button}
    >
      {label ?? t('applyFilters')}
    </button>
  );
}

1	import { useTranslation } from 'react-i18next';	5✔
2	import { useSearchActions } from '@yext/search-headless-react';	5✔
3	import { useCallback } from 'react';	5✔
4	import { useComposedCssClasses } from '../hooks';	5✔
5	import { clearStaticRangeFilters, getSelectedNumericalFacetFields } from '../utils/filterutils';	5✔
6	import { executeSearch } from '../utils';	5✔
7	import React from 'react';	5✔
8
9	/**
10	* Props for {@link ApplyFiltersButton}
11	*
12	* @public
13	*/
14	export interface ApplyFiltersButtonProps {
15	/** The label for the button, defaults to 'Apply Filters' */
16	label?: string,
17	/** CSS classes for customizing the component styling. */
18	customCssClasses?: ApplyFiltersButtonCssClasses
19	}
20
21	/**
22	* The CSS class interface for {@link ApplyFiltersButtonProps}.
23	*
24	* @public
25	*/
26	export interface ApplyFiltersButtonCssClasses {
27	button?: string
28	}
29
30	const builtInCssClasses: Readonly<ApplyFiltersButtonCssClasses> = {	5✔
31	button: 'border border-gray-300 px-2.5 py-1 rounded-md text-primary bg-white shadow-md sticky bottom-3'
32	};
33
34	/**
35	* Runs a vertical search.
36	* By default has `position: sticky` styling that anchors it to the bottom of the page.
37	*
38	* @remarks
39	* This is intended to be used when `searchOnChange` field is set to false on all
40	* the Facets/StaticFilters components.
41	*
42	* @public
43	*/
44	export function ApplyFiltersButton({	5✔
45	customCssClasses,
46	label
47	}: ApplyFiltersButtonProps): JSX.Element {
NEW 48	const { t } = useTranslation();	×
49	const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);	×
50	const searchActions = useSearchActions();	×
51	const handleClick = useCallback(() => {	×
52	searchActions.setOffset(0);	×
53	clearStaticRangeFilters(searchActions, getSelectedNumericalFacetFields(searchActions));	×
54	executeSearch(searchActions);	×
55	}, [searchActions]);
56
57	return (	×
58	<button
59	onClick={handleClick}
60	className={cssClasses.button}
61	>
62	{label ?? t('applyFilters')}	×
63	</button>
64	);
65	}

yext / search-ui-react / 16125266659

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous