[IOCOM-905, IOCOM-906] New DS on Message Router

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!

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!

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 (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView
+      style={styles.container}
+      edges={headerVisible ? ["bottom"] : undefined}
+      testID={testID}
+    >
       <ContentWrapper>
         <View style={styles.content}>
           <View

ts/components/screens/__tests__/LoadingScreenContent.test.tsx

@@ -0,0 +1,56 @@
+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";
+import { preferencesDesignSystemSetEnabled } from "../../../store/actions/persistedPreferences";
+
+describe("LoadingScreenContent", () => {
+  it("should match the snapshot with title, no children, header hidden", () => {
+    const defaultProps = {
+      contentTitle: "Test Content Title"
+    } as React.ComponentProps<typeof LoadingScreenContent>;
+    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<typeof LoadingScreenContent>;
+    expect(renderComponent(defaultProps)).toMatchSnapshot();
+  });
+  it("should match the snapshot with title, a child, header hidden", () => {
+    const defaultProps = {
+      contentTitle: "Test Content Title",
+      children: <Text>{"My test child"}</Text>
+    } as React.ComponentProps<typeof LoadingScreenContent>;
+    expect(renderComponent(defaultProps)).toMatchSnapshot();
+  });
+  it("should match the snapshot with title, a child, header shown", () => {
+    const defaultProps = {
+      contentTitle: "Test Content Title",
+      children: <Text>{"My test child"}</Text>,
+      headerVisible: true
+    } as React.ComponentProps<typeof LoadingScreenContent>;
+    expect(renderComponent(defaultProps)).toMatchSnapshot();
+  });
+});
+
+function renderComponent(
+  props: React.ComponentProps<typeof LoadingScreenContent>
+) {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemEnabledState = appReducer(
+    globalState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  return renderScreenWithNavigationStoreContext<GlobalState>(
+    () => <LoadingScreenContent {...props} />,
+    "DUMMY ROUTE",
+    {},
+    createStore(appReducer, designSystemEnabledState as any)
+  );
+}