feat: access client side logging from Test Tools Modal

src/ONYXKEYS.ts

@@ -617,7 +617,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;
     [ONYXKEYS.UPDATE_REQUIRED]: boolean;
     [ONYXKEYS.PLAID_CURRENT_EVENT]: string;
-    [ONYXKEYS.LOGS]: Record<number, OnyxTypes.Log>;
+    [ONYXKEYS.LOGS]: OnyxTypes.CapturedLogs;
     [ONYXKEYS.SHOULD_STORE_LOGS]: boolean;
     [ONYXKEYS.CACHED_PDF_PATHS]: Record<string, string>;
     [ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE]: OnyxTypes.QuickAction;

src/components/ClientSideLoggingToolMenu/BaseClientSideLoggingToolMenu.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {Alert} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import Button from '@components/Button';
+import Switch from '@components/Switch';
+import TestToolRow from '@components/TestToolRow';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as Console from '@libs/actions/Console';
+import {parseStringifyMessages} from '@libs/Console';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {CapturedLogs, Log} from '@src/types/onyx';
+
+type BaseClientSideLoggingToolMenuOnyxProps = {
+    /** Logs captured on the current device */
+    capturedLogs: OnyxEntry<CapturedLogs>;
+
+    /** Whether or not logs should be stored */
+    shouldStoreLogs: OnyxEntry<boolean>;
+};
+
+type BaseClientSideLoggingToolProps = {
+    /** Locally created file */
+    file?: {path: string; newFileName: string; size: number};
+    /** Action to run when pressing Share button */
+    onShareLogs?: () => void;
+    /** Action to run when disabling the switch */
+    onDisableLogging: (logs: Log[]) => void;
+    /** Action to run when enabling logging */
+    onEnableLogging?: () => void;
+} & BaseClientSideLoggingToolMenuOnyxProps;
+
+function BaseClientSideLoggingToolMenu({shouldStoreLogs, capturedLogs, file, onShareLogs, onDisableLogging, onEnableLogging}: BaseClientSideLoggingToolProps) {
+    const onToggle = () => {
+        if (!shouldStoreLogs) {
+            Console.setShouldStoreLogs(true);
+
+            if (onEnableLogging) {
+                onEnableLogging();
+            }
+
+            return;
+        }
+
+        if (!capturedLogs) {
+            Alert.alert('No logs to share', 'There are no logs to share');
+            Console.disableLoggingAndFlushLogs();
+            return;
+        }
+
+        const logs = Object.values(capturedLogs);
+        const logsWithParsedMessages = parseStringifyMessages(logs);
+
+        onDisableLogging(logsWithParsedMessages);
+        Console.disableLoggingAndFlushLogs();
+    };
+    const styles = useThemeStyles();
+    return (
+        <>
+            <TestToolRow title="Client side logging">
+                <Switch
+                    accessibilityLabel="Client side logging"
+                    isOn={!!shouldStoreLogs}
+                    onToggle={onToggle}
+                />
+            </TestToolRow>
+            {!!file && (
+                <>
+                    <Text style={[styles.textLabelSupporting, styles.mb4]}>{`path: ${file.path}`}</Text>
+                    <TestToolRow title="Logs">
+                        <Button
+                            small
+                            text="Share"
+                            onPress={onShareLogs}
+                        />
+                    </TestToolRow>
+                </>
+            )}
+        </>
+    );
+}
+
+BaseClientSideLoggingToolMenu.displayName = 'BaseClientSideLoggingToolMenu';
+
+export default withOnyx<BaseClientSideLoggingToolProps, BaseClientSideLoggingToolMenuOnyxProps>({
+    capturedLogs: {
+        key: ONYXKEYS.LOGS,
+    },
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
+})(BaseClientSideLoggingToolMenu);

src/components/ClientSideLoggingToolMenu/index.android.tsx

@@ -0,0 +1,47 @@
+import React, {useState} from 'react';
+import RNFetchBlob from 'react-native-blob-util';
+import Share from 'react-native-share';
+import type {Log} from '@libs/Console';
+import localFileCreate from '@libs/localFileCreate';
+import BaseClientSideLoggingToolMenu from './BaseClientSideLoggingToolMenu';
+
+function ClientSideLoggingToolMenu() {
+    const [file, setFile] = useState<{path: string; newFileName: string; size: number}>();
+
+    const createAndSaveFile = (logs: Log[]) => {
+        localFileCreate('logs', JSON.stringify(logs, null, 2)).then((localFile) => {
+            RNFetchBlob.MediaCollection.copyToMediaStore(
+                {
+                    name: localFile.newFileName,
+                    parentFolder: '',
+                    mimeType: 'text/plain',
+                },
+                'Download',
+                localFile.path,
+            );
+            setFile(localFile);
+        });
+    };
+
+    const shareLogs = () => {
+        if (!file) {
+            return;
+        }
+        Share.open({
+            url: `file://${file.path}`,
+        });
+    };
+
+    return (
+        <BaseClientSideLoggingToolMenu
+            file={file}
+            onEnableLogging={() => setFile(undefined)}
+            onDisableLogging={createAndSaveFile}
+            onShareLogs={shareLogs}
+        />
+    );
+}
+
+ClientSideLoggingToolMenu.displayName = 'ClientSideLoggingToolMenu';
+
+export default ClientSideLoggingToolMenu;

src/components/ClientSideLoggingToolMenu/index.ios.tsx

@@ -0,0 +1,37 @@
+import React, {useState} from 'react';
+import Share from 'react-native-share';
+import type {Log} from '@libs/Console';
+import localFileCreate from '@libs/localFileCreate';
+import BaseClientSideLoggingToolMenu from './BaseClientSideLoggingToolMenu';
+
+function ClientSideLoggingToolMenu() {
+    const [file, setFile] = useState<{path: string; newFileName: string; size: number}>();
+
+    const createFile = (logs: Log[]) => {
+        localFileCreate('logs', JSON.stringify(logs, null, 2)).then((localFile) => {
+            setFile(localFile);
+        });
+    };
+
+    const shareLogs = () => {
+        if (!file) {
+            return;
+        }
+        Share.open({
+            url: `file://${file.path}`,
+        });
+    };
+
+    return (
+        <BaseClientSideLoggingToolMenu
+            file={file}
+            onEnableLogging={() => setFile(undefined)}
+            onDisableLogging={createFile}
+            onShareLogs={shareLogs}
+        />
+    );
+}
+
+ClientSideLoggingToolMenu.displayName = 'ClientSideLoggingToolMenu';
+
+export default ClientSideLoggingToolMenu;

src/components/ClientSideLoggingToolMenu/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type {Log} from '@libs/Console';
+import localFileDownload from '@libs/localFileDownload';
+import BaseClientSideLoggingToolMenu from './BaseClientSideLoggingToolMenu';
+
+function ClientSideLoggingToolMenu() {
+    const downloadFile = (logs: Log[]) => {
+        localFileDownload('logs', JSON.stringify(logs, null, 2));
+    };
+
+    return <BaseClientSideLoggingToolMenu onDisableLogging={downloadFile} />;
+}
+
+ClientSideLoggingToolMenu.displayName = 'ClientSideLoggingToolMenu';
+
+export default ClientSideLoggingToolMenu;

src/components/ProfilingToolMenu/index.native.tsx

@@ -142,29 +142,24 @@ function ProfilingToolMenu({isProfilingInProgress = false}: ProfilingToolMenuPro
 
     return (
         <>
-            <Text
-                style={[styles.textLabelSupporting, styles.mt4, styles.mb3]}
-                numberOfLines={1}
-            >
-                Release options
-            </Text>
-
             <TestToolRow title="Use Profiling">
                 <Switch
                     accessibilityLabel="Use Profiling"
                     isOn={!!isProfilingInProgress}
                     onToggle={onToggleProfiling}
                 />
             </TestToolRow>
-            <Text style={[styles.textLabelSupporting, styles.mb4]}>{!!pathIOS && `path: ${pathIOS}`}</Text>
             {!!pathIOS && (
-                <TestToolRow title="Profile trace">
-                    <Button
-                        small
-                        text="Share"
-                        onPress={onDownloadProfiling}
-                    />
-                </TestToolRow>
+                <>
+                    <Text style={[styles.textLabelSupporting, styles.mb4]}>{`path: ${pathIOS}`}</Text>
+                    <TestToolRow title="Profile trace">
+                        <Button
+                            small
+                            text="Share"
+                            onPress={onDownloadProfiling}
+                        />
+                    </TestToolRow>
+                </>
             )}
         </>
     );

src/components/TestToolsModal.tsx

@@ -4,13 +4,16 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import useEnvironment from '@hooks/useEnvironment';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ClientSideLoggingToolMenu from './ClientSideLoggingToolMenu';
 import Modal from './Modal';
 import ProfilingToolMenu from './ProfilingToolMenu';
 import TestToolMenu from './TestToolMenu';
+import Text from './Text';
 
 type TestToolsModalOnyxProps = {
     /** Whether the test tools modal is open */
@@ -23,6 +26,7 @@ function TestToolsModal({isTestToolsModalOpen = false}: TestToolsModalProps) {
     const {isDevelopment} = useEnvironment();
     const {windowWidth} = useWindowDimensions();
     const StyleUtils = useStyleUtils();
+    const styles = useThemeStyles();
 
     return (
         <Modal
@@ -32,7 +36,14 @@ function TestToolsModal({isTestToolsModalOpen = false}: TestToolsModalProps) {
         >
             <View style={[StyleUtils.getTestToolsModalStyle(windowWidth)]}>
                 {isDevelopment && <TestToolMenu />}
+                <Text
+                    style={[styles.textLabelSupporting, styles.mt4, styles.mb3]}
+                    numberOfLines={1}
+                >
+                    Release options
+                </Text>
                 <ProfilingToolMenu />
+                <ClientSideLoggingToolMenu />
             </View>
         </Modal>
     );

src/libs/Console/index.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import isEmpty from 'lodash/isEmpty';
 import Onyx from 'react-native-onyx';
 import {addLog} from '@libs/actions/Console';
 import CONFIG from '@src/CONFIG';
@@ -118,5 +119,29 @@ function createLog(text: string) {
     }
 }
 
-export {sanitizeConsoleInput, createLog, shouldAttachLog};
+/**
+ * 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
+ */
+function parseStringifyMessages(logs: Log[]): Log[] {
+    if (isEmpty(logs)) {
+        return logs;
+    }
+
+    return 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;
+        }
+    });
+}
+
+export {sanitizeConsoleInput, createLog, shouldAttachLog, parseStringifyMessages};
 export type {Log};

src/pages/settings/AboutPage/ConsolePage.tsx

@@ -1,5 +1,4 @@
 import {format} from 'date-fns';
-import isEmpty from 'lodash/isEmpty';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {FlatList, View} from 'react-native';
 import type {ListRenderItem, ListRenderItemInfo} from 'react-native';
@@ -16,16 +15,15 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {addLog} from '@libs/actions/Console';
-import {createLog, sanitizeConsoleInput} from '@libs/Console';
+import {createLog, parseStringifyMessages, 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 CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-
-type CapturedLogs = Record<number, Log>;
+import type {CapturedLogs} from '@src/types/onyx';
 
 type ConsolePageOnyxProps = {
     /** Logs captured on the current device */
@@ -37,30 +35,6 @@ type ConsolePageOnyxProps = {
 
 type ConsolePageProps = ConsolePageOnyxProps;
 
-/**
- * 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 parseStringifyMessages = (logs: Log[]) => {
-    if (isEmpty(logs)) {
-        return;
-    }
-
-    return 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, shouldStoreLogs}: ConsolePageProps) {
     const [input, setInput] = useState('');
     const [logs, setLogs] = useState(capturedLogs);