Fix cross-device sync for attach logs preference (MM-67856)

app/actions/websocket/preferences.ts

@@ -9,6 +9,7 @@ import DatabaseManager from '@database/manager';
 import {getPostById} from '@queries/servers/post';
 import {deletePreferences, differsFromLocalNameFormat, getHasCRTChanged} from '@queries/servers/preference';
 import EphemeralStore from '@store/ephemeral_store';
+import {logDebug} from '@utils/log';
 
 export async function handlePreferenceChangedEvent(serverUrl: string, msg: WebSocketMessage): Promise<void> {
     if (EphemeralStore.isEnablingCRT()) {
@@ -18,6 +19,7 @@ export async function handlePreferenceChangedEvent(serverUrl: string, msg: WebSo
     try {
         const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
         const preference: PreferenceType = JSON.parse(msg.data.preference);
+        logDebug('[WS] PREFERENCE_CHANGED', preference.category, preference.name);
         handleSavePostAdded(serverUrl, [preference]);
 
         const hasDiffNameFormatPref = await differsFromLocalNameFormat(database, [preference]);
@@ -48,6 +50,7 @@ export async function handlePreferencesChangedEvent(serverUrl: string, msg: WebS
     try {
         const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
         const preferences: PreferenceType[] = JSON.parse(msg.data.preferences);
+        logDebug('[WS] PREFERENCES_CHANGED', preferences.map((p) => `${p.category}/${p.name}`).join(', '));
         handleSavePostAdded(serverUrl, preferences);
 
         const hasDiffNameFormatPref = await differsFromLocalNameFormat(database, preferences);

app/components/post_draft/quick_actions/attachment_quick_action/index.test.tsx

@@ -278,6 +278,28 @@ describe('AttachmentQuickAction', () => {
             });
         });
 
+        it('should pass showAttachLogs to openAttachmentOptions', async () => {
+            const {getByTestId} = renderWithIntlAndTheme(
+                <AttachmentQuickAction
+                    {...baseProps}
+                    showAttachLogs={true}
+                />,
+            );
+
+            const button = getByTestId('test-attachment');
+            fireEvent.press(button);
+
+            await waitFor(() => {
+                expect(mockOpenAttachmentOptions).toHaveBeenCalledWith(
+                    expect.any(Object), // intl
+                    expect.any(Object), // theme
+                    expect.objectContaining({
+                        showAttachLogs: true,
+                    }),
+                );
+            });
+        });
+
         it('should handle default fileCount when not provided', async () => {
             const propsWithoutFileCount = {
                 ...baseProps,

app/components/post_draft/quick_actions/index.ts

@@ -10,7 +10,7 @@ import {map} from 'rxjs/operators';
 import {Preferences} from '@constants';
 import {withServerUrl} from '@context/server';
 import {observeIsBoREnabled, observeIsPostPriorityEnabled} from '@queries/servers/post';
-import {queryPreferencesByCategoryAndName} from '@queries/servers/preference';
+import {observePreferenceAsBool} from '@queries/servers/preference';
 import {observeCanUploadFiles} from '@queries/servers/security';
 import {observeConfigBooleanValue, observeMaxFileCount} from '@queries/servers/system';
 
@@ -26,20 +26,16 @@ const enhanced = withObservables([], ({database, serverUrl}: EnhancedProps) => {
     const canUploadFiles = observeCanUploadFiles(database);
     const maxFileCount = observeMaxFileCount(database);
     const allowDownloadLogs = observeConfigBooleanValue(database, 'AllowDownloadLogs', true);
-    const attachLogsPref = queryPreferencesByCategoryAndName(
-        database,
-        Preferences.CATEGORIES.ADVANCED_SETTINGS,
-        Preferences.ATTACH_APP_LOGS,
-    ).observe();
+    const attachLogsEnabled = observePreferenceAsBool(database, Preferences.CATEGORIES.ADVANCED_SETTINGS, Preferences.ATTACH_APP_LOGS);
 
     return {
         canUploadFiles,
         isAgentsEnabled: observeIsAgentsEnabled(serverUrl),
         isPostPriorityEnabled: observeIsPostPriorityEnabled(database),
         isBoREnabled: observeIsBoREnabled(database),
         maxFileCount,
-        showAttachLogs: combineLatest([allowDownloadLogs, attachLogsPref]).pipe(
-            map(([allowed, prefs]) => allowed && prefs?.[0]?.value === 'true'),
+        showAttachLogs: combineLatest([allowDownloadLogs, attachLogsEnabled]).pipe(
+            map(([allowed, enabled]) => allowed && enabled),
         ),
     };
 });

app/queries/servers/preference.ts

@@ -2,6 +2,8 @@
 // See LICENSE.txt for license information.
 
 import {Database, Model, Q} from '@nozbe/watermelondb';
+import {of as of$, type Observable} from 'rxjs';
+import {map, switchMap} from 'rxjs/operators';
 
 import {Preferences} from '@constants';
 import {MM_TABLES} from '@constants/database';
@@ -118,3 +120,12 @@ export const queryEmojiPreferences = (database: Database, name: string) => {
 export const queryAdvanceSettingsPreferences = (database: Database, name?: string, value?: string) => {
     return queryPreferencesByCategoryAndName(database, ADVANCED_SETTINGS, name, value);
 };
+
+export const observePreferenceAsBool = (database: Database, category: string, name: string, defaultValue = false): Observable<boolean> => {
+    return queryPreferencesByCategoryAndName(database, category, name).
+        observe().
+        pipe(
+            switchMap((prefs) => (prefs.length ? prefs[0].observe() : of$(undefined))),
+            map((pref) => (pref ? pref.value === 'true' : defaultValue)),
+        );
+};

app/screens/report_a_problem/index.test.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {Database} from '@nozbe/watermelondb';
+import {act} from '@testing-library/react-native';
 import React, {type ComponentProps} from 'react';
 import {View, Text} from 'react-native';
 
@@ -171,4 +172,38 @@ describe('screens/report_a_problem/index', () => {
         expect(getByTestId('attachLogsEnabled')).toHaveTextContent('false');
         expect(getByTestId('currentUserId')).toHaveTextContent('user2');
     });
+
+    it('should react to attachLogsEnabled preference value changes', async () => {
+        await operator.handlePreferences({
+            preferences: [{
+                user_id: 'user1',
+                category: 'advanced_settings',
+                name: 'attach_app_logs',
+                value: 'true',
+            }],
+            prepareRecordsOnly: false,
+        });
+
+        const Component = enhanced;
+        const {getByTestId} = renderWithEverything(<Component componentId={'ReportProblem'}/>, {database});
+
+        // * Initially true
+        expect(getByTestId('attachLogsEnabled')).toHaveTextContent('true');
+
+        // # Update the existing preference value from 'true' to 'false'
+        await act(async () => {
+            await operator.handlePreferences({
+                preferences: [{
+                    user_id: 'user1',
+                    category: 'advanced_settings',
+                    name: 'attach_app_logs',
+                    value: 'false',
+                }],
+                prepareRecordsOnly: false,
+            });
+        });
+
+        // * Should react to the value change
+        expect(getByTestId('attachLogsEnabled')).toHaveTextContent('false');
+    });
 });

app/screens/report_a_problem/index.ts

@@ -3,12 +3,11 @@
 
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import {withObservables} from '@nozbe/watermelondb/react';
-import {switchMap} from '@nozbe/watermelondb/utils/rx';
 import {of as of$} from 'rxjs';
-import {map} from 'rxjs/operators';
+import {switchMap} from 'rxjs/operators';
 
 import {Preferences} from '@constants';
-import {queryPreferencesByCategoryAndName} from '@queries/servers/preference';
+import {observePreferenceAsBool} from '@queries/servers/preference';
 import {observeConfigBooleanValue, observeConfigValue, observeCurrentUserId, observeLicense, observeReportAProblemMetadata} from '@queries/servers/system';
 
 import ReportProblem from './report_problem';
@@ -23,9 +22,7 @@ const enhanced = withObservables([], ({database}) => {
         isLicensed: observeLicense(database).pipe(switchMap((license) => (license ? of$(license.IsLicensed) : of$(false)))),
         metadata: observeReportAProblemMetadata(database),
         currentUserId: observeCurrentUserId(database),
-        attachLogsEnabled: queryPreferencesByCategoryAndName(database, Preferences.CATEGORIES.ADVANCED_SETTINGS, Preferences.ATTACH_APP_LOGS).
-            observe().
-            pipe(map((prefs) => prefs?.[0]?.value === 'true')),
+        attachLogsEnabled: observePreferenceAsBool(database, Preferences.CATEGORIES.ADVANCED_SETTINGS, Preferences.ATTACH_APP_LOGS),
     };
 });
 

app/screens/report_a_problem/report_problem.tsx

@@ -25,7 +25,6 @@ import {getCommonStyleSheet} from './styles';
 
 import type {AvailableScreens} from '@typings/screens/navigation';
 import type {ReportAProblemMetadata} from '@typings/screens/report_a_problem';
-export const REPORT_PROBLEM_CLOSE_BUTTON_ID = 'close-report-problem';
 
 type Props = {
     componentId: AvailableScreens;
@@ -150,7 +149,10 @@ const ReportProblem = ({
     });
 
     return (
-        <View style={styles.container}>
+        <View
+            style={styles.container}
+            testID='report_problem.screen'
+        >
             <View style={styles.body}>
                 <ScrollView contentContainerStyle={styles.content}>
                     <View style={styles.detailsSection}>

detox/e2e/support/ui/screen/index.ts

@@ -39,6 +39,7 @@ import PostOptionsScreen from './post_options';
 import PushNotificationSettingsScreen from './push_notification_settings';
 import ReactionsScreen from './reactions';
 import RecentMentionsScreen from './recent_mentions';
+import ReportProblemScreen from './report_problem';
 import SavedMessagesScreen from './saved_messages';
 import ScheduleMessageScreen from './scheduled_message_screen';
 import SearchMessagesScreen from './search_messages';
@@ -92,6 +93,7 @@ export {
     PushNotificationSettingsScreen,
     ReactionsScreen,
     RecentMentionsScreen,
+    ReportProblemScreen,
     SavedMessagesScreen,
     SearchMessagesScreen,
     SelectTimezoneScreen,

detox/e2e/support/ui/screen/report_problem.ts

@@ -0,0 +1,51 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {SettingsScreen} from '@support/ui/screen';
+import {timeouts} from '@support/utils';
+
+class ReportProblemScreen {
+    testID = {
+        reportProblemScreen: 'report_problem.screen',
+        backButton: 'screen.back.button',
+        enableLogAttachmentsToggleOff: 'report_problem.enable_log_attachments.toggled.false.button',
+        enableLogAttachmentsToggleOn: 'report_problem.enable_log_attachments.toggled.true.button',
+    };
+
+    reportProblemScreen = element(by.id(this.testID.reportProblemScreen));
+    backButton = element(by.id(this.testID.backButton));
+    enableLogAttachmentsToggleOff = element(by.id(this.testID.enableLogAttachmentsToggleOff));
+    enableLogAttachmentsToggleOn = element(by.id(this.testID.enableLogAttachmentsToggleOn));
+
+    toBeVisible = async () => {
+        await waitFor(this.reportProblemScreen).toExist().withTimeout(timeouts.TEN_SEC);
+
+        return this.reportProblemScreen;
+    };
+
+    open = async () => {
+        await SettingsScreen.reportProblemOption.tap();
+
+        return this.toBeVisible();
+    };
+
+    back = async () => {
+        await this.backButton.tap();
+        await waitFor(this.reportProblemScreen).not.toBeVisible().withTimeout(timeouts.TEN_SEC);
+    };
+
+    enableAttachLogs = async () => {
+        await waitFor(this.enableLogAttachmentsToggleOff).toExist().withTimeout(timeouts.FOUR_SEC);
+        await this.enableLogAttachmentsToggleOff.tap();
+        await waitFor(this.enableLogAttachmentsToggleOn).toExist().withTimeout(timeouts.FOUR_SEC);
+    };
+
+    disableAttachLogs = async () => {
+        await waitFor(this.enableLogAttachmentsToggleOn).toExist().withTimeout(timeouts.FOUR_SEC);
+        await this.enableLogAttachmentsToggleOn.tap();
+        await waitFor(this.enableLogAttachmentsToggleOff).toExist().withTimeout(timeouts.FOUR_SEC);
+    };
+}
+
+const reportProblemScreen = new ReportProblemScreen();
+export default reportProblemScreen;