feat: access client side logging from Test Tools Modal

src/components/ClientSideLoggingToolMenu/BaseClientSideLoggingToolMenu.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {withOnyx} 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 ONYXKEYS from '@src/ONYXKEYS';
+import type {ClientSideLoggingToolMenuOnyxProps} from './types';
+
+type BaseClientSideLoggingToolMenuOnyxProps = Pick<ClientSideLoggingToolMenuOnyxProps, 'shouldStoreLogs'>;
+
+type BaseClientSideLoggingToolProps = {
+    file?: {path: string; newFileName: string; size: number};
+    onShareLogs?: () => void;
+    onToggleSwitch: () => void;
+} & BaseClientSideLoggingToolMenuOnyxProps;
+
+function BaseClientSideLoggingToolMenu({shouldStoreLogs, file, onShareLogs, onToggleSwitch}: BaseClientSideLoggingToolProps) {
+    const styles = useThemeStyles();
+    return (
+        <>
+            <TestToolRow title="Client side logging">
+                <Switch
+                    accessibilityLabel="Client side logging"
+                    isOn={!!shouldStoreLogs}
+                    onToggle={onToggleSwitch}
+                />
+            </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>({
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
+})(BaseClientSideLoggingToolMenu);

src/components/ClientSideLoggingToolMenu/index.native.tsx

@@ -0,0 +1,74 @@
+import React, {useState} from 'react';
+import {Alert} from 'react-native';
+import RNFetchBlob from 'react-native-blob-util';
+import {withOnyx} from 'react-native-onyx';
+import Share from 'react-native-share';
+import * as Console from '@libs/actions/Console';
+import {parseStringifyMessages} from '@libs/Console';
+import type {Log} from '@libs/Console';
+import getOperatingSystem from '@libs/getOperatingSystem';
+import localFileCreate from '@libs/localFileCreate';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import BaseClientSideLoggingToolMenu from './BaseClientSideLoggingToolMenu';
+import type {ClientSideLoggingToolMenuOnyxProps, ClientSideLoggingToolProps} from './types';
+
+function ClientSideLoggingToolMenu({shouldStoreLogs, capturedLogs}: ClientSideLoggingToolProps) {
+    const [file, setFile] = useState<{path: string; newFileName: string; size: number}>();
+
+    const onToggle = () => {
+        if (!shouldStoreLogs) {
+            Console.setShouldStoreLogs(true);
+        } else {
+            if (capturedLogs) {
+                const logs = Object.values(capturedLogs as Log[]);
+                const logsWithParsedMessages = parseStringifyMessages(logs);
+                localFileCreate('logs', JSON.stringify(logsWithParsedMessages, null, 2)).then((localFile) => {
+                    if (getOperatingSystem() === CONST.OS.ANDROID) {
+                        RNFetchBlob.MediaCollection.copyToMediaStore(
+                            {
+                                name: localFile.newFileName,
+                                parentFolder: '',
+                                mimeType: 'text/plain',
+                            },
+                            'Download',
+                            localFile.path,
+                        );
+                    }
+                    setFile(localFile);
+                });
+            } else {
+                Alert.alert('No logs to share', 'There are no logs to share');
+            }
+            Console.disableLoggingAndFlushLogs();
+        }
+    };
+
+    const shareLogs = () => {
+        if (!file) {
+            return;
+        }
+        Share.open({
+            url: `file://${file.path}`,
+        });
+    };
+
+    return (
+        <BaseClientSideLoggingToolMenu
+            file={file}
+            onToggleSwitch={onToggle}
+            onShareLogs={shareLogs}
+        />
+    );
+}
+
+ClientSideLoggingToolMenu.displayName = 'ClientSideLoggingToolMenu';
+
+export default withOnyx<ClientSideLoggingToolProps, ClientSideLoggingToolMenuOnyxProps>({
+    capturedLogs: {
+        key: ONYXKEYS.LOGS,
+    },
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
+})(ClientSideLoggingToolMenu);

src/components/ClientSideLoggingToolMenu/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Alert} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import * as Console from '@libs/actions/Console';
+import {parseStringifyMessages} from '@libs/Console';
+import type {Log} from '@libs/Console';
+import localFileDownload from '@libs/localFileDownload';
+import ONYXKEYS from '@src/ONYXKEYS';
+import BaseClientSideLoggingToolMenu from './BaseClientSideLoggingToolMenu';
+import type {ClientSideLoggingToolMenuOnyxProps, ClientSideLoggingToolProps} from './types';
+
+function ClientSideLoggingToolMenu({capturedLogs, shouldStoreLogs}: ClientSideLoggingToolProps) {
+    const onToggle = () => {
+        if (!shouldStoreLogs) {
+            Console.setShouldStoreLogs(true);
+        } else {
+            if (!capturedLogs) {
+                Alert.alert('No logs to share', 'There are no logs to share');
+                Console.disableLoggingAndFlushLogs();
+                return;
+            }
+            const logs = Object.values(capturedLogs as Log[]);
+            const logsWithParsedMessages = parseStringifyMessages(logs);
+
+            localFileDownload('logs', JSON.stringify(logsWithParsedMessages, null, 2));
+            Console.disableLoggingAndFlushLogs();
+        }
+    };
+    return <BaseClientSideLoggingToolMenu onToggleSwitch={onToggle} />;
+}
+
+ClientSideLoggingToolMenu.displayName = 'ClientSideLoggingToolMenu';
+
+export default withOnyx<ClientSideLoggingToolProps, ClientSideLoggingToolMenuOnyxProps>({
+    capturedLogs: {
+        key: ONYXKEYS.LOGS,
+    },
+    shouldStoreLogs: {
+        key: ONYXKEYS.SHOULD_STORE_LOGS,
+    },
+})(ClientSideLoggingToolMenu);

src/components/ClientSideLoggingToolMenu/types.ts

@@ -0,0 +1,16 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Log} from '@libs/Console';
+
+type CapturedLogs = Record<number, Log>;
+
+type ClientSideLoggingToolMenuOnyxProps = {
+    /** Logs captured on the current device */
+    capturedLogs: OnyxEntry<CapturedLogs>;
+
+    /** Whether or not logs should be stored */
+    shouldStoreLogs: OnyxEntry<boolean>;
+};
+
+type ClientSideLoggingToolProps = ClientSideLoggingToolMenuOnyxProps;
+
+export type {CapturedLogs, ClientSideLoggingToolMenuOnyxProps, ClientSideLoggingToolProps};

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
+ */
+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;
+        }
+    });
+};
+
+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,7 +15,7 @@ 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';
@@ -37,30 +36,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);