feat(faceted-search/period): Support user provided range options (#5151)

* support user provided options & add data attributes * changeset * fix preventDefault
Talend · Jan 31, 2024 · 5770c9f · 5770c9f
1 parent 70105e2
commit 5770c9f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/.changeset/empty-rings-decide.md b/.changeset/empty-rings-decide.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': minor
+---
+
+Support user provided range options
diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js
@@ -76,7 +76,7 @@ const BadgeFaceted = ({
 
 	const onSubmitBadge = () => {
 		overlayDispatch(OVERLAY_FLOW_ACTIONS.closeAll);
-		event.preventDefault();
+		event?.preventDefault();
 		dispatch(
 			BADGES_ACTIONS.update(
 				badgeId,

diff --git a/packages/faceted-search/src/components/Badges/BadgePeriod/BadgePeriodForm.component.js b/packages/faceted-search/src/components/Badges/BadgePeriod/BadgePeriodForm.component.js
@@ -42,7 +42,6 @@ function getPeriodOptions(t) {
 			id: 'CUSTOM',
 			value: 'custom',
 			label: t('CUSTOM', { defaultValue: 'Custom' }),
-			checked: false,
 		},
 	];
 }
@@ -55,6 +54,8 @@ const BadgePeriodForm = ({ id, onChange, onSubmit, t, value, ...rest }) => {
 	const initialStartDateTime = useMemo(() => subDays(new Date(), 1), []);
 	const initialEndDateTime = useMemo(() => new Date(), []);
 
+	const options = rest.values || getPeriodOptions(t);
+
 	const resetRange = useCallback(() => {
 		onChange(null, {
 			id: 'CUSTOM',
@@ -93,13 +94,14 @@ const BadgePeriodForm = ({ id, onChange, onSubmit, t, value, ...rest }) => {
 		<Form id={`${badgePeriodFormId}-form`} onSubmit={onSubmit}>
 			{!isCustom && (
 				<StackVertical gap="0" align="normal">
-					{getPeriodOptions(t).map(rowItem => {
+					{options.map(rowItem => {
 						return (
 							<ButtonTertiary
 								key={rowItem.id}
 								onClick={event => onSelectOption(rowItem, event)}
 								data-testid={`badge-period-form-item-${rowItem.id}`}
 								data-test={`badge-period-form-item-${rowItem.id}`}
+								{...getDataAttributesFrom(rowItem)}
 							>
 								{rowItem.id === 'CUSTOM' ? (
 									<StackHorizontal gap="0" align="center" justify="spaceBetween">

diff --git a/packages/faceted-search/src/components/Badges/BadgePeriod/BadgePeriodForm.component.test.js b/packages/faceted-search/src/components/Badges/BadgePeriod/BadgePeriodForm.component.test.js
@@ -124,4 +124,34 @@ describe('BadgeMenuPeriod', () => {
 		// Then date range picker is not visible
 		expect(screen.queryByTestId('date-picker')).not.toBeInTheDocument();
 	});
+	it('should render user provided options', () => {
+		// Given
+		const props = {
+			id: 'myId',
+			value: {},
+			onChange: jest.fn(),
+			onSubmit: jest.fn(),
+			values: [
+				{
+					id: '1',
+					label: 'Custom option 1',
+					'data-tracking': 'i-track-u',
+				},
+				{
+					id: '2',
+					label: 'Fancy option 2',
+				},
+			],
+			t,
+		};
+		// When
+		render(<BadgePeriodForm {...props} />);
+		// Then
+		expect(screen.getByTestId('badge-period-form-item-1')).toHaveTextContent('Custom option 1');
+		expect(screen.getByTestId('badge-period-form-item-1')).toHaveAttribute(
+			'data-tracking',
+			'i-track-u',
+		);
+		expect(screen.getByTestId('badge-period-form-item-2')).toHaveTextContent('Fancy option 2');
+	});
 });