Skip to content

Commit

Permalink
[IMPROVE] New 'not found page' design (#26452)
Browse files Browse the repository at this point in the history
  • Loading branch information
@guijun13
guijun13 authored and csuarez committed Aug 26, 2022
1 parent d26b397 commit 0486728
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 87 deletions.
58 changes: 11 additions & 47 deletions apps/meteor/client/views/notFound/NotFoundPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
12 changes: 10 additions & 2 deletions apps/meteor/client/views/room/Room/RoomNotFound/RoomNotFound.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand All @@ -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>
Expand Down
7 changes: 5 additions & 2 deletions apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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>",
Expand Down Expand Up @@ -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"
}
}
41 changes: 5 additions & 36 deletions apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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'));
Expand Down

0 comments on commit 0486728

Please sign in to comment.