From 8b584bfe1dcfec1896e190574155de2ad92d207c Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:45:03 +0100
Subject: [PATCH 01/38] initial console to execute js code

---
 src/components/Console/index.tsx              | 115 ++++++++++++++++++
 .../settings/AboutPage/TroubleshootPage.tsx   |   5 +
 2 files changed, 120 insertions(+)
 create mode 100644 src/components/Console/index.tsx

diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
new file mode 100644
index 000000000000..fc3df7c08a72
--- /dev/null
+++ b/src/components/Console/index.tsx
@@ -0,0 +1,115 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React, {useEffect, useState} from 'react';
+import {Button, ScrollView, TextInput, View} from 'react-native';
+import Text from '@components/Text';
+
+type Log = {
+    time: Date;
+    level: string;
+    message: string;
+};
+
+type UpdateLogsFunction = (newLog: Log) => void;
+
+let updateLogs: UpdateLogsFunction | null = null;
+const capturedLogs: Log[] = [];
+const originalConsoleLog = console.log;
+
+console.log = (...args) => {
+    const message = args
+        .map((arg) => {
+            if (typeof arg === 'object') {
+                try {
+                    return JSON.stringify(arg, null, 2); // Indent for better readability
+                } catch (e) {
+                    return 'Unserializable Object';
+                }
+            }
+
+            return String(arg);
+        })
+        .join(' ');
+    const newLog = {time: new Date(), level: 'log', message};
+    capturedLogs.push(newLog);
+    if (updateLogs) {
+        updateLogs(newLog);
+    }
+    originalConsoleLog.apply(console, args);
+};
+
+function setUpdateLogsFunction(func: UpdateLogsFunction | null) {
+    updateLogs = func;
+}
+
+const charMap = {
+    '\u2018': "'",
+    '\u2019': "'",
+    '\u201C': '"',
+    '\u201D': '"',
+    '\u201E': '"',
+    '\u2026': '...',
+};
+
+const charsToSanitize = /[\u2018\u2019\u201C\u201D\u201E\u2026]/g;
+
+function Console() {
+    const [input, setInput] = useState('');
+    const [logs, setLogs] = useState<Log[]>(capturedLogs);
+
+    useEffect(() => {
+        const addLog = (newLog: Log) => {
+            setLogs((prevLogs) => [...prevLogs, newLog]);
+        };
+
+        setUpdateLogsFunction(addLog);
+
+        // Clean up when the component unmounts
+        return () => setUpdateLogsFunction(null);
+    }, []);
+
+    const handleExecute = () => {
+        const sanitizedInput = input.replace(charsToSanitize, (match) => charMap[match]);
+
+        try {
+            // @ts-expect-error Any code inside `sanitizedInput` that gets evaluated by `eval()` will be executed in the context of the current this value.
+            // eslint-disable-next-line no-eval
+            const result = eval.call(this, sanitizedInput);
+
+            if (result !== undefined) {
+                setLogs([...logs, {time: new Date(), level: 'info', message: `> ${input}`}, {time: new Date(), level: 'result', message: String(result)}]);
+            } else {
+                setLogs([...logs, {time: new Date(), level: 'info', message: `> ${input}`}]);
+            }
+        } catch (e) {
+            setLogs([...logs, {time: new Date(), level: 'error', message: `> ${sanitizedInput}`}, {time: new Date(), level: 'error', message: `Error: ${e.message}`}]);
+        }
+        setInput('');
+    };
+
+    return (
+        <View style={{position: 'absolute', bottom: 0, width: '100%', backgroundColor: 'black', height: 300}}>
+            <TextInput
+                onChangeText={setInput}
+                value={input}
+                placeholder="Enter command"
+                autoCapitalize="none"
+                autoCorrect={false}
+                style={{color: 'white', fontFamily: 'monospace', padding: 8, borderWidth: 1, borderColor: 'white'}}
+            />
+            <Button
+                title="Execute"
+                onPress={handleExecute}
+            />
+            <ScrollView bounces={false}>
+                {logs.map((log, index) => (
+                    <Text
+                        style={{fontFamily: 'monospace', color: 'white'}}
+                        key={index}
+                    >{`${log.time.toLocaleTimeString()} [${log.level}] - ${log.message}`}</Text>
+                ))}
+            </ScrollView>
+        </View>
+    );
+}
+
+export default Console;
diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx
index 2b94bc8dec08..132e45857b47 100644
--- a/src/pages/settings/AboutPage/TroubleshootPage.tsx
+++ b/src/pages/settings/AboutPage/TroubleshootPage.tsx
@@ -57,6 +57,11 @@ function TroubleshootPage() {
                 icon: Expensicons.RotateLeft,
                 action: () => setIsConfirmationModalVisible(true),
             },
+            {
+                translationKey: 'initialSettingsPage.troubleshoot.viewConsole',
+                icon: Expensicons.Gear,
+                action: () => {},
+            },
         ];
 
         return baseMenuItems.map((item) => ({

From d040a4b30f98ebb1a13309e3e8c7baf4d6037da4 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:45:04 +0100
Subject: [PATCH 02/38] cleanup console code

---
 src/components/Console/index.tsx | 70 +++-----------------------
 src/libs/Console/index.ts        | 85 ++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+), 64 deletions(-)
 create mode 100644 src/libs/Console/index.ts

diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
index fc3df7c08a72..9e980c997e1f 100644
--- a/src/components/Console/index.tsx
+++ b/src/components/Console/index.tsx
@@ -2,59 +2,12 @@
 import React, {useEffect, useState} from 'react';
 import {Button, ScrollView, TextInput, View} from 'react-native';
 import Text from '@components/Text';
-
-type Log = {
-    time: Date;
-    level: string;
-    message: string;
-};
-
-type UpdateLogsFunction = (newLog: Log) => void;
-
-let updateLogs: UpdateLogsFunction | null = null;
-const capturedLogs: Log[] = [];
-const originalConsoleLog = console.log;
-
-console.log = (...args) => {
-    const message = args
-        .map((arg) => {
-            if (typeof arg === 'object') {
-                try {
-                    return JSON.stringify(arg, null, 2); // Indent for better readability
-                } catch (e) {
-                    return 'Unserializable Object';
-                }
-            }
-
-            return String(arg);
-        })
-        .join(' ');
-    const newLog = {time: new Date(), level: 'log', message};
-    capturedLogs.push(newLog);
-    if (updateLogs) {
-        updateLogs(newLog);
-    }
-    originalConsoleLog.apply(console, args);
-};
-
-function setUpdateLogsFunction(func: UpdateLogsFunction | null) {
-    updateLogs = func;
-}
-
-const charMap = {
-    '\u2018': "'",
-    '\u2019': "'",
-    '\u201C': '"',
-    '\u201D': '"',
-    '\u201E': '"',
-    '\u2026': '...',
-};
-
-const charsToSanitize = /[\u2018\u2019\u201C\u201D\u201E\u2026]/g;
+import {createLog, sanitizeConsoleInput, setUpdateLogsFunction} from '@libs/Console';
+import type {Log} from '@libs/Console';
 
 function Console() {
     const [input, setInput] = useState('');
-    const [logs, setLogs] = useState<Log[]>(capturedLogs);
+    const [logs, setLogs] = useState<Log[]>([]);
 
     useEffect(() => {
         const addLog = (newLog: Log) => {
@@ -68,21 +21,10 @@ function Console() {
     }, []);
 
     const handleExecute = () => {
-        const sanitizedInput = input.replace(charsToSanitize, (match) => charMap[match]);
-
-        try {
-            // @ts-expect-error Any code inside `sanitizedInput` that gets evaluated by `eval()` will be executed in the context of the current this value.
-            // eslint-disable-next-line no-eval
-            const result = eval.call(this, sanitizedInput);
+        const sanitizedInput = sanitizeConsoleInput(input);
 
-            if (result !== undefined) {
-                setLogs([...logs, {time: new Date(), level: 'info', message: `> ${input}`}, {time: new Date(), level: 'result', message: String(result)}]);
-            } else {
-                setLogs([...logs, {time: new Date(), level: 'info', message: `> ${input}`}]);
-            }
-        } catch (e) {
-            setLogs([...logs, {time: new Date(), level: 'error', message: `> ${sanitizedInput}`}, {time: new Date(), level: 'error', message: `Error: ${e.message}`}]);
-        }
+        const customLogs = createLog(sanitizedInput);
+        setLogs((prevLogs) => [...prevLogs, ...customLogs]);
         setInput('');
     };
 
diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
new file mode 100644
index 000000000000..db1dae3ff137
--- /dev/null
+++ b/src/libs/Console/index.ts
@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+type Log = {
+    time: Date;
+    level: string;
+    message: string;
+};
+
+type UpdateLogsFunction = (newLog: Log) => void;
+
+let updateLogs: UpdateLogsFunction | null = null;
+const capturedLogs: Log[] = [];
+// eslint-disable-next-line no-console
+const originalConsoleLog = console.log;
+
+function setUpdateLogsFunction(func: UpdateLogsFunction | null) {
+    updateLogs = func;
+}
+
+function logMessage(args: unknown[]) {
+    const message = args
+        .map((arg) => {
+            if (typeof arg === 'object') {
+                try {
+                    return JSON.stringify(arg, null, 2); // Indent for better readability
+                } catch (e) {
+                    return 'Unserializable Object';
+                }
+            }
+
+            return String(arg);
+        })
+        .join(' ');
+    const newLog = {time: new Date(), level: 'log', message};
+    capturedLogs.push(newLog);
+    if (updateLogs) {
+        updateLogs(newLog);
+    }
+}
+
+// eslint-disable-next-line no-console
+console.log = (...args) => {
+    logMessage(args);
+    originalConsoleLog.apply(console, args);
+};
+
+const charsToSanitize = /[\u2018\u2019\u201C\u201D\u201E\u2026]/g;
+
+const charMap: Record<string, string> = {
+    '\u2018': "'",
+    '\u2019': "'",
+    '\u201C': '"',
+    '\u201D': '"',
+    '\u201E': '"',
+    '\u2026': '...',
+};
+
+function sanitizeConsoleInput(text: string) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return text.replace(charsToSanitize, (match) => charMap[match]);
+}
+
+function createLog(text: string) {
+    const time = new Date();
+    try {
+        // @ts-expect-error Any code inside `sanitizedInput` that gets evaluated by `eval()` will be executed in the context of the current this value.
+        // eslint-disable-next-line no-eval, no-invalid-this
+        const result = eval.call(this, text);
+
+        if (result !== undefined) {
+            return [
+                {time, level: 'INFO', message: `> ${text}`},
+                {time, level: 'RESULT', message: String(result)},
+            ];
+        }
+        return [{time, level: 'INFO', message: `> ${text}`}];
+    } catch (error) {
+        return [
+            {time, level: 'ERROR', message: `> ${text}`},
+            {time, level: 'ERROR', message: `Error: ${(error as Error).message}`},
+        ];
+    }
+}
+
+export {sanitizeConsoleInput, createLog, capturedLogs, setUpdateLogsFunction};
+export type {Log};

From b4aee78c35c9f79ad1af88d03877a97733134bdf Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:45:04 +0100
Subject: [PATCH 03/38] update console

---
 src/components/Console/index.tsx | 22 ++++++++++++++--------
 src/libs/Console/index.ts        |  2 +-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
index 9e980c997e1f..727813113a36 100644
--- a/src/components/Console/index.tsx
+++ b/src/components/Console/index.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, {useEffect, useState} from 'react';
-import {Button, ScrollView, TextInput, View} from 'react-native';
+import {ScrollView, View} from 'react-native';
+import Button from '@components/Button';
 import Text from '@components/Text';
+import TextInput from '@components/TextInput';
 import {createLog, sanitizeConsoleInput, setUpdateLogsFunction} from '@libs/Console';
 import type {Log} from '@libs/Console';
 
@@ -29,25 +31,29 @@ function Console() {
     };
 
     return (
-        <View style={{position: 'absolute', bottom: 0, width: '100%', backgroundColor: 'black', height: 300}}>
+        <View style={{position: 'absolute', bottom: 0, width: '100%', backgroundColor: 'white', height: 350, paddingHorizontal: 15, paddingTop: 10, borderTopWidth: 1, borderColor: 'black'}}>
             <TextInput
                 onChangeText={setInput}
                 value={input}
                 placeholder="Enter command"
-                autoCapitalize="none"
+                autoGrowHeight
                 autoCorrect={false}
-                style={{color: 'white', fontFamily: 'monospace', padding: 8, borderWidth: 1, borderColor: 'white'}}
+                accessibilityRole="text"
             />
             <Button
-                title="Execute"
                 onPress={handleExecute}
+                shouldShowRightIcon
+                text="Execute"
+                style={{marginVertical: 15}}
             />
             <ScrollView bounces={false}>
                 {logs.map((log, index) => (
-                    <Text
-                        style={{fontFamily: 'monospace', color: 'white'}}
+                    <View
+                        style={{borderColor: 'black', borderBottomWidth: 1}}
                         key={index}
-                    >{`${log.time.toLocaleTimeString()} [${log.level}] - ${log.message}`}</Text>
+                    >
+                        <Text style={{fontFamily: 'monospace', color: 'black'}}>{`${log.time.toLocaleTimeString()} [${log.level}] - ${log.message}`}</Text>
+                    </View>
                 ))}
             </ScrollView>
         </View>
diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index db1dae3ff137..86e10b44e630 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -30,7 +30,7 @@ function logMessage(args: unknown[]) {
             return String(arg);
         })
         .join(' ');
-    const newLog = {time: new Date(), level: 'log', message};
+    const newLog = {time: new Date(), level: 'LOG', message};
     capturedLogs.push(newLog);
     if (updateLogs) {
         updateLogs(newLog);

From 05919f17d53598db658bf2355356ca8f6011e1b8 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:45:21 +0100
Subject: [PATCH 04/38] add save logs feature

---
 src/components/Console/index.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
index 727813113a36..a7c851d8c7e1 100644
--- a/src/components/Console/index.tsx
+++ b/src/components/Console/index.tsx
@@ -6,6 +6,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import {createLog, sanitizeConsoleInput, setUpdateLogsFunction} from '@libs/Console';
 import type {Log} from '@libs/Console';
+import localFileDownload from '@libs/localFileDownload';
 
 function Console() {
     const [input, setInput] = useState('');
@@ -30,6 +31,10 @@ function Console() {
         setInput('');
     };
 
+    const saveLogs = () => {
+        localFileDownload('logs', JSON.stringify(logs, null, 2), 'File was saved in your Downloads folder.');
+    };
+
     return (
         <View style={{position: 'absolute', bottom: 0, width: '100%', backgroundColor: 'white', height: 350, paddingHorizontal: 15, paddingTop: 10, borderTopWidth: 1, borderColor: 'black'}}>
             <TextInput
@@ -40,12 +45,19 @@ function Console() {
                 autoCorrect={false}
                 accessibilityRole="text"
             />
-            <Button
-                onPress={handleExecute}
-                shouldShowRightIcon
-                text="Execute"
-                style={{marginVertical: 15}}
-            />
+            <View style={{display: 'flex', flexDirection: 'row', marginVertical: 15}}>
+                <Button
+                    onPress={saveLogs}
+                    shouldShowRightIcon
+                    text="Save"
+                />
+                <Button
+                    onPress={handleExecute}
+                    shouldShowRightIcon
+                    text="Execute"
+                    success
+                />
+            </View>
             <ScrollView bounces={false}>
                 {logs.map((log, index) => (
                     <View

From d70662ac164799e41fc609627940d98c26e4620e Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:45:21 +0100
Subject: [PATCH 05/38] parse object messages

---
 src/components/Console/index.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
index a7c851d8c7e1..4c532c4e58b0 100644
--- a/src/components/Console/index.tsx
+++ b/src/components/Console/index.tsx
@@ -32,7 +32,20 @@ function Console() {
     };
 
     const saveLogs = () => {
-        localFileDownload('logs', JSON.stringify(logs, null, 2), 'File was saved in your Downloads folder.');
+        const logsWithParsedMessages = logs.map((log) => {
+            try {
+                const parsedMessage = JSON.parse(log.message);
+                return {
+                    ...log,
+                    message: parsedMessage,
+                };
+            } catch {
+                // If the message can't be parsed, just return the original log
+                return log;
+            }
+        });
+
+        localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2), 'File was saved in your Downloads folder.');
     };
 
     return (

From f2a3cf8ff00433174106b534b2b7a02ed4c1fcd7 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:45:21 +0100
Subject: [PATCH 06/38] add captured logs to console

---
 src/components/Console/index.tsx | 9 +++++++--
 src/libs/Log.ts                  | 2 ++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
index 4c532c4e58b0..82d92a92ba00 100644
--- a/src/components/Console/index.tsx
+++ b/src/components/Console/index.tsx
@@ -4,13 +4,13 @@ import {ScrollView, View} from 'react-native';
 import Button from '@components/Button';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import {createLog, sanitizeConsoleInput, setUpdateLogsFunction} from '@libs/Console';
+import {capturedLogs, createLog, sanitizeConsoleInput, setUpdateLogsFunction} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileDownload from '@libs/localFileDownload';
 
 function Console() {
     const [input, setInput] = useState('');
-    const [logs, setLogs] = useState<Log[]>([]);
+    const [logs, setLogs] = useState<Log[]>(capturedLogs);
 
     useEffect(() => {
         const addLog = (newLog: Log) => {
@@ -23,6 +23,11 @@ function Console() {
         return () => setUpdateLogsFunction(null);
     }, []);
 
+    useEffect(() => {
+        setLogs((prevLogs) => [...prevLogs, ...capturedLogs]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [capturedLogs]);
+
     const handleExecute = () => {
         const sanitizedInput = sanitizeConsoleInput(input);
 
diff --git a/src/libs/Log.ts b/src/libs/Log.ts
index 9916cdd23b76..9e22d24753f8 100644
--- a/src/libs/Log.ts
+++ b/src/libs/Log.ts
@@ -5,6 +5,7 @@
 import Logger from 'expensify-common/lib/Logger';
 import type {Merge} from 'type-fest';
 import pkg from '../../package.json';
+import {capturedLogs} from './Console';
 import getPlatform from './getPlatform';
 import * as Network from './Network';
 import requireParameters from './requireParameters';
@@ -51,6 +52,7 @@ const Log = new Logger({
     serverLoggingCallback,
     clientLoggingCallback: (message) => {
         console.debug(message);
+        capturedLogs.push({time: new Date(), level: 'DEBUG', message});
     },
     isDebug: true,
 });

From 008418c3ee3d9410e092369a54a5ab9588f2c172 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:46:54 +0100
Subject: [PATCH 07/38] create console page

---
 src/ROUTES.ts                                 |  1 +
 src/SCREENS.ts                                |  1 +
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 .../AppNavigator/ModalStackNavigators.tsx     |  1 +
 src/pages/settings/AboutPage/ConsolePage.tsx  | 24 +++++++++++++++++++
 .../settings/AboutPage/TroubleshootPage.tsx   |  8 ++++---
 7 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/settings/AboutPage/ConsolePage.tsx

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 08ae5ef6d993..2bffe519b87d 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -155,6 +155,7 @@ const ROUTES = {
     SETTINGS_STATUS_CLEAR_AFTER_DATE: 'settings/profile/status/clear-after/date',
     SETTINGS_STATUS_CLEAR_AFTER_TIME: 'settings/profile/status/clear-after/time',
     SETTINGS_TROUBLESHOOT: 'settings/troubleshoot',
+    SETTINGS_CONSOLE: 'settings/troubleshoot/console',
 
     KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
 
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 5ff2e3cbb82a..e6a6cbfffc1c 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -36,6 +36,7 @@ const SCREENS = {
         TWO_FACTOR_AUTH: 'Settings_TwoFactorAuth',
         REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged',
         TROUBLESHOOT: 'Settings_Troubleshoot',
+        CONSOLE: 'Settings_Console',
 
         PROFILE: {
             ROOT: 'Settings_Profile',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7ae7ff984bfd..ab0b57498243 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -810,6 +810,7 @@ export default {
         troubleshoot: {
             resetAndRefreshStashed: 'Reset and refresh stashed data',
             viewConsole: 'View debug console',
+            debugConsole: 'Debug console',
             description: 'Use the tools below to help troubleshoot the Expensify experience. If you encounter any issues, please',
             submitBug: 'submit a bug',
             confirmResetDescription: 'All unsent draft messages will be lost, but the rest of your data is safe.',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 498fedf912bd..a4d469421848 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -804,6 +804,7 @@ export default {
         troubleshoot: {
             resetAndRefreshStashed: 'Restablecer y actualizar los datos almacenados',
             viewConsole: 'Ver la consola de depuración',
+            debugConsole: 'Consola de depuración',
             description: 'Utilice las herramientas que aparecen a continuación para solucionar los problemas de Expensify. Si tiene algún problema, por favor',
             submitBug: 'envíe un error',
             confirmResetDescription: 'Todos los borradores no enviados se perderán, pero el resto de tus datos estarán a salvo.',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index 08509d35b142..30d6e4e1dd29 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -219,6 +219,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require('../../../pages/settings/AppDownloadLinks').default as React.ComponentType,
     [SCREENS.SETTINGS.LOUNGE_ACCESS]: () => require('../../../pages/settings/Profile/LoungeAccessPage').default as React.ComponentType,
     [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/AboutPage/TroubleshootPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.CONSOLE]: () => require('../../../pages/settings/AboutPage/ConsolePage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD]: () => require('../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default as React.ComponentType,
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
new file mode 100644
index 000000000000..5fac3cad3e7a
--- /dev/null
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Console from '@components/Console';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+function ConsolePage() {
+    const {translate} = useLocalize();
+    return (
+        <ScreenWrapper testID={ConsolePage.displayName}>
+            <HeaderWithBackButton
+                title={translate('initialSettingsPage.troubleshoot.debugConsole')}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
+            />
+            <Console />
+        </ScreenWrapper>
+    );
+}
+
+ConsolePage.displayName = 'ConsolePage';
+
+export default ConsolePage;
diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx
index 132e45857b47..5c680ec17bac 100644
--- a/src/pages/settings/AboutPage/TroubleshootPage.tsx
+++ b/src/pages/settings/AboutPage/TroubleshootPage.tsx
@@ -14,6 +14,7 @@ import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import Navigation from '@libs/Navigation/Navigation';
 import * as App from '@userActions/App';
 import * as Report from '@userActions/Report';
@@ -40,7 +41,7 @@ const keysToPreserve: OnyxKey[] = [
 type BaseMenuItem = {
     translationKey: TranslationPaths;
     icon: React.FC<SvgProps>;
-    action: () => void;
+    action: () => Promise<void>;
 };
 
 function TroubleshootPage() {
@@ -49,6 +50,7 @@ function TroubleshootPage() {
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
     const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false);
+    const waitForNavigate = useWaitForNavigation();
 
     const menuItems = useMemo(() => {
         const baseMenuItems: BaseMenuItem[] = [
@@ -60,7 +62,7 @@ function TroubleshootPage() {
             {
                 translationKey: 'initialSettingsPage.troubleshoot.viewConsole',
                 icon: Expensicons.Gear,
-                action: () => {},
+                action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_CONSOLE)),
             },
         ];
 
@@ -70,7 +72,7 @@ function TroubleshootPage() {
             icon: item.icon,
             onPress: item.action,
         }));
-    }, [translate]);
+    }, [translate, waitForNavigate]);
 
     return (
         <IllustratedHeaderPageLayout

From 35396bcda745cbb77e4d723838bd55673105666c Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 2 Feb 2024 14:46:54 +0100
Subject: [PATCH 08/38] move away from console component to console page

---
 src/components/Console/index.tsx             | 93 --------------------
 src/pages/settings/AboutPage/ConsolePage.tsx | 61 ++++++++++++-
 2 files changed, 58 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/Console/index.tsx

diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
deleted file mode 100644
index 82d92a92ba00..000000000000
--- a/src/components/Console/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import React, {useEffect, useState} from 'react';
-import {ScrollView, View} from 'react-native';
-import Button from '@components/Button';
-import Text from '@components/Text';
-import TextInput from '@components/TextInput';
-import {capturedLogs, createLog, sanitizeConsoleInput, setUpdateLogsFunction} from '@libs/Console';
-import type {Log} from '@libs/Console';
-import localFileDownload from '@libs/localFileDownload';
-
-function Console() {
-    const [input, setInput] = useState('');
-    const [logs, setLogs] = useState<Log[]>(capturedLogs);
-
-    useEffect(() => {
-        const addLog = (newLog: Log) => {
-            setLogs((prevLogs) => [...prevLogs, newLog]);
-        };
-
-        setUpdateLogsFunction(addLog);
-
-        // Clean up when the component unmounts
-        return () => setUpdateLogsFunction(null);
-    }, []);
-
-    useEffect(() => {
-        setLogs((prevLogs) => [...prevLogs, ...capturedLogs]);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [capturedLogs]);
-
-    const handleExecute = () => {
-        const sanitizedInput = sanitizeConsoleInput(input);
-
-        const customLogs = createLog(sanitizedInput);
-        setLogs((prevLogs) => [...prevLogs, ...customLogs]);
-        setInput('');
-    };
-
-    const saveLogs = () => {
-        const logsWithParsedMessages = logs.map((log) => {
-            try {
-                const parsedMessage = JSON.parse(log.message);
-                return {
-                    ...log,
-                    message: parsedMessage,
-                };
-            } catch {
-                // If the message can't be parsed, just return the original log
-                return log;
-            }
-        });
-
-        localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2), 'File was saved in your Downloads folder.');
-    };
-
-    return (
-        <View style={{position: 'absolute', bottom: 0, width: '100%', backgroundColor: 'white', height: 350, paddingHorizontal: 15, paddingTop: 10, borderTopWidth: 1, borderColor: 'black'}}>
-            <TextInput
-                onChangeText={setInput}
-                value={input}
-                placeholder="Enter command"
-                autoGrowHeight
-                autoCorrect={false}
-                accessibilityRole="text"
-            />
-            <View style={{display: 'flex', flexDirection: 'row', marginVertical: 15}}>
-                <Button
-                    onPress={saveLogs}
-                    shouldShowRightIcon
-                    text="Save"
-                />
-                <Button
-                    onPress={handleExecute}
-                    shouldShowRightIcon
-                    text="Execute"
-                    success
-                />
-            </View>
-            <ScrollView bounces={false}>
-                {logs.map((log, index) => (
-                    <View
-                        style={{borderColor: 'black', borderBottomWidth: 1}}
-                        key={index}
-                    >
-                        <Text style={{fontFamily: 'monospace', color: 'black'}}>{`${log.time.toLocaleTimeString()} [${log.level}] - ${log.message}`}</Text>
-                    </View>
-                ))}
-            </ScrollView>
-        </View>
-    );
-}
-
-export default Console;
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 5fac3cad3e7a..3b716306817e 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -1,20 +1,75 @@
-import React from 'react';
-import Console from '@components/Console';
+import React, {useEffect, useState} from 'react';
+import {ScrollView, View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import {capturedLogs, createLog, sanitizeConsoleInput} from '@libs/Console';
+import type {Log} from '@libs/Console';
+import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
 
 function ConsolePage() {
+    const [input, setInput] = useState('');
+    const [logs, setLogs] = useState<Log[]>(capturedLogs);
     const {translate} = useLocalize();
+
+    useEffect(() => {
+        setLogs((prevLogs) => [...prevLogs, ...capturedLogs]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [capturedLogs]);
+
+    const handleExecute = () => {
+        const sanitizedInput = sanitizeConsoleInput(input);
+
+        const customLogs = createLog(sanitizedInput);
+        setLogs((prevLogs) => [...prevLogs, ...customLogs]);
+        setInput('');
+    };
+
+    const saveLogs = () => {
+        const logsWithParsedMessages = logs.map((log) => {
+            try {
+                const parsedMessage = JSON.parse(log.message);
+                return {
+                    ...log,
+                    message: parsedMessage,
+                };
+            } catch {
+                // If the message can't be parsed, just return the original log
+                return log;
+            }
+        });
+
+        localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2), 'File was saved in your Downloads folder.');
+    };
+
     return (
         <ScreenWrapper testID={ConsolePage.displayName}>
             <HeaderWithBackButton
                 title={translate('initialSettingsPage.troubleshoot.debugConsole')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             />
-            <Console />
+            <ScrollView bounces={false}>
+                {logs.map((log, index) => (
+                    <View
+                        style={{borderColor: 'black', borderBottomWidth: 1}}
+                        key={index}
+                    >
+                        <Text>{`${log.time.toLocaleTimeString()} [${log.level}] - ${log.message}`}</Text>
+                    </View>
+                ))}
+            </ScrollView>
+            <TextInput
+                onChangeText={setInput}
+                value={input}
+                placeholder="Enter command"
+                autoGrowHeight
+                autoCorrect={false}
+                accessibilityRole="text"
+            />
         </ScreenWrapper>
     );
 }

From ab22eafdbb3b932f7a147a8583d40aff580f5adc Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 5 Feb 2024 13:13:25 +0100
Subject: [PATCH 09/38] use onyx to collect logs

---
 src/ONYXKEYS.ts                               |  4 +
 src/libs/Console/index.ts                     | 19 ++--
 src/libs/Log.ts                               |  9 +-
 src/libs/Navigation/linkingConfig/config.ts   |  4 +
 src/libs/actions/Console.ts                   | 11 +++
 src/pages/settings/AboutPage/ConsolePage.tsx  | 89 ++++++++++++++-----
 .../settings/AboutPage/TroubleshootPage.tsx   |  2 +-
 src/types/onyx/Console.ts                     |  7 ++
 src/types/onyx/index.ts                       |  2 +
 9 files changed, 114 insertions(+), 33 deletions(-)
 create mode 100644 src/libs/actions/Console.ts
 create mode 100644 src/types/onyx/Console.ts

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 88b740e0e6c8..321221400cf8 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -252,6 +252,9 @@ const ONYXKEYS = {
     /** Indicates whether an forced upgrade is required */
     UPDATE_REQUIRED: 'updateRequired',
 
+    /** Stores the logs of the app for debugging purposes */
+    LOGS: 'logs',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -453,6 +456,7 @@ type OnyxValues = {
     [ONYXKEYS.LAST_VISITED_PATH]: string | undefined;
     [ONYXKEYS.RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;
     [ONYXKEYS.UPDATE_REQUIRED]: boolean;
+    [ONYXKEYS.LOGS]: Record<number, OnyxTypes.Log>;
 
     // Collections
     [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download;
diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index 86e10b44e630..5dc09df40ced 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -1,17 +1,18 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-type Log = {
-    time: Date;
-    level: string;
-    message: string;
-};
+import addLog from '@libs/actions/Console';
+import type {Log} from '@src/types/onyx';
 
 type UpdateLogsFunction = (newLog: Log) => void;
 
 let updateLogs: UpdateLogsFunction | null = null;
-const capturedLogs: Log[] = [];
 // eslint-disable-next-line no-console
 const originalConsoleLog = console.log;
 
+const logPatternsToIgnore = [`merge() called for key: logs`];
+
+function shouldAttachLog(message: string) {
+    return !logPatternsToIgnore.some((pattern) => message.includes(pattern));
+}
+
 function setUpdateLogsFunction(func: UpdateLogsFunction | null) {
     updateLogs = func;
 }
@@ -31,7 +32,7 @@ function logMessage(args: unknown[]) {
         })
         .join(' ');
     const newLog = {time: new Date(), level: 'LOG', message};
-    capturedLogs.push(newLog);
+    addLog(newLog);
     if (updateLogs) {
         updateLogs(newLog);
     }
@@ -81,5 +82,5 @@ function createLog(text: string) {
     }
 }
 
-export {sanitizeConsoleInput, createLog, capturedLogs, setUpdateLogsFunction};
+export {sanitizeConsoleInput, createLog, setUpdateLogsFunction, shouldAttachLog};
 export type {Log};
diff --git a/src/libs/Log.ts b/src/libs/Log.ts
index 9e22d24753f8..ed18cfa7c7c4 100644
--- a/src/libs/Log.ts
+++ b/src/libs/Log.ts
@@ -5,7 +5,8 @@
 import Logger from 'expensify-common/lib/Logger';
 import type {Merge} from 'type-fest';
 import pkg from '../../package.json';
-import {capturedLogs} from './Console';
+import addLog from './actions/Console';
+import {shouldAttachLog} from './Console';
 import getPlatform from './getPlatform';
 import * as Network from './Network';
 import requireParameters from './requireParameters';
@@ -51,8 +52,12 @@ function serverLoggingCallback(logger: Logger, params: ServerLoggingCallbackOpti
 const Log = new Logger({
     serverLoggingCallback,
     clientLoggingCallback: (message) => {
+        if (!shouldAttachLog(message)) {
+            return;
+        }
+
         console.debug(message);
-        capturedLogs.push({time: new Date(), level: 'DEBUG', message});
+        addLog({time: new Date(), level: 'DEBUG', message});
     },
     isDebug: true,
 });
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index a76774df7a92..b13c49060db0 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -180,6 +180,10 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_TROUBLESHOOT,
                             exact: true,
                         },
+                        [SCREENS.SETTINGS.CONSOLE]: {
+                            path: ROUTES.SETTINGS_CONSOLE,
+                            exact: true,
+                        },
                         [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: {
                             path: ROUTES.SETTINGS_CONTACT_METHODS.route,
                             exact: true,
diff --git a/src/libs/actions/Console.ts b/src/libs/actions/Console.ts
new file mode 100644
index 000000000000..5da94ad1c5af
--- /dev/null
+++ b/src/libs/actions/Console.ts
@@ -0,0 +1,11 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Log} from '@src/types/onyx';
+
+function addLog(log: Log) {
+    Onyx.merge(ONYXKEYS.LOGS, {
+        [log.time.getTime()]: log,
+    });
+}
+
+export default addLog;
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 3b716306817e..aadd44c64420 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -1,23 +1,41 @@
 import React, {useEffect, useState} from 'react';
 import {ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
-import {capturedLogs, createLog, sanitizeConsoleInput} from '@libs/Console';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
-function ConsolePage() {
+type CapturedLogs = Record<number, Log>;
+
+type ConsolePageProps = {
+    capturedLogs: CapturedLogs;
+};
+
+type ConsolePageOnyxProps = {
+    /** Logs captured on the current device */
+    capturedLogs: OnyxEntry<CapturedLogs>;
+};
+
+function ConsolePage({capturedLogs}: ConsolePageProps) {
     const [input, setInput] = useState('');
-    const [logs, setLogs] = useState<Log[]>(capturedLogs);
+    const [logs, setLogs] = useState<CapturedLogs>(capturedLogs);
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
     useEffect(() => {
-        setLogs((prevLogs) => [...prevLogs, ...capturedLogs]);
+        setLogs((prevLogs) => ({...prevLogs, ...capturedLogs}));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [capturedLogs]);
 
@@ -25,12 +43,12 @@ function ConsolePage() {
         const sanitizedInput = sanitizeConsoleInput(input);
 
         const customLogs = createLog(sanitizedInput);
-        setLogs((prevLogs) => [...prevLogs, ...customLogs]);
+        setLogs((prevLogs) => ({...prevLogs, ...customLogs}));
         setInput('');
     };
 
     const saveLogs = () => {
-        const logsWithParsedMessages = logs.map((log) => {
+        const logsWithParsedMessages = Object.values(logs).map((log) => {
             try {
                 const parsedMessage = JSON.parse(log.message);
                 return {
@@ -50,30 +68,59 @@ function ConsolePage() {
         <ScreenWrapper testID={ConsolePage.displayName}>
             <HeaderWithBackButton
                 title={translate('initialSettingsPage.troubleshoot.debugConsole')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
-            <ScrollView bounces={false}>
-                {logs.map((log, index) => (
+            <ScrollView
+                bounces={false}
+                style={[styles.border, styles.highlightBG, styles.borderNone, styles.p5, styles.mh5]}
+            >
+                {Object.entries(logs).map(([timestamp, log]) => (
                     <View
-                        style={{borderColor: 'black', borderBottomWidth: 1}}
-                        key={index}
+                        key={timestamp}
+                        style={styles.mb2}
                     >
-                        <Text>{`${log.time.toLocaleTimeString()} [${log.level}] - ${log.message}`}</Text>
+                        <Text family="MONOSPACE">{`${new Date(log.time).toLocaleDateString()} ${log.message}`}</Text>
                     </View>
                 ))}
             </ScrollView>
-            <TextInput
-                onChangeText={setInput}
-                value={input}
-                placeholder="Enter command"
-                autoGrowHeight
-                autoCorrect={false}
-                accessibilityRole="text"
-            />
+            <View style={[styles.flex1, styles.flexRow, styles.flexShrink1, styles.m5]}>
+                <Button
+                    text="Save log"
+                    onPress={saveLogs}
+                    icon={Expensicons.Download}
+                    style={[styles.flex1, styles.mr1]}
+                />
+                <Button
+                    text="Share log"
+                    onPress={() => {}}
+                    icon={Expensicons.Upload}
+                    style={[styles.flex1, styles.ml1]}
+                />
+            </View>
+            <View style={[styles.mh5]}>
+                <TextInput
+                    onChangeText={setInput}
+                    value={input}
+                    placeholder="Enter command"
+                    autoGrowHeight
+                    autoCorrect={false}
+                    accessibilityRole="text"
+                />
+                <Button
+                    success
+                    text="Execute"
+                    onPress={handleExecute}
+                    style={[styles.mt5]}
+                />
+            </View>
         </ScreenWrapper>
     );
 }
 
 ConsolePage.displayName = 'ConsolePage';
 
-export default ConsolePage;
+export default withOnyx<ConsolePageProps, ConsolePageOnyxProps>({
+    capturedLogs: {
+        key: ONYXKEYS.LOGS,
+    },
+})(ConsolePage);
diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx
index 5c680ec17bac..1abf4270da11 100644
--- a/src/pages/settings/AboutPage/TroubleshootPage.tsx
+++ b/src/pages/settings/AboutPage/TroubleshootPage.tsx
@@ -41,7 +41,7 @@ const keysToPreserve: OnyxKey[] = [
 type BaseMenuItem = {
     translationKey: TranslationPaths;
     icon: React.FC<SvgProps>;
-    action: () => Promise<void>;
+    action: () => void | Promise<void>;
 };
 
 function TroubleshootPage() {
diff --git a/src/types/onyx/Console.ts b/src/types/onyx/Console.ts
new file mode 100644
index 000000000000..aaea9f95f882
--- /dev/null
+++ b/src/types/onyx/Console.ts
@@ -0,0 +1,7 @@
+type Log = {
+    time: Date;
+    level: string;
+    message: string;
+};
+
+export default Log;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 939793b3b4a8..2c00a94396f2 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -5,6 +5,7 @@ import type BankAccount from './BankAccount';
 import type Beta from './Beta';
 import type BlockedFromConcierge from './BlockedFromConcierge';
 import type Card from './Card';
+import type Log from './Console';
 import type Credentials from './Credentials';
 import type Currency from './Currency';
 import type CustomStatusDraft from './CustomStatusDraft';
@@ -163,4 +164,5 @@ export type {
     IntroSchoolPrincipalForm,
     PrivateNotesForm,
     ReportFieldEditForm,
+    Log,
 };

From d21fb5e1a6c93e3e2cc9c85af9cd907008c52d55 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 5 Feb 2024 14:16:40 +0100
Subject: [PATCH 10/38] use flashlist for rendering console logs

---
 src/CONST.ts                                 |  4 +++
 src/pages/settings/AboutPage/ConsolePage.tsx | 29 ++++++++++----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 69933a623bed..0c4e70daca8b 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -3175,6 +3175,10 @@ const CONST = {
     },
 
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
+
+    DEBUG_CONSOLE: {
+        CONSOLE_HEIGHT: 400,
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index aadd44c64420..da4bb4d8cc24 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -1,5 +1,6 @@
+import {FlashList} from '@shopify/flash-list';
 import React, {useEffect, useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -14,6 +15,7 @@ import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -70,19 +72,18 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 title={translate('initialSettingsPage.troubleshoot.debugConsole')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
-            <ScrollView
-                bounces={false}
-                style={[styles.border, styles.highlightBG, styles.borderNone, styles.p5, styles.mh5]}
-            >
-                {Object.entries(logs).map(([timestamp, log]) => (
-                    <View
-                        key={timestamp}
-                        style={styles.mb2}
-                    >
-                        <Text family="MONOSPACE">{`${new Date(log.time).toLocaleDateString()} ${log.message}`}</Text>
-                    </View>
-                ))}
-            </ScrollView>
+            <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.p5, styles.mh5, {height: CONST.DEBUG_CONSOLE.CONSOLE_HEIGHT}]}>
+                <FlashList
+                    data={Object.values(logs).reverse()}
+                    renderItem={({item}) => (
+                        <View style={styles.mb2}>
+                            <Text family="MONOSPACE">{`${new Date(item.time).toLocaleTimeString()} ${item.message}`}</Text>
+                        </View>
+                    )}
+                    estimatedItemSize={70}
+                    inverted
+                />
+            </View>
             <View style={[styles.flex1, styles.flexRow, styles.flexShrink1, styles.m5]}>
                 <Button
                     text="Save log"

From 0044ef51e0c044a7fd8413eec0eee9c96e0aff02 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 5 Feb 2024 15:34:05 +0100
Subject: [PATCH 11/38] update console padding

---
 src/pages/settings/AboutPage/ConsolePage.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index da4bb4d8cc24..a9f954c06024 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -72,15 +72,16 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 title={translate('initialSettingsPage.troubleshoot.debugConsole')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
-            <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.p5, styles.mh5, {height: CONST.DEBUG_CONSOLE.CONSOLE_HEIGHT}]}>
+            <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, {height: CONST.DEBUG_CONSOLE.CONSOLE_HEIGHT}]}>
                 <FlashList
                     data={Object.values(logs).reverse()}
                     renderItem={({item}) => (
                         <View style={styles.mb2}>
-                            <Text family="MONOSPACE">{`${new Date(item.time).toLocaleTimeString()} ${item.message}`}</Text>
+                            <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
                         </View>
                     )}
                     estimatedItemSize={70}
+                    contentContainerStyle={styles.p5}
                     inverted
                 />
             </View>

From 1d178794aac1cd411dd51101eb954ff4b133e274 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 5 Feb 2024 15:42:56 +0100
Subject: [PATCH 12/38] use localize in console page

---
 src/languages/en.ts                          | 6 ++++++
 src/languages/es.ts                          | 6 ++++++
 src/pages/settings/AboutPage/ConsolePage.tsx | 8 ++++----
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index ab0b57498243..69754c19b4f4 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -816,6 +816,12 @@ export default {
             confirmResetDescription: 'All unsent draft messages will be lost, but the rest of your data is safe.',
             resetAndRefresh: 'Reset and refresh',
         },
+        debugConsole: {
+            saveLog: 'Save log',
+            shareLog: 'Share log',
+            enterCommand: 'Enter command',
+            execute: 'Execute',
+        },
         goToExpensifyClassic: 'Go to Expensify Classic',
         security: 'Security',
         signOut: 'Sign out',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index a4d469421848..0d9d1b8834a4 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -810,6 +810,12 @@ export default {
             confirmResetDescription: 'Todos los borradores no enviados se perderán, pero el resto de tus datos estarán a salvo.',
             resetAndRefresh: 'Restablecer y actualizar',
         },
+        debugConsole: {
+            saveLog: 'Guardar registro',
+            shareLog: 'Compartir registro',
+            enterCommand: 'Introducir comando',
+            execute: 'Ejecutar',
+        },
         security: 'Seguridad',
         signOut: 'Desconectar',
         signOutConfirmationText: 'Si cierras sesión perderás los cambios hechos mientras estabas desconectado',
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index a9f954c06024..df7a9bf069dd 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -87,13 +87,13 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
             </View>
             <View style={[styles.flex1, styles.flexRow, styles.flexShrink1, styles.m5]}>
                 <Button
-                    text="Save log"
+                    text={translate('initialSettingsPage.debugConsole.saveLog')}
                     onPress={saveLogs}
                     icon={Expensicons.Download}
                     style={[styles.flex1, styles.mr1]}
                 />
                 <Button
-                    text="Share log"
+                    text={translate('initialSettingsPage.debugConsole.shareLog')}
                     onPress={() => {}}
                     icon={Expensicons.Upload}
                     style={[styles.flex1, styles.ml1]}
@@ -103,14 +103,14 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 <TextInput
                     onChangeText={setInput}
                     value={input}
-                    placeholder="Enter command"
+                    placeholder={translate('initialSettingsPage.debugConsole.enterCommand')}
                     autoGrowHeight
                     autoCorrect={false}
                     accessibilityRole="text"
                 />
                 <Button
                     success
-                    text="Execute"
+                    text={translate('initialSettingsPage.debugConsole.execute')}
                     onPress={handleExecute}
                     style={[styles.mt5]}
                 />

From 88d2e8baa41ac16aca6b92f2ba3bf76e9060ec91 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 5 Feb 2024 16:00:20 +0100
Subject: [PATCH 13/38] display logs only if they are available

---
 android/app/build.gradle                     |  4 +--
 ios/Podfile.lock                             |  2 +-
 src/libs/Console/index.ts                    |  1 +
 src/pages/settings/AboutPage/ConsolePage.tsx | 27 +++++++++++---------
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 42b24f082784..b04484dda47a 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -151,7 +151,7 @@ android {
             signingConfig signingConfigs.debug
         }
         release {
-            productFlavors.production.signingConfig signingConfigs.release
+            productFlavors.production.signingConfig signingConfigs.debug
             shrinkResources enableProguardInReleaseBuilds
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
@@ -162,7 +162,7 @@ android {
             // In other words, the signingConfig setting above will be ignored when we build the flavor in release mode. 
             productFlavors.all { flavor ->
                 // All release builds should be signed with the release config ...
-                flavor.signingConfig signingConfigs.release
+                flavor.signingConfig signingConfigs.debug
             }
             // ... except for the e2e flavor, which we maybe want to build locally:
             productFlavors.e2e.signingConfig signingConfigs.debug
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 584dd5636773..3b9c3534104b 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1981,7 +1981,7 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
   VisionCamera: 7d13aae043ffb38b224a0f725d1e23ca9c190fe7
-  Yoga: 13c8ef87792450193e117976337b8527b49e8c03
+  Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2
 
diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index 5dc09df40ced..ac57d0a89010 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import addLog from '@libs/actions/Console';
 import type {Log} from '@src/types/onyx';
 
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index df7a9bf069dd..07aaa97017d7 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -11,6 +11,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import addLog from '@libs/actions/Console';
 import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileDownload from '@libs/localFileDownload';
@@ -45,7 +46,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
         const sanitizedInput = sanitizeConsoleInput(input);
 
         const customLogs = createLog(sanitizedInput);
-        setLogs((prevLogs) => ({...prevLogs, ...customLogs}));
+        customLogs.forEach((log) => addLog(log));
         setInput('');
     };
 
@@ -73,17 +74,19 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, {height: CONST.DEBUG_CONSOLE.CONSOLE_HEIGHT}]}>
-                <FlashList
-                    data={Object.values(logs).reverse()}
-                    renderItem={({item}) => (
-                        <View style={styles.mb2}>
-                            <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
-                        </View>
-                    )}
-                    estimatedItemSize={70}
-                    contentContainerStyle={styles.p5}
-                    inverted
-                />
+                {logs !== undefined && (
+                    <FlashList
+                        data={Object.values(logs).reverse()}
+                        renderItem={({item}) => (
+                            <View style={styles.mb2}>
+                                <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
+                            </View>
+                        )}
+                        estimatedItemSize={70}
+                        contentContainerStyle={styles.p5}
+                        inverted
+                    />
+                )}
             </View>
             <View style={[styles.flex1, styles.flexRow, styles.flexShrink1, styles.m5]}>
                 <Button

From 95bfd461ae0d94cb954dc89f30469085ecc34cf6 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 5 Feb 2024 16:00:29 +0100
Subject: [PATCH 14/38] Revert "display logs only if they are available"

This reverts commit 88d2e8baa41ac16aca6b92f2ba3bf76e9060ec91.
---
 android/app/build.gradle                     |  4 +--
 ios/Podfile.lock                             |  2 +-
 src/libs/Console/index.ts                    |  1 -
 src/pages/settings/AboutPage/ConsolePage.tsx | 27 +++++++++-----------
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index b04484dda47a..42b24f082784 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -151,7 +151,7 @@ android {
             signingConfig signingConfigs.debug
         }
         release {
-            productFlavors.production.signingConfig signingConfigs.debug
+            productFlavors.production.signingConfig signingConfigs.release
             shrinkResources enableProguardInReleaseBuilds
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
@@ -162,7 +162,7 @@ android {
             // In other words, the signingConfig setting above will be ignored when we build the flavor in release mode. 
             productFlavors.all { flavor ->
                 // All release builds should be signed with the release config ...
-                flavor.signingConfig signingConfigs.debug
+                flavor.signingConfig signingConfigs.release
             }
             // ... except for the e2e flavor, which we maybe want to build locally:
             productFlavors.e2e.signingConfig signingConfigs.debug
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 3b9c3534104b..584dd5636773 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1981,7 +1981,7 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
   VisionCamera: 7d13aae043ffb38b224a0f725d1e23ca9c190fe7
-  Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
+  Yoga: 13c8ef87792450193e117976337b8527b49e8c03
 
 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2
 
diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index ac57d0a89010..5dc09df40ced 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import addLog from '@libs/actions/Console';
 import type {Log} from '@src/types/onyx';
 
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 07aaa97017d7..df7a9bf069dd 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -11,7 +11,6 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import addLog from '@libs/actions/Console';
 import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileDownload from '@libs/localFileDownload';
@@ -46,7 +45,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
         const sanitizedInput = sanitizeConsoleInput(input);
 
         const customLogs = createLog(sanitizedInput);
-        customLogs.forEach((log) => addLog(log));
+        setLogs((prevLogs) => ({...prevLogs, ...customLogs}));
         setInput('');
     };
 
@@ -74,19 +73,17 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, {height: CONST.DEBUG_CONSOLE.CONSOLE_HEIGHT}]}>
-                {logs !== undefined && (
-                    <FlashList
-                        data={Object.values(logs).reverse()}
-                        renderItem={({item}) => (
-                            <View style={styles.mb2}>
-                                <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
-                            </View>
-                        )}
-                        estimatedItemSize={70}
-                        contentContainerStyle={styles.p5}
-                        inverted
-                    />
-                )}
+                <FlashList
+                    data={Object.values(logs).reverse()}
+                    renderItem={({item}) => (
+                        <View style={styles.mb2}>
+                            <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
+                        </View>
+                    )}
+                    estimatedItemSize={70}
+                    contentContainerStyle={styles.p5}
+                    inverted
+                />
             </View>
             <View style={[styles.flex1, styles.flexRow, styles.flexShrink1, styles.m5]}>
                 <Button

From 3eced554bfd8348550f537f9609ffa7bdc28c114 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 5 Feb 2024 16:03:02 +0100
Subject: [PATCH 15/38] render flashlist when logs are available

---
 src/libs/Console/index.ts                    |  1 +
 src/pages/settings/AboutPage/ConsolePage.tsx | 27 +++++++++++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index 5dc09df40ced..ac57d0a89010 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import addLog from '@libs/actions/Console';
 import type {Log} from '@src/types/onyx';
 
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index df7a9bf069dd..07aaa97017d7 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -11,6 +11,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import addLog from '@libs/actions/Console';
 import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileDownload from '@libs/localFileDownload';
@@ -45,7 +46,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
         const sanitizedInput = sanitizeConsoleInput(input);
 
         const customLogs = createLog(sanitizedInput);
-        setLogs((prevLogs) => ({...prevLogs, ...customLogs}));
+        customLogs.forEach((log) => addLog(log));
         setInput('');
     };
 
@@ -73,17 +74,19 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, {height: CONST.DEBUG_CONSOLE.CONSOLE_HEIGHT}]}>
-                <FlashList
-                    data={Object.values(logs).reverse()}
-                    renderItem={({item}) => (
-                        <View style={styles.mb2}>
-                            <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
-                        </View>
-                    )}
-                    estimatedItemSize={70}
-                    contentContainerStyle={styles.p5}
-                    inverted
-                />
+                {logs !== undefined && (
+                    <FlashList
+                        data={Object.values(logs).reverse()}
+                        renderItem={({item}) => (
+                            <View style={styles.mb2}>
+                                <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
+                            </View>
+                        )}
+                        estimatedItemSize={70}
+                        contentContainerStyle={styles.p5}
+                        inverted
+                    />
+                )}
             </View>
             <View style={[styles.flex1, styles.flexRow, styles.flexShrink1, styles.m5]}>
                 <Button

From 0d903a03a932afb6facadb2fd3f93df0d10b6919 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Tue, 6 Feb 2024 09:00:29 +0100
Subject: [PATCH 16/38] update buttons

---
 src/components/Button/index.tsx              | 2 +-
 src/pages/settings/AboutPage/ConsolePage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index f4b6e8b23ecf..7913a866c4f5 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -318,7 +318,7 @@ function Button(
                     shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    'text' in rest && (rest?.icon || rest?.shouldShowRightIcon) ? styles.alignItemsStretch : undefined,
+                    'text' in rest && rest?.shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
                 ]}
                 hoverStyle={[
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 07aaa97017d7..f01c89005cac 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -98,7 +98,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 <Button
                     text={translate('initialSettingsPage.debugConsole.shareLog')}
                     onPress={() => {}}
-                    icon={Expensicons.Upload}
+                    icon={Expensicons.UploadAlt}
                     style={[styles.flex1, styles.ml1]}
                 />
             </View>

From 6b5cc8f3dfdb12053d0be51fe0f8736443bd81aa Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Tue, 6 Feb 2024 10:27:18 +0100
Subject: [PATCH 17/38] use flex on console view

---
 src/CONST.ts                                 | 4 ----
 src/pages/settings/AboutPage/ConsolePage.tsx | 5 ++---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 0c4e70daca8b..69933a623bed 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -3175,10 +3175,6 @@ const CONST = {
     },
 
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
-
-    DEBUG_CONSOLE: {
-        CONSOLE_HEIGHT: 400,
-    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index f01c89005cac..7209b3bb8a77 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -16,7 +16,6 @@ import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -73,7 +72,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 title={translate('initialSettingsPage.troubleshoot.debugConsole')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
-            <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, {height: CONST.DEBUG_CONSOLE.CONSOLE_HEIGHT}]}>
+            <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, styles.flex1]}>
                 {logs !== undefined && (
                     <FlashList
                         data={Object.values(logs).reverse()}
@@ -88,7 +87,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                     />
                 )}
             </View>
-            <View style={[styles.flex1, styles.flexRow, styles.flexShrink1, styles.m5]}>
+            <View style={[styles.dFlex, styles.flexRow, styles.m5]}>
                 <Button
                     text={translate('initialSettingsPage.debugConsole.saveLog')}
                     onPress={saveLogs}

From b106c44b65aac594afb76a78480cde8f026bfb52 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Tue, 6 Feb 2024 11:57:45 +0100
Subject: [PATCH 18/38] add comments to not described functions

---
 src/libs/Console/index.ts                    | 37 ++++++++++++++------
 src/libs/actions/Console.ts                  |  4 +++
 src/pages/settings/AboutPage/ConsolePage.tsx |  8 ++---
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index ac57d0a89010..868509b8625a 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -2,22 +2,26 @@
 import addLog from '@libs/actions/Console';
 import type {Log} from '@src/types/onyx';
 
-type UpdateLogsFunction = (newLog: Log) => void;
-
-let updateLogs: UpdateLogsFunction | null = null;
+/* store the original console.log function so we can call it */
 // eslint-disable-next-line no-console
 const originalConsoleLog = console.log;
 
+/* List of patterns to ignore in logs. "logs" key always needs to be ignored because otherwise it will cause infinite loop */
 const logPatternsToIgnore = [`merge() called for key: logs`];
 
+/**
+ * Check if the log should be attached to the console
+ * @param message the message to check
+ * @returns true if the log should be attached to the console
+ */
 function shouldAttachLog(message: string) {
     return !logPatternsToIgnore.some((pattern) => message.includes(pattern));
 }
 
-function setUpdateLogsFunction(func: UpdateLogsFunction | null) {
-    updateLogs = func;
-}
-
+/**
+ * Goes through all the arguments passed the console, parses them to a string and adds them to the logs
+ * @param args the arguments to log
+ */
 function logMessage(args: unknown[]) {
     const message = args
         .map((arg) => {
@@ -34,11 +38,12 @@ function logMessage(args: unknown[]) {
         .join(' ');
     const newLog = {time: new Date(), level: 'LOG', message};
     addLog(newLog);
-    if (updateLogs) {
-        updateLogs(newLog);
-    }
 }
 
+/**
+ * Override the console.log function to add logs to the store
+ * @param args arguments passed to the console.log function
+ */
 // eslint-disable-next-line no-console
 console.log = (...args) => {
     logMessage(args);
@@ -56,11 +61,21 @@ const charMap: Record<string, string> = {
     '\u2026': '...',
 };
 
+/**
+ * Sanitize the input to the console
+ * @param text the text to sanitize
+ * @returns the sanitized text
+ */
 function sanitizeConsoleInput(text: string) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return text.replace(charsToSanitize, (match) => charMap[match]);
 }
 
+/**
+ * Run an arbitrary JS code and create a log from the output
+ * @param text the JS code to run
+ * @returns an array of logs created by eval call
+ */
 function createLog(text: string) {
     const time = new Date();
     try {
@@ -83,5 +98,5 @@ function createLog(text: string) {
     }
 }
 
-export {sanitizeConsoleInput, createLog, setUpdateLogsFunction, shouldAttachLog};
+export {sanitizeConsoleInput, createLog, shouldAttachLog};
 export type {Log};
diff --git a/src/libs/actions/Console.ts b/src/libs/actions/Console.ts
index 5da94ad1c5af..3ac35716bf51 100644
--- a/src/libs/actions/Console.ts
+++ b/src/libs/actions/Console.ts
@@ -2,6 +2,10 @@ import Onyx from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Log} from '@src/types/onyx';
 
+/**
+ * Merge the new log into the existing logs in Onyx
+ * @param log the log to add
+ */
 function addLog(log: Log) {
     Onyx.merge(ONYXKEYS.LOGS, {
         [log.time.getTime()]: log,
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 7209b3bb8a77..fddd561062bb 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -41,11 +41,11 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [capturedLogs]);
 
-    const handleExecute = () => {
+    const executeArbitraryCode = () => {
         const sanitizedInput = sanitizeConsoleInput(input);
 
-        const customLogs = createLog(sanitizedInput);
-        customLogs.forEach((log) => addLog(log));
+        const output = createLog(sanitizedInput);
+        output.forEach((log) => addLog(log));
         setInput('');
     };
 
@@ -113,7 +113,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 <Button
                     success
                     text={translate('initialSettingsPage.debugConsole.execute')}
-                    onPress={handleExecute}
+                    onPress={executeArbitraryCode}
                     style={[styles.mt5]}
                 />
             </View>

From 820dc4e090010181e3eeb4592f98eb1ad06921a9 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Tue, 6 Feb 2024 19:34:23 +0100
Subject: [PATCH 19/38] add share log page

---
 src/ROUTES.ts                                 |   1 +
 src/SCREENS.ts                                |   1 +
 .../AppNavigator/ModalStackNavigators.tsx     |   1 +
 src/libs/Navigation/linkingConfig/config.ts   |   4 +
 src/libs/OptionsListUtils.ts                  |  16 ++
 src/pages/settings/AboutPage/ConsolePage.tsx  |   6 +-
 src/pages/settings/AboutPage/ShareLogPage.tsx | 156 ++++++++++++++++++
 7 files changed, 184 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/settings/AboutPage/ShareLogPage.tsx

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 2bffe519b87d..18882279bf62 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -156,6 +156,7 @@ const ROUTES = {
     SETTINGS_STATUS_CLEAR_AFTER_TIME: 'settings/profile/status/clear-after/time',
     SETTINGS_TROUBLESHOOT: 'settings/troubleshoot',
     SETTINGS_CONSOLE: 'settings/troubleshoot/console',
+    SETTINGS_SHARE_LOG: 'settings/troubleshoot/console/share-log',
 
     KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
 
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index e6a6cbfffc1c..6c833379cc52 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -37,6 +37,7 @@ const SCREENS = {
         REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged',
         TROUBLESHOOT: 'Settings_Troubleshoot',
         CONSOLE: 'Settings_Console',
+        SHARE_LOG: 'Share_Log',
 
         PROFILE: {
             ROOT: 'Settings_Profile',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index 30d6e4e1dd29..691fd627a746 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -220,6 +220,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.LOUNGE_ACCESS]: () => require('../../../pages/settings/Profile/LoungeAccessPage').default as React.ComponentType,
     [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/AboutPage/TroubleshootPage').default as React.ComponentType,
     [SCREENS.SETTINGS.CONSOLE]: () => require('../../../pages/settings/AboutPage/ConsolePage').default as React.ComponentType,
+    [SCREENS.SETTINGS.SHARE_LOG]: () => require('../../../pages/settings/AboutPage/ShareLogPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD]: () => require('../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default as React.ComponentType,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index b13c49060db0..8a4fe566716d 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -184,6 +184,10 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_CONSOLE,
                             exact: true,
                         },
+                        [SCREENS.SETTINGS.SHARE_LOG]: {
+                            path: ROUTES.SETTINGS_SHARE_LOG,
+                            exact: true,
+                        },
                         [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: {
                             path: ROUTES.SETTINGS_CONTACT_METHODS.route,
                             exact: true,
diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts
index 4ff5fdb2cef9..756810ec31d9 100644
--- a/src/libs/OptionsListUtils.ts
+++ b/src/libs/OptionsListUtils.ts
@@ -1702,6 +1702,19 @@ function getSearchOptions(reports: Record<string, Report>, personalDetails: Onyx
     return options;
 }
 
+function getShareLogOptions(reports: OnyxCollection<Report>, personalDetails: OnyxEntry<PersonalDetailsList>, searchValue = '', betas: Beta[] = []): GetOptions {
+    return getOptions(reports, personalDetails, {
+        betas,
+        searchInputValue: searchValue.trim(),
+        includeRecentReports: true,
+        includeMultipleParticipantReports: true,
+        sortByReportTypeInSearch: true,
+        includePersonalDetails: true,
+        forcePolicyNamePreview: true,
+        includeOwnedWorkspaceChats: true,
+    });
+}
+
 /**
  * Build the IOUConfirmation options for showing the payee personalDetail
  */
@@ -2003,4 +2016,7 @@ export {
     formatMemberForList,
     formatSectionsFromSearchTerm,
     transformedTaxRates,
+    getShareLogOptions,
 };
+
+export type {GetOptions};
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index fddd561062bb..2c53dafa071b 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -66,6 +66,10 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
         localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2), 'File was saved in your Downloads folder.');
     };
 
+    const shareLogs = () => {
+        Navigation.navigate(ROUTES.SETTINGS_SHARE_LOG);
+    };
+
     return (
         <ScreenWrapper testID={ConsolePage.displayName}>
             <HeaderWithBackButton
@@ -96,7 +100,7 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 />
                 <Button
                     text={translate('initialSettingsPage.debugConsole.shareLog')}
-                    onPress={() => {}}
+                    onPress={shareLogs}
                     icon={Expensicons.UploadAlt}
                     style={[styles.flex1, styles.ml1]}
                 />
diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx
new file mode 100644
index 000000000000..e8dda542c52c
--- /dev/null
+++ b/src/pages/settings/AboutPage/ShareLogPage.tsx
@@ -0,0 +1,156 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
+import OptionsSelector from '@components/OptionsSelector';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {Beta, Report} from '@src/types/onyx';
+
+type ShareLogOnyxProps = {
+    /** Beta features list */
+    betas: OnyxEntry<Beta[]>;
+
+    /** All reports shared with the user */
+    reports: OnyxCollection<Report>;
+};
+
+type ShareLogProps = ShareLogOnyxProps;
+
+function ShareLogPage({betas, reports}: ShareLogProps) {
+    const [searchValue, setSearchValue] = useState('');
+    const [searchOptions, setSearchOptions] = useState<Pick<OptionsListUtils.GetOptions, 'recentReports' | 'personalDetails' | 'userToInvite'>>({
+        recentReports: [],
+        personalDetails: [],
+        userToInvite: {},
+    });
+
+    const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const isMounted = useRef(false);
+    const personalDetails = usePersonalDetails();
+
+    const updateOptions = useCallback(() => {
+        const {
+            recentReports: localRecentReports,
+            personalDetails: localPersonalDetails,
+            userToInvite: localUserToInvite,
+        } = OptionsListUtils.getShareLogOptions(reports, personalDetails, searchValue.trim(), betas);
+
+        setSearchOptions({
+            recentReports: localRecentReports,
+            personalDetails: localPersonalDetails,
+            userToInvite: localUserToInvite,
+        });
+    }, [betas, personalDetails, reports, searchValue]);
+
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
+
+    useEffect(() => {
+        updateOptions();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
+
+        updateOptions();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchValue]);
+
+    const sections = useMemo(() => {
+        const sectionsList = [];
+        let indexOffset = 0;
+
+        sectionsList.push({
+            title: translate('common.recents'),
+            data: searchOptions.recentReports,
+            shouldShow: searchOptions.recentReports?.length > 0,
+            indexOffset,
+        });
+        indexOffset += searchOptions.recentReports?.length;
+
+        sectionsList.push({
+            title: translate('common.contacts'),
+            data: searchOptions.personalDetails,
+            shouldShow: searchOptions.personalDetails?.length > 0,
+            indexOffset,
+        });
+        indexOffset += searchOptions.personalDetails?.length;
+
+        if (searchOptions.userToInvite) {
+            sectionsList.push({
+                data: [searchOptions.userToInvite],
+                shouldShow: true,
+                indexOffset,
+            });
+        }
+
+        return sectionsList;
+    }, [searchOptions.personalDetails, searchOptions.recentReports, searchOptions.userToInvite, translate]);
+
+    const headerMessage = OptionsListUtils.getHeaderMessage(
+        searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0,
+        Boolean(searchOptions.userToInvite),
+        searchValue,
+    );
+
+    const onChangeText = (value = '') => {
+        setSearchValue(value);
+    };
+
+    return (
+        <ScreenWrapper
+            testID={ShareLogPage.displayName}
+            includeSafeAreaPaddingBottom={false}
+        >
+            {({safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithBackButton
+                        title="Share Log"
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONSOLE)}
+                    />
+                    <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                        <OptionsSelector
+                            sections={sections}
+                            onChangeText={onChangeText}
+                            value={searchValue}
+                            headerMessage={headerMessage}
+                            showTitleTooltip
+                            shouldShowOptions={isOptionsDataReady}
+                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
+                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                            autoFocus
+                        />
+                    </View>
+                </>
+            )}
+            {/* <Text>ShareLog</Text> */}
+        </ScreenWrapper>
+    );
+}
+
+ShareLogPage.displayName = 'ShareLogPage';
+
+export default withOnyx<ShareLogProps, ShareLogOnyxProps>({
+    reports: {
+        key: ONYXKEYS.COLLECTION.REPORT,
+    },
+    betas: {
+        key: ONYXKEYS.BETAS,
+    },
+})(ShareLogPage);

From abcf6d7b8e4dcba6d6cc8102f3d6da81a97b3a14 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 7 Feb 2024 12:51:02 +0100
Subject: [PATCH 20/38] connect logs with search for sharing log

---
 src/pages/settings/AboutPage/ShareLogPage.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx
index e8dda542c52c..1f0dd9f99ab0 100644
--- a/src/pages/settings/AboutPage/ShareLogPage.tsx
+++ b/src/pages/settings/AboutPage/ShareLogPage.tsx
@@ -14,7 +14,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Beta, Report} from '@src/types/onyx';
+import type {Beta, Log, Report} from '@src/types/onyx';
 
 type ShareLogOnyxProps = {
     /** Beta features list */
@@ -22,11 +22,14 @@ type ShareLogOnyxProps = {
 
     /** All reports shared with the user */
     reports: OnyxCollection<Report>;
+
+    /** Logs */
+    logs: OnyxEntry<Record<number, Log>>;
 };
 
 type ShareLogProps = ShareLogOnyxProps;
 
-function ShareLogPage({betas, reports}: ShareLogProps) {
+function ShareLogPage({betas, reports, logs}: ShareLogProps) {
     const [searchValue, setSearchValue] = useState('');
     const [searchOptions, setSearchOptions] = useState<Pick<OptionsListUtils.GetOptions, 'recentReports' | 'personalDetails' | 'userToInvite'>>({
         recentReports: [],
@@ -153,4 +156,7 @@ export default withOnyx<ShareLogProps, ShareLogOnyxProps>({
     betas: {
         key: ONYXKEYS.BETAS,
     },
+    logs: {
+        key: ONYXKEYS.LOGS,
+    },
 })(ShareLogPage);

From 03ee43b16952f2050b7b7fcfb1b47ebddde69750 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Thu, 8 Feb 2024 14:58:25 +0100
Subject: [PATCH 21/38] share logs in a chat on mobile

---
 src/ROUTES.ts                                 |  7 ++--
 src/libs/Navigation/linkingConfig/config.ts   |  5 +--
 src/libs/localFileCreate/index.native.ts      | 12 +++++++
 src/libs/localFileCreate/index.ts             | 11 ++++++
 src/libs/localFileDownload/index.android.ts   |  7 ++--
 src/libs/localFileDownload/index.ios.ts       |  8 ++---
 src/libs/localFileDownload/index.ts           | 13 +++----
 src/pages/settings/AboutPage/ConsolePage.tsx  | 33 ++++++++++-------
 src/pages/settings/AboutPage/ShareLogPage.tsx | 35 ++++++++++++++-----
 9 files changed, 86 insertions(+), 45 deletions(-)
 create mode 100644 src/libs/localFileCreate/index.native.ts
 create mode 100644 src/libs/localFileCreate/index.ts

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 18882279bf62..921da6b4b28c 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -156,7 +156,10 @@ const ROUTES = {
     SETTINGS_STATUS_CLEAR_AFTER_TIME: 'settings/profile/status/clear-after/time',
     SETTINGS_TROUBLESHOOT: 'settings/troubleshoot',
     SETTINGS_CONSOLE: 'settings/troubleshoot/console',
-    SETTINGS_SHARE_LOG: 'settings/troubleshoot/console/share-log',
+    SETTINGS_SHARE_LOG: {
+        route: 'settings/troubleshoot/console/share-log',
+        getRoute: (source: string) => `settings/troubleshoot/console/share-log?source=${encodeURI(source)}` as const,
+    },
 
     KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
 
@@ -167,7 +170,7 @@ const ROUTES = {
     REPORT: 'r',
     REPORT_WITH_ID: {
         route: 'r/:reportID?/:reportActionID?',
-        getRoute: (reportID: string) => `r/${reportID}` as const,
+        getRoute: (reportID: string, source?: string) => `r/${reportID}?source=${source}` as const,
     },
     REPORT_AVATAR: {
         route: 'r/:reportID/avatar',
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 8a4fe566716d..b9a647045bc4 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -184,10 +184,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_CONSOLE,
                             exact: true,
                         },
-                        [SCREENS.SETTINGS.SHARE_LOG]: {
-                            path: ROUTES.SETTINGS_SHARE_LOG,
-                            exact: true,
-                        },
+                        [SCREENS.SETTINGS.SHARE_LOG]: ROUTES.SETTINGS_SHARE_LOG.route,
                         [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: {
                             path: ROUTES.SETTINGS_CONTACT_METHODS.route,
                             exact: true,
diff --git a/src/libs/localFileCreate/index.native.ts b/src/libs/localFileCreate/index.native.ts
new file mode 100644
index 000000000000..279cf42e08df
--- /dev/null
+++ b/src/libs/localFileCreate/index.native.ts
@@ -0,0 +1,12 @@
+import RNFetchBlob from 'react-native-blob-util';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+
+const localFileCreate = (fileName: string, textContent: string) => {
+    const newFileName = FileUtils.appendTimeToFileName(fileName);
+    const dir = RNFetchBlob.fs.dirs.DocumentDir;
+    const path = `${dir}/${newFileName}.txt`;
+
+    return RNFetchBlob.fs.writeFile(path, textContent, 'utf8').then(() => ({path, newFileName}));
+};
+
+export default localFileCreate;
diff --git a/src/libs/localFileCreate/index.ts b/src/libs/localFileCreate/index.ts
new file mode 100644
index 000000000000..3dc99ea7aacb
--- /dev/null
+++ b/src/libs/localFileCreate/index.ts
@@ -0,0 +1,11 @@
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+
+const localFileCreate = (fileName: string, textContent: string) => {
+    const newFileName = FileUtils.appendTimeToFileName(fileName);
+    const blob = new Blob([textContent], {type: 'text/plain'});
+    const url = URL.createObjectURL(blob);
+
+    return Promise.resolve({path: url, newFileName});
+};
+
+export default localFileCreate;
diff --git a/src/libs/localFileDownload/index.android.ts b/src/libs/localFileDownload/index.android.ts
index dd266d3be405..6573006154d4 100644
--- a/src/libs/localFileDownload/index.android.ts
+++ b/src/libs/localFileDownload/index.android.ts
@@ -1,5 +1,6 @@
 import RNFetchBlob from 'react-native-blob-util';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
+import localFileCreate from '@libs/localFileCreate';
 import type LocalFileDownload from './types';
 
 /**
@@ -8,11 +9,7 @@ import type LocalFileDownload from './types';
  * After the file is copied, it is removed from the internal dir.
  */
 const localFileDownload: LocalFileDownload = (fileName, textContent, successMessage) => {
-    const newFileName = FileUtils.appendTimeToFileName(fileName);
-    const dir = RNFetchBlob.fs.dirs.DocumentDir;
-    const path = `${dir}/${newFileName}.txt`;
-
-    RNFetchBlob.fs.writeFile(path, textContent, 'utf8').then(() => {
+    localFileCreate(fileName, textContent).then(({path, newFileName}) => {
         RNFetchBlob.MediaCollection.copyToMediaStore(
             {
                 name: newFileName,
diff --git a/src/libs/localFileDownload/index.ios.ts b/src/libs/localFileDownload/index.ios.ts
index 892ab29d21f5..0e57cb4a23c5 100644
--- a/src/libs/localFileDownload/index.ios.ts
+++ b/src/libs/localFileDownload/index.ios.ts
@@ -1,6 +1,6 @@
 import {Share} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import localFileCreate from '@libs/localFileCreate/index.native';
 import type LocalFileDownload from './types';
 
 /**
@@ -9,11 +9,7 @@ import type LocalFileDownload from './types';
  * After the file is shared, it is removed from the internal dir.
  */
 const localFileDownload: LocalFileDownload = (fileName, textContent) => {
-    const newFileName = FileUtils.appendTimeToFileName(fileName);
-    const dir = RNFetchBlob.fs.dirs.DocumentDir;
-    const path = `${dir}/${newFileName}.txt`;
-
-    RNFetchBlob.fs.writeFile(path, textContent, 'utf8').then(() => {
+    localFileCreate(fileName, textContent).then(({path, newFileName}) => {
         Share.share({url: path, title: newFileName}).finally(() => {
             RNFetchBlob.fs.unlink(path);
         });
diff --git a/src/libs/localFileDownload/index.ts b/src/libs/localFileDownload/index.ts
index ba038b8853ad..e63455f243a9 100644
--- a/src/libs/localFileDownload/index.ts
+++ b/src/libs/localFileDownload/index.ts
@@ -1,4 +1,5 @@
 import * as FileUtils from '@libs/fileDownload/FileUtils';
+import localFileCreate from '@libs/localFileCreate';
 import type LocalFileDownload from './types';
 
 /**
@@ -7,12 +8,12 @@ import type LocalFileDownload from './types';
  * is downloaded by the browser.
  */
 const localFileDownload: LocalFileDownload = (fileName, textContent) => {
-    const blob = new Blob([textContent], {type: 'text/plain'});
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.download = FileUtils.appendTimeToFileName(`${fileName}.txt`);
-    link.href = url;
-    link.click();
+    localFileCreate(fileName, textContent).then(({path}) => {
+        const link = document.createElement('a');
+        link.download = FileUtils.appendTimeToFileName(`${fileName}.txt`);
+        link.href = path;
+        link.click();
+    });
 };
 
 export default localFileDownload;
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 2c53dafa071b..b972af174614 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -14,6 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import addLog from '@libs/actions/Console';
 import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
+import localFileCreate from '@libs/localFileCreate';
 import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -30,6 +31,20 @@ type ConsolePageOnyxProps = {
     capturedLogs: OnyxEntry<CapturedLogs>;
 };
 
+const parseStingifiedMessages = (logs: CapturedLogs) =>
+    Object.values(logs).map((log) => {
+        try {
+            const parsedMessage = JSON.parse(log.message);
+            return {
+                ...log,
+                message: parsedMessage,
+            };
+        } catch {
+            // If the message can't be parsed, just return the original log
+            return log;
+        }
+    });
+
 function ConsolePage({capturedLogs}: ConsolePageProps) {
     const [input, setInput] = useState('');
     const [logs, setLogs] = useState<CapturedLogs>(capturedLogs);
@@ -50,24 +65,16 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
     };
 
     const saveLogs = () => {
-        const logsWithParsedMessages = Object.values(logs).map((log) => {
-            try {
-                const parsedMessage = JSON.parse(log.message);
-                return {
-                    ...log,
-                    message: parsedMessage,
-                };
-            } catch {
-                // If the message can't be parsed, just return the original log
-                return log;
-            }
-        });
+        const logsWithParsedMessages = parseStingifiedMessages(logs);
 
         localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2), 'File was saved in your Downloads folder.');
     };
 
     const shareLogs = () => {
-        Navigation.navigate(ROUTES.SETTINGS_SHARE_LOG);
+        const logsWithParsedMessages = parseStingifiedMessages(logs);
+        localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then(({path}) => {
+            Navigation.navigate(ROUTES.SETTINGS_SHARE_LOG.getRoute(path));
+        });
     };
 
     return (
diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx
index 1f0dd9f99ab0..883757849fb3 100644
--- a/src/pages/settings/AboutPage/ShareLogPage.tsx
+++ b/src/pages/settings/AboutPage/ShareLogPage.tsx
@@ -9,12 +9,14 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import * as Reports from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Beta, Log, Report} from '@src/types/onyx';
+import type {Beta, Report} from '@src/types/onyx';
 
 type ShareLogOnyxProps = {
     /** Beta features list */
@@ -22,14 +24,17 @@ type ShareLogOnyxProps = {
 
     /** All reports shared with the user */
     reports: OnyxCollection<Report>;
-
-    /** Logs */
-    logs: OnyxEntry<Record<number, Log>>;
 };
 
-type ShareLogProps = ShareLogOnyxProps;
+type ShareLogProps = ShareLogOnyxProps & {
+    route: {
+        params: {
+            source: string;
+        };
+    };
+};
 
-function ShareLogPage({betas, reports, logs}: ShareLogProps) {
+function ShareLogPage({betas, reports, route}: ShareLogProps) {
     const [searchValue, setSearchValue] = useState('');
     const [searchOptions, setSearchOptions] = useState<Pick<OptionsListUtils.GetOptions, 'recentReports' | 'personalDetails' | 'userToInvite'>>({
         recentReports: [],
@@ -115,6 +120,20 @@ function ShareLogPage({betas, reports, logs}: ShareLogProps) {
         setSearchValue(value);
     };
 
+    const attachLogToReport = (option) => {
+        if (!option || !route.params.source) {
+            return;
+        }
+
+        if (option.reportID) {
+            const filename = FileUtils.appendTimeToFileName('logs');
+            Reports.addAttachment(option.reportID, {name: filename, source: route.params.source});
+
+            const routeToNavigate = ROUTES.REPORT_WITH_ID.getRoute(option.reportID);
+            Navigation.navigate(routeToNavigate);
+        }
+    };
+
     return (
         <ScreenWrapper
             testID={ShareLogPage.displayName}
@@ -129,6 +148,7 @@ function ShareLogPage({betas, reports, logs}: ShareLogProps) {
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                         <OptionsSelector
                             sections={sections}
+                            onSelectRow={attachLogToReport}
                             onChangeText={onChangeText}
                             value={searchValue}
                             headerMessage={headerMessage}
@@ -156,7 +176,4 @@ export default withOnyx<ShareLogProps, ShareLogOnyxProps>({
     betas: {
         key: ONYXKEYS.BETAS,
     },
-    logs: {
-        key: ONYXKEYS.LOGS,
-    },
 })(ShareLogPage);

From 0e1ddaf2e47485d35dd50570a68680219790e70d Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Thu, 8 Feb 2024 15:42:14 +0100
Subject: [PATCH 22/38] add loader for sharing

---
 src/pages/settings/AboutPage/ConsolePage.tsx  | 6 +++++-
 src/pages/settings/AboutPage/ShareLogPage.tsx | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index b972af174614..06d5527393fb 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -48,6 +48,7 @@ const parseStingifiedMessages = (logs: CapturedLogs) =>
 function ConsolePage({capturedLogs}: ConsolePageProps) {
     const [input, setInput] = useState('');
     const [logs, setLogs] = useState<CapturedLogs>(capturedLogs);
+    const [isGeneratingLogsFile, setIsGeneratingLogsFile] = useState(false);
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -71,8 +72,10 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
     };
 
     const shareLogs = () => {
+        setIsGeneratingLogsFile(true);
         const logsWithParsedMessages = parseStingifiedMessages(logs);
         localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then(({path}) => {
+            setIsGeneratingLogsFile(false);
             Navigation.navigate(ROUTES.SETTINGS_SHARE_LOG.getRoute(path));
         });
     };
@@ -108,8 +111,9 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
                 <Button
                     text={translate('initialSettingsPage.debugConsole.shareLog')}
                     onPress={shareLogs}
-                    icon={Expensicons.UploadAlt}
+                    icon={!isGeneratingLogsFile ? Expensicons.UploadAlt : undefined}
                     style={[styles.flex1, styles.ml1]}
+                    isLoading={isGeneratingLogsFile}
                 />
             </View>
             <View style={[styles.mh5]}>
diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx
index 883757849fb3..0ef9f1f81bc0 100644
--- a/src/pages/settings/AboutPage/ShareLogPage.tsx
+++ b/src/pages/settings/AboutPage/ShareLogPage.tsx
@@ -126,8 +126,8 @@ function ShareLogPage({betas, reports, route}: ShareLogProps) {
         }
 
         if (option.reportID) {
-            const filename = FileUtils.appendTimeToFileName('logs');
-            Reports.addAttachment(option.reportID, {name: filename, source: route.params.source});
+            const filename = FileUtils.appendTimeToFileName('logs.txt');
+            Reports.addAttachment(option.reportID, {name: filename, source: route.params.source, uri: route.params.source, type: 'text/plain'});
 
             const routeToNavigate = ROUTES.REPORT_WITH_ID.getRoute(option.reportID);
             Navigation.navigate(routeToNavigate);

From 33fef1847e7089dad56c6e89a4a8edff388e9612 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Thu, 8 Feb 2024 16:07:15 +0100
Subject: [PATCH 23/38] store logs only after user enters the console page

---
 src/ONYXKEYS.ts                              |  4 +++
 src/libs/Console/index.ts                    |  2 +-
 src/libs/Log.ts                              | 21 +++++++++++++--
 src/libs/actions/Console.ts                  |  6 ++++-
 src/pages/settings/AboutPage/ConsolePage.tsx | 28 +++++++++++++++-----
 5 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 321221400cf8..df1324efc6bf 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -255,6 +255,9 @@ const ONYXKEYS = {
     /** Stores the logs of the app for debugging purposes */
     LOGS: 'logs',
 
+    /** Indicates whether we should store logs or not */
+    SHOULD_STORE_LOGS: 'shouldStoreLogs',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -457,6 +460,7 @@ type OnyxValues = {
     [ONYXKEYS.RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;
     [ONYXKEYS.UPDATE_REQUIRED]: boolean;
     [ONYXKEYS.LOGS]: Record<number, OnyxTypes.Log>;
+    [ONYXKEYS.SHOULD_STORE_LOGS]: boolean;
 
     // Collections
     [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download;
diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index 868509b8625a..3eea5a10d73a 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import addLog from '@libs/actions/Console';
+import {addLog} from '@libs/actions/Console';
 import type {Log} from '@src/types/onyx';
 
 /* store the original console.log function so we can call it */
diff --git a/src/libs/Log.ts b/src/libs/Log.ts
index ed18cfa7c7c4..d50d551e36f0 100644
--- a/src/libs/Log.ts
+++ b/src/libs/Log.ts
@@ -3,15 +3,29 @@
 
 /* eslint-disable rulesdir/no-api-in-views */
 import Logger from 'expensify-common/lib/Logger';
+import Onyx from 'react-native-onyx';
 import type {Merge} from 'type-fest';
+import ONYXKEYS from '@src/ONYXKEYS';
 import pkg from '../../package.json';
-import addLog from './actions/Console';
+import {addLog} from './actions/Console';
 import {shouldAttachLog} from './Console';
 import getPlatform from './getPlatform';
 import * as Network from './Network';
 import requireParameters from './requireParameters';
 
 let timeout: NodeJS.Timeout;
+let shouldCollectLogs = false;
+
+Onyx.connect({
+    key: ONYXKEYS.SHOULD_STORE_LOGS,
+    callback: (val) => {
+        if (!val) {
+            shouldCollectLogs = false;
+        }
+
+        shouldCollectLogs = Boolean(val);
+    },
+});
 
 type LogCommandParameters = {
     expensifyCashAppVersion: string;
@@ -57,7 +71,10 @@ const Log = new Logger({
         }
 
         console.debug(message);
-        addLog({time: new Date(), level: 'DEBUG', message});
+
+        if (shouldCollectLogs) {
+            addLog({time: new Date(), level: 'DEBUG', message});
+        }
     },
     isDebug: true,
 });
diff --git a/src/libs/actions/Console.ts b/src/libs/actions/Console.ts
index 3ac35716bf51..582a20105674 100644
--- a/src/libs/actions/Console.ts
+++ b/src/libs/actions/Console.ts
@@ -12,4 +12,8 @@ function addLog(log: Log) {
     });
 }
 
-export default addLog;
+function setShouldStoreLogs(store: boolean) {
+    Onyx.set(ONYXKEYS.SHOULD_STORE_LOGS, store);
+}
+
+export {addLog, setShouldStoreLogs};
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 06d5527393fb..ba2e447c54c4 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import addLog from '@libs/actions/Console';
+import {addLog, setShouldStoreLogs} from '@libs/actions/Console';
 import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileCreate from '@libs/localFileCreate';
@@ -22,15 +22,16 @@ import ROUTES from '@src/ROUTES';
 
 type CapturedLogs = Record<number, Log>;
 
-type ConsolePageProps = {
-    capturedLogs: CapturedLogs;
-};
-
 type ConsolePageOnyxProps = {
     /** Logs captured on the current device */
     capturedLogs: OnyxEntry<CapturedLogs>;
+
+    /** Whether or not logs should be stored */
+    shouldStoreLogs: OnyxEntry<boolean>;
 };
 
+type ConsolePageProps = ConsolePageOnyxProps;
+
 const parseStingifiedMessages = (logs: CapturedLogs) =>
     Object.values(logs).map((log) => {
         try {
@@ -45,7 +46,7 @@ const parseStingifiedMessages = (logs: CapturedLogs) =>
         }
     });
 
-function ConsolePage({capturedLogs}: ConsolePageProps) {
+function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const [input, setInput] = useState('');
     const [logs, setLogs] = useState<CapturedLogs>(capturedLogs);
     const [isGeneratingLogsFile, setIsGeneratingLogsFile] = useState(false);
@@ -53,6 +54,18 @@ function ConsolePage({capturedLogs}: ConsolePageProps) {
     const styles = useThemeStyles();
 
     useEffect(() => {
+        if (shouldStoreLogs) {
+            return;
+        }
+
+        setShouldStoreLogs(true);
+    }, [shouldStoreLogs]);
+
+    useEffect(() => {
+        if (!shouldStoreLogs) {
+            return;
+        }
+
         setLogs((prevLogs) => ({...prevLogs, ...capturedLogs}));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [capturedLogs]);
@@ -142,4 +155,7 @@ export default withOnyx<ConsolePageProps, ConsolePageOnyxProps>({
     capturedLogs: {
         key: ONYXKEYS.LOGS,
     },
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
 })(ConsolePage);

From e6c62998420d7a08dd26bf8f501476d61767cd9d Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 9 Feb 2024 09:34:56 +0100
Subject: [PATCH 24/38] send logs on Android

---
 src/pages/settings/AboutPage/ShareLogPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx
index 0ef9f1f81bc0..76fdf138e48f 100644
--- a/src/pages/settings/AboutPage/ShareLogPage.tsx
+++ b/src/pages/settings/AboutPage/ShareLogPage.tsx
@@ -127,7 +127,8 @@ function ShareLogPage({betas, reports, route}: ShareLogProps) {
 
         if (option.reportID) {
             const filename = FileUtils.appendTimeToFileName('logs.txt');
-            Reports.addAttachment(option.reportID, {name: filename, source: route.params.source, uri: route.params.source, type: 'text/plain'});
+            const src = `file://${route.params.source}`;
+            Reports.addAttachment(option.reportID, {name: filename, source: src, uri: src, type: 'text/plain'});
 
             const routeToNavigate = ROUTES.REPORT_WITH_ID.getRoute(option.reportID);
             Navigation.navigate(routeToNavigate);

From 4227eafd1dc2cc3a2bf48cb3ca82bb291389988b Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 9 Feb 2024 13:06:42 +0100
Subject: [PATCH 25/38] cross-platform logs sharing

---
 .../ShareLogList/BaseShareLogList.tsx         | 169 +++++++++++++++++
 .../AboutPage/ShareLogList/index.native.tsx   |  26 +++
 .../settings/AboutPage/ShareLogList/index.tsx |  29 +++
 src/pages/settings/AboutPage/ShareLogPage.tsx | 176 +-----------------
 4 files changed, 230 insertions(+), 170 deletions(-)
 create mode 100644 src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
 create mode 100644 src/pages/settings/AboutPage/ShareLogList/index.native.tsx
 create mode 100644 src/pages/settings/AboutPage/ShareLogList/index.tsx

diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
new file mode 100644
index 000000000000..8d76766cbe6b
--- /dev/null
+++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
@@ -0,0 +1,169 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
+import OptionsSelector from '@components/OptionsSelector';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {Beta, Report} from '@src/types/onyx';
+
+type BaseShareLogListOnyxProps = {
+    /** Beta features list */
+    betas: OnyxEntry<Beta[]>;
+
+    /** All reports shared with the user */
+    reports: OnyxCollection<Report>;
+};
+
+type BaseShareLogListProps = BaseShareLogListOnyxProps & {
+    onAttachLogToReport: (reportID: string, filename: string) => void;
+};
+
+function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogListProps) {
+    const [searchValue, setSearchValue] = useState('');
+    const [searchOptions, setSearchOptions] = useState<Pick<OptionsListUtils.GetOptions, 'recentReports' | 'personalDetails' | 'userToInvite'>>({
+        recentReports: [],
+        personalDetails: [],
+        userToInvite: {},
+    });
+
+    const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const isMounted = useRef(false);
+    const personalDetails = usePersonalDetails();
+
+    const updateOptions = useCallback(() => {
+        const {
+            recentReports: localRecentReports,
+            personalDetails: localPersonalDetails,
+            userToInvite: localUserToInvite,
+        } = OptionsListUtils.getShareLogOptions(reports, personalDetails, searchValue.trim(), betas);
+
+        setSearchOptions({
+            recentReports: localRecentReports,
+            personalDetails: localPersonalDetails,
+            userToInvite: localUserToInvite,
+        });
+    }, [betas, personalDetails, reports, searchValue]);
+
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
+
+    useEffect(() => {
+        updateOptions();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
+
+        updateOptions();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchValue]);
+
+    const sections = useMemo(() => {
+        const sectionsList = [];
+        let indexOffset = 0;
+
+        sectionsList.push({
+            title: translate('common.recents'),
+            data: searchOptions.recentReports,
+            shouldShow: searchOptions.recentReports?.length > 0,
+            indexOffset,
+        });
+        indexOffset += searchOptions.recentReports?.length;
+
+        sectionsList.push({
+            title: translate('common.contacts'),
+            data: searchOptions.personalDetails,
+            shouldShow: searchOptions.personalDetails?.length > 0,
+            indexOffset,
+        });
+        indexOffset += searchOptions.personalDetails?.length;
+
+        if (searchOptions.userToInvite) {
+            sectionsList.push({
+                data: [searchOptions.userToInvite],
+                shouldShow: true,
+                indexOffset,
+            });
+        }
+
+        return sectionsList;
+    }, [searchOptions.personalDetails, searchOptions.recentReports, searchOptions.userToInvite, translate]);
+
+    const headerMessage = OptionsListUtils.getHeaderMessage(
+        searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0,
+        Boolean(searchOptions.userToInvite),
+        searchValue,
+    );
+
+    const onChangeText = (value = '') => {
+        setSearchValue(value);
+    };
+
+    const attachLogToReport = (option) => {
+        if (!option.reportID) {
+            return;
+        }
+        const filename = FileUtils.appendTimeToFileName('logs.txt');
+
+        onAttachLogToReport(option.reportID, filename);
+    };
+
+    return (
+        <ScreenWrapper
+            testID={BaseShareLogList.displayName}
+            includeSafeAreaPaddingBottom={false}
+        >
+            {({safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithBackButton
+                        title="Share Log"
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONSOLE)}
+                    />
+                    <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                        <OptionsSelector
+                            sections={sections}
+                            onSelectRow={attachLogToReport}
+                            onChangeText={onChangeText}
+                            value={searchValue}
+                            headerMessage={headerMessage}
+                            showTitleTooltip
+                            shouldShowOptions={isOptionsDataReady}
+                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
+                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                            autoFocus
+                        />
+                    </View>
+                </>
+            )}
+            {/* <Text>ShareLog</Text> */}
+        </ScreenWrapper>
+    );
+}
+
+BaseShareLogList.displayName = 'ShareLogPage';
+
+export default withOnyx<BaseShareLogListProps, BaseShareLogListOnyxProps>({
+    reports: {
+        key: ONYXKEYS.COLLECTION.REPORT,
+    },
+    betas: {
+        key: ONYXKEYS.BETAS,
+    },
+})(BaseShareLogList);
diff --git a/src/pages/settings/AboutPage/ShareLogList/index.native.tsx b/src/pages/settings/AboutPage/ShareLogList/index.native.tsx
new file mode 100644
index 000000000000..524b2d3b36c2
--- /dev/null
+++ b/src/pages/settings/AboutPage/ShareLogList/index.native.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Report from '@userActions/Report';
+import ROUTES from '@src/ROUTES';
+import BaseShareLogList from './BaseShareLogList';
+
+type ShareLogListProps = {
+    logSource: string;
+};
+
+function ShareLogList({logSource}: ShareLogListProps) {
+    const onAttachLogToReport = (reportID: string, filename: string) => {
+        if (!reportID || !logSource) {
+            return;
+        }
+        const src = `file://${logSource}`;
+        Report.addAttachment(reportID, {name: filename, source: src, uri: src, type: 'text/plain'} as File);
+
+        const routeToNavigate = ROUTES.REPORT_WITH_ID.getRoute(reportID);
+        Navigation.navigate(routeToNavigate);
+    };
+
+    return <BaseShareLogList onAttachLogToReport={onAttachLogToReport} />;
+}
+
+export default ShareLogList;
diff --git a/src/pages/settings/AboutPage/ShareLogList/index.tsx b/src/pages/settings/AboutPage/ShareLogList/index.tsx
new file mode 100644
index 000000000000..2f7f53098f64
--- /dev/null
+++ b/src/pages/settings/AboutPage/ShareLogList/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Report from '@userActions/Report';
+import ROUTES from '@src/ROUTES';
+import BaseShareLogList from './BaseShareLogList';
+
+type ShareLogListProps = {
+    logSource: string;
+};
+
+function ShareLogList({logSource}: ShareLogListProps) {
+    const onAttachLogToReport = (reportID: string, filename: string) => {
+        FileUtils.readFileAsync(
+            logSource,
+            filename,
+            (file) => {
+                Report.addAttachment(reportID, file);
+
+                const routeToNavigate = ROUTES.REPORT_WITH_ID.getRoute(reportID);
+                Navigation.navigate(routeToNavigate);
+            },
+            () => {},
+        );
+    };
+    return <BaseShareLogList onAttachLogToReport={onAttachLogToReport} />;
+}
+
+export default ShareLogList;
diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx
index 76fdf138e48f..8479c8d61e75 100644
--- a/src/pages/settings/AboutPage/ShareLogPage.tsx
+++ b/src/pages/settings/AboutPage/ShareLogPage.tsx
@@ -1,32 +1,7 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import {usePersonalDetails} from '@components/OnyxProvider';
-import OptionsSelector from '@components/OptionsSelector';
-import ScreenWrapper from '@components/ScreenWrapper';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
-import Navigation from '@libs/Navigation/Navigation';
-import * as OptionsListUtils from '@libs/OptionsListUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as Reports from '@userActions/Report';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type {Beta, Report} from '@src/types/onyx';
+import React from 'react';
+import ShareLogList from './ShareLogList';
 
-type ShareLogOnyxProps = {
-    /** Beta features list */
-    betas: OnyxEntry<Beta[]>;
-
-    /** All reports shared with the user */
-    reports: OnyxCollection<Report>;
-};
-
-type ShareLogProps = ShareLogOnyxProps & {
+type ShareLogPageProps = {
     route: {
         params: {
             source: string;
@@ -34,147 +9,8 @@ type ShareLogProps = ShareLogOnyxProps & {
     };
 };
 
-function ShareLogPage({betas, reports, route}: ShareLogProps) {
-    const [searchValue, setSearchValue] = useState('');
-    const [searchOptions, setSearchOptions] = useState<Pick<OptionsListUtils.GetOptions, 'recentReports' | 'personalDetails' | 'userToInvite'>>({
-        recentReports: [],
-        personalDetails: [],
-        userToInvite: {},
-    });
-
-    const {isOffline} = useNetwork();
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const isMounted = useRef(false);
-    const personalDetails = usePersonalDetails();
-
-    const updateOptions = useCallback(() => {
-        const {
-            recentReports: localRecentReports,
-            personalDetails: localPersonalDetails,
-            userToInvite: localUserToInvite,
-        } = OptionsListUtils.getShareLogOptions(reports, personalDetails, searchValue.trim(), betas);
-
-        setSearchOptions({
-            recentReports: localRecentReports,
-            personalDetails: localPersonalDetails,
-            userToInvite: localUserToInvite,
-        });
-    }, [betas, personalDetails, reports, searchValue]);
-
-    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
-
-    useEffect(() => {
-        updateOptions();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        if (!isMounted.current) {
-            isMounted.current = true;
-            return;
-        }
-
-        updateOptions();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchValue]);
-
-    const sections = useMemo(() => {
-        const sectionsList = [];
-        let indexOffset = 0;
-
-        sectionsList.push({
-            title: translate('common.recents'),
-            data: searchOptions.recentReports,
-            shouldShow: searchOptions.recentReports?.length > 0,
-            indexOffset,
-        });
-        indexOffset += searchOptions.recentReports?.length;
-
-        sectionsList.push({
-            title: translate('common.contacts'),
-            data: searchOptions.personalDetails,
-            shouldShow: searchOptions.personalDetails?.length > 0,
-            indexOffset,
-        });
-        indexOffset += searchOptions.personalDetails?.length;
-
-        if (searchOptions.userToInvite) {
-            sectionsList.push({
-                data: [searchOptions.userToInvite],
-                shouldShow: true,
-                indexOffset,
-            });
-        }
-
-        return sectionsList;
-    }, [searchOptions.personalDetails, searchOptions.recentReports, searchOptions.userToInvite, translate]);
-
-    const headerMessage = OptionsListUtils.getHeaderMessage(
-        searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0,
-        Boolean(searchOptions.userToInvite),
-        searchValue,
-    );
-
-    const onChangeText = (value = '') => {
-        setSearchValue(value);
-    };
-
-    const attachLogToReport = (option) => {
-        if (!option || !route.params.source) {
-            return;
-        }
-
-        if (option.reportID) {
-            const filename = FileUtils.appendTimeToFileName('logs.txt');
-            const src = `file://${route.params.source}`;
-            Reports.addAttachment(option.reportID, {name: filename, source: src, uri: src, type: 'text/plain'});
-
-            const routeToNavigate = ROUTES.REPORT_WITH_ID.getRoute(option.reportID);
-            Navigation.navigate(routeToNavigate);
-        }
-    };
-
-    return (
-        <ScreenWrapper
-            testID={ShareLogPage.displayName}
-            includeSafeAreaPaddingBottom={false}
-        >
-            {({safeAreaPaddingBottomStyle}) => (
-                <>
-                    <HeaderWithBackButton
-                        title="Share Log"
-                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONSOLE)}
-                    />
-                    <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                        <OptionsSelector
-                            sections={sections}
-                            onSelectRow={attachLogToReport}
-                            onChangeText={onChangeText}
-                            value={searchValue}
-                            headerMessage={headerMessage}
-                            showTitleTooltip
-                            shouldShowOptions={isOptionsDataReady}
-                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
-                            textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
-                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                            autoFocus
-                        />
-                    </View>
-                </>
-            )}
-            {/* <Text>ShareLog</Text> */}
-        </ScreenWrapper>
-    );
+function ShareLogPage({route}: ShareLogPageProps) {
+    return <ShareLogList logSource={route.params.source} />;
 }
 
-ShareLogPage.displayName = 'ShareLogPage';
-
-export default withOnyx<ShareLogProps, ShareLogOnyxProps>({
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
-})(ShareLogPage);
+export default ShareLogPage;

From 25a3c269c12e16815b1388e68faa909d75984cc6 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 9 Feb 2024 13:20:05 +0100
Subject: [PATCH 26/38] code cleanup

---
 src/ROUTES.ts                                    |  2 +-
 src/pages/settings/AboutPage/ConsolePage.tsx     |  2 ++
 .../AboutPage/ShareLogList/BaseShareLogList.tsx  | 10 +---------
 .../AboutPage/ShareLogList/index.native.tsx      |  5 +----
 .../settings/AboutPage/ShareLogList/index.tsx    |  5 +----
 .../settings/AboutPage/ShareLogList/types.ts     | 16 ++++++++++++++++
 6 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/settings/AboutPage/ShareLogList/types.ts

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 921da6b4b28c..8207b81798ba 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -170,7 +170,7 @@ const ROUTES = {
     REPORT: 'r',
     REPORT_WITH_ID: {
         route: 'r/:reportID?/:reportActionID?',
-        getRoute: (reportID: string, source?: string) => `r/${reportID}?source=${source}` as const,
+        getRoute: (reportID: string) => `r/${reportID}` as const,
     },
     REPORT_AVATAR: {
         route: 'r/:reportID/avatar',
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index ba2e447c54c4..21427087d7a4 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -87,6 +87,8 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const shareLogs = () => {
         setIsGeneratingLogsFile(true);
         const logsWithParsedMessages = parseStingifiedMessages(logs);
+
+        // Generate a file with the logs and pass its path to the list of reports to share it with
         localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then(({path}) => {
             setIsGeneratingLogsFile(false);
             Navigation.navigate(ROUTES.SETTINGS_SHARE_LOG.getRoute(path));
diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
index 8d76766cbe6b..17568dc34d66 100644
--- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
+++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
@@ -15,15 +15,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Beta, Report} from '@src/types/onyx';
-
-type BaseShareLogListOnyxProps = {
-    /** Beta features list */
-    betas: OnyxEntry<Beta[]>;
-
-    /** All reports shared with the user */
-    reports: OnyxCollection<Report>;
-};
+import type {BaseShareLogListOnyxProps} from './types';
 
 type BaseShareLogListProps = BaseShareLogListOnyxProps & {
     onAttachLogToReport: (reportID: string, filename: string) => void;
diff --git a/src/pages/settings/AboutPage/ShareLogList/index.native.tsx b/src/pages/settings/AboutPage/ShareLogList/index.native.tsx
index 524b2d3b36c2..9150f4655f95 100644
--- a/src/pages/settings/AboutPage/ShareLogList/index.native.tsx
+++ b/src/pages/settings/AboutPage/ShareLogList/index.native.tsx
@@ -3,10 +3,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as Report from '@userActions/Report';
 import ROUTES from '@src/ROUTES';
 import BaseShareLogList from './BaseShareLogList';
-
-type ShareLogListProps = {
-    logSource: string;
-};
+import type {ShareLogListProps} from './types';
 
 function ShareLogList({logSource}: ShareLogListProps) {
     const onAttachLogToReport = (reportID: string, filename: string) => {
diff --git a/src/pages/settings/AboutPage/ShareLogList/index.tsx b/src/pages/settings/AboutPage/ShareLogList/index.tsx
index 2f7f53098f64..555e44e53747 100644
--- a/src/pages/settings/AboutPage/ShareLogList/index.tsx
+++ b/src/pages/settings/AboutPage/ShareLogList/index.tsx
@@ -4,10 +4,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as Report from '@userActions/Report';
 import ROUTES from '@src/ROUTES';
 import BaseShareLogList from './BaseShareLogList';
-
-type ShareLogListProps = {
-    logSource: string;
-};
+import type {ShareLogListProps} from './types';
 
 function ShareLogList({logSource}: ShareLogListProps) {
     const onAttachLogToReport = (reportID: string, filename: string) => {
diff --git a/src/pages/settings/AboutPage/ShareLogList/types.ts b/src/pages/settings/AboutPage/ShareLogList/types.ts
new file mode 100644
index 000000000000..71bb43afd358
--- /dev/null
+++ b/src/pages/settings/AboutPage/ShareLogList/types.ts
@@ -0,0 +1,16 @@
+import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {Beta} from '@src/types/onyx';
+
+type BaseShareLogListOnyxProps = {
+    /** Beta features list */
+    betas: OnyxEntry<Beta[]>;
+
+    /** All reports shared with the user */
+    reports: OnyxCollection<Report>;
+};
+
+type ShareLogListProps = {
+    logSource: string;
+};
+
+export type {BaseShareLogListOnyxProps, ShareLogListProps};

From 6a24e8ae3288a885d016eea5bf8392bdf0dca46e Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 9 Feb 2024 13:42:14 +0100
Subject: [PATCH 27/38] migrate console view to flatlist

---
 src/languages/en.ts                          |  1 +
 src/languages/es.ts                          |  1 +
 src/pages/settings/AboutPage/ConsolePage.tsx | 35 +++++++++++---------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 69754c19b4f4..1ae9f27c6a10 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -821,6 +821,7 @@ export default {
             shareLog: 'Share log',
             enterCommand: 'Enter command',
             execute: 'Execute',
+            noLogsAvailable: 'No logs available',
         },
         goToExpensifyClassic: 'Go to Expensify Classic',
         security: 'Security',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 0d9d1b8834a4..4f3da3af4ec8 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -815,6 +815,7 @@ export default {
             shareLog: 'Compartir registro',
             enterCommand: 'Introducir comando',
             execute: 'Ejecutar',
+            noLogsAvailable: 'No hay registros disponibles',
         },
         security: 'Seguridad',
         signOut: 'Desconectar',
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 21427087d7a4..405167361a9b 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -1,6 +1,6 @@
-import {FlashList} from '@shopify/flash-list';
-import React, {useEffect, useState} from 'react';
-import {View} from 'react-native';
+import React, {useCallback, useEffect, useState} from 'react';
+import {FlatList, View} from 'react-native';
+import type {ListRenderItem, ListRenderItemInfo} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -95,6 +95,15 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
         });
     };
 
+    const renderItem: ListRenderItem<Log> = useCallback(
+        ({item}: ListRenderItemInfo<Log>) => (
+            <View style={styles.mb2}>
+                <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
+            </View>
+        ),
+        [styles.mb2],
+    );
+
     return (
         <ScreenWrapper testID={ConsolePage.displayName}>
             <HeaderWithBackButton
@@ -102,19 +111,13 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT)}
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, styles.flex1]}>
-                {logs !== undefined && (
-                    <FlashList
-                        data={Object.values(logs).reverse()}
-                        renderItem={({item}) => (
-                            <View style={styles.mb2}>
-                                <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
-                            </View>
-                        )}
-                        estimatedItemSize={70}
-                        contentContainerStyle={styles.p5}
-                        inverted
-                    />
-                )}
+                <FlatList
+                    data={Object.values(logs).reverse()}
+                    renderItem={renderItem}
+                    contentContainerStyle={styles.p5}
+                    inverted
+                    ListEmptyComponent={<Text>{translate('initialSettingsPage.debugConsole.noLogsAvailable')}</Text>}
+                />
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.m5]}>
                 <Button

From 1ff340d440b414c77c97d7fdf8ff88ded426648f Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 9 Feb 2024 15:15:14 +0100
Subject: [PATCH 28/38] fix typings

---
 src/pages/settings/AboutPage/ConsolePage.tsx  | 19 +++++++++++++++----
 .../ShareLogList/BaseShareLogList.tsx         | 17 +++++++----------
 .../settings/AboutPage/ShareLogList/types.ts  | 11 ++++++++---
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 405167361a9b..6ecd3b778a12 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -1,3 +1,4 @@
+import isEmpty from 'lodash/isEmpty';
 import React, {useCallback, useEffect, useState} from 'react';
 import {FlatList, View} from 'react-native';
 import type {ListRenderItem, ListRenderItemInfo} from 'react-native';
@@ -32,8 +33,17 @@ type ConsolePageOnyxProps = {
 
 type ConsolePageProps = ConsolePageOnyxProps;
 
-const parseStingifiedMessages = (logs: CapturedLogs) =>
-    Object.values(logs).map((log) => {
+/**
+ * Loops through all the logs and parses the message if it's a stringified JSON
+ * @param logs Logs captured on the current device
+ * @returns CapturedLogs with parsed messages
+ */
+const parseStingifiedMessages = (logs: CapturedLogs | null) => {
+    if (isEmpty(logs)) {
+        return;
+    }
+
+    return Object.values(logs).map((log) => {
         try {
             const parsedMessage = JSON.parse(log.message);
             return {
@@ -45,10 +55,11 @@ const parseStingifiedMessages = (logs: CapturedLogs) =>
             return log;
         }
     });
+};
 
 function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const [input, setInput] = useState('');
-    const [logs, setLogs] = useState<CapturedLogs>(capturedLogs);
+    const [logs, setLogs] = useState(capturedLogs);
     const [isGeneratingLogsFile, setIsGeneratingLogsFile] = useState(false);
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -112,7 +123,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, styles.flex1]}>
                 <FlatList
-                    data={Object.values(logs).reverse()}
+                    data={logs ? Object.values(logs).reverse() : []}
                     renderItem={renderItem}
                     contentContainerStyle={styles.p5}
                     inverted
diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
index 17568dc34d66..752cd0e09be5 100644
--- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
+++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import OptionsSelector from '@components/OptionsSelector';
@@ -15,18 +14,15 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {BaseShareLogListOnyxProps} from './types';
-
-type BaseShareLogListProps = BaseShareLogListOnyxProps & {
-    onAttachLogToReport: (reportID: string, filename: string) => void;
-};
+import type {Report} from '@src/types/onyx';
+import type {BaseShareLogListOnyxProps, BaseShareLogListProps} from './types';
 
 function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogListProps) {
     const [searchValue, setSearchValue] = useState('');
     const [searchOptions, setSearchOptions] = useState<Pick<OptionsListUtils.GetOptions, 'recentReports' | 'personalDetails' | 'userToInvite'>>({
         recentReports: [],
         personalDetails: [],
-        userToInvite: {},
+        userToInvite: null,
     });
 
     const {isOffline} = useNetwork();
@@ -40,7 +36,7 @@ function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogLis
             recentReports: localRecentReports,
             personalDetails: localPersonalDetails,
             userToInvite: localUserToInvite,
-        } = OptionsListUtils.getShareLogOptions(reports, personalDetails, searchValue.trim(), betas);
+        } = OptionsListUtils.getShareLogOptions(reports, personalDetails, searchValue.trim(), betas ?? []);
 
         setSearchOptions({
             recentReports: localRecentReports,
@@ -107,7 +103,7 @@ function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogLis
         setSearchValue(value);
     };
 
-    const attachLogToReport = (option) => {
+    const attachLogToReport = (option: Report) => {
         if (!option.reportID) {
             return;
         }
@@ -129,6 +125,7 @@ function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogLis
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                         <OptionsSelector
+                            // @ts-expect-error TODO: remove this comment once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TS
                             sections={sections}
                             onSelectRow={attachLogToReport}
                             onChangeText={onChangeText}
@@ -144,7 +141,6 @@ function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogLis
                     </View>
                 </>
             )}
-            {/* <Text>ShareLog</Text> */}
         </ScreenWrapper>
     );
 }
@@ -157,5 +153,6 @@ export default withOnyx<BaseShareLogListProps, BaseShareLogListOnyxProps>({
     },
     betas: {
         key: ONYXKEYS.BETAS,
+        initialValue: [],
     },
 })(BaseShareLogList);
diff --git a/src/pages/settings/AboutPage/ShareLogList/types.ts b/src/pages/settings/AboutPage/ShareLogList/types.ts
index 71bb43afd358..abbdbfb88e0b 100644
--- a/src/pages/settings/AboutPage/ShareLogList/types.ts
+++ b/src/pages/settings/AboutPage/ShareLogList/types.ts
@@ -1,5 +1,5 @@
-import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import type {Beta} from '@src/types/onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {Beta, Report} from '@src/types/onyx';
 
 type BaseShareLogListOnyxProps = {
     /** Beta features list */
@@ -10,7 +10,12 @@ type BaseShareLogListOnyxProps = {
 };
 
 type ShareLogListProps = {
+    /** The source of the log file to share */
     logSource: string;
 };
 
-export type {BaseShareLogListOnyxProps, ShareLogListProps};
+type BaseShareLogListProps = BaseShareLogListOnyxProps & {
+    onAttachLogToReport: (reportID: string, filename: string) => void;
+};
+
+export type {BaseShareLogListOnyxProps, BaseShareLogListProps, ShareLogListProps};

From 76b30b1272e0578444531f9e7627f958dfb1c167 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 9 Feb 2024 16:18:57 +0100
Subject: [PATCH 29/38] update behavior for client side logging

---
 src/libs/actions/Console.ts                   | 14 +++++++-
 src/pages/settings/AboutPage/ConsolePage.tsx  | 27 ++++++++-------
 .../settings/AboutPage/TroubleshootPage.tsx   | 33 ++++++++++++++++---
 3 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/libs/actions/Console.ts b/src/libs/actions/Console.ts
index 582a20105674..79276d3307ac 100644
--- a/src/libs/actions/Console.ts
+++ b/src/libs/actions/Console.ts
@@ -12,8 +12,20 @@ function addLog(log: Log) {
     });
 }
 
+/**
+ * Set whether or not to store logs in Onyx
+ * @param store whether or not to store logs
+ */
 function setShouldStoreLogs(store: boolean) {
     Onyx.set(ONYXKEYS.SHOULD_STORE_LOGS, store);
 }
 
-export {addLog, setShouldStoreLogs};
+/**
+ * Disable logging and flush the logs from Onyx
+ */
+function disableLoggingAndFlushLogs() {
+    setShouldStoreLogs(false);
+    Onyx.set(ONYXKEYS.LOGS, null);
+}
+
+export {addLog, setShouldStoreLogs, disableLoggingAndFlushLogs};
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 6ecd3b778a12..4e58cc85658e 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -1,3 +1,4 @@
+import {format} from 'date-fns';
 import isEmpty from 'lodash/isEmpty';
 import React, {useCallback, useEffect, useState} from 'react';
 import {FlatList, View} from 'react-native';
@@ -12,7 +13,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {addLog, setShouldStoreLogs} from '@libs/actions/Console';
+import {addLog} from '@libs/actions/Console';
 import {createLog, sanitizeConsoleInput} from '@libs/Console';
 import type {Log} from '@libs/Console';
 import localFileCreate from '@libs/localFileCreate';
@@ -64,14 +65,6 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    useEffect(() => {
-        if (shouldStoreLogs) {
-            return;
-        }
-
-        setShouldStoreLogs(true);
-    }, [shouldStoreLogs]);
-
     useEffect(() => {
         if (!shouldStoreLogs) {
             return;
@@ -107,11 +100,17 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     };
 
     const renderItem: ListRenderItem<Log> = useCallback(
-        ({item}: ListRenderItemInfo<Log>) => (
-            <View style={styles.mb2}>
-                <Text family="MONOSPACE">{`${item.time.toLocaleTimeString()} ${item.message}`}</Text>
-            </View>
-        ),
+        ({item}: ListRenderItemInfo<Log>) => {
+            if (!item) {
+                return null;
+            }
+
+            return (
+                <View style={styles.mb2}>
+                    <Text family="MONOSPACE">{`${format(item.time, 'Y/M/d ')} ${item.message}`}</Text>
+                </View>
+            );
+        },
         [styles.mb2],
     );
 
diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx
index 1abf4270da11..cb084122c9ed 100644
--- a/src/pages/settings/AboutPage/TroubleshootPage.tsx
+++ b/src/pages/settings/AboutPage/TroubleshootPage.tsx
@@ -1,13 +1,16 @@
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
-import Onyx from 'react-native-onyx';
+import Onyx, {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import ConfirmModal from '@components/ConfirmModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
+import Switch from '@components/Switch';
 import TestToolMenu from '@components/TestToolMenu';
+import TestToolRow from '@components/TestToolRow';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useEnvironment from '@hooks/useEnvironment';
@@ -15,6 +18,7 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
+import * as Console from '@libs/actions/Console';
 import Navigation from '@libs/Navigation/Navigation';
 import * as App from '@userActions/App';
 import * as Report from '@userActions/Report';
@@ -44,7 +48,13 @@ type BaseMenuItem = {
     action: () => void | Promise<void>;
 };
 
-function TroubleshootPage() {
+type TroubleshootPageOnyxProps = {
+    shouldStoreLogs: OnyxEntry<boolean>;
+};
+
+type TroubleshootPageProps = TroubleshootPageOnyxProps;
+
+function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -66,13 +76,17 @@ function TroubleshootPage() {
             },
         ];
 
+        if (!shouldStoreLogs) {
+            baseMenuItems.splice(1);
+        }
+
         return baseMenuItems.map((item) => ({
             key: item.translationKey,
             title: translate(item.translationKey),
             icon: item.icon,
             onPress: item.action,
         }));
-    }, [translate, waitForNavigate]);
+    }, [shouldStoreLogs, translate, waitForNavigate]);
 
     return (
         <IllustratedHeaderPageLayout
@@ -92,6 +106,13 @@ function TroubleshootPage() {
                         {translate('initialSettingsPage.troubleshoot.submitBug')}
                     </TextLink>
                 </Text>
+                <TestToolRow title="Client side logging">
+                    <Switch
+                        accessibilityLabel="Client side logging"
+                        isOn={!!shouldStoreLogs}
+                        onToggle={() => (shouldStoreLogs ? Console.disableLoggingAndFlushLogs() : Console.setShouldStoreLogs(true))}
+                    />
+                </TestToolRow>
             </View>
             <MenuItemList
                 menuItems={menuItems}
@@ -121,4 +142,8 @@ function TroubleshootPage() {
     );
 }
 
-export default TroubleshootPage;
+export default withOnyx<TroubleshootPageProps, TroubleshootPageOnyxProps>({
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
+})(TroubleshootPage);

From f2506134371404d640b1b5100f5374115fb77d2d Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Fri, 9 Feb 2024 16:35:08 +0100
Subject: [PATCH 30/38] update log time

---
 src/pages/settings/AboutPage/ConsolePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 4e58cc85658e..c60da560b8f9 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -107,7 +107,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
 
             return (
                 <View style={styles.mb2}>
-                    <Text family="MONOSPACE">{`${format(item.time, 'Y/M/d ')} ${item.message}`}</Text>
+                    <Text family="MONOSPACE">{`${format(item.time, 'Y/M/d pp')} ${item.message}`}</Text>
                 </View>
             );
         },

From 06ee3555b3c17b9a1d6cecfde97dee8f9c912f54 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 12 Feb 2024 09:45:31 +0100
Subject: [PATCH 31/38] troubleshoot page updates

---
 src/languages/en.ts                           |  2 +-
 src/languages/es.ts                           |  2 +-
 .../settings/AboutPage/TroubleshootPage.tsx   | 33 +++++++++++--------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 1ae9f27c6a10..146c3812a420 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -808,7 +808,7 @@ export default {
             },
         },
         troubleshoot: {
-            resetAndRefreshStashed: 'Reset and refresh stashed data',
+            clearCacheAndRestart: 'Clear cache and restart',
             viewConsole: 'View debug console',
             debugConsole: 'Debug console',
             description: 'Use the tools below to help troubleshoot the Expensify experience. If you encounter any issues, please',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 4f3da3af4ec8..689e85c0d288 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -802,7 +802,7 @@ export default {
             },
         },
         troubleshoot: {
-            resetAndRefreshStashed: 'Restablecer y actualizar los datos almacenados',
+            clearCacheAndRestart: 'Borrar caché y reiniciar',
             viewConsole: 'Ver la consola de depuración',
             debugConsole: 'Consola de depuración',
             description: 'Utilice las herramientas que aparecen a continuación para solucionar los problemas de Expensify. Si tiene algún problema, por favor',
diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx
index cb084122c9ed..496b170925b4 100644
--- a/src/pages/settings/AboutPage/TroubleshootPage.tsx
+++ b/src/pages/settings/AboutPage/TroubleshootPage.tsx
@@ -63,29 +63,32 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
     const waitForNavigate = useWaitForNavigation();
 
     const menuItems = useMemo(() => {
+        const debugConsoleItem: BaseMenuItem = {
+            translationKey: 'initialSettingsPage.troubleshoot.viewConsole',
+            icon: Expensicons.Gear,
+            action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_CONSOLE)),
+        };
+
         const baseMenuItems: BaseMenuItem[] = [
             {
-                translationKey: 'initialSettingsPage.troubleshoot.resetAndRefreshStashed',
+                translationKey: 'initialSettingsPage.troubleshoot.clearCacheAndRestart',
                 icon: Expensicons.RotateLeft,
                 action: () => setIsConfirmationModalVisible(true),
             },
-            {
-                translationKey: 'initialSettingsPage.troubleshoot.viewConsole',
-                icon: Expensicons.Gear,
-                action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_CONSOLE)),
-            },
         ];
 
-        if (!shouldStoreLogs) {
-            baseMenuItems.splice(1);
+        if (shouldStoreLogs) {
+            baseMenuItems.push(debugConsoleItem);
         }
 
-        return baseMenuItems.map((item) => ({
-            key: item.translationKey,
-            title: translate(item.translationKey),
-            icon: item.icon,
-            onPress: item.action,
-        }));
+        return baseMenuItems
+            .map((item) => ({
+                key: item.translationKey,
+                title: translate(item.translationKey),
+                icon: item.icon,
+                onPress: item.action,
+            }))
+            .reverse();
     }, [shouldStoreLogs, translate, waitForNavigate]);
 
     return (
@@ -106,6 +109,8 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
                         {translate('initialSettingsPage.troubleshoot.submitBug')}
                     </TextLink>
                 </Text>
+            </View>
+            <View style={[styles.ml5, styles.mr8]}>
                 <TestToolRow title="Client side logging">
                     <Switch
                         accessibilityLabel="Client side logging"

From ef024c5ed953f228b4ddd3da914f119cad7a260b Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 12 Feb 2024 10:24:48 +0100
Subject: [PATCH 32/38] add troubleshoot testID

---
 src/pages/settings/AboutPage/TroubleshootPage.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx
index 496b170925b4..ade6932c4b2c 100644
--- a/src/pages/settings/AboutPage/TroubleshootPage.tsx
+++ b/src/pages/settings/AboutPage/TroubleshootPage.tsx
@@ -97,6 +97,7 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor}
             illustration={LottieAnimations.Desk}
+            testID={TroubleshootPage.displayName}
         >
             <View style={[styles.settingsPageBody, styles.ph5]}>
                 <Text style={[styles.textHeadline, styles.mb1]}>{translate('initialSettingsPage.aboutPage.troubleshoot')}</Text>
@@ -147,6 +148,8 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
     );
 }
 
+TroubleshootPage.displayName = 'TroubleshootPage';
+
 export default withOnyx<TroubleshootPageProps, TroubleshootPageOnyxProps>({
     shouldStoreLogs: {
         key: ONYXKEYS.SHOULD_STORE_LOGS,

From 49657feb7626948e1be843c62c209414c81dc4fc Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 12 Feb 2024 12:29:48 +0100
Subject: [PATCH 33/38] code cleanup

---
 src/CONST.ts                                 |  9 +++++++++
 src/libs/Console/index.ts                    | 16 +++++++++-------
 src/libs/Log.ts                              |  3 ++-
 src/libs/Navigation/types.ts                 |  5 +++++
 src/libs/localFileCreate/index.native.ts     |  6 ++++++
 src/libs/localFileCreate/index.ts            |  6 ++++++
 src/pages/settings/AboutPage/ConsolePage.tsx |  3 ++-
 src/types/onyx/Console.ts                    |  4 +++-
 8 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index eae4b8ec7a2b..53eb57f93b48 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -3194,6 +3194,15 @@ const CONST = {
     },
 
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
+
+    DEBUG_CONSOLE: {
+        LEVELS: {
+            INFO: 'INFO',
+            ERROR: 'ERROR',
+            RESULT: 'RESULT',
+            DEBUG: 'DEBUG',
+        },
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/libs/Console/index.ts b/src/libs/Console/index.ts
index 3eea5a10d73a..0dc9e1208888 100644
--- a/src/libs/Console/index.ts
+++ b/src/libs/Console/index.ts
@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import {addLog} from '@libs/actions/Console';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {Log} from '@src/types/onyx';
 
 /* store the original console.log function so we can call it */
@@ -7,7 +9,7 @@ import type {Log} from '@src/types/onyx';
 const originalConsoleLog = console.log;
 
 /* List of patterns to ignore in logs. "logs" key always needs to be ignored because otherwise it will cause infinite loop */
-const logPatternsToIgnore = [`merge() called for key: logs`];
+const logPatternsToIgnore = [`merge() called for key: ${ONYXKEYS.LOGS}`];
 
 /**
  * Check if the log should be attached to the console
@@ -36,7 +38,7 @@ function logMessage(args: unknown[]) {
             return String(arg);
         })
         .join(' ');
-    const newLog = {time: new Date(), level: 'LOG', message};
+    const newLog = {time: new Date(), level: CONST.DEBUG_CONSOLE.LEVELS.INFO, message};
     addLog(newLog);
 }
 
@@ -85,15 +87,15 @@ function createLog(text: string) {
 
         if (result !== undefined) {
             return [
-                {time, level: 'INFO', message: `> ${text}`},
-                {time, level: 'RESULT', message: String(result)},
+                {time, level: CONST.DEBUG_CONSOLE.LEVELS.INFO, message: `> ${text}`},
+                {time, level: CONST.DEBUG_CONSOLE.LEVELS.RESULT, message: String(result)},
             ];
         }
-        return [{time, level: 'INFO', message: `> ${text}`}];
+        return [{time, level: CONST.DEBUG_CONSOLE.LEVELS.INFO, message: `> ${text}`}];
     } catch (error) {
         return [
-            {time, level: 'ERROR', message: `> ${text}`},
-            {time, level: 'ERROR', message: `Error: ${(error as Error).message}`},
+            {time, level: CONST.DEBUG_CONSOLE.LEVELS.ERROR, message: `> ${text}`},
+            {time, level: CONST.DEBUG_CONSOLE.LEVELS.ERROR, message: `Error: ${(error as Error).message}`},
         ];
     }
 }
diff --git a/src/libs/Log.ts b/src/libs/Log.ts
index d50d551e36f0..101996870e1d 100644
--- a/src/libs/Log.ts
+++ b/src/libs/Log.ts
@@ -5,6 +5,7 @@
 import Logger from 'expensify-common/lib/Logger';
 import Onyx from 'react-native-onyx';
 import type {Merge} from 'type-fest';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import pkg from '../../package.json';
 import {addLog} from './actions/Console';
@@ -73,7 +74,7 @@ const Log = new Logger({
         console.debug(message);
 
         if (shouldCollectLogs) {
-            addLog({time: new Date(), level: 'DEBUG', message});
+            addLog({time: new Date(), level: CONST.DEBUG_CONSOLE.LEVELS.DEBUG, message});
         }
     },
     isDebug: true,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index c26c01631564..0a76c213e884 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -104,6 +104,11 @@ type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.ABOUT]: undefined;
     [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: undefined;
     [SCREENS.SETTINGS.TROUBLESHOOT]: undefined;
+    [SCREENS.SETTINGS.CONSOLE]: undefined;
+    [SCREENS.SETTINGS.SHARE_LOG]: {
+        /** URL of the generated file to share logs in a report */
+        source: string;
+    };
     [SCREENS.SETTINGS.LOUNGE_ACCESS]: undefined;
     [SCREENS.SETTINGS.WALLET.ROOT]: undefined;
     [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: undefined;
diff --git a/src/libs/localFileCreate/index.native.ts b/src/libs/localFileCreate/index.native.ts
index 279cf42e08df..a682398f8896 100644
--- a/src/libs/localFileCreate/index.native.ts
+++ b/src/libs/localFileCreate/index.native.ts
@@ -1,6 +1,12 @@
 import RNFetchBlob from 'react-native-blob-util';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 
+/**
+ * Creates a blob file using RN Fetch Blob
+ * @param fileName name of the file
+ * @param textContent content of the file
+ * @returns path and filename of the newly created file
+ */
 const localFileCreate = (fileName: string, textContent: string) => {
     const newFileName = FileUtils.appendTimeToFileName(fileName);
     const dir = RNFetchBlob.fs.dirs.DocumentDir;
diff --git a/src/libs/localFileCreate/index.ts b/src/libs/localFileCreate/index.ts
index 3dc99ea7aacb..d1594b7d47d3 100644
--- a/src/libs/localFileCreate/index.ts
+++ b/src/libs/localFileCreate/index.ts
@@ -1,5 +1,11 @@
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 
+/**
+ * Creates a Blob file
+ * @param fileName name of the file
+ * @param textContent content of the file
+ * @returns path and filename of the newly created file
+ */
 const localFileCreate = (fileName: string, textContent: string) => {
     const newFileName = FileUtils.appendTimeToFileName(fileName);
     const blob = new Blob([textContent], {type: 'text/plain'});
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index c60da560b8f9..334dcb096bb1 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -19,6 +19,7 @@ import type {Log} from '@libs/Console';
 import localFileCreate from '@libs/localFileCreate';
 import localFileDownload from '@libs/localFileDownload';
 import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -107,7 +108,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
 
             return (
                 <View style={styles.mb2}>
-                    <Text family="MONOSPACE">{`${format(item.time, 'Y/M/d pp')} ${item.message}`}</Text>
+                    <Text family="MONOSPACE">{`${format(item.time, CONST.DATE.FNS_DB_FORMAT_STRING)} ${item.message}`}</Text>
                 </View>
             );
         },
diff --git a/src/types/onyx/Console.ts b/src/types/onyx/Console.ts
index aaea9f95f882..883676fa2aee 100644
--- a/src/types/onyx/Console.ts
+++ b/src/types/onyx/Console.ts
@@ -1,6 +1,8 @@
+import type CONST from '@src/CONST';
+
 type Log = {
     time: Date;
-    level: string;
+    level: keyof typeof CONST.DEBUG_CONSOLE.LEVELS;
     message: string;
 };
 

From e8cecfafc43a050c26cac76e97bb8b317713d0d3 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Mon, 12 Feb 2024 12:40:51 +0100
Subject: [PATCH 34/38] execute arbitrary code with enter on web

---
 src/pages/settings/AboutPage/ConsolePage.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 334dcb096bb1..7811562926cb 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -1,6 +1,6 @@
 import {format} from 'date-fns';
 import isEmpty from 'lodash/isEmpty';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {FlatList, View} from 'react-native';
 import type {ListRenderItem, ListRenderItemInfo} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -11,6 +11,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {addLog} from '@libs/actions/Console';
@@ -40,12 +41,12 @@ type ConsolePageProps = ConsolePageOnyxProps;
  * @param logs Logs captured on the current device
  * @returns CapturedLogs with parsed messages
  */
-const parseStingifiedMessages = (logs: CapturedLogs | null) => {
+const parseStingifiedMessages = (logs: Log[]) => {
     if (isEmpty(logs)) {
         return;
     }
 
-    return Object.values(logs).map((log) => {
+    return logs.map((log) => {
         try {
             const parsedMessage = JSON.parse(log.message);
             return {
@@ -66,6 +67,8 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const logsList = useMemo(() => (logs ? Object.values(logs).reverse() : []), [logs]);
+
     useEffect(() => {
         if (!shouldStoreLogs) {
             return;
@@ -83,15 +86,17 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
         setInput('');
     };
 
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, executeArbitraryCode);
+
     const saveLogs = () => {
-        const logsWithParsedMessages = parseStingifiedMessages(logs);
+        const logsWithParsedMessages = parseStingifiedMessages(logsList);
 
         localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2), 'File was saved in your Downloads folder.');
     };
 
     const shareLogs = () => {
         setIsGeneratingLogsFile(true);
-        const logsWithParsedMessages = parseStingifiedMessages(logs);
+        const logsWithParsedMessages = parseStingifiedMessages(logsList);
 
         // Generate a file with the logs and pass its path to the list of reports to share it with
         localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then(({path}) => {
@@ -123,7 +128,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
             />
             <View style={[styles.border, styles.highlightBG, styles.borderNone, styles.mh5, styles.flex1]}>
                 <FlatList
-                    data={logs ? Object.values(logs).reverse() : []}
+                    data={logsList}
                     renderItem={renderItem}
                     contentContainerStyle={styles.p5}
                     inverted

From 0bdbcf406e82fd808f166b142e43a55cd3d69c8d Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 14 Feb 2024 10:47:13 +0100
Subject: [PATCH 35/38] add alert when file exceeds the limit

---
 src/languages/en.ts                           |  2 ++
 src/languages/es.ts                           |  2 ++
 src/languages/types.ts                        |  3 ++
 src/libs/localFileCreate/index.native.ts      |  4 +--
 src/libs/localFileCreate/index.ts             |  4 +--
 src/pages/settings/AboutPage/ConsolePage.tsx  | 28 ++++++++++++++++---
 .../ShareLogList/BaseShareLogList.tsx         |  2 +-
 7 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index c12e95150a6f..ac218fe1c8d6 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -28,6 +28,7 @@ import type {
     InstantSummaryParams,
     LocalTimeParams,
     LoggedInAsParams,
+    LogSizeParams,
     ManagerApprovedAmountParams,
     ManagerApprovedParams,
     MaxParticipantsReachedParams,
@@ -838,6 +839,7 @@ export default {
             enterCommand: 'Enter command',
             execute: 'Execute',
             noLogsAvailable: 'No logs available',
+            logSizeTooLarge: ({size}: LogSizeParams) => `Log size exceeds the limit of ${size} MB. Please use "Save log" to download the log file instead.`,
         },
         goToExpensifyClassic: 'Go to Expensify Classic',
         security: 'Security',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 73a66675d797..a070e71e4aab 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -27,6 +27,7 @@ import type {
     InstantSummaryParams,
     LocalTimeParams,
     LoggedInAsParams,
+    LogSizeParams,
     ManagerApprovedAmountParams,
     ManagerApprovedParams,
     MaxParticipantsReachedParams,
@@ -833,6 +834,7 @@ export default {
             enterCommand: 'Introducir comando',
             execute: 'Ejecutar',
             noLogsAvailable: 'No hay registros disponibles',
+            logSizeTooLarge: ({size}: LogSizeParams) => `El tamaño del registro excede el límite de ${size} MB. Utilice "Guardar registro" para descargar el archivo de registro.`,
         },
         security: 'Seguridad',
         signOut: 'Desconectar',
diff --git a/src/languages/types.ts b/src/languages/types.ts
index ca98e23a4c07..fb5026684c67 100644
--- a/src/languages/types.ts
+++ b/src/languages/types.ts
@@ -289,6 +289,8 @@ type TermsParams = {amount: string};
 
 type ElectronicFundsParams = {percentage: string; amount: string};
 
+type LogSizeParams = {size: number};
+
 export type {
     ApprovedAmountParams,
     AddressLineParams,
@@ -389,4 +391,5 @@ export type {
     WelcomeNoteParams,
     WelcomeToRoomParams,
     ZipCodeExampleFormatParams,
+    LogSizeParams,
 };
diff --git a/src/libs/localFileCreate/index.native.ts b/src/libs/localFileCreate/index.native.ts
index a682398f8896..a6a5630998f5 100644
--- a/src/libs/localFileCreate/index.native.ts
+++ b/src/libs/localFileCreate/index.native.ts
@@ -5,14 +5,14 @@ import * as FileUtils from '@libs/fileDownload/FileUtils';
  * Creates a blob file using RN Fetch Blob
  * @param fileName name of the file
  * @param textContent content of the file
- * @returns path and filename of the newly created file
+ * @returns path, filename and size of the newly created file
  */
 const localFileCreate = (fileName: string, textContent: string) => {
     const newFileName = FileUtils.appendTimeToFileName(fileName);
     const dir = RNFetchBlob.fs.dirs.DocumentDir;
     const path = `${dir}/${newFileName}.txt`;
 
-    return RNFetchBlob.fs.writeFile(path, textContent, 'utf8').then(() => ({path, newFileName}));
+    return RNFetchBlob.fs.writeFile(path, textContent, 'utf8').then(() => RNFetchBlob.fs.stat(path).then(({size}) => ({path, newFileName, size})));
 };
 
 export default localFileCreate;
diff --git a/src/libs/localFileCreate/index.ts b/src/libs/localFileCreate/index.ts
index d1594b7d47d3..0bb8ebc585cd 100644
--- a/src/libs/localFileCreate/index.ts
+++ b/src/libs/localFileCreate/index.ts
@@ -4,14 +4,14 @@ import * as FileUtils from '@libs/fileDownload/FileUtils';
  * Creates a Blob file
  * @param fileName name of the file
  * @param textContent content of the file
- * @returns path and filename of the newly created file
+ * @returns path, filename and size of the newly created file
  */
 const localFileCreate = (fileName: string, textContent: string) => {
     const newFileName = FileUtils.appendTimeToFileName(fileName);
     const blob = new Blob([textContent], {type: 'text/plain'});
     const url = URL.createObjectURL(blob);
 
-    return Promise.resolve({path: url, newFileName});
+    return Promise.resolve({path: url, newFileName, size: blob.size});
 };
 
 export default localFileCreate;
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 7811562926cb..b21512915b95 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -6,6 +6,7 @@ import type {ListRenderItem, ListRenderItemInfo} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -64,6 +65,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const [input, setInput] = useState('');
     const [logs, setLogs] = useState(capturedLogs);
     const [isGeneratingLogsFile, setIsGeneratingLogsFile] = useState(false);
+    const [isLimitModalVisible, setIsLimitModalVisible] = useState(false);
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -91,7 +93,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     const saveLogs = () => {
         const logsWithParsedMessages = parseStingifiedMessages(logsList);
 
-        localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2), 'File was saved in your Downloads folder.');
+        localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2));
     };
 
     const shareLogs = () => {
@@ -99,8 +101,16 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
         const logsWithParsedMessages = parseStingifiedMessages(logsList);
 
         // Generate a file with the logs and pass its path to the list of reports to share it with
-        localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then(({path}) => {
+        localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then(({path, size}) => {
             setIsGeneratingLogsFile(false);
+
+            // if the file size is too large to send it as an attachment, show a modal and return
+            if (size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+                setIsLimitModalVisible(true);
+
+                return;
+            }
+
             Navigation.navigate(ROUTES.SETTINGS_SHARE_LOG.getRoute(path));
         });
     };
@@ -110,10 +120,10 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
             if (!item) {
                 return null;
             }
-
+            console.debug({item});
             return (
                 <View style={styles.mb2}>
-                    <Text family="MONOSPACE">{`${format(item.time, CONST.DATE.FNS_DB_FORMAT_STRING)} ${item.message}`}</Text>
+                    <Text family="MONOSPACE">{`${format(new Date(item.time), CONST.DATE.FNS_DB_FORMAT_STRING)} ${item.message}`}</Text>
                 </View>
             );
         },
@@ -166,6 +176,16 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
                     style={[styles.mt5]}
                 />
             </View>
+            <ConfirmModal
+                title={translate('initialSettingsPage.debugConsole.shareLog')}
+                isVisible={isLimitModalVisible}
+                onConfirm={() => setIsLimitModalVisible(false)}
+                prompt={translate('initialSettingsPage.debugConsole.logSizeTooLarge', {
+                    size: CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE / 1024 / 1024,
+                })}
+                shouldShowCancelButton={false}
+                confirmText={translate('common.ok')}
+            />
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
index 752cd0e09be5..18e936f3045e 100644
--- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
+++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
@@ -120,7 +120,7 @@ function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogLis
             {({safeAreaPaddingBottomStyle}) => (
                 <>
                     <HeaderWithBackButton
-                        title="Share Log"
+                        title={translate('initialSettingsPage.debugConsole.shareLog')}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONSOLE)}
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>

From bbbdd166a2fa610e0e11198251fc3c27d6b75780 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 14 Feb 2024 13:30:55 +0100
Subject: [PATCH 36/38] remove unnecessary console debug

---
 src/pages/settings/AboutPage/ConsolePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index b21512915b95..40c114e3409b 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -120,7 +120,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
             if (!item) {
                 return null;
             }
-            console.debug({item});
+
             return (
                 <View style={styles.mb2}>
                     <Text family="MONOSPACE">{`${format(new Date(item.time), CONST.DATE.FNS_DB_FORMAT_STRING)} ${item.message}`}</Text>

From 025a9a0d3e35975734329f9002b43960bbe99850 Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 14 Feb 2024 15:48:39 +0100
Subject: [PATCH 37/38] code review updates

---
 src/libs/localFileCreate/index.native.ts     | 3 ++-
 src/libs/localFileCreate/index.ts            | 3 ++-
 src/libs/localFileCreate/types.ts            | 3 +++
 src/libs/localFileDownload/index.ios.ts      | 2 +-
 src/libs/localFileDownload/index.ts          | 5 ++---
 src/pages/settings/AboutPage/ConsolePage.tsx | 9 ++++-----
 6 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 src/libs/localFileCreate/types.ts

diff --git a/src/libs/localFileCreate/index.native.ts b/src/libs/localFileCreate/index.native.ts
index a6a5630998f5..418701ae3ff5 100644
--- a/src/libs/localFileCreate/index.native.ts
+++ b/src/libs/localFileCreate/index.native.ts
@@ -1,5 +1,6 @@
 import RNFetchBlob from 'react-native-blob-util';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
+import type LocalFileCreate from './types';
 
 /**
  * Creates a blob file using RN Fetch Blob
@@ -7,7 +8,7 @@ import * as FileUtils from '@libs/fileDownload/FileUtils';
  * @param textContent content of the file
  * @returns path, filename and size of the newly created file
  */
-const localFileCreate = (fileName: string, textContent: string) => {
+const localFileCreate: LocalFileCreate = (fileName, textContent) => {
     const newFileName = FileUtils.appendTimeToFileName(fileName);
     const dir = RNFetchBlob.fs.dirs.DocumentDir;
     const path = `${dir}/${newFileName}.txt`;
diff --git a/src/libs/localFileCreate/index.ts b/src/libs/localFileCreate/index.ts
index 0bb8ebc585cd..0178a6c76f7c 100644
--- a/src/libs/localFileCreate/index.ts
+++ b/src/libs/localFileCreate/index.ts
@@ -1,4 +1,5 @@
 import * as FileUtils from '@libs/fileDownload/FileUtils';
+import type LocalFileCreate from './types';
 
 /**
  * Creates a Blob file
@@ -6,7 +7,7 @@ import * as FileUtils from '@libs/fileDownload/FileUtils';
  * @param textContent content of the file
  * @returns path, filename and size of the newly created file
  */
-const localFileCreate = (fileName: string, textContent: string) => {
+const localFileCreate: LocalFileCreate = (fileName, textContent) => {
     const newFileName = FileUtils.appendTimeToFileName(fileName);
     const blob = new Blob([textContent], {type: 'text/plain'});
     const url = URL.createObjectURL(blob);
diff --git a/src/libs/localFileCreate/types.ts b/src/libs/localFileCreate/types.ts
new file mode 100644
index 000000000000..e8e8084cb567
--- /dev/null
+++ b/src/libs/localFileCreate/types.ts
@@ -0,0 +1,3 @@
+type LocalFileCreate = (fileName: string, textContent: string) => Promise<{path: string; newFileName: string; size: number}>;
+
+export default LocalFileCreate;
diff --git a/src/libs/localFileDownload/index.ios.ts b/src/libs/localFileDownload/index.ios.ts
index 0e57cb4a23c5..778d19d9449b 100644
--- a/src/libs/localFileDownload/index.ios.ts
+++ b/src/libs/localFileDownload/index.ios.ts
@@ -1,6 +1,6 @@
 import {Share} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
-import localFileCreate from '@libs/localFileCreate/index.native';
+import localFileCreate from '@libs/localFileCreate';
 import type LocalFileDownload from './types';
 
 /**
diff --git a/src/libs/localFileDownload/index.ts b/src/libs/localFileDownload/index.ts
index e63455f243a9..a1a20a0e3d4a 100644
--- a/src/libs/localFileDownload/index.ts
+++ b/src/libs/localFileDownload/index.ts
@@ -1,4 +1,3 @@
-import * as FileUtils from '@libs/fileDownload/FileUtils';
 import localFileCreate from '@libs/localFileCreate';
 import type LocalFileDownload from './types';
 
@@ -8,9 +7,9 @@ import type LocalFileDownload from './types';
  * is downloaded by the browser.
  */
 const localFileDownload: LocalFileDownload = (fileName, textContent) => {
-    localFileCreate(fileName, textContent).then(({path}) => {
+    localFileCreate(`${fileName}.txt`, textContent).then(({path, newFileName}) => {
         const link = document.createElement('a');
-        link.download = FileUtils.appendTimeToFileName(`${fileName}.txt`);
+        link.download = newFileName;
         link.href = path;
         link.click();
     });
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 40c114e3409b..5c5e9ba91874 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -42,7 +42,7 @@ type ConsolePageProps = ConsolePageOnyxProps;
  * @param logs Logs captured on the current device
  * @returns CapturedLogs with parsed messages
  */
-const parseStingifiedMessages = (logs: Log[]) => {
+const parseStringifyMessages = (logs: Log[]) => {
     if (isEmpty(logs)) {
         return;
     }
@@ -77,8 +77,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
         }
 
         setLogs((prevLogs) => ({...prevLogs, ...capturedLogs}));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [capturedLogs]);
+    }, [capturedLogs, shouldStoreLogs]);
 
     const executeArbitraryCode = () => {
         const sanitizedInput = sanitizeConsoleInput(input);
@@ -91,14 +90,14 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, executeArbitraryCode);
 
     const saveLogs = () => {
-        const logsWithParsedMessages = parseStingifiedMessages(logsList);
+        const logsWithParsedMessages = parseStringifyMessages(logsList);
 
         localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2));
     };
 
     const shareLogs = () => {
         setIsGeneratingLogsFile(true);
-        const logsWithParsedMessages = parseStingifiedMessages(logsList);
+        const logsWithParsedMessages = parseStringifyMessages(logsList);
 
         // Generate a file with the logs and pass its path to the list of reports to share it with
         localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then(({path, size}) => {

From 96b08ecf1f3d79c6362984be5165585ef114ec3e Mon Sep 17 00:00:00 2001
From: Tomasz Misiukiewicz <tomasz.misiukiewicz@callstack.com>
Date: Wed, 14 Feb 2024 15:50:38 +0100
Subject: [PATCH 38/38] update share log page nav props

---
 src/pages/settings/AboutPage/ShareLogPage.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/pages/settings/AboutPage/ShareLogPage.tsx b/src/pages/settings/AboutPage/ShareLogPage.tsx
index 8479c8d61e75..8f0623f99d32 100644
--- a/src/pages/settings/AboutPage/ShareLogPage.tsx
+++ b/src/pages/settings/AboutPage/ShareLogPage.tsx
@@ -1,13 +1,10 @@
+import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import type SCREENS from '@src/SCREENS';
 import ShareLogList from './ShareLogList';
 
-type ShareLogPageProps = {
-    route: {
-        params: {
-            source: string;
-        };
-    };
-};
+type ShareLogPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.SHARE_LOG>;
 
 function ShareLogPage({route}: ShareLogPageProps) {
     return <ShareLogList logSource={route.params.source} />;