From ca20a786c0a5b78a249d3ce8898cc24c6a0d2bca Mon Sep 17 00:00:00 2001 From: Andrea Piai Date: Thu, 9 May 2024 11:43:26 +0200 Subject: [PATCH 1/4] New DS on Message Router --- .../screens/OperationResultScreenContent.tsx | 7 +- .../OperationResultScreenContent.test.tsx | 10 + ...OperationResultScreenContent.test.tsx.snap | 677 +++ .../messages/navigation/MessagesNavigator.tsx | 3 - .../messages/screens/MessageRouterScreen.tsx | 100 +- .../MessageRouterScreen.test.tsx.snap | 5149 +++++++++-------- 6 files changed, 3570 insertions(+), 2376 deletions(-) diff --git a/ts/components/screens/OperationResultScreenContent.tsx b/ts/components/screens/OperationResultScreenContent.tsx index 1852a9ca3a5..a6841ca14af 100644 --- a/ts/components/screens/OperationResultScreenContent.tsx +++ b/ts/components/screens/OperationResultScreenContent.tsx @@ -27,7 +27,7 @@ type OperationResultScreenContentProps = WithTestID<{ subtitle?: string | Array; action?: Pick< ButtonSolidProps, - "label" | "accessibilityLabel" | "onPress" | "testID" + "label" | "accessibilityLabel" | "onPress" | "testID" | "fullWidth" >; secondaryAction?: Pick< ButtonLinkProps, @@ -79,7 +79,7 @@ const OperationResultScreenContent = ({ {action && ( - + @@ -103,6 +103,9 @@ const styles = StyleSheet.create({ flexGrow: 1, marginHorizontal: IOVisualCostants.appMarginDefault }, + fullWidth: { + alignSelf: "stretch" + }, wrapper: { flex: 1, alignItems: "stretch", diff --git a/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx b/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx index f4b2b893537..de0f35bf1e5 100644 --- a/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx +++ b/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx @@ -29,6 +29,16 @@ describe("OperationResultScreenContent", () => { it("should match the snapshot with default props", () => { expect(renderComponent(defaultProps)).toMatchSnapshot(); }); + it("should match the snapshot with default props but full width action", () => { + const fullWidthProps = { + ...defaultProps, + action: { + ...defaultProps.action, + fullWidth: true + } + } as OperationResultScreenContentProps; + expect(renderComponent(fullWidthProps)).toMatchSnapshot(); + }); }); function renderComponent( diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap index 8689d83b1ff..76b63a0d1f0 100644 --- a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap +++ b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap @@ -674,3 +674,680 @@ exports[`OperationResultScreenContent should match the snapshot with default pro `; + +exports[`OperationResultScreenContent should match the snapshot with default props but full width action 1`] = ` + + + + + + + + + + + + + + + WALLET_HOME + + + + + + + + + + + + + + + + + + + + + title + + + + subtitle + + + + + + + + + Action + + + + + + + + + + + + + Secondary Action + + + + + + + + + + + + + + + + + + + +`; diff --git a/ts/features/messages/navigation/MessagesNavigator.tsx b/ts/features/messages/navigation/MessagesNavigator.tsx index 5c8932e57d1..4a53e5297d5 100644 --- a/ts/features/messages/navigation/MessagesNavigator.tsx +++ b/ts/features/messages/navigation/MessagesNavigator.tsx @@ -36,9 +36,6 @@ export const MessagesStackNavigator = () => { + + + + + +

+ {I18n.t("messageDetails.loadingText")} +

+ + + ); + } + return ( - - - + ); }; diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap index e84611ff5ca..e161d959dd5 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap @@ -30,147 +30,6 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m ] } > - - - - - - - - - - - - MESSAGE_ROUTER - - - - - - - - - - + + - - - + + + + + + - + - - - - - - - - - - - - - + } + strokeLinecap={1} + /> + + + - + + + + Loading message details in progress... + - + + + + - - + + + + + + + + + - Loading message details in progress... - + /> + + + accessible={true} + collapsable={false} + focusable={true} + hitSlop={8} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + > + + + + + + + + - + @@ -665,6 +753,20 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m + @@ -700,147 +802,6 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was ] } > - - - - - - - - - - - - MESSAGE_ROUTER - - - - - - - - - - + + - - - + + + + + + - + - - - - - - - - + + + + + + + + + Loading message details in progress... + + + + + + + + + + + - - - - + - + /> + + - - - - - + - - - Loading message details in progress... - + /> + + + accessible={true} + collapsable={false} + focusable={true} + hitSlop={8} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + > + + + + + + + + - + @@ -1335,6 +1525,20 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was + @@ -1371,158 +1575,17 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai } > - - - - - - - - - - MESSAGE_ROUTER - - - - - - - - - - - + - + + + + + + + + + + + + + + + + + There is a temporary problem, please try again. + + + - - - - - + Retry + - - - - - - - - - - - - + + - - - + } + > - There is a temporary problem, please try again. - - - + > + Cancel + - - - + + + + + + + + - - - Cancel - - - + + + + + + - + + + + - - Retry - + + + + - - - - - - - - - - - - - -`; - -exports[`MessageRouterScreen should match snapshot on message data retrieval success 1`] = ` - - - - - - - - - - - - - - - MESSAGE_ROUTER - + + + + + - + + + + +`; + +exports[`MessageRouterScreen should match snapshot on message data retrieval success 1`] = ` + + + - - - + + - - - + + + + + + - + - - - - - - - - + + + + + + + + + Loading message details in progress... + + + + + + + + + + + - - - - + - + /> + + - - - - - + - - - Loading message details in progress... - + /> + + + accessible={true} + collapsable={false} + focusable={true} + hitSlop={8} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + > + + + + + + + + - + @@ -2970,6 +3311,20 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc + @@ -3005,147 +3360,6 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data ] } > - - - - - - - - - - - - MESSAGE_ROUTER - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + Loading message details in progress... + + + + + - - - + + - - - - - - - - - - - - - - - - + - + /> + + - - - - - + - - - Loading message details in progress... - + /> + + + accessible={true} + collapsable={false} + focusable={true} + hitSlop={8} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + > + + + + + + + + - + @@ -3640,6 +4083,20 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data + From eae5f04a2fb0287c2660a7e9098b93d6ca6e444b Mon Sep 17 00:00:00 2001 From: Andrea Piai Date: Thu, 9 May 2024 16:26:46 +0200 Subject: [PATCH 2/4] Forced header to be always shown until the old DS is removed --- ts/features/messages/navigation/MessagesNavigator.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ts/features/messages/navigation/MessagesNavigator.tsx b/ts/features/messages/navigation/MessagesNavigator.tsx index 4a53e5297d5..f63ed7ac12e 100644 --- a/ts/features/messages/navigation/MessagesNavigator.tsx +++ b/ts/features/messages/navigation/MessagesNavigator.tsx @@ -36,6 +36,9 @@ export const MessagesStackNavigator = () => { Date: Fri, 17 May 2024 15:10:30 +0200 Subject: [PATCH 3/4] Suggested changes --- locales/en/index.yml | 3 +- locales/it/index.yml | 3 +- .../screens/LoadingScreenContent.tsx | 14 +- .../screens/OperationResultScreenContent.tsx | 7 +- .../__tests__/LoadingScreenContent.test.tsx | 55 + .../OperationResultScreenContent.test.tsx | 10 - .../LoadingScreenContent.test.tsx.snap | 2353 +++++++++++++++++ ...OperationResultScreenContent.test.tsx.snap | 677 ----- .../messages/screens/MessageRouterScreen.tsx | 52 +- .../MessageRouterScreen.test.tsx.snap | 1542 ++++++----- 10 files changed, 3314 insertions(+), 1402 deletions(-) create mode 100644 ts/components/screens/__tests__/LoadingScreenContent.test.tsx create mode 100644 ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap diff --git a/locales/en/index.yml b/locales/en/index.yml index 06a73027198..947b80fad2b 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -1921,7 +1921,8 @@ messageDetails: contextualHelpContent: !include messages/message_detail.md headerTitle: Message emptyMessage: No content - loadingText: Loading message details in progress... + loadingText: Loading message details + pleaseWait: Wait a few moments errorText: We were unable to load the details of your message retryText: It's probably a temporary error... please try again! submitBugText: If the problem is not resolved, report it with the '?' icon at the top right, thank you! diff --git a/locales/it/index.yml b/locales/it/index.yml index 77775a7fde4..73f9e28988e 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -1921,7 +1921,8 @@ messageDetails: contextualHelpContent: !include messages/message_detail.md headerTitle: Messaggio emptyMessage: Nessun contenuto - loadingText: Caricamento dei dettagli del messaggio in corso... + loadingText: Stiamo caricando il messaggio + pleaseWait: Attendi qualche secondo errorText: Non siamo riusciti a caricare i dettagli del tuo messaggio retryText: Probabilmente è un errore temporaneo... riprova per piacere! submitBugText: Se il problema non si risolve segnalacelo con l'icona '?' in alto a destra, grazie! diff --git a/ts/components/screens/LoadingScreenContent.tsx b/ts/components/screens/LoadingScreenContent.tsx index 20674cfb76c..c5fbaf29d8e 100644 --- a/ts/components/screens/LoadingScreenContent.tsx +++ b/ts/components/screens/LoadingScreenContent.tsx @@ -12,6 +12,7 @@ import { import { SafeAreaView } from "react-native-safe-area-context"; import { LoadingIndicator } from "../../components/ui/LoadingIndicator"; import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender"; +import { WithTestID } from "../../types/WithTestID"; const styles = StyleSheet.create({ container: { @@ -29,13 +30,14 @@ const styles = StyleSheet.create({ const SPACE_BETWEEN_SPINNER_AND_TEXT = 24; -type LoadingScreenContentProps = { +type LoadingScreenContentProps = WithTestID<{ contentTitle: string; children?: React.ReactNode; -}; + headerVisible?: boolean; +}>; export const LoadingScreenContent = (props: LoadingScreenContentProps) => { - const { contentTitle, children } = props; + const { contentTitle, children, headerVisible, testID } = props; useOnFirstRender(() => { // Since the screen is shown for a very short time, @@ -50,7 +52,11 @@ export const LoadingScreenContent = (props: LoadingScreenContentProps) => { }); return ( - + ; action?: Pick< ButtonSolidProps, - "label" | "accessibilityLabel" | "onPress" | "testID" | "fullWidth" + "label" | "accessibilityLabel" | "onPress" | "testID" >; secondaryAction?: Pick< ButtonLinkProps, @@ -79,7 +79,7 @@ const OperationResultScreenContent = ({ {action && ( - + @@ -103,9 +103,6 @@ const styles = StyleSheet.create({ flexGrow: 1, marginHorizontal: IOVisualCostants.appMarginDefault }, - fullWidth: { - alignSelf: "stretch" - }, wrapper: { flex: 1, alignItems: "stretch", diff --git a/ts/components/screens/__tests__/LoadingScreenContent.test.tsx b/ts/components/screens/__tests__/LoadingScreenContent.test.tsx new file mode 100644 index 00000000000..7032abde45e --- /dev/null +++ b/ts/components/screens/__tests__/LoadingScreenContent.test.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { Text } from "react-native"; +import { createStore } from "redux"; +import LoadingScreenContent from "../LoadingScreenContent"; +import { appReducer } from "../../../store/reducers"; +import { applicationChangeState } from "../../../store/actions/application"; +import { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapper"; +import { GlobalState } from "../../../store/reducers/types"; + +describe("LoadingScreenContent", () => { + it("should match the snapshot with title, no children, header hidden", () => { + const defaultProps = { + contentTitle: "Test Content Title" + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); + it("should match the snapshot with title, no children, header shown", () => { + const defaultProps = { + contentTitle: "Test Content Title", + headerVisible: true + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); + it("should match the snapshot with title, a child, header hidden", () => { + const defaultProps = { + contentTitle: "Test Content Title", + children: {"My test child"} + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); + it("should match the snapshot with title, a child, header shown", () => { + const defaultProps = { + contentTitle: "Test Content Title", + children: {"My test child"}, + headerVisible: true + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); +}); + +function renderComponent( + props: React.ComponentProps +) { + const globalState = appReducer(undefined, applicationChangeState("active")); + const designSystemEnabledState = appReducer( + globalState, + applicationChangeState("active") + ); + return renderScreenWithNavigationStoreContext( + () => , + "DUMMY ROUTE", + {}, + createStore(appReducer, designSystemEnabledState as any) + ); +} diff --git a/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx b/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx index de0f35bf1e5..f4b2b893537 100644 --- a/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx +++ b/ts/components/screens/__tests__/OperationResultScreenContent.test.tsx @@ -29,16 +29,6 @@ describe("OperationResultScreenContent", () => { it("should match the snapshot with default props", () => { expect(renderComponent(defaultProps)).toMatchSnapshot(); }); - it("should match the snapshot with default props but full width action", () => { - const fullWidthProps = { - ...defaultProps, - action: { - ...defaultProps.action, - fullWidth: true - } - } as OperationResultScreenContentProps; - expect(renderComponent(fullWidthProps)).toMatchSnapshot(); - }); }); function renderComponent( diff --git a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap new file mode 100644 index 00000000000..dec678b0f46 --- /dev/null +++ b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap @@ -0,0 +1,2353 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LoadingScreenContent should match the snapshot with title, a child, header hidden 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + My test child + + + + + + + + + + + + + +`; + +exports[`LoadingScreenContent should match the snapshot with title, a child, header shown 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + My test child + + + + + + + + + + + + + +`; + +exports[`LoadingScreenContent should match the snapshot with title, no children, header hidden 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + + + + + + + + + + + +`; + +exports[`LoadingScreenContent should match the snapshot with title, no children, header shown 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + + + + + + + + + + + +`; diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap index 76b63a0d1f0..8689d83b1ff 100644 --- a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap +++ b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap @@ -674,680 +674,3 @@ exports[`OperationResultScreenContent should match the snapshot with default pro `; - -exports[`OperationResultScreenContent should match the snapshot with default props but full width action 1`] = ` - - - - - - - - - - - - - - - WALLET_HOME - - - - - - - - - - - - - - - - - - - - - title - - - - subtitle - - - - - - - - - Action - - - - - - - - - - - - - Secondary Action - - - - - - - - - - - - - - - - - - - -`; diff --git a/ts/features/messages/screens/MessageRouterScreen.tsx b/ts/features/messages/screens/MessageRouterScreen.tsx index 6113b71bbf5..43760d469d3 100644 --- a/ts/features/messages/screens/MessageRouterScreen.tsx +++ b/ts/features/messages/screens/MessageRouterScreen.tsx @@ -1,13 +1,7 @@ -import { StackActions } from "@react-navigation/native"; import React, { useCallback, useEffect, useRef } from "react"; -import { - ContentWrapper, - H4, - LoadingSpinner, - VSpacer -} from "@pagopa/io-app-design-system"; -import { StyleSheet, View } from "react-native"; -import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { View } from "react-native"; +import { StackActions } from "@react-navigation/native"; +import { Body, VSpacer } from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { IOStackNavigationRouteProps, @@ -34,20 +28,7 @@ import PN_ROUTES from "../../pn/navigation/routes"; import { MESSAGES_ROUTES } from "../navigation/routes"; import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel"; import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent"; - -const styles = StyleSheet.create({ - loaderContainer: { - alignItems: "center", - justifyContent: "center", - flex: 1 - }, - loaderSpinner: { - alignSelf: "center" - }, - loaderText: { - textAlign: "center" - } -}); +import LoadingScreenContent from "../../../components/screens/LoadingScreenContent"; export type MessageRouterScreenRouteParams = { messageId: UIMessageId; @@ -67,7 +48,6 @@ export const MessageRouterScreen = ( const dispatch = useIODispatch(); const navigation = useIONavigation(); const isFirstRendering = useRef(true); - const safeAreaInsets = useSafeAreaInsets(); const isLoading = useIOSelector(showSpinnerFromMessageGetStatusSelector); const thirdPartyMessageDetailsError = useIOSelector( thirdPartyMessageDetailsErrorSelector @@ -176,29 +156,21 @@ export const MessageRouterScreen = ( if (isLoading) { return ( - - - - - - -

- {I18n.t("messageDetails.loadingText")} -

- - + + + {I18n.t("messageDetails.pleaseWait")} + + ); } return ( - - - - - - - - + + - + + + - + /> + + + - - + + + + + Loading message details + + + - Loading message details in progress... + Wait a few moments - + - - - - - - - - + + + + + - - + + stroke={ + Object { + "brushRef": "spinner-firstHalf", + "type": 1, + } + } + /> + + - - + + + + + Loading message details + + + - Loading message details in progress... + Wait a few moments - + - + - - - - - - - - + + - + + + - + /> + + + - - + + + + + Loading message details + + + - Loading message details in progress... + Wait a few moments - + - - - - - - - - + + - + + + - + /> + + + - - + + + + + Loading message details + + + - Loading message details in progress... + Wait a few moments - + Date: Fri, 17 May 2024 15:28:19 +0200 Subject: [PATCH 4/4] Fixed bad action sequence on test --- ts/components/screens/__tests__/LoadingScreenContent.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ts/components/screens/__tests__/LoadingScreenContent.test.tsx b/ts/components/screens/__tests__/LoadingScreenContent.test.tsx index 7032abde45e..16c1167f5eb 100644 --- a/ts/components/screens/__tests__/LoadingScreenContent.test.tsx +++ b/ts/components/screens/__tests__/LoadingScreenContent.test.tsx @@ -6,6 +6,7 @@ import { appReducer } from "../../../store/reducers"; import { applicationChangeState } from "../../../store/actions/application"; import { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapper"; import { GlobalState } from "../../../store/reducers/types"; +import { preferencesDesignSystemSetEnabled } from "../../../store/actions/persistedPreferences"; describe("LoadingScreenContent", () => { it("should match the snapshot with title, no children, header hidden", () => { @@ -44,7 +45,7 @@ function renderComponent( const globalState = appReducer(undefined, applicationChangeState("active")); const designSystemEnabledState = appReducer( globalState, - applicationChangeState("active") + preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true }) ); return renderScreenWithNavigationStoreContext( () => ,