regression: `PageHeader` back button must be an `IconButton` (#31266)

apps/meteor/client/components/Page/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@rocket.chat/fuselage';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import { HeaderToolbox, useDocumentTitle } from '@rocket.chat/ui-client';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
 import type { FC, ComponentProps, ReactNode } from 'react';
@@ -35,14 +35,10 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 						<BurgerMenu />
 					</HeaderToolbox>
 				)}
+				{onClickBack && <IconButton small mie={8} icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
 				<Box is='h1' fontScale='h2' flexGrow={1} data-qa-type='PageHeader-title'>
 					{title}
 				</Box>
-				{onClickBack && (
-					<Button icon='back' onClick={onClickBack}>
-						{t('Back')}
-					</Button>
-				)}
 				{children}
 			</Box>
 		</Box>

apps/meteor/client/views/admin/emailInbox/EmailInboxPage.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
-import { useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
+import { useRouteParameter, useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -10,21 +10,17 @@ import EmailInboxTable from './EmailInboxTable';
 
 const EmailInboxPage = (): ReactElement => {
 	const t = useTranslation();
+	const router = useRouter();
+
 	const id = useRouteParameter('_id');
 	const context = useRouteParameter('context');
-	const emailInboxRoute = useRoute('admin-email-inboxes');
 
 	return (
 		<Page flexDirection='row'>
 			<Page>
-				<PageHeader title={t('Email_Inboxes')}>
-					{context && (
-						<Button icon='back' onClick={(): void => emailInboxRoute.push({})}>
-							{t('Back')}
-						</Button>
-					)}
+				<PageHeader title={t('Email_Inboxes')} onClickBack={context ? () => router.navigate('/admin/email-inboxes') : undefined}>
 					{!context && (
-						<Button primary onClick={(): void => emailInboxRoute.push({ context: 'new' })}>
+						<Button primary onClick={() => router.navigate('/admin/email-inboxes/new')}>
 							{t('New_Email_Inbox')}
 						</Button>
 					)}

apps/meteor/client/views/admin/import/NewImportPage.tsx

@@ -44,10 +44,6 @@ function NewImportPage() {
 
 	const formatMemorySize = useFormatMemorySize();
 
-	const handleBackToImportsButtonClick = () => {
-		router.navigate('/admin/import');
-	};
-
 	const handleImporterKeyChange = (importerKey: Key) => {
 		if (typeof importerKey !== 'string') {
 			return;
@@ -189,11 +185,8 @@ function NewImportPage() {
 
 	return (
 		<Page className='page-settings'>
-			<PageHeader title={t('Import_New_File')}>
+			<PageHeader title={t('Import_New_File')} onClickBack={() => router.navigate('/admin/import')}>
 				<ButtonGroup>
-					<Button icon='back' secondary onClick={handleBackToImportsButtonClick}>
-						{t('Back_to_imports')}
-					</Button>
 					{importer && (
 						<Button primary minHeight='x40' loading={isLoading} onClick={handleImportButtonClick}>
 							{t('Import')}

apps/meteor/client/views/admin/import/PrepareImportPage.tsx

@@ -147,10 +147,6 @@ function PrepareImportPage() {
 		loadCurrentOperation();
 	}, [getCurrentImportOperation, getImportFileData, handleError, router, setMessageCount, setPreparing, setProgressRate, setStatus, t]);
 
-	const handleBackToImportsButtonClick = () => {
-		router.navigate('/admin/import');
-	};
-
 	const handleStartButtonClick = async () => {
 		setImporting(true);
 
@@ -180,11 +176,8 @@ function PrepareImportPage() {
 
 	return (
 		<Page>
-			<PageHeader title={t('Importing_Data')}>
+			<PageHeader title={t('Importing_Data')} onClickBack={() => router.navigate('/admin/import')}>
 				<ButtonGroup>
-					<Button icon='back' secondary onClick={handleBackToImportsButtonClick}>
-						{t('Back_to_imports')}
-					</Button>
 					<Button primary disabled={isImporting || handleMinimumImportData} onClick={handleStartButtonClick}>
 						{t('Importer_Prepare_Start_Import')}
 					</Button>

apps/meteor/client/views/admin/integrations/incoming/EditIncomingWebhook.tsx

@@ -77,11 +77,8 @@ const EditIncomingWebhook = ({ webhookData }: { webhookData?: Serialized<IIncomi
 
 	return (
 		<Page flexDirection='column'>
-			<PageHeader title={t('Integration_Incoming_WebHook')}>
+			<PageHeader title={t('Integration_Incoming_WebHook')} onClickBack={() => router.navigate('/admin/integrations/webhook-incoming')}>
 				<ButtonGroup>
-					<Button icon='back' onClick={() => router.navigate('/admin/integrations/webhook-incoming')}>
-						{t('Back')}
-					</Button>
 					{webhookData?._id && (
 						<Button danger onClick={handleDeleteIntegration}>
 							{t('Delete')}

apps/meteor/client/views/admin/integrations/outgoing/EditOutgoingWebhook.tsx

@@ -100,11 +100,8 @@ const EditOutgoingWebhook = ({ webhookData }: { webhookData?: Serialized<IOutgoi
 
 	return (
 		<Page flexDirection='column'>
-			<PageHeader title={t('Integration_Outgoing_WebHook')}>
+			<PageHeader title={t('Integration_Outgoing_WebHook')} onClickBack={() => router.navigate('/admin/integrations/webhook-outgoing')}>
 				<ButtonGroup>
-					<Button icon='back' onClick={() => router.navigate('/admin/integrations/webhook-outgoing')}>
-						{t('Back')}
-					</Button>
 					{webhookData?._id && (
 						<Button onClick={() => router.navigate(`/admin/integrations/history/outgoing/${webhookData._id}`)}>{t('History')}</Button>
 					)}

apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx

@@ -106,11 +106,11 @@ const OutgoingWebhookHistoryPage = (props: ComponentProps<typeof Page>) => {
 
 	return (
 		<Page flexDirection='column' {...props}>
-			<PageHeader title={t('Integration_Outgoing_WebHook_History')}>
+			<PageHeader
+				title={t('Integration_Outgoing_WebHook_History')}
+				onClickBack={() => router.navigate(`/admin/integrations/edit/outgoing/${id}`)}
+			>
 				<ButtonGroup>
-					<Button icon='back' onClick={() => router.navigate(`/admin/integrations/edit/outgoing/${id}`)}>
-						{t('Back')}
-					</Button>
 					<Button icon='trash' danger onClick={handleClearHistory} disabled={total === 0}>
 						{t('clear_history')}
 					</Button>

apps/meteor/client/views/admin/oauthApps/OAuthAppsPage.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@rocket.chat/fuselage';
-import { useRouteParameter, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useRouteParameter, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -10,8 +10,7 @@ import OAuthAppsTable from './OAuthAppsTable';
 
 const OAuthAppsPage = (): ReactElement => {
 	const t = useTranslation();
-
-	const router = useRoute('admin-oauth-apps');
+	const router = useRouter();
 
 	const context = useRouteParameter('context');
 	const id = useRouteParameter('id');
@@ -19,16 +18,13 @@ const OAuthAppsPage = (): ReactElement => {
 	return (
 		<Page flexDirection='row'>
 			<Page>
-				<PageHeader title={t('Third_party_login')}>
-					{context && (
-						<Button icon='back' alignSelf='flex-end' onClick={(): void => router.push({})}>
-							{t('Back')}
-						</Button>
-					)}
+				<PageHeader title={t('Third_party_login')} onClickBack={context ? () => router.navigate('/admin/third-party-login') : undefined}>
 					{!context && (
-						<Button primary alignSelf='flex-end' onClick={(): void => router.push({ context: 'new' })}>
-							{t('New_Application')}
-						</Button>
+						<ButtonGroup>
+							<Button primary onClick={() => router.navigate('/admin/third-party-login/new')}>
+								{t('New_Application')}
+							</Button>
+						</ButtonGroup>
 					)}
 				</PageHeader>
 				<PageContent>

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

@@ -17,7 +17,7 @@ import {
 	FieldHint,
 } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks';
-import { useToastMessageDispatch, useRoute, useMethod, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch, useMethod, useEndpoint, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import React, { useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -100,7 +100,7 @@ const getInitialValues = ({ department, agents, allowedToForwardData }: InitialV
 
 function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmentProps) {
 	const t = useTranslation();
-	const departmentsRoute = useRoute('omnichannel-departments');
+	const router = useRouter();
 	const queryClient = useQueryClient();
 
 	const { department, agents = [] } = data || {};
@@ -195,16 +195,12 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 			}
 			queryClient.invalidateQueries(['/v1/livechat/department/:_id', id]);
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
-			departmentsRoute.push({});
+			router.navigate('/omnichannel/departments');
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
 	});
 
-	const handleReturn = useMutableCallback(() => {
-		departmentsRoute.push({});
-	});
-
 	const isFormValid = isValid && isDirty;
 
 	const formId = useUniqueId();
@@ -222,11 +218,8 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 	return (
 		<Page flexDirection='row'>
 			<Page>
-				<PageHeader title={title}>
+				<PageHeader title={title} onClickBack={() => router.navigate('/omnichannel/departments')}>
 					<ButtonGroup>
-						<Button icon='back' onClick={handleReturn}>
-							{t('Back')}
-						</Button>
 						<Button type='submit' form={formId} primary disabled={!isFormValid} loading={isSubmitting}>
 							{t('Save')}
 						</Button>

apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponseEdit.tsx

@@ -66,17 +66,17 @@ const CannedResponseEdit = ({ cannedResponseData }: CannedResponseEditProps) =>
 
 	return (
 		<Page>
-			<PageHeader title={cannedResponseData?._id ? t('Edit_CannedResponse') : t('New_CannedResponse')}>
-				<ButtonGroup>
-					<Button icon='back' onClick={() => router.navigate('/omnichannel/canned-responses')}>
-						{t('Back')}
-					</Button>
-					{cannedResponseData?._id && (
+			<PageHeader
+				title={cannedResponseData?._id ? t('Edit_CannedResponse') : t('New_CannedResponse')}
+				onClickBack={() => router.navigate('/omnichannel/canned-responses')}
+			>
+				{cannedResponseData?._id && (
+					<ButtonGroup>
 						<Button danger onClick={() => handleDelete(cannedResponseData._id)}>
 							{t('Delete')}
 						</Button>
-					)}
-				</ButtonGroup>
+					</ButtonGroup>
+				)}
 			</PageHeader>
 			<PageScrollableContentWithShadow>
 				<FormProvider {...methods}>