diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx index ad1a659e6d9f..7c4ce77c8a99 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.tsx +++ b/src/components/BlockingViews/FullPageNotFoundView.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {View} from 'react-native'; +import type {StyleProp, TextStyle} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Illustrations from '@components/Icon/Illustrations'; import useLocalize from '@hooks/useLocalize'; @@ -43,6 +44,12 @@ type FullPageNotFoundViewProps = { /** Whether we should force the full page view */ shouldForceFullScreen?: boolean; + + /** The style of the subtitle message */ + subtitleStyle?: StyleProp; + + /** Whether we should display the button that opens new SearchRouter */ + shouldDisplaySearchRouter?: boolean; }; // eslint-disable-next-line rulesdir/no-negated-variables @@ -58,6 +65,8 @@ function FullPageNotFoundView({ shouldShowBackButton = true, onLinkPress = () => Navigation.dismissModal(), shouldForceFullScreen = false, + subtitleStyle, + shouldDisplaySearchRouter, }: FullPageNotFoundViewProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -68,6 +77,7 @@ function FullPageNotFoundView({ diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index e48646204f34..841fb55380e2 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -14,7 +14,6 @@ import TextBlock from '@components/TextBlock'; import useLHNEstimatedListSize from '@hooks/useLHNEstimatedListSize'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {isValidDraftComment} from '@libs/DraftCommentUtils'; @@ -48,9 +47,8 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio const theme = useTheme(); const styles = useThemeStyles(); const {translate, preferredLocale} = useLocalize(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); const estimatedListSize = useLHNEstimatedListSize(); - const shouldShowEmptyLHN = shouldUseNarrowLayout && data.length === 0; + const shouldShowEmptyLHN = data.length === 0; // When the first item renders we want to call the onFirstItemRendered callback. // At this point in time we know that the list is actually displaying items. diff --git a/src/languages/en.ts b/src/languages/en.ts index e0a77403f361..638e09ba6a4f 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1930,7 +1930,7 @@ const translations = { iouReportNotFound: 'The payment details you are looking for cannot be found.', notHere: "Hmm... it's not here", pageNotFound: 'Oops, this page cannot be found', - noAccess: "You don't have access to this chat", + noAccess: "That chat doesn't exist or you don't have access to it. Try using search to find a chat.", goBackHome: 'Go back to home page', }, setPasswordPage: { diff --git a/src/languages/es.ts b/src/languages/es.ts index 71690615ac5c..0ce095d40dbf 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1935,7 +1935,7 @@ const translations = { iouReportNotFound: 'Los detalles del pago que estás buscando no se pudieron encontrar.', notHere: 'Hmm… no está aquí', pageNotFound: 'Ups, no deberías estar aquí', - noAccess: 'No tienes acceso a este chat', + noAccess: 'Ese chat no existe o no tienes acceso a él. Intenta usar la búsqueda para encontrar un chat.', goBackHome: 'Volver a la página principal', }, setPasswordPage: { diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 39a670b43284..f3f3c7a2b195 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -800,6 +800,8 @@ function ReportScreen({route, navigation}: ReportScreenProps) { { // Then no reports are rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -94,7 +94,7 @@ xdescribe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(0); }) @@ -127,7 +127,7 @@ xdescribe('Sidebar', () => { // Then the report should be rendered in the LHN since it has a draft .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(1); }) @@ -162,7 +162,7 @@ xdescribe('Sidebar', () => { // Then the report appears in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -207,7 +207,7 @@ xdescribe('Sidebar', () => { // Then all non-domain rooms are rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(2); }) @@ -221,7 +221,7 @@ xdescribe('Sidebar', () => { // Then all three reports are showing in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(3); }) @@ -262,7 +262,7 @@ xdescribe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -272,7 +272,7 @@ xdescribe('Sidebar', () => { // Then the report is still rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -306,7 +306,7 @@ xdescribe('Sidebar', () => { // Then the reports 1 and 2 are hidden and 3 is not .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -390,15 +390,15 @@ xdescribe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible - const displayNamesHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const displayNamesHintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(displayNamesHintText); - const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const navigatesToChatHintText = translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); expect(screen.getByText('One, Two')).toBeOnTheScreen(); } else { // Both reports visible - const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const navigatesToChatHintText = translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); } }) @@ -437,7 +437,7 @@ xdescribe('Sidebar', () => { // Then the reports 1 and 2 are shown and 3 is not .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); @@ -453,7 +453,7 @@ xdescribe('Sidebar', () => { // Then all three chats are showing .then(() => { - const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const navigatesToChatHintText = translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3); }) @@ -462,7 +462,7 @@ xdescribe('Sidebar', () => { // Then all three chats are still showing .then(() => { - const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const navigatesToChatHintText = translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3); }) @@ -474,7 +474,7 @@ xdescribe('Sidebar', () => { // Then report 1 should now disappear .then(() => { - const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const navigatesToChatHintText = translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); expect(screen.queryAllByText(/One, Two/)).toHaveLength(0); }) @@ -512,7 +512,7 @@ xdescribe('Sidebar', () => { // Then both reports are visible .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); @@ -566,7 +566,7 @@ xdescribe('Sidebar', () => { // Then neither reports are visible .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(0); }) @@ -591,7 +591,7 @@ xdescribe('Sidebar', () => { // Then they are all visible .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); }) @@ -632,7 +632,7 @@ xdescribe('Sidebar', () => { // Then neither reports are visible .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(0); }) @@ -652,7 +652,7 @@ xdescribe('Sidebar', () => { // Then both rooms are visible .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const hintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); }) @@ -738,15 +738,15 @@ xdescribe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible - const displayNamesHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); + const displayNamesHintText = translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(displayNamesHintText); - const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const navigatesToChatHintText = translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); expect(screen.getByText('One, Two')).toBeOnTheScreen(); } else { // Both reports visible - const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const navigatesToChatHintText = translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); } }) @@ -790,7 +790,7 @@ xdescribe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -804,7 +804,7 @@ xdescribe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -845,7 +845,7 @@ xdescribe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -858,7 +858,7 @@ xdescribe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -898,7 +898,7 @@ xdescribe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -908,7 +908,7 @@ xdescribe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -947,7 +947,7 @@ xdescribe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -960,12 +960,33 @@ xdescribe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); + const hintText = translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) ); }); + + it('display empty state', () => { + const reportCollectionDataSet: ReportCollectionDataSet = {}; + LHNTestUtils.getDefaultRenderedSidebarLinks(); + return ( + waitForBatchedUpdates() + // When Onyx is updated to contain that data and the sidebar re-renders + .then(() => + Onyx.multiSet({ + [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.GSD, + [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails, + [ONYXKEYS.IS_LOADING_APP]: false, + ...reportCollectionDataSet, + }), + ) + + .then(() => { + expect(screen.getByText(translateLocal('common.emptyLHN.title'))).toBeOnTheScreen(); + }) + ); + }); }); }); });