[pull] develop from RocketChat:develop

apps/meteor/.mocharc.js

@@ -10,7 +10,7 @@ module.exports = {
 	...base, // see https://github.com/mochajs/mocha/issues/3916
 	exit: true,
 	spec: [
-		'lib/callbacks.spec.ts',
+		'server/lib/callbacks.spec.ts',
 		'server/lib/ldap/*.spec.ts',
 		'server/lib/ldap/**/*.spec.ts',
 		'server/lib/dataExport/**/*.spec.ts',

apps/meteor/app/livechat/server/lib/sendTranscript.ts

@@ -9,7 +9,7 @@ import {
 	isFileImageAttachment,
 	type AtLeast,
 } from '@rocket.chat/core-typings';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import { Logger } from '@rocket.chat/logger';
 import { MessageTypes } from '@rocket.chat/message-types';
 import { LivechatRooms, Messages, Uploads, Users } from '@rocket.chat/models';

apps/meteor/app/slackbridge/server/RocketAdapter.js → apps/meteor/app/slackbridge/server/RocketAdapter.ts

@@ -1,3 +1,8 @@
+// This is a JS File that was renamed to TS so it won't lose its git history when converted to TS
+// TODO: Remove the following lint/ts instructions when the file gets properly converted
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 import util from 'util';
 
 import { Messages, Rooms, Users } from '@rocket.chat/models';

apps/meteor/app/slackbridge/server/SlackAPI.js → apps/meteor/app/slackbridge/server/SlackAPI.ts

@@ -1,3 +1,7 @@
+// This is a JS File that was renamed to TS so it won't lose its git history when converted to TS
+// TODO: Remove the following lint/ts instructions when the file gets properly converted
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 import { serverFetch as fetch } from '@rocket.chat/server-fetch';
 
 export class SlackAPI {

apps/meteor/app/slackbridge/server/SlackAdapter.js → apps/meteor/app/slackbridge/server/SlackAdapter.ts

@@ -1,3 +1,9 @@
+// This is a JS File that was renamed to TS so it won't lose its git history when converted to TS
+// TODO: Remove the following lint/ts instructions when the file gets properly converted
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 import http from 'http';
 import https from 'https';
 import url from 'url';

apps/meteor/app/slackbridge/server/slackbridge.js → apps/meteor/app/slackbridge/server/slackbridge.ts

@@ -1,7 +1,12 @@
+// This is a JS File that was renamed to TS so it won't lose its git history when converted to TS
+// TODO: Remove the following lint/ts instructions when the file gets properly converted
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 import { debounce } from 'lodash';
 
-import RocketAdapter from './RocketAdapter.js';
-import SlackAdapter from './SlackAdapter.js';
+import RocketAdapter from './RocketAdapter';
+import SlackAdapter from './SlackAdapter';
 import { classLogger, connLogger } from './logger';
 import { settings } from '../../settings/server';
 

apps/meteor/app/slackbridge/server/slackbridge_import.server.js → apps/meteor/app/slackbridge/server/slackbridge_import.server.ts

@@ -1,3 +1,7 @@
+// This is a JS File that was renamed to TS so it won't lose its git history when converted to TS
+// TODO: Remove the following lint/ts instructions when the file gets properly converted
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 import { Rooms, Users } from '@rocket.chat/models';
 import { Random } from '@rocket.chat/random';
 import { Match } from 'meteor/check';

apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx

@@ -1,5 +1,4 @@
 import { Box, SidebarItem } from '@rocket.chat/fuselage';
-import type colors from '@rocket.chat/fuselage-tokens/colors';
 import type { ReactElement, ReactNode } from 'react';
 import { memo } from 'react';
 
@@ -8,11 +7,6 @@ type SidebarGenericItemProps = {
 	active?: boolean;
 	featured?: boolean;
 	children: ReactNode;
-	customColors?: {
-		default: (typeof colors)[string];
-		hover: (typeof colors)[string];
-		active: (typeof colors)[string];
-	};
 	externalUrl?: boolean;
 };
 

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx

@@ -17,15 +17,7 @@ const CustomUserStatusRow = ({ status, onClick }: CustomUserStatusRowProps): Rea
 	const { t } = useTranslation();
 
 	return (
-		<GenericTableRow
-			key={_id}
-			onKeyDown={(): void => onClick(_id)}
-			onClick={(): void => onClick(_id)}
-			tabIndex={0}
-			role='link'
-			action
-			qa-user-id={_id}
-		>
+		<GenericTableRow key={_id} onKeyDown={() => onClick(_id)} onClick={() => onClick(_id)} tabIndex={0} action>
 			<GenericTableCell fontScale='p2' color='default' style={style}>
 				<MarkdownText content={name} parseEmoji={true} variant='inline' />
 			</GenericTableCell>

apps/meteor/client/views/admin/engagementDashboard/users/ContentForDays.tsx

@@ -1,6 +1,6 @@
 import { ResponsiveBar } from '@nivo/bar';
 import { Box, Flex, IconButton, Margins, Skeleton } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import moment from 'moment';
 import type { ReactElement } from 'react';
 import { useMemo } from 'react';

apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx

@@ -164,13 +164,7 @@ const AgentEdit = ({ agentData, agentDepartments }: AgentEditProps) => {
 										name='status'
 										control={control}
 										render={({ field }) => (
-											<Select
-												id={statusField}
-												data-qa-id='agent-edit-status'
-												{...field}
-												options={statusOptions}
-												placeholder={t('Select_an_option')}
-											/>
+											<Select id={statusField} {...field} options={statusOptions} placeholder={t('Select_an_option')} />
 										)}
 									/>
 								</FieldRow>
@@ -185,7 +179,7 @@ const AgentEdit = ({ agentData, agentDepartments }: AgentEditProps) => {
 					<Button type='reset' disabled={!isDirty} onClick={() => reset()}>
 						{t('Reset')}
 					</Button>
-					<Button form={formId} primary type='submit' data-qa-id='agent-edit-save' disabled={!isDirty}>
+					<Button form={formId} primary type='submit' disabled={!isDirty}>
 						{t('Save')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/omnichannel/agents/AgentInfoAction.tsx

@@ -9,7 +9,7 @@ type AgentInfoActionProps = {
 } & Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const AgentInfoAction = ({ icon, label, ...props }: AgentInfoActionProps) => (
-	<Button icon={icon} data-qa={`agent-info-action-${label?.toLowerCase()}`} title={label} {...props}>
+	<Button icon={icon} title={label} {...props}>
 		{label}
 	</Button>
 );

apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx

@@ -96,9 +96,9 @@ const AgentsTable = () => {
 			)}
 			{isSuccess && data?.users.length > 0 && (
 				<>
-					<GenericTable aria-busy={isLoading} data-qa-id='agents-table'>
+					<GenericTable aria-label={t('Agents')} aria-busy={isLoading}>
 						<GenericTableHeader>{headers}</GenericTableHeader>
-						<GenericTableBody data-qa='GenericTableAgentInfoBody'>
+						<GenericTableBody>
 							{data?.users.map((user) => <AgentsTableRow key={user._id} user={user} mediaQuery={mediaQuery} />)}
 						</GenericTableBody>
 					</GenericTable>

apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTableRow.tsx

@@ -27,7 +27,7 @@ const AgentsTableRow = ({
 	const handleDelete = useRemoveAgent(_id);
 
 	return (
-		<GenericTableRow data-qa-id={username} action onClick={() => router.navigate(`/omnichannel/agents/info/${_id}`)}>
+		<GenericTableRow action onClick={() => router.navigate(`/omnichannel/agents/info/${_id}`)}>
 			<GenericTableCell>
 				<Box display='flex' alignItems='center'>
 					{username && <UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag} />}

apps/meteor/client/views/omnichannel/agents/hooks/useRemoveAgent.tsx

@@ -30,15 +30,7 @@ export const useRemoveAgent = (uid: ILivechatAgent['_id']) => {
 			}
 		};
 
-		setModal(
-			<GenericModal
-				data-qa-id='remove-agent-modal'
-				variant='danger'
-				onConfirm={onDeleteAgent}
-				onCancel={() => setModal()}
-				confirmText={t('Delete')}
-			/>,
-		);
+		setModal(<GenericModal variant='danger' onConfirm={onDeleteAgent} onCancel={() => setModal()} confirmText={t('Delete')} />);
 	});
 
 	return handleDelete;

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursRow.tsx

@@ -27,7 +27,7 @@ const BusinessHoursRow = ({ _id, name, timezone, workHours, active, type }: Seri
 	const openDays = useMemo(() => workHours.filter(({ open }) => !!open).map(({ day }) => day), [workHours]);
 
 	return (
-		<GenericTableRow key={_id} role='link' action tabIndex={0} onClick={handleClick} onKeyDown={handleKeyDown}>
+		<GenericTableRow key={_id} action tabIndex={0} onClick={handleClick} onKeyDown={handleKeyDown}>
 			<GenericTableCell withTruncatedText>{name || t('Default')}</GenericTableCell>
 			<GenericTableCell withTruncatedText>{t(timezone.name as TranslationKey)}</GenericTableCell>
 			<GenericTableCell withTruncatedText>{openDays.join(', ')}</GenericTableCell>

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.tsx

@@ -65,7 +65,7 @@ const BusinessHoursTable = () => {
 			{isSuccess && data?.businessHours.length === 0 && <GenericNoResults />}
 			{isSuccess && data?.businessHours.length > 0 && (
 				<>
-					<GenericTable>
+					<GenericTable aria-label={t('Business_Hours')}>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
 							{data?.businessHours.map((businessHour) => <BusinessHoursRow key={businessHour._id} {...businessHour} />)}

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesTable.tsx

@@ -152,7 +152,7 @@ const CannedResponsesTable = () => {
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
 							{data?.cannedResponses.map(({ _id, shortcut, scope, createdBy, _createdAt, tags = [] }) => (
-								<GenericTableRow key={_id} tabIndex={0} role='link' onClick={onRowClick(_id, scope)} action qa-user-id={_id}>
+								<GenericTableRow key={_id} tabIndex={0} role='link' onClick={onRowClick(_id, scope)} action>
 									<GenericTableCell withTruncatedText>{shortcut}</GenericTableCell>
 									<GenericTableCell withTruncatedText>{defaultOptions[scope as Scope]}</GenericTableCell>
 									<GenericTableCell withTruncatedText>

apps/meteor/client/views/omnichannel/customFields/CustomFieldsPage.tsx

@@ -21,9 +21,7 @@ const CustomFieldsPage = () => {
 		<Page flexDirection='row'>
 			<Page>
 				<PageHeader title={t('Custom_Fields')}>
-					<Button data-qa-id='CustomFieldPageBtnNew' onClick={() => router.navigate('/omnichannel/customfields/new')}>
-						{t('Create_custom_field')}
-					</Button>
+					<Button onClick={() => router.navigate('/omnichannel/customfields/new')}>{t('Create_custom_field')}</Button>
 				</PageHeader>
 				<PageContent>
 					<CustomFieldsTable />

apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx

@@ -104,11 +104,11 @@ const CustomFieldsTable = () => {
 
 			{isSuccess && data.customFields.length > 0 && (
 				<>
-					<GenericTable aria-busy={isLoading} aria-live='assertive'>
+					<GenericTable aria-label={t('Custom_Fields')} aria-busy={isLoading} aria-live='polite'>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
 							{data.customFields.map(({ label, _id, scope, visibility }) => (
-								<GenericTableRow key={_id} tabIndex={0} role='link' onClick={onRowClick(_id)} action qa-user-id={_id}>
+								<GenericTableRow key={_id} tabIndex={0} onClick={onRowClick(_id)} action>
 									<GenericTableCell withTruncatedText>{_id}</GenericTableCell>
 									<GenericTableCell withTruncatedText>{label}</GenericTableCell>
 									<GenericTableCell withTruncatedText>{scope === 'visitor' ? t('Visitor') : t('Room')}</GenericTableCell>

apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx

@@ -19,7 +19,7 @@ const AgentRow = ({ index, agent, register, onRemove }: AgentRowProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<GenericTableRow key={agent.agentId} tabIndex={0} role='link' action qa-user-id={agent.agentId}>
+		<GenericTableRow key={agent.agentId} tabIndex={0} action>
 			<GenericTableCell withTruncatedText>
 				<AgentAvatar name={agent.name || ''} username={agent.username || ''} />
 			</GenericTableCell>

apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx

@@ -26,22 +26,19 @@ function DepartmentAgentsTable({ control, register, 'aria-labelledby': ariaLabel
 	return (
 		<>
 			<AddAgent aria-labelledby={ariaLabelledBy} agentList={agentList} onAdd={append} />
-
-			<GenericTable>
+			<GenericTable aria-label={t('Agents')}>
 				<GenericTableHeader>
 					<GenericTableHeaderCell w='x200'>{t('Name')}</GenericTableHeaderCell>
 					<GenericTableHeaderCell w='x140'>{t('Count')}</GenericTableHeaderCell>
 					<GenericTableHeaderCell w='x120'>{t('Order')}</GenericTableHeaderCell>
 					<GenericTableHeaderCell w='x40'>{t('Remove')}</GenericTableHeaderCell>
 				</GenericTableHeader>
-
 				<GenericTableBody>
 					{page.map((agent, index) => (
 						<AgentRow key={agent.id} index={index} agent={agent} register={register} onRemove={() => remove(index)} />
 					))}
 				</GenericTableBody>
 			</GenericTable>
-
 			<Pagination
 				divider
 				current={current}

apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx

@@ -30,20 +30,13 @@ const DepartmentTags = ({ error, value: tags, onChange, ...props }: DepartmentTa
 		<>
 			<FieldRow>
 				<TextInput
-					data-qa='DepartmentEditTextInput-ConversationClosingTags'
 					error={error}
 					placeholder={t('Enter_a_tag')}
 					value={tagText}
 					onChange={(e: FormEvent<HTMLInputElement>) => setTagText(e.currentTarget.value)}
 					{...props}
 				/>
-				<Button
-					disabled={Boolean(!tagText.trim()) || tags.includes(tagText)}
-					data-qa='DepartmentEditAddButton-ConversationClosingTags'
-					mis={8}
-					title={t('Add')}
-					onClick={handleAddTag}
-				>
+				<Button disabled={Boolean(!tagText.trim()) || tags.includes(tagText)} mis={8} title={t('Add')} onClick={handleAddTag}>
 					{t('Add')}
 				</Button>
 			</FieldRow>

apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx

@@ -18,6 +18,7 @@ type DepartmentItemMenuProps = {
 	archived: boolean;
 };
 
+// TODO: Use MenuV2 instead of Menu
 const DepartmentItemMenu = ({ department, archived }: DepartmentItemMenuProps): ReactElement => {
 	const t = useTranslation();
 	const queryClient = useQueryClient();
@@ -91,7 +92,7 @@ const DepartmentItemMenu = ({ department, archived }: DepartmentItemMenuProps):
 			disabled: !departmentRemovalEnabled,
 		},
 	};
-	return <Menu options={menuOptions} />;
+	return <Menu title={t('Options')} options={menuOptions} />;
 };
 
 export default DepartmentItemMenu;

apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx

@@ -121,7 +121,7 @@ const DepartmentsTable = ({ archived }: { archived: boolean }) => {
 			)}
 			{isSuccess && data?.departments.length > 0 && (
 				<>
-					<GenericTable aria-busy={isLoading} aria-live='assertive'>
+					<GenericTable aria-label={t('Departments')} aria-busy={isLoading} aria-live='polite'>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
 							{data.departments.map((department: Omit<ILivechatDepartment, '_updatedAt'>) => (

apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx

@@ -41,13 +41,13 @@ const RemoveDepartmentModal = ({ _id = '', name, reset, onClose }: RemoveDepartm
 			title={t('Delete_Department?')}
 			onClose={onClose}
 			variant='danger'
-			data-qa-id='delete-department-modal'
 			confirmDisabled={text !== name}
 		>
 			<Box mbe={16}>{t('Are_you_sure_delete_department')}</Box>
 			<Box mbe={16} display='flex' justifyContent='stretch'>
 				<Input
 					value={text}
+					aria-label={t('Department_name')}
 					name='confirmDepartmentName'
 					onChange={(event: ChangeEvent<HTMLInputElement>) => setText(event.currentTarget.value)}
 				/>