From bf50c754d58a5f61642a5b9ce946048ba089c2c5 Mon Sep 17 00:00:00 2001 From: guijun13 Date: Tue, 2 Aug 2022 15:42:28 -0300 Subject: [PATCH 1/6] feat: add new 'not found' page design --- .../client/views/notFound/NotFoundPage.tsx | 58 ++++--------------- .../rocketchat-i18n/i18n/en.i18n.json | 4 +- 2 files changed, 14 insertions(+), 48 deletions(-) diff --git a/apps/meteor/client/views/notFound/NotFoundPage.tsx b/apps/meteor/client/views/notFound/NotFoundPage.tsx index 9c85a4c79942..f888898f3cef 100644 --- a/apps/meteor/client/views/notFound/NotFoundPage.tsx +++ b/apps/meteor/client/views/notFound/NotFoundPage.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,57 +6,21 @@ const NotFoundPage = (): ReactElement => { const t = useTranslation(); const homeRoute = useRoute('home'); - const handleGoToPreviousPageClick = (): void => { - window.history.back(); - }; - const handleGoHomeClick = (): void => { homeRoute.push(); }; return ( - - - - - - - 404 - - - - {t('Oops_page_not_found')} - - - - {t('Sorry_page_you_requested_does_not_exist_or_was_deleted')} - - - - - - - - - - - + + + + {t('Page_not_found')} + {t('Room_not_exist_or_not_permission')} + + {t('Homepage')} + + + ); }; diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index 74df500ad0fd..087513a2b5a8 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -2275,6 +2275,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", @@ -3507,6 +3508,7 @@ "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_found": "Page not found", "Page_title": "Page title", "Page_URL": "Page URL", "Pages": "Pages", @@ -5247,4 +5249,4 @@ "Device_Management_Email_Subject": "[Site_Name] - Login Detected", "Device_Management_Email_Body": "You may use the following placeholders:

{Login_Detected}

[name] ([username]) {Logged_In_Via}

{Device_Management_Client}: [browserInfo]
{Device_Management_OS}: [osInfo]
{Device_Management_Device}: [deviceInfo]
{Device_Management_IP}:[ipInfo]

[userAgent]

{Access_Your_Account}

{Or_Copy_And_Paste_This_URL_Into_A_Tab_Of_Your_Browser}
[SITE_URL]

{Thank_You_For_Choosing_RocketChat}

", "Something_Went_Wrong": "Something went wrong" -} \ No newline at end of file +} From 1391602e3ec0d9de356f34453a082cfeb1249272 Mon Sep 17 00:00:00 2001 From: guijun13 Date: Tue, 2 Aug 2022 16:15:51 -0300 Subject: [PATCH 2/6] fix: change subtitle 'room' to 'page' text --- apps/meteor/client/views/notFound/NotFoundPage.tsx | 2 +- apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/meteor/client/views/notFound/NotFoundPage.tsx b/apps/meteor/client/views/notFound/NotFoundPage.tsx index f888898f3cef..d7ab9a302f3e 100644 --- a/apps/meteor/client/views/notFound/NotFoundPage.tsx +++ b/apps/meteor/client/views/notFound/NotFoundPage.tsx @@ -15,7 +15,7 @@ const NotFoundPage = (): ReactElement => { {t('Page_not_found')} - {t('Room_not_exist_or_not_permission')} + {t('Page_not_exist_or_not_permission')} {t('Homepage')} diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index 087513a2b5a8..e35dbad53443 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -3508,6 +3508,7 @@ "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": "This page does not exist or you may not have permission to access", "Page_not_found": "Page not found", "Page_title": "Page title", "Page_URL": "Page URL", From f63eaf1234da5412b0d5bb426085d4706acb7607 Mon Sep 17 00:00:00 2001 From: guijun13 Date: Thu, 4 Aug 2022 12:00:12 -0300 Subject: [PATCH 3/6] feat: remove unnecessary tests --- .../views/notFound/NotFoundPage.spec.tsx | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx b/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx index af504e1c8bd8..e59b7b4315cc 100644 --- a/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx +++ b/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx @@ -26,37 +26,11 @@ describe.skip('views/notFound/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; 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(); - 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 () => { From 1dc3c66cf1293b6ae3e5c6f14350da6d1d306f5e Mon Sep 17 00:00:00 2001 From: guijun13 Date: Mon, 8 Aug 2022 11:23:17 -0300 Subject: [PATCH 4/6] feat: add 'homepage' btn on 'room not found' page --- .../views/room/Room/RoomNotFound/RoomNotFound.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/room/Room/RoomNotFound/RoomNotFound.tsx b/apps/meteor/client/views/room/Room/RoomNotFound/RoomNotFound.tsx index 69c74c8f28e3..2e6f301e24f2 100644 --- a/apps/meteor/client/views/room/Room/RoomNotFound/RoomNotFound.tsx +++ b/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 ( @@ -27,6 +32,9 @@ const RoomNotFound = (): ReactElement => { {t('Room_not_found')} {t('Room_not_exist_or_not_permission')} + + {t('Homepage')} + From 0a9fbaff446ee79d8abc5c1addd37be5a26f8faa Mon Sep 17 00:00:00 2001 From: guijun13 Date: Tue, 9 Aug 2022 11:42:00 -0300 Subject: [PATCH 5/6] fix: fix page and room not found subtitle text --- apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index 2ddc00b7bffb..aa47802268d4 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -3510,7 +3510,7 @@ "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": "This page does not exist or you may not have permission to access", + "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", @@ -3908,7 +3908,7 @@ "room_name": "room name", "Room_name_changed": "Room name changed to: __room_name__ by __user_by__", "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 __user_by__", From 97aa62ec212f8fe911ed9a66fa7e39d8e04c6c75 Mon Sep 17 00:00:00 2001 From: guijun13 Date: Mon, 15 Aug 2022 11:16:32 -0300 Subject: [PATCH 6/6] fix: fix tests for new design page --- .../client/views/notFound/NotFoundPage.spec.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx b/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx index da826a129d0e..8e3c97f0a164 100644 --- a/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx +++ b/apps/meteor/tests/unit/client/views/notFound/NotFoundPage.spec.tsx @@ -10,14 +10,9 @@ describe('views/notFound/NotFoundPage', () => { it('should look good', async () => { render(); - 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', () => { @@ -25,7 +20,7 @@ describe('views/notFound/NotFoundPage', () => { expect(document.body).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; }); @@ -39,7 +34,7 @@ describe('views/notFound/NotFoundPage', () => { , ); - 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'));