feat(TDOPS-4704): faceted search configurable input text length (#4785)

* feat(TDOPS-4704): faceted search configurable input text length * fix typo
Talend · Jul 6, 2023 · aab0eeb · aab0eeb
1 parent 687d74f
commit aab0eeb
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 16 deletions.
diff --git a/.changeset/five-files-join.md b/.changeset/five-files-join.md
@@ -0,0 +1,10 @@
+---
+'@talend/react-faceted-search': major
+---
+
+TDOPS-4704 - Faceted search : Allow to configure faceted search min/max input length for text badge
+
+# BREAKING CHANGE
+
+Faceted search : `quickSearchMinLength` configuration for quick search input is no more used and now detected from badge configuration
+
diff --git a/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js b/packages/faceted-search/src/components/Badges/BadgeText/BadgeTextForm.component.js
@@ -9,7 +9,18 @@ import cssModule from './BadgeText.module.scss';
 
 const theme = getTheme(cssModule);
 
-const BadgeTextForm = ({ id, onChange, onSubmit, value, feature, t, placeholder, ...rest }) => {
+const BadgeTextForm = ({
+	id,
+	onChange,
+	onSubmit,
+	value,
+	feature,
+	t,
+	placeholder,
+	minLength,
+	maxLength,
+	...rest
+}) => {
 	const applyDataFeature = useMemo(() => getApplyDataFeature(feature), [feature]);
 
 	const onChangeText = event => {
@@ -27,6 +38,8 @@ const BadgeTextForm = ({ id, onChange, onSubmit, value, feature, t, placeholder,
 					placeholder={placeholder || t('TYPE_HERE', { defaultValue: 'Type here' })}
 					type="text"
 					value={value}
+					minLength={minLength}
+					maxLength={maxLength}
 				/>
 			</Rich.Layout.Body>
 			<Rich.Layout.Footer id={id}>
@@ -50,6 +63,8 @@ BadgeTextForm.propTypes = {
 	feature: PropTypes.string.isRequired,
 	t: PropTypes.func.isRequired,
 	placeholder: PropTypes.string,
+	minLength: PropTypes.number,
+	maxLength: PropTypes.number,
 };
 
 // eslint-disable-next-line import/prefer-default-export

diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
@@ -47,7 +47,6 @@ const BasicSearch = ({
 	quickSearchPlaceholder,
 	quickSearchFacetsFilter,
 	quickSearchInputProps,
-	quickSearchMinLength,
 	disclosureProps,
 }) => {
 	const { id, t } = useFacetedSearchContext();
@@ -105,6 +104,9 @@ const BasicSearch = ({
 	const badgeFacetedContextValue = { state, dispatch, onSubmit };
 	// removable = undefined means badge can be removed (backward compatible change)
 	const hasRemovableBadge = state.badges.some(badge => badge.properties.removable !== false);
+	const quickSearchMinLength =
+		Math.max(quicksearchable.map(quicksearchableItem => quicksearchableItem.metadata?.minLength)) ||
+		1;
 
 	return (
 		<div id={basicSearchId} className={css('tc-basic-search')}>
@@ -216,7 +218,6 @@ BasicSearch.propTypes = {
 	setBadgesFaceted: PropTypes.func,
 	callbacks: callbacksPropTypes,
 	quickSearchInputProps: PropTypes.object,
-	quickSearchMinLength: PropTypes.number,
 	disclosureProps: PropTypes.object,
 };
 

diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.test.js
@@ -133,6 +133,44 @@ describe('BasicSearch', () => {
 		// eslint-disable-next-line jest-dom/prefer-in-document
 		expect(screen.queryAllByRole('option')).toHaveLength(0);
 	});
+
+	it('should display quick search faced depending on badge length configuration', () => {
+		// Given
+		const props = {
+			badgesDefinitions: badgesDefinitionsWithQuicksearch.map(
+				badgesDefinitionsWithQuicksearchItem => ({
+					...badgesDefinitionsWithQuicksearchItem,
+					metadata: { ...badgesDefinitionsWithQuicksearchItem.metadata, minLength: 3 },
+				}),
+			),
+			badgesFaceted,
+			onSubmit: jest.fn(),
+		};
+		render(
+			<FacetedManager id="manager-id">
+				<BasicSearch
+					{...props}
+					quickSearchFacetsFilter={(term, facets) =>
+						facets.filter(facet => facet.properties.label === term)
+					}
+				/>
+			</FacetedManager>,
+		);
+		// When searching with less then 3 chars
+		fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'Na' } });
+
+		// Then it won't display any facet
+		// eslint-disable-next-line jest-dom/prefer-in-document
+		expect(screen.queryAllByRole('option')).toHaveLength(0);
+
+		// When searching with more then 3 chars
+		fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'Name' } });
+
+		// Then it will display name facet
+		// eslint-disable-next-line jest-dom/prefer-in-document
+		expect(screen.getAllByRole('option')).toHaveLength(1);
+	});
+
 	it('should not trigger onSubmit when badge definition has not changed', () => {
 		// given
 		const onSubmit = jest.fn();

diff --git a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
@@ -17,7 +17,7 @@ export const QuickSearchInput = ({
 	onSelect = () => {},
 	facetsFilter,
 	inputProps,
-	minLength = 2,
+	minLength,
 }) => {
 	const defaultFacet = useMemo(() => getDefaultFacet(facets), [facets]);
 	const [opened, setOpened] = useState(false);

diff --git a/packages/faceted-search/stories/facetedSearch.stories.js b/packages/faceted-search/stories/facetedSearch.stories.js
@@ -523,15 +523,46 @@ export const WithQuickSearchFilter = () => (
 	</FacetedSearch.Faceted>
 );
 
-export const WithQuickSearchFilterCustomizableInputTriggerLength = () => (
-	<FacetedSearch.Faceted id="my-faceted-search">
-		<p>Quick search will trigger after a minimum input length that can be customized</p>
-		<br />
-		<FacetedSearch.BasicSearch
-			badgesDefinitions={badgesDefinitions}
-			callbacks={callbacks}
-			onSubmit={action('onSubmit')}
-			quickSearchMinLength={5}
-		/>
-	</FacetedSearch.Faceted>
-);
+export const WithQuickSearchFilterCustomizableInputTriggerLength = () => {
+	const badgeNameWithLength = {
+		properties: {
+			attribute: 'name',
+			initialOperatorOpened: true,
+			initialValueOpened: false,
+			label: 'Name',
+			operator: {},
+			operators: [],
+			type: 'text',
+			placeholder: 'Enter a dataset name',
+		},
+		metadata: {
+			isAvailableForQuickSearch: true,
+			isAvailableForFacetList: true,
+			badgePerFacet: 'N',
+			entitiesPerBadge: '1',
+			operators: [
+				'containsIgnoreCase',
+				'notContainsIgnoreCase',
+				'equals',
+				'notEquals',
+				'match a regexp',
+			],
+			'data-feature': 'faceted-badge-name',
+			minLength: 5,
+		},
+	};
+	return (
+		<FacetedSearch.Faceted id="my-faceted-search">
+			<p>
+				Quick search will trigger after a minimum input length that can be customized based on badge
+				definition
+			</p>
+			<br />
+			<FacetedSearch.BasicSearch
+				badgesDefinitions={[badgeNameWithLength]}
+				callbacks={callbacks}
+				onSubmit={action('onSubmit')}
+			/>
+		</FacetedSearch.Faceted>
+	);
+};