[IMPROVE] Convert tag edit with department data to tsx

definition/rest/v1/omnichannel.ts

@@ -92,6 +92,11 @@ export type OmnichannelEndpoints = {
 			departments: ILivechatDepartment[];
 		}>;
 	};
+
+	'livechat/department.listByIds': {
+		GET: (params: { ids: string[]; fields?: Record<string, unknown> }) => { departments: ILivechatDepartment[] };
+	};
+
 	'livechat/custom-fields': {
 		GET: (params: PaginatedRequest<{ text: string }>) => PaginatedResult<{
 			customFields: [

ee/client/audit/Result.js

@@ -39,4 +39,6 @@ const Result = memo(({ setDataRef }) => {
 	return <Box ref={ref} />;
 });
 
+Result.displayName = 'Result';
+
 export default Result;

ee/client/omnichannel/tags/TagEdit.js

@@ -10,7 +10,7 @@ import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessag
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useForm } from '../../../../client/hooks/useForm';
 
-function TagEdit({ title, data, tagId, isNew, reload, currentDepartments, ...props }) {
+function TagEdit({ title, data, tagId, reload, currentDepartments, ...props }) {
 	const t = useTranslation();
 	const tagsRoute = useRoute('omnichannel-tags');
 

ee/client/omnichannel/tags/TagEditWithData.js

@@ -8,7 +8,7 @@ import { useEndpointData } from '../../../../client/hooks/useEndpointData';
 import TagEdit from './TagEdit';
 import TagEditWithDepartmentData from './TagEditWithDepartmentData';
 
-function TagEditWithData({ tagId, reload }) {
+function TagEditWithData({ tagId, reload, title }) {
 	const query = useMemo(() => ({ tagId }), [tagId]);
 	const { value: data, phase: state, error } = useEndpointData('livechat/tags.getOne', query);
 
@@ -29,9 +29,9 @@ function TagEditWithData({ tagId, reload }) {
 	return (
 		<>
 			{data && data.departments && data.departments.length > 0 ? (
-				<TagEditWithDepartmentData tagId={tagId} data={data} reload={reload} />
+				<TagEditWithDepartmentData tagId={tagId} data={data} reload={reload} title={title} />
 			) : (
-				<TagEdit tagId={tagId} data={data} reload={reload} />
+				<TagEdit tagId={tagId} data={data} reload={reload} title={title} />
 			)}
 		</>
 	);

ee/client/omnichannel/tags/TagEditWithDepartmentData.js → ee/client/omnichannel/tags/TagEditWithDepartmentData.tsx

@@ -1,13 +1,21 @@
 import { Callout } from '@rocket.chat/fuselage';
-import React, { useMemo } from 'react';
+import React, { ReactElement, useMemo, ReactNode } from 'react';
 
 import { FormSkeleton } from '../../../../client/components/Skeleton';
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { AsyncStatePhase } from '../../../../client/hooks/useAsyncState';
 import { useEndpointData } from '../../../../client/hooks/useEndpointData';
+import { ILivechatTag } from '../../../../definition/ILivechatTag';
 import TagEdit from './TagEdit';
 
-function TagEditWithDepartmentData({ data, ...props }) {
+type TagEditWithDepartmentDataPropsType = {
+	data: ILivechatTag;
+	title: ReactNode;
+	tagId: ILivechatTag['_id'];
+	reload: () => void;
+};
+
+function TagEditWithDepartmentData({ data, title, ...props }: TagEditWithDepartmentDataPropsType): ReactElement {
 	const t = useTranslation();
 
 	const {
@@ -16,7 +24,7 @@ function TagEditWithDepartmentData({ data, ...props }) {
 		error: currentDepartmentsError,
 	} = useEndpointData(
 		'livechat/department.listByIds',
-		useMemo(() => ({ ids: data && data.departments ? data.departments : [] }), [data]),
+		useMemo(() => ({ ids: data?.departments ? data.departments : [] }), [data]),
 	);
 
 	if ([currentDepartmentsState].includes(AsyncStatePhase.LOADING)) {
@@ -31,7 +39,7 @@ function TagEditWithDepartmentData({ data, ...props }) {
 		);
 	}
 
-	return <TagEdit currentDepartments={currentDepartments} data={data} {...props} />;
+	return <TagEdit title={title} currentDepartments={currentDepartments} data={data} {...props} />;
 }
 
 export default TagEditWithDepartmentData;