[IMPROVE] New 'not found page' design (#26452)

apps/meteor/client/views/notFound/NotFoundPage.tsx

@@ -1,62 +1,26 @@
-import { Box, Button, ButtonGroup, Flex, Margins } from '@rocket.chat/fuselage';
+import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
 const NotFoundPage = (): ReactElement => {
 	const t = useTranslation();
 	const homeRoute = useRoute('home');
 
-	const handleGoToPreviousPageClick = (): void => {
-		window.history.back();
-	};
-
 	const handleGoHomeClick = (): void => {
 		homeRoute.push();
 	};
 
 	return (
-		<Flex.Container direction='column' justifyContent='center' alignItems='center'>
-			<Box
-				is='section'
-				width='full'
-				minHeight='sh'
-				textAlign='center'
-				backgroundColor='neutral-800'
-				style={{
-					backgroundImage: "url('/images/404.svg')",
-					backgroundRepeat: 'no-repeat',
-					backgroundPosition: 'center',
-					backgroundSize: 'cover',
-				}}
-			>
-				<Flex.Item>
-					<Box>
-						<Margins all='x12'>
-							<Box fontWeight='p2m' fontSize='x64' color='alternative'>
-								404
-							</Box>
-
-							<Box role='heading' aria-level={1} fontScale='h2' color='alternative'>
-								{t('Oops_page_not_found')}
-							</Box>
-
-							<Box role='status' aria-label='Sorry_page_you_requested_does_not_exist_or_was_deleted' fontScale='p2' color='alternative'>
-								{t('Sorry_page_you_requested_does_not_exist_or_was_deleted')}
-							</Box>
-						</Margins>
-
-						<ButtonGroup align='center' margin='x64'>
-							<Button type='button' primary onClick={handleGoToPreviousPageClick}>
-								{t('Return_to_previous_page')}
-							</Button>
-							<Button type='button' primary onClick={handleGoHomeClick}>
-								{t('Return_to_home')}
-							</Button>
-						</ButtonGroup>
-					</Box>
-				</Flex.Item>
-			</Box>
-		</Flex.Container>
+		<Box display='flex' justifyContent='center' height='full' backgroundColor='surface'>
+			<States>
+				<StatesIcon name='magnifier' />
+				<StatesTitle>{t('Page_not_found')}</StatesTitle>
+				<StatesSubtitle>{t('Page_not_exist_or_not_permission')}</StatesSubtitle>
+				<StatesActions mbs='x16'>
+					<StatesAction onClick={handleGoHomeClick}>{t('Homepage')}</StatesAction>
+				</StatesActions>
+			</States>
+		</Box>
 	);
 };
 

apps/meteor/client/views/room/Room/RoomNotFound/RoomNotFound.tsx

@@ -1,5 +1,5 @@
-import { States, StatesIcon, StatesTitle, StatesSubtitle, Box } from '@rocket.chat/fuselage';
-import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
+import { States, StatesIcon, StatesTitle, StatesSubtitle, Box, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import { useLayout, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
 import BurgerMenu from '../../../../components/BurgerMenu';
@@ -9,6 +9,11 @@ import { RoomTemplate } from '../../components/RoomTemplate/RoomTemplate';
 const RoomNotFound = (): ReactElement => {
 	const { isMobile } = useLayout();
 	const t = useTranslation();
+	const homeRoute = useRoute('home');
+
+	const handleGoHomeClick = (): void => {
+		homeRoute.push();
+	};
 
 	return (
 		<RoomTemplate>
@@ -27,6 +32,9 @@ const RoomNotFound = (): ReactElement => {
 						<StatesIcon name='magnifier' />
 						<StatesTitle>{t('Room_not_found')}</StatesTitle>
 						<StatesSubtitle>{t('Room_not_exist_or_not_permission')}</StatesSubtitle>
+						<StatesActions mbs='x16'>
+							<StatesAction onClick={handleGoHomeClick}>{t('Homepage')}</StatesAction>
+						</StatesActions>
 					</States>
 				</Box>
 			</RoomTemplate.Body>

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -2285,6 +2285,7 @@
   "Hold_Call": "Hold Call",
   "Hold_Call_EE_only": "Hold Call (Enterprise Edition only)",
   "Home": "Home",
+  "Homepage": "Homepage",
   "Host": "Host",
   "Hospitality_Businness": "Hospitality Business",
   "hours": "hours",
@@ -3529,6 +3530,8 @@
   "Override_URL_to_which_files_are_uploaded_This_url_also_used_for_downloads_unless_a_CDN_is_given": "Override URL to which files are uploaded. This url also used for downloads unless a CDN is given",
   "Owner": "Owner",
   "Play": "Play",
+  "Page_not_exist_or_not_permission": "The page does not exist or you may not have access permission",
+  "Page_not_found": "Page not found",
   "Page_title": "Page title",
   "Page_URL": "Page URL",
   "Pages": "Pages",
@@ -3931,7 +3934,7 @@
   "room_name": "room name",
   "Room_name_changed": "Room name changed to: <em>__room_name__</em> by <em>__user_by__</em>",
   "Room_name_changed_successfully": "Room name changed successfully",
-  "Room_not_exist_or_not_permission": "This room does not exist or you may not have permission to access",
+  "Room_not_exist_or_not_permission": "The room does not exist or you may not have access permission",
   "Room_not_found": "Room not found",
   "Room_password_changed_successfully": "Room password changed successfully",
   "room_removed_read_only": "Room added writing permission by <em>__user_by__</em>",
@@ -5277,4 +5280,4 @@
   "Device_Management_Email_Subject": "[Site_Name] - Login Detected",
   "Device_Management_Email_Body": "You may use the following placeholders: <h2 class=\"rc-color\">{Login_Detected}</h2><p><strong>[name] ([username]) {Logged_In_Via}</strong></p><p><strong>{Device_Management_Client}:</strong> [browserInfo]<br><strong>{Device_Management_OS}:</strong> [osInfo]<br><strong>{Device_Management_Device}:</strong> [deviceInfo]<br><strong>{Device_Management_IP}:</strong>[ipInfo]</p><p><small>[userAgent]</small></p><a class=\"btn\" href=\"[Site_URL]\">{Access_Your_Account}</a><p>{Or_Copy_And_Paste_This_URL_Into_A_Tab_Of_Your_Browser}<br><a href=\"[Site_URL]\">[SITE_URL]</a></p><p>{Thank_You_For_Choosing_RocketChat}</p>",
   "Something_Went_Wrong": "Something went wrong"
-}
+}

apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx

@@ -10,52 +10,21 @@ describe('views/notFound/NotFoundPage', () => {
 	it('should look good', async () => {
 		render(<NotFoundPage />);
 
-		expect(screen.getByRole('heading', { level: 1, name: 'Oops_page_not_found' })).to.exist;
-		expect(
-			screen.getByRole('status', {
-				name: 'Sorry_page_you_requested_does_not_exist_or_was_deleted',
-			}),
-		).to.exist;
-		expect(screen.getByRole('button', { name: 'Return_to_previous_page' })).to.exist.and.to.not.match(':disabled');
-		expect(screen.getByRole('button', { name: 'Return_to_home' })).to.exist.and.to.not.match(':disabled');
+		expect(screen.getByText('Page_not_found')).to.exist;
+		expect(screen.getByText('Page_not_exist_or_not_permission')).to.exist;
+		expect(screen.getByRole('button', { name: 'Homepage' })).to.exist.and.to.not.match(':disabled');
 	});
 
 	it('should have correct tab order', () => {
 		render(<NotFoundPage />);
 
 		expect(document.body).to.have.focus;
 		userEvent.tab();
-		expect(screen.getByRole('button', { name: 'Return_to_previous_page' })).to.have.focus;
-		userEvent.tab();
-		expect(screen.getByRole('button', { name: 'Return_to_home' })).to.have.focus;
+		expect(screen.getByRole('button', { name: 'Homepage' })).to.have.focus;
 		userEvent.tab();
 		expect(document.body).to.have.focus;
 	});
 
-	context('"Return to previous page" button', () => {
-		context('when clicked', () => {
-			const listener = spy();
-
-			before(() => {
-				window.history.pushState('404-page', '', 'http://localhost:3000/404');
-				window.addEventListener('popstate', listener);
-			});
-
-			after(() => {
-				window.removeEventListener('popstate', listener);
-			});
-
-			it('should go back on history', async () => {
-				render(<NotFoundPage />);
-				const button = screen.getByRole('button', { name: 'Return_to_previous_page' });
-
-				userEvent.click(button);
-				await waitFor(() => expect(listener).to.have.been.called(), { timeout: 2000 });
-				expect(window.history.state).to.not.be.eq('404-page');
-			});
-		});
-	});
-
 	context('"Return to home" button', () => {
 		context('when clicked', () => {
 			it('should go back on history', async () => {
@@ -65,7 +34,7 @@ describe('views/notFound/NotFoundPage', () => {
 						<NotFoundPage />
 					</RouterContextMock>,
 				);
-				const button = screen.getByRole('button', { name: 'Return_to_home' });
+				const button = screen.getByRole('button', { name: 'Homepage' });
 
 				userEvent.click(button);
 				await waitFor(() => expect(pushRoute).to.have.been.called.with('home'));