Regression: Fix empty canned responses table when searching (#22743)

* Regression: Fixes empty department field on edit canned responses

* Regression: Fix empty canned responses table when searching

* fix lint

Co-authored-by: Kevin Aleman <kevin.aleman@rocket.chat>

ee/client/omnichannel/cannedResponses/CannedResponseEdit.tsx

@@ -16,9 +16,10 @@ import CannedResponseForm from './components/cannedResponseForm';
 const CannedResponseEdit: FC<{
 	data?: CannedResponseEndpointGetReturn;
 	reload: () => void;
+	totalDataReload: () => void;
 	isNew?: boolean;
 	departmentData?: LivechatDepartmentSingleGetReturn;
-}> = ({ data, reload, isNew = false, departmentData = {} }) => {
+}> = ({ data, reload, totalDataReload, isNew = false, departmentData = {} }) => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const Route = useRoute('omnichannel-canned-responses');
@@ -116,10 +117,11 @@ const CannedResponseEdit: FC<{
 				context: '',
 			});
 			reload();
+			totalDataReload();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
-	}, [values, saveCannedResponse, dispatchToastMessage, t, Route, reload]);
+	}, [values, saveCannedResponse, dispatchToastMessage, t, Route, reload, totalDataReload]);
 
 	const onPreview = (): void => {
 		setPreview(!preview);

ee/client/omnichannel/cannedResponses/CannedResponseEditWithData.tsx

@@ -11,7 +11,8 @@ import CannedResponseEditWithDepartmentData from './CannedResponseEditWithDepart
 const CannedResponseEditWithData: FC<{
 	cannedResponseId: string;
 	reload: () => void;
-}> = ({ cannedResponseId, reload }) => {
+	totalDataReload: () => void;
+}> = ({ cannedResponseId, reload, totalDataReload }) => {
 	const {
 		value: data,
 		phase: state,
@@ -33,10 +34,16 @@ const CannedResponseEditWithData: FC<{
 	}
 
 	if (data?.cannedResponse?.scope === 'department') {
-		return <CannedResponseEditWithDepartmentData data={data} reload={reload} />;
+		return (
+			<CannedResponseEditWithDepartmentData
+				data={data}
+				reload={reload}
+				totalDataReload={totalDataReload}
+			/>
+		);
 	}
 
-	return <CannedResponseEdit data={data} reload={reload} />;
+	return <CannedResponseEdit data={data} reload={reload} totalDataReload={totalDataReload} />;
 };
 
 export default CannedResponseEditWithData;

ee/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx

@@ -11,7 +11,8 @@ import CannedResponseEdit from './CannedResponseEdit';
 const CannedResponseEditWithData: FC<{
 	data: CannedResponseEndpointGetReturn | undefined;
 	reload: () => void;
-}> = ({ data, reload }) => {
+	totalDataReload: () => void;
+}> = ({ data, reload, totalDataReload }) => {
 	const departmentId = useMemo(() => data?.cannedResponse?.departmentId, [data]) as string;
 	const {
 		value: departmentData,
@@ -33,7 +34,14 @@ const CannedResponseEditWithData: FC<{
 		);
 	}
 
-	return <CannedResponseEdit data={data} reload={reload} departmentData={departmentData} />;
+	return (
+		<CannedResponseEdit
+			data={data}
+			reload={reload}
+			totalDataReload={totalDataReload}
+			departmentData={departmentData}
+		/>
+	);
 };
 
 export default CannedResponseEditWithData;

ee/client/omnichannel/cannedResponses/CannedResponseNew.tsx

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

ee/client/omnichannel/cannedResponses/CannedResponsesPage.tsx

@@ -16,6 +16,7 @@ export type CannedResponsesPageProps = {
 	title: string;
 	renderRow: ReactNode | null;
 	renderFilter: FC;
+	totalCannedResponses: number;
 };
 
 const CannedResponsesPage: FC<CannedResponsesPageProps> = ({
@@ -26,6 +27,7 @@ const CannedResponsesPage: FC<CannedResponsesPageProps> = ({
 	title,
 	renderRow,
 	renderFilter,
+	totalCannedResponses,
 }) => {
 	const t = useTranslation();
 
@@ -47,7 +49,7 @@ const CannedResponsesPage: FC<CannedResponsesPageProps> = ({
 				</ButtonGroup>
 			</Page.Header>
 			<Page.Content>
-				{data && data.total < 1 ? (
+				{totalCannedResponses < 1 ? (
 					<NoResults
 						icon='baloon-exclamation'
 						title={t('No_Canned_Responses_Yet')}

ee/client/omnichannel/cannedResponses/CannedResponsesRoute.tsx

@@ -4,6 +4,7 @@ import React, { useMemo, useCallback, useState, FC, ReactNode, ReactElement } fr
 
 import GenericTable from '../../../../client/components/GenericTable';
 import NotAuthorizedPage from '../../../../client/components/NotAuthorizedPage';
+import PageSkeleton from '../../../../client/components/PageSkeleton';
 import UserAvatar from '../../../../client/components/avatar/UserAvatar';
 import { usePermission } from '../../../../client/contexts/AuthorizationContext';
 import { useRouteParameter, useRoute } from '../../../../client/contexts/RouterContext';
@@ -11,6 +12,7 @@ import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useEndpointData } from '../../../../client/hooks/useEndpointData';
 import { useForm } from '../../../../client/hooks/useForm';
 import { useFormatDateAndTime } from '../../../../client/hooks/useFormatDateAndTime';
+import { AsyncStatePhase } from '../../../../client/lib/asyncState';
 import CannedResponseEditWithData from './CannedResponseEditWithData';
 import CannedResponseFilter from './CannedResponseFilter';
 import CannedResponseNew from './CannedResponseNew';
@@ -82,6 +84,11 @@ const CannedResponsesRoute: FC = () => {
 	);
 
 	const { value: data, reload } = useEndpointData('canned-responses', query);
+	const {
+		value: totalData,
+		phase: totalDataPhase,
+		reload: totalDataReload,
+	} = useEndpointData('canned-responses');
 
 	const getTime = useFormatDateAndTime();
 
@@ -166,24 +173,34 @@ const CannedResponsesRoute: FC = () => {
 				</Table.Cell>
 				<Table.Cell withTruncatedText>{getTime(createdAt)}</Table.Cell>
 				<Table.Cell withTruncatedText>{tags.join(', ')}</Table.Cell>
-				<RemoveCannedResponseButton _id={_id} reload={reload} />
+				<RemoveCannedResponseButton _id={_id} reload={reload} totalDataReload={totalDataReload} />
 			</Table.Row>
 		),
-		[getTime, onRowClick, reload],
+		[getTime, onRowClick, reload, totalDataReload],
 	);
 
 	if (context === 'edit' && id) {
-		return <CannedResponseEditWithData reload={reload} cannedResponseId={id} />;
+		return (
+			<CannedResponseEditWithData
+				reload={reload}
+				totalDataReload={totalDataReload}
+				cannedResponseId={id}
+			/>
+		);
 	}
 
 	if (context === 'new') {
-		return <CannedResponseNew reload={reload} />;
+		return <CannedResponseNew reload={reload} totalDataReload={totalDataReload} />;
 	}
 
 	if (!canViewCannedResponses) {
 		return <NotAuthorizedPage />;
 	}
 
+	if (totalDataPhase === AsyncStatePhase.LOADING) {
+		return <PageSkeleton></PageSkeleton>;
+	}
+
 	return (
 		<CannedResponsesPage
 			setParams={setParams}
@@ -204,6 +221,7 @@ const CannedResponsesRoute: FC = () => {
 			header={header}
 			renderRow={renderRow}
 			title={t('Canned_Responses')}
+			totalCannedResponses={totalData?.total || 0}
 		></CannedResponsesPage>
 	);
 };

ee/client/omnichannel/cannedResponses/RemoveCannedResponseButton.tsx

@@ -12,9 +12,14 @@ import { useTranslation } from '../../../../client/contexts/TranslationContext';
 export type RemoveCannedResponseButtonProps = {
 	_id: string;
 	reload: () => void;
+	totalDataReload: () => void;
 };
 
-const RemoveCannedResponseButton: FC<RemoveCannedResponseButtonProps> = ({ _id, reload }) => {
+const RemoveCannedResponseButton: FC<RemoveCannedResponseButtonProps> = ({
+	_id,
+	reload,
+	totalDataReload,
+}) => {
 	const cannedResponsesRoute = useRoute('omnichannel-canned-responses');
 	const removeCannedResponse = useMethod('removeCannedResponse');
 	const setModal = useSetModal();
@@ -36,6 +41,7 @@ const RemoveCannedResponseButton: FC<RemoveCannedResponseButtonProps> = ({ _id,
 			try {
 				await handleRemoveClick();
 				reload();
+				totalDataReload();
 				dispatchToastMessage({ type: 'success', message: t('Canned_Response_Removed') });
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });