From aab0eeb360f4865a1d8ab22cc14310fb4d246a4f Mon Sep 17 00:00:00 2001 From: Gbacc Date: Thu, 6 Jul 2023 11:20:36 +0200 Subject: [PATCH] feat(TDOPS-4704): faceted search configurable input text length (#4785) * feat(TDOPS-4704): faceted search configurable input text length * fix typo --- .changeset/five-files-join.md | 10 ++++ .../BadgeText/BadgeTextForm.component.js | 17 +++++- .../BasicSearch/BasicSearch.component.js | 5 +- .../BasicSearch/BasicSearch.component.test.js | 38 +++++++++++++ .../QuickSearchInput.component.js | 2 +- .../stories/facetedSearch.stories.js | 55 +++++++++++++++---- 6 files changed, 111 insertions(+), 16 deletions(-) create mode 100644 .changeset/five-files-join.md diff --git a/.changeset/five-files-join.md b/.changeset/five-files-join.md new file mode 100644 index 00000000000..cd6568624e4 --- /dev/null +++ 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 index b5afc03f33c..57f0af0021f 100644 --- 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} /> @@ -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 index 9fcb18b35dd..846833afe4a 100644 --- 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 (
@@ -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 index 0398027629d..d789f8fec46 100644 --- 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( + + + facets.filter(facet => facet.properties.label === term) + } + /> + , + ); + // 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 index 4d15ad19bb7..25a20fb0569 100644 --- 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 index d581f9039ea..6dca07fb7f4 100644 --- a/packages/faceted-search/stories/facetedSearch.stories.js +++ b/packages/faceted-search/stories/facetedSearch.stories.js @@ -523,15 +523,46 @@ export const WithQuickSearchFilter = () => ( ); -export const WithQuickSearchFilterCustomizableInputTriggerLength = () => ( - -

Quick search will trigger after a minimum input length that can be customized

-
- - -); +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 ( + +

+ Quick search will trigger after a minimum input length that can be customized based on badge + definition +

+
+ + + ); +};