Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: FilterByText component sanitization #32957

Merged
merged 6 commits into from
Aug 6, 2024
Merged

chore: FilterByText component sanitization #32957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2e2661e
fix: remove nonsense props
dougfabris Aug 1, 2024
3e8be51
chore: add margin in `AppsFilters` to compensate
dougfabris Aug 1, 2024
5268027
fix: marketplace `TagList` render
dougfabris Aug 1, 2024
ea8da50
chore: revert yarn.lock
dougfabris Aug 1, 2024
e57bf2d
chore: sanitize `FilterByText` onChange handler
dougfabris Aug 2, 2024
097392f
Merge branch 'develop' into chore/sanitize-filter-by-text
kodiakhq[bot] Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 11 additions & 32 deletions apps/meteor/client/components/FilterByText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 React, { forwardRef, memo, useCallback, useEffect, useState } from 'react';
import type { ChangeEvent, FormEvent, HTMLAttributes } from 'react';
import React, { forwardRef, memo, useCallback, useState } from 'react';

type FilterByTextCommonProps = {
children?: ReactNode | undefined;
placeholder?: string;
onChange: (filter: { text: string }) => void;
type FilterByTextProps = {
onChange: (filter: 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<HTMLAttributes<HTMLInputElement>, 'is' | 'onChange'>;

const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function FilterByText(
{ placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props },
Expand All @@ -31,13 +18,10 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
const autoFocusRef = useAutoFocus(shouldAutoFocus);
const mergedRefs = useMergedRefs(ref, autoFocusRef);

const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
setText(event.currentTarget.value);
}, []);

useEffect(() => {
setFilter({ text });
}, [setFilter, text]);
setFilter(event.currentTarget.value);
};

const handleFormSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
Expand All @@ -47,6 +31,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' />}
Expand All @@ -57,13 +42,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>
);
});
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/omnichannel/businessHours/BusinessHoursTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const BusinessHoursTable = () => {

return (
<>
<FilterByText onChange={({ text }) => setText(text)} />
<FilterByText onChange={setText} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/omnichannel/monitors/MonitorsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const MonitorsTable = () => {
</FieldRow>
</Field>
</Box>
{((isSuccess && data?.monitors.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
{((isSuccess && data?.monitors.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {

return (
<>
{((isSuccess && data?.sla.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
{((isSuccess && data?.sla.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/omnichannel/tags/TagsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const TagsTable = () => {

return (
<>
{((isSuccess && data?.tags.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
{((isSuccess && data?.tags.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/omnichannel/units/UnitsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const UnitsTable = () => {

return (
<>
{((isSuccess && data?.units.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
{((isSuccess && data?.units.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
{isLoading && (
<GenericTable aria-busy>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {

return (
<>
<FilterByText onChange={({ text }): void => setText(text)} />
<FilterByText onChange={setText} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const CustomSoundsTable = ({ reload, onClick }: CustomSoundsTableProps) => {

return (
<>
<FilterByText onChange={({ text }): void => setParams(text)} />
<FilterByText onChange={setParams} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion ...eteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const CustomUserStatus = ({ reload, onClick }: CustomUserStatusProps): ReactElem

return (
<>
<FilterByText onChange={({ text }): void => setText(text)} />
<FilterByText onChange={setText} />
{data.length === 0 && <GenericNoResult />}
{data && data.length > 0 && (
<>
Expand Down
2 changes: 1 addition & 1 deletion ...nt/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const DeviceManagementAdminTable = ({ reloadRef }: { reloadRef: MutableRefObject

return (
<>
<FilterByText placeholder={t('Search_Devices_Users')} onChange={({ text }): void => setText(text)} />
<FilterByText placeholder={t('Search_Devices_Users')} onChange={setText} />
<DeviceManagementTable
data={data}
phase={phase}
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const IntegrationsTable = ({ type }: { type?: string }) => {

return (
<>
<FilterByText placeholder={t('Search_Integrations')} onChange={({ text }): void => setText(text)} />
<FilterByText placeholder={t('Search_Integrations')} onChange={setText} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
6 changes: 2 additions & 4 deletions apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTranslation } from '@rocket.chat/ui-contexts';
import React, { useCallback } from 'react';
import React from 'react';

import FilterByText from '../../../../components/FilterByText';
import DateRangePicker from './DateRangePicker';
Expand All @@ -12,10 +12,8 @@ type ModerationFilterProps = {
const ModerationFilter = ({ setText, setDateRange }: ModerationFilterProps) => {
const t = useTranslation();

const handleChange = useCallback(({ text }): void => setText(text), [setText]);

return (
<FilterByText shouldAutoFocus placeholder={t('Search')} onChange={handleChange}>
<FilterByText shouldAutoFocus placeholder={t('Search')} onChange={setText}>
<DateRangePicker onChange={setDateRange} />
</FilterByText>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
const [text, setText] = useState('');

const handleSearchTextChange = useCallback(
({ text }) => {
(text) => {
setUsersFilters({ text, roles: selectedRoles });
setText(text);
},
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const ChannelsTable = () => {

return (
<>
<FilterByText placeholder={t('Search_Channels')} onChange={({ text }): void => setText(text)} />
<FilterByText placeholder={t('Search_Channels')} onChange={setText} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const TeamsTable = () => {

return (
<>
<FilterByText placeholder={t('Teams_Search_teams')} onChange={({ text }): void => setText(text)} />
<FilterByText placeholder={t('Teams_Search_teams')} onChange={setText} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const UsersTable = ({ workspace = 'local' }): ReactElement => {

return (
<>
<FilterByText placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)} />
<FilterByText placeholder={t('Search_Users')} onChange={setText} />
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
4 changes: 2 additions & 2 deletions apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const AppsFilters = ({
const fixFiltersSize = breakpoints.includes('lg') ? { maxWidth: 'x200', minWidth: 'x200' } : null;

return (
<Box pi={24}>
<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={({ text }): void => setText(text)}>
<Box pi={24} mbe={4}>
<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={setText}>
{!isPrivateAppsPage && (
<RadioDropDown group={freePaidFilterStructure} onSelected={freePaidFilterOnSelected} flexGrow={1} {...fixFiltersSize} />
)}
Expand Down
24 changes: 15 additions & 9 deletions apps/meteor/client/views/marketplace/components/CategoryFilter/TagList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const AgentsTable = () => {
return (
<>
<AddAgent reload={refetch} />
{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const CustomFieldsTable = () => {

return (
<>
{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const DepartmentsTable = ({ archived }: { archived: boolean }) => {

return (
<>
{((isSuccess && data?.departments.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
{((isSuccess && data?.departments.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const CallTable = () => {

return (
<>
{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setText(text)} />}
{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const ChatTable = () => {

return (
<>
{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setText(text)} />}
{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
{isLoading && (
<GenericTable>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
13 changes: 6 additions & 7 deletions apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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={setTerm}>
<Button onClick={onButtonNewClick} primary>
{t('New_contact')}
</Button>
</FilterByText>
)}
{isLoading && (
<GenericTable>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const ManagersTable = () => {
return (
<>
<AddManager reload={refetch} />
{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
{isLoading && (
<GenericTable aria-busy>
<GenericTableHeader>{headers}</GenericTableHeader>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ const WebdavFilePickerModal = ({ onUpload, onClose, account }: WebdavFilePickerM
</Box>
</Box>
<Box display='flex' flexDirection='column'>
<FilterByText onChange={({ text }): void => setFilterText(text)}>
<FilterByText onChange={setFilterText}>
{typeView === 'grid' && (
<Select value={sortBy} onChange={(value): void => handleSort(value as WebdavSortOptions)} options={options} />
)}
Expand Down
Loading