Regression: Fixes empty department field on edit canned responses (#22741)

* Regression: Fixes empty department field on edit canned responses

* Conditional to avoid calling unnecessary endpoints

Co-authored-by: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>

client/contexts/ServerContext/endpoints.ts

@@ -19,6 +19,7 @@ import { ImMembersEndpoint } from './endpoints/v1/im/members';
 import { AppearanceEndpoint as LivechatAppearanceEndpoint } from './endpoints/v1/livechat/appearance';
 import { LivechatCustomFieldsEndpoint } from './endpoints/v1/livechat/customFields';
 import { LivechatDepartment } from './endpoints/v1/livechat/department';
+import { LivechatDepartmentSingle } from './endpoints/v1/livechat/departmentSingle';
 import { LivechatDepartmentsByUnit } from './endpoints/v1/livechat/departmentsByUnit';
 import { LivechatMonitorsList } from './endpoints/v1/livechat/monitorsList';
 import { LivechatRoomOnHoldEndpoint } from './endpoints/v1/livechat/onHold';
@@ -26,6 +27,7 @@ import { LivechatRoomsEndpoint } from './endpoints/v1/livechat/rooms';
 import { LivechatTagsList } from './endpoints/v1/livechat/tagsList';
 import { LivechatUsersAgentEndpoint } from './endpoints/v1/livechat/usersAgent';
 import { LivechatVisitorInfoEndpoint } from './endpoints/v1/livechat/visitorInfo';
+import { CannedResponseEndpoint } from './endpoints/v1/omnichannel/cannedResponse';
 import { CannedResponsesEndpoint } from './endpoints/v1/omnichannel/cannedResponses';
 import { AutocompleteAvailableForTeamsEndpoint as RoomsAutocompleteTeamsEndpoint } from './endpoints/v1/rooms/autocompleteAvailableForTeams';
 import { AutocompleteChannelAndPrivateEndpoint as RoomsAutocompleteEndpoint } from './endpoints/v1/rooms/autocompleteChannelAndPrivate';
@@ -66,6 +68,7 @@ export type ServerEndpoints = {
 	'livechat/monitors.list': LivechatMonitorsList;
 	'livechat/tags.list': LivechatTagsList;
 	'livechat/department': LivechatDepartment;
+	'livechat/department/${string}': LivechatDepartmentSingle;
 	'livechat/departments.by-unit/': LivechatDepartmentsByUnit;
 	'engagement-dashboard/users/active-users': EngagementDashboardActiveUsersEndpoint;
 	'rooms.info': RoomsInfoEndpoint;
@@ -74,6 +77,7 @@ export type ServerEndpoints = {
 	'livechat/rooms': LivechatRoomsEndpoint;
 	'livechat/users/agent': LivechatUsersAgentEndpoint;
 	'canned-responses': CannedResponsesEndpoint;
+	'canned-responses/${string}': CannedResponseEndpoint;
 };
 
 export type ServerEndpointPath = keyof ServerEndpoints;

client/contexts/ServerContext/endpoints/v1/livechat/departmentSingle.ts

@@ -0,0 +1,10 @@
+import { ILivechatDepartment } from '../../../../../../definition/ILivechatDepartment';
+
+export type LivechatDepartmentSingleGetReturn = {
+	department: ILivechatDepartment;
+	success: boolean;
+};
+
+export type LivechatDepartmentSingle = {
+	GET: () => LivechatDepartmentSingleGetReturn;
+};

client/contexts/ServerContext/endpoints/v1/omnichannel/cannedResponse.tsx

@@ -0,0 +1,10 @@
+import { IOmnichannelCannedResponse } from '../../../../../../definition/IOmnichannelCannedResponse';
+
+export type CannedResponseEndpointGetReturn = {
+	cannedResponse: IOmnichannelCannedResponse;
+	success: boolean;
+};
+
+export type CannedResponseEndpoint = {
+	GET: () => CannedResponseEndpointGetReturn;
+};

ee/client/omnichannel/cannedResponses/CannedResponseEdit.tsx

@@ -6,16 +6,19 @@ import Page from '../../../../client/components/Page';
 import { useRole } from '../../../../client/contexts/AuthorizationContext';
 import { useRoute } from '../../../../client/contexts/RouterContext';
 import { useEndpoint } from '../../../../client/contexts/ServerContext';
+import { LivechatDepartmentSingleGetReturn } from '../../../../client/contexts/ServerContext/endpoints/v1/livechat/departmentSingle';
+import { CannedResponseEndpointGetReturn } from '../../../../client/contexts/ServerContext/endpoints/v1/omnichannel/cannedResponse';
 import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessagesContext';
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useForm } from '../../../../client/hooks/useForm';
 import CannedResponseForm from './components/cannedResponseForm';
 
 const CannedResponseEdit: FC<{
-	data: any;
+	data?: CannedResponseEndpointGetReturn;
 	reload: () => void;
-	isNew: boolean;
-}> = ({ data, reload, isNew = false }) => {
+	isNew?: boolean;
+	departmentData?: LivechatDepartmentSingleGetReturn;
+}> = ({ data, reload, isNew = false, departmentData = {} }) => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const Route = useRoute('omnichannel-canned-responses');
@@ -38,7 +41,7 @@ const CannedResponseEdit: FC<{
 		scope: data ? data.cannedResponse.scope : 'user',
 		departmentId:
 			data && data.cannedResponse && data.cannedResponse.departmentId
-				? data.cannedResponse.departmentId
+				? { value: data.cannedResponse.departmentId, label: departmentData?.department?.name }
 				: '',
 	});
 

ee/client/omnichannel/cannedResponses/CannedResponseEditWithData.tsx

@@ -1,15 +1,22 @@
 import { Callout } from '@rocket.chat/fuselage';
-import React, { useMemo } from 'react';
+import React, { FC } 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 CannedResponseEdit from './CannedResponseEdit';
+import CannedResponseEditWithDepartmentData from './CannedResponseEditWithDepartmentData';
 
-function CannedResponseEditWithData({ cannedResponseId, reload, title }) {
-	const query = useMemo(() => ({ _id: cannedResponseId }), [cannedResponseId]);
-	const { value: data, phase: state, error } = useEndpointData('canned-responses.getOne', query);
+const CannedResponseEditWithData: FC<{
+	cannedResponseId: string;
+	reload: () => void;
+}> = ({ cannedResponseId, reload }) => {
+	const {
+		value: data,
+		phase: state,
+		error,
+	} = useEndpointData(`canned-responses/${cannedResponseId}` as 'canned-responses/${string}');
 
 	const t = useTranslation();
 
@@ -25,14 +32,11 @@ function CannedResponseEditWithData({ cannedResponseId, reload, title }) {
 		);
 	}
 
-	return (
-		<CannedResponseEdit
-			title={title}
-			cannedResponseId={cannedResponseId}
-			data={data}
-			reload={reload}
-		/>
-	);
-}
+	if (data?.cannedResponse?.scope === 'department') {
+		return <CannedResponseEditWithDepartmentData data={data} reload={reload} />;
+	}
+
+	return <CannedResponseEdit data={data} reload={reload} />;
+};
 
 export default CannedResponseEditWithData;

ee/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx

@@ -0,0 +1,39 @@
+import { Callout } from '@rocket.chat/fuselage';
+import React, { useMemo, FC } from 'react';
+
+import { FormSkeleton } from '../../../../client/components/Skeleton';
+import { CannedResponseEndpointGetReturn } from '../../../../client/contexts/ServerContext/endpoints/v1/omnichannel/cannedResponse';
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import { AsyncStatePhase } from '../../../../client/hooks/useAsyncState';
+import { useEndpointData } from '../../../../client/hooks/useEndpointData';
+import CannedResponseEdit from './CannedResponseEdit';
+
+const CannedResponseEditWithData: FC<{
+	data: CannedResponseEndpointGetReturn | undefined;
+	reload: () => void;
+}> = ({ data, reload }) => {
+	const departmentId = useMemo(() => data?.cannedResponse?.departmentId, [data]) as string;
+	const {
+		value: departmentData,
+		phase: state,
+		error,
+	} = useEndpointData(`livechat/department/${departmentId}` as 'livechat/department/${string}');
+
+	const t = useTranslation();
+
+	if (state === AsyncStatePhase.LOADING) {
+		return <FormSkeleton />;
+	}
+
+	if (error) {
+		return (
+			<Callout m='x16' type='danger'>
+				{t('Not_Available')}
+			</Callout>
+		);
+	}
+
+	return <CannedResponseEdit data={data} reload={reload} departmentData={departmentData} />;
+};
+
+export default CannedResponseEditWithData;

ee/client/omnichannel/cannedResponses/CannedResponseNew.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-import CannedResponseEdit from './CannedResponseEdit';
-
-function CannedResponseNew({ reload }) {
-	return <CannedResponseEdit reload={reload} isNew />;
-}
-
-export default CannedResponseNew;

ee/client/omnichannel/cannedResponses/CannedResponseNew.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+
+import CannedResponseEdit from './CannedResponseEdit';
+
+const CannedResponseNew: FC<{ reload: () => void }> = ({ reload }) => (
+	<CannedResponseEdit reload={reload} isNew />
+);
+
+export default CannedResponseNew;

ee/client/omnichannel/cannedResponses/CannedResponsesRoute.tsx

@@ -172,10 +172,8 @@ const CannedResponsesRoute: FC = () => {
 		[getTime, onRowClick, reload],
 	);
 
-	if (context === 'edit') {
-		return (
-			<CannedResponseEditWithData reload={reload} cannedResponseId={id} title={t('Edit_Tag')} />
-		);
+	if (context === 'edit' && id) {
+		return <CannedResponseEditWithData reload={reload} cannedResponseId={id} />;
 	}
 
 	if (context === 'new') {