chore: FilterByText component sanitization

apps/meteor/client/components/FilterByText.tsx

@@ -1,26 +1,13 @@
-import { Box, Icon, TextInput, Button, Margins } from '@rocket.chat/fuselage';
+import { Box, Icon, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useAutoFocus, useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactNode, ChangeEvent, FormEvent } from 'react';
+import type { ChangeEvent, FormEvent, AllHTMLAttributes } from 'react';
 import React, { forwardRef, memo, useCallback, useEffect, useState } from 'react';
 
-type FilterByTextCommonProps = {
-	children?: ReactNode | undefined;
-	placeholder?: string;
+type FilterByTextProps = {
 	onChange: (filter: { text: string }) => void;
 	shouldAutoFocus?: boolean;
-};
-
-type FilterByTextPropsWithButton = FilterByTextCommonProps & {
-	displayButton: true;
-	textButton: string;
-	onButtonClick: () => void;
-};
-
-type FilterByTextProps = FilterByTextCommonProps | FilterByTextPropsWithButton;
-
-const isFilterByTextPropsWithButton = (props: any): props is FilterByTextPropsWithButton =>
-	'displayButton' in props && props.displayButton === true;
+} & Omit<AllHTMLAttributes<HTMLInputElement>, 'is' | 'onChange'>;
 
 const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function FilterByText(
 	{ placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props },
@@ -47,6 +34,7 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 		<Box mb={16} mi='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
 			<Box mi={4} display='flex' flexGrow={1}>
 				<TextInput
+					{...props}
 					placeholder={placeholder ?? t('Search')}
 					ref={mergedRefs}
 					addon={<Icon name='magnifier' size='x20' />}
@@ -57,13 +45,7 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 					aria-label={placeholder ?? t('Search')}
 				/>
 			</Box>
-			{isFilterByTextPropsWithButton(props) ? (
-				<Button onClick={props.onButtonClick} mis={8} primary>
-					{props.textButton}
-				</Button>
-			) : (
-				children && <Margins all='x4'>{children}</Margins>
-			)}
+			{children && <Margins inline={4}>{children}</Margins>}
 		</Box>
 	);
 });

apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx

@@ -59,7 +59,7 @@ const AppsFilters = ({
 	const fixFiltersSize = breakpoints.includes('lg') ? { maxWidth: 'x200', minWidth: 'x200' } : null;
 
 	return (
-		<Box pi={24}>
+		<Box pi={24} mbe={4}>
 			<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={({ text }): void => setText(text)}>
 				{!isPrivateAppsPage && (
 					<RadioDropDown group={freePaidFilterStructure} onSelected={freePaidFilterOnSelected} flexGrow={1} {...fixFiltersSize} />

apps/meteor/client/views/marketplace/components/CategoryFilter/TagList.tsx

@@ -8,14 +8,20 @@ type TagListProps = {
 	onClick: CategoryDropDownListProps['onSelected'];
 };
 
-const TagList = ({ categories, onClick }: TagListProps) => (
-	<ButtonGroup wrap small>
-		{categories.map((category) => (
-			<Chip flexShrink={0} key={category.id} onClick={(): void => onClick(category)} disabled={undefined} mbe={8}>
-				{category.label}
-			</Chip>
-		))}
-	</ButtonGroup>
-);
+const TagList = ({ categories, onClick }: TagListProps) => {
+	if (!categories.length) {
+		return null;
+	}
+
+	return (
+		<ButtonGroup wrap small>
+			{categories.map((category) => (
+				<Chip key={category.id} onClick={() => onClick(category)}>
+					{category.label}
+				</Chip>
+			))}
+		</ButtonGroup>
+	);
+};
 
 export default TagList;

apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx

@@ -1,4 +1,4 @@
-import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle, Box } from '@rocket.chat/fuselage';
+import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle, Box, Button } from '@rocket.chat/fuselage';
 import { useDebouncedState, useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import { hashQueryKey } from '@tanstack/react-query';
@@ -106,12 +106,11 @@ function ContactTable(): ReactElement {
 	return (
 		<>
 			{((isSuccess && data?.visitors.length > 0) || queryHasChanged) && (
-				<FilterByText
-					displayButton
-					textButton={t('New_contact')}
-					onButtonClick={onButtonNewClick}
-					onChange={({ text }): void => setTerm(text)}
-				/>
+				<FilterByText onChange={({ text }) => setTerm(text)}>
+					<Button onClick={onButtonNewClick} primary>
+						{t('New_contact')}
+					</Button>
+				</FilterByText>
 			)}
 			{isLoading && (
 				<GenericTable>

yarn.lock

@@ -10370,12 +10370,16 @@ __metadata:
     "@storybook/testing-library": ~0.0.13
     "@types/babel__core": ~7.20.3
     "@types/jest": ~29.5.12
+    "@types/react": ~17.0.69
+    "@types/react-dom": ~17.0.22
     eslint: ~8.45.0
     eslint-plugin-react: ~7.32.2
     eslint-plugin-react-hooks: ~4.6.0
     eslint-plugin-storybook: ~0.6.15
     jest: ~29.7.0
+    react: ~17.0.2
     react-docgen-typescript-plugin: ~1.0.5
+    react-dom: ~17.0.2
     ts-jest: ~29.1.1
     typescript: ~5.3.3
   peerDependencies: