feat(faceted-search/BadgeMenu): "Show selected" toggle on BadgeMenu (#…

…4908) * add 'show selected' toggle for BadgeMenu * changeset
Talend · Sep 27, 2023 · 8361389 · 8361389
1 parent 500a29c
commit 8361389
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 7 deletions.
diff --git a/.changeset/smooth-dodos-dance.md b/.changeset/smooth-dodos-dance.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': minor
+---
+
+"Show selected" toggle on BadgeMenu
diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss
@@ -21,6 +21,10 @@ $popover-screen-width: tokens.$coral-sizing-maximal;
 
 		.menu-items-filter {
 			margin: 0;
+
+			:global(.btn) {
+				margin: 0;
+			}
 		}
 	}
 
@@ -42,5 +46,6 @@ $popover-screen-width: tokens.$coral-sizing-maximal;
 	:global(.tc-tooltip-footer) {
 		min-width: auto;
 		width: $popover-screen-width;
+		padding-left: 0;
 	}
 }
diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-autofocus */
-import { useCallback, useState } from 'react';
+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';
@@ -21,12 +22,15 @@ const createRowItemEntity = value => option => {
 	};
 };
 
-const getRows = (values, value, filterValue) => {
-	const formatFilterValue = filterValue.trim().toLocaleLowerCase();
+const getRows = (values, value) => {
+	return values.map(createRowItemEntity(value));
+};
 
-	return values
+const getVisibleRows = (rows, filterValue, showAll) => {
+	const formatFilterValue = filterValue.trim().toLocaleLowerCase();
+	return rows
 		.filter(option => get(option, 'label', '').toLocaleLowerCase().includes(formatFilterValue))
-		.map(createRowItemEntity(value));
+		.filter(row => (showAll ? true : row.checked));
 };
 
 const BadgeMenuForm = ({
@@ -40,9 +44,17 @@ const BadgeMenuForm = ({
 	...rest
 }) => {
 	const [filter, setFilter] = useState('');
+	const [showAll, setShowAll] = useState(true);
 
 	const badgeMenuFormId = `${id}-menu-form`;
-	const items = useCallback(getRows(values, value, filter), [values, value, filter]);
+	const items = useMemo(() => getRows(values, value), [values, value]);
+	const visibleItems = useMemo(
+		() => getVisibleRows(items, filter, showAll),
+		[items, filter, showAll],
+	);
+	const showSelectedToggleLabel = showAll
+		? t('SHOW_SELECTED_ITEM', { defaultValue: 'Selected' })
+		: t('SHOW_ALL_ITMES', { defaultValue: 'Show all' });
 	return (
 		<>
 			<Rich.Layout.Header className={theme('fs-badge-menu-form-header')}>
@@ -72,7 +84,7 @@ const BadgeMenuForm = ({
 				onSubmit={onSubmit}
 			>
 				<Rich.Layout.Body id={badgeMenuFormId} className={theme('fs-badge-menu-form-body')}>
-					{items.map(rowItem => {
+					{visibleItems.map(rowItem => {
 						return (
 							<DropdownButton
 								key={rowItem.id}
@@ -89,6 +101,20 @@ const BadgeMenuForm = ({
 					})}
 				</Rich.Layout.Body>
 				<Rich.Layout.Footer id={id} className={theme('fs-badge-menu-form-footer')}>
+					<div>
+						{!isEmpty(value) && (
+							<Action
+								type="button"
+								onClick={() => {
+									setShowAll(!showAll);
+									setFilter('');
+								}}
+								label={showSelectedToggleLabel}
+								bsStyle="link"
+								className={theme('fs-badge-menu-form-left-button')}
+							/>
+						)}
+					</div>
 					<Action
 						type="submit"
 						label={t('APPLY', { defaultValue: 'Apply' })}

diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.test.js b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.test.js
@@ -109,6 +109,38 @@ describe('BadgeMenuForm', () => {
 		expect(screen.queryByTestId('badge-menu-form-item-item-two')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('badge-menu-form-item-item-three')).not.toBeInTheDocument();
 	});
+	it('should show selected item when click on "Selected" button', () => {
+		// Given
+		const props = {
+			id: 'myId',
+			value: {
+				id: 'item-one',
+				label: 'Item One',
+			},
+			values: menuItems,
+			onChange: jest.fn(),
+			onSubmit: jest.fn(),
+			t,
+		};
+		// When
+		render(<BadgeMenuForm {...props} />);
+		// Then all items are visible by default
+		expect(screen.getByTestId('badge-menu-form-item-item-one')).toBeVisible();
+		expect(screen.getByTestId('badge-menu-form-item-item-two')).toBeVisible();
+		expect(screen.getByTestId('badge-menu-form-item-item-three')).toBeVisible();
+		// When click on "Selected" button
+		userEvent.click(screen.getByRole('button', { name: /selected/i }));
+		// Then only item One is visible
+		expect(screen.getByTestId('badge-menu-form-item-item-one')).toBeVisible();
+		expect(screen.queryByTestId('badge-menu-form-item-item-two')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('badge-menu-form-item-item-three')).not.toBeInTheDocument();
+		// When click on "Show all" button
+		userEvent.click(screen.getByRole('button', { name: /show all/i }));
+		// Then all items are visible
+		expect(screen.getByTestId('badge-menu-form-item-item-one')).toBeVisible();
+		expect(screen.getByTestId('badge-menu-form-item-item-two')).toBeVisible();
+		expect(screen.getByTestId('badge-menu-form-item-item-three')).toBeVisible();
+	});
 
 	it('should call the submit callback', () => {
 		const onSubmit = jest.fn();