feat(TDOPS-4789/facetedSearch): callback support for BadgeMenu

.changeset/purple-trains-hug.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': minor
+---
+
+feat(TDOPS-4789/facetedSearch): callback support for BadgeMenu

packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.js

@@ -1,11 +1,18 @@
-import { useMemo } from 'react';
-import { isEmpty } from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+
+import isEmpty from 'lodash/isEmpty';
+import isObject from 'lodash/isObject';
 import PropTypes from 'prop-types';
+
 import Badge from '@talend/react-components/lib/Badge';
 
+import {
+	callbacksPropTypes,
+	operatorPropTypes,
+	operatorsPropTypes,
+} from '../../facetedSearch.propTypes';
 import { BadgeFaceted } from '../BadgeFaceted';
 import { BadgeMenuForm } from './BadgeMenuForm.component';
-import { operatorPropTypes, operatorsPropTypes } from '../../facetedSearch.propTypes';
 
 const getSelectBadgeLabel = (value, t) => {
 	const labelAll = t('FACETED_SEARCH_VALUE_ALL', { defaultValue: 'All' });
@@ -31,10 +38,37 @@ export const BadgeMenu = ({
 	displayType,
 	filterBarPlaceholder,
 	t,
+	callbacks,
 	...rest
 }) => {
+	const [options, setOptions] = useState(values);
 	const currentOperators = useMemo(() => operators, [operators]);
 	const currentOperator = operator || (currentOperators && currentOperators[0]);
+	const [isLoading, setIsLoading] = useState(true);
+	const callback = callbacks && callbacks[rest.attribute];
+	useEffect(() => {
+		if (!callback || !callback.getOptions) {
+			setIsLoading(false);
+			return;
+		}
+
+		setIsLoading(true);
+		callback
+			.getOptions()
+			.then(data => {
+				setOptions(
+					data.map(item => {
+						if (isObject(item)) {
+							return { id: item.id, label: item.label };
+						}
+						return { id: item, label: item };
+					}),
+				);
+			})
+			.finally(() => {
+				setIsLoading(false);
+			});
+	}, [callback]);
 	const badgeMenuId = `${id}-badge-menu`;
 	const badgeLabel = useMemo(() => getSelectBadgeLabel(value, t), [value, t]);
 	return (
@@ -60,8 +94,9 @@ export const BadgeMenu = ({
 					onChange={onChangeValue}
 					onSubmit={onSubmitBadge}
 					value={badgeValue}
-					values={values}
+					values={options}
 					filterBarPlaceholder={filterBarPlaceholder}
+					isLoading={isLoading}
 					t={t}
 					{...rest}
 				/>
@@ -89,6 +124,7 @@ BadgeMenu.propTypes = {
 	readOnly: PropTypes.bool,
 	removable: PropTypes.bool,
 	values: PropTypes.array,
+	callbacks: callbacksPropTypes,
 	t: PropTypes.func.isRequired,
 	displayType: PropTypes.oneOf(Object.values(Badge.TYPES)),
 	filterBarPlaceholder: PropTypes.string,

packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.test.js

@@ -1,8 +1,9 @@
-import { render } from '@testing-library/react';
-import { BadgeFacetedProvider } from '../../context/badgeFaceted.context';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-import { BadgeMenu } from './BadgeMenu.component';
 import getDefaultT from '../../../translate';
+import { BadgeFacetedProvider } from '../../context/badgeFaceted.context';
+import { BadgeMenu } from './BadgeMenu.component';
 
 const t = getDefaultT();
 
@@ -15,6 +16,7 @@ const badgeFacetedContextValue = {
 	onDeleteBadge: jest.fn(),
 	onHideOperator: jest.fn(),
 	onSubmitBadge: jest.fn(),
+	dispatch: jest.fn(),
 };
 
 const BadgeWithContext = props => (
@@ -53,4 +55,57 @@ describe('BadgeMenu', () => {
 		// Then
 		expect(document.querySelectorAll('span')[2]).toHaveTextContent('All');
 	});
+	it('should mount a badge with object data from callback', async () => {
+		// Given
+		const callbacks = {
+			id: {
+				getOptions: () => new Promise(resolve => resolve([{ id: '1234', label: 'production' }])),
+			},
+		};
+
+		const props = {
+			id: 'myId',
+			label: 'myLabel',
+			initialOperatorOpened: false,
+			initialValueOpened: true,
+			operators: ['in'],
+			callbacks,
+			values: [],
+			t: getDefaultT(),
+			attribute: 'id',
+		};
+
+		// When
+		render(
+			<BadgeFacetedProvider value={badgeFacetedContextValue}>
+				<BadgeMenu {...props} />
+			</BadgeFacetedProvider>,
+		);
+
+		// Then there is a checkbox with data taken from callback
+		await waitFor(() => {
+			expect(screen.getByRole('menuitem')).toBeVisible();
+		});
+		screen.logTestingPlaygroundURL();
+		// Then selecting an item should dispatch proper payload
+		await userEvent.click(screen.getByRole('menuitem', { name: 'production' }));
+		await userEvent.click(
+			screen.getByRole('button', {
+				name: /apply/i,
+			}),
+		);
+		expect(badgeFacetedContextValue.dispatch).toHaveBeenCalledWith({
+			payload: {
+				badgeId: 'myId',
+				metadata: { isInCreation: false },
+				properties: {
+					initialOperatorOpened: false,
+					initialValueOpened: false,
+					operator: 'in',
+					value: { checked: false, id: '1234', label: 'production' },
+				},
+			},
+			type: 'UPDATE_BADGE',
+		});
+	});
 });

packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss

@@ -48,4 +48,8 @@ $popover-screen-width: tokens.$coral-sizing-maximal;
 		width: $popover-screen-width;
 		padding-left: 0;
 	}
+
+	:global(.tc-circular-progress) {
+		height: 100%;
+	}
 }

packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js

@@ -1,17 +1,21 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import { useMemo, useState } from 'react';
+
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
+
 import { DropdownButton } from '@talend/design-system';
 import { Action } from '@talend/react-components/lib/Actions';
 import FilterBar from '@talend/react-components/lib/FilterBar';
 import Rich from '@talend/react-components/lib/Rich';
 import { getTheme } from '@talend/react-components/lib/theme';
+import CircularProgress from '@talend/react-components/src/CircularProgress';
 
-import cssModule from './BadgeMenu.module.scss';
 import { getDataAttributesFrom } from '../../../helpers/usage.helpers';
 
+import cssModule from './BadgeMenu.module.scss';
+
 const theme = getTheme(cssModule);
 
 const createRowItemEntity = value => option => {
@@ -84,21 +88,25 @@ const BadgeMenuForm = ({
 				onSubmit={onSubmit}
 			>
 				<Rich.Layout.Body id={badgeMenuFormId} className={theme('fs-badge-menu-form-body')}>
-					{visibleItems.map(rowItem => {
-						return (
-							<DropdownButton
-								key={rowItem.id}
-								onClick={event => {
-									onChange(event, rowItem);
-								}}
-								checked={rowItem.checked}
-								data-testid={`badge-menu-form-item-${rowItem.id}`}
-								data-test={`badge-menu-form-item-${rowItem.id}`}
-							>
-								<span>{rowItem.label}</span>
-							</DropdownButton>
-						);
-					})}
+					{!rest.isLoading ? (
+						visibleItems.map(rowItem => {
+							return (
+								<DropdownButton
+									key={rowItem.id}
+									onClick={event => {
+										onChange(event, rowItem);
+									}}
+									checked={rowItem.checked}
+									data-testid={`badge-menu-form-item-${rowItem.id}`}
+									data-test={`badge-menu-form-item-${rowItem.id}`}
+								>
+									<span>{rowItem.label}</span>
+								</DropdownButton>
+							);
+						})
+					) : (
+						<CircularProgress />
+					)}
 				</Rich.Layout.Body>
 				<Rich.Layout.Footer id={id} className={theme('fs-badge-menu-form-footer')}>
 					<div>
@@ -119,6 +127,8 @@ const BadgeMenuForm = ({
 						type="submit"
 						label={t('APPLY', { defaultValue: 'Apply' })}
 						bsStyle="info"
+						disabled={rest.isLoading}
+						inProgress={rest.isLoading}
 						{...getDataAttributesFrom(rest)}
 					/>
 				</Rich.Layout.Footer>

packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.test.js

@@ -64,6 +64,22 @@ describe('BadgeMenuForm', () => {
 			label: 'Item One',
 		});
 	});
+	it('should show loader icon if items are loading', () => {
+		// Given
+		const props = {
+			id: 'myId',
+			values: menuItems,
+			isLoading: true,
+			value: {},
+			t,
+		};
+		// When
+		render(<BadgeMenuForm {...props} />);
+		// Then
+		expect(screen.getAllByTestId('circular-progress')).toHaveLength(2);
+		expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+		expect(screen.getByRole('button')).toBeDisabled();
+	});
 	it('should display menuitem checked', () => {
 		// Given
 		const props = {

packages/faceted-search/src/components/facetedSearch.propTypes.js

@@ -39,6 +39,7 @@ const badgeFacetedPropTypes = PropTypes.shape({
 		isInCreation: PropTypes.bool,
 		entitiesPerBadge: PropTypes.string,
 		operators: PropTypes.arrayOf(PropTypes.string),
+		isLoading: PropTypes.bool,
 	}),
 });