Add option to stop sending read receipts (delabs MSC2285: private read receipts) (#8629)

Co-authored-by: Travis Ralston <travisr@matrix.org>

src/components/views/elements/SettingsFlag.tsx

@@ -33,6 +33,7 @@ interface IProps {
     // XXX: once design replaces all toggles make this the default
     useCheckbox?: boolean;
     disabled?: boolean;
+    disabledDescription?: string;
     hideIfCannotSet?: boolean;
     onChange?(checked: boolean): void;
 }
@@ -84,6 +85,13 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
             : SettingsStore.getDisplayName(this.props.name, this.props.level);
         const description = SettingsStore.getDescription(this.props.name);
 
+        let disabledDescription: JSX.Element;
+        if (this.props.disabled && this.props.disabledDescription) {
+            disabledDescription = <div className="mx_SettingsFlag_microcopy">
+                { this.props.disabledDescription }
+            </div>;
+        }
+
         if (this.props.useCheckbox) {
             return <StyledCheckbox
                 checked={this.state.value}
@@ -100,6 +108,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                         { description && <div className="mx_SettingsFlag_microcopy">
                             { description }
                         </div> }
+                        { disabledDescription }
                     </label>
                     <ToggleSwitch
                         checked={this.state.value}

src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -47,7 +47,6 @@ export class LabsSettingToggle extends React.Component<ILabsSettingToggleProps>
 }
 
 interface IState {
-    showHiddenReadReceipts: boolean;
     showJumpToDate: boolean;
     showExploringPublicSpaces: boolean;
 }
@@ -58,10 +57,6 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
 
         const cli = MatrixClientPeg.get();
 
-        cli.doesServerSupportUnstableFeature("org.matrix.msc2285").then((showHiddenReadReceipts) => {
-            this.setState({ showHiddenReadReceipts });
-        });
-
         cli.doesServerSupportUnstableFeature("org.matrix.msc3030").then((showJumpToDate) => {
             this.setState({ showJumpToDate });
         });
@@ -71,7 +66,6 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
         });
 
         this.state = {
-            showHiddenReadReceipts: false,
             showJumpToDate: false,
             showExploringPublicSpaces: false,
         };
@@ -121,16 +115,6 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                 />,
             );
 
-            if (this.state.showHiddenReadReceipts) {
-                groups.getOrCreate(LabGroup.Messaging, []).push(
-                    <SettingsFlag
-                        key="feature_hidden_read_receipts"
-                        name="feature_hidden_read_receipts"
-                        level={SettingLevel.DEVICE}
-                    />,
-                );
-            }
-
             if (this.state.showJumpToDate) {
                 groups.getOrCreate(LabGroup.Messaging, []).push(
                     <SettingsFlag

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -29,6 +29,7 @@ import { UserTab } from "../../../dialogs/UserTab";
 import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPayload";
 import { Action } from "../../../../../dispatcher/actions";
 import SdkConfig from "../../../../../SdkConfig";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
 
 interface IProps {
@@ -36,51 +37,59 @@ interface IProps {
 }
 
 interface IState {
+    disablingReadReceiptsSupported: boolean;
     autocompleteDelay: string;
     readMarkerInViewThresholdMs: string;
     readMarkerOutOfViewThresholdMs: string;
 }
 
 export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
-    static ROOM_LIST_SETTINGS = [
+    private static ROOM_LIST_SETTINGS = [
         'breadcrumbs',
     ];
 
-    static SPACES_SETTINGS = [
+    private static SPACES_SETTINGS = [
         "Spaces.allRoomsInHome",
     ];
 
-    static KEYBINDINGS_SETTINGS = [
+    private static KEYBINDINGS_SETTINGS = [
         'ctrlFForSearch',
     ];
 
-    static COMPOSER_SETTINGS = [
+    private static PRESENCE_SETTINGS = [
+        "sendTypingNotifications",
+        // sendReadReceipts - handled specially due to server needing support
+    ];
+
+    private static COMPOSER_SETTINGS = [
         'MessageComposerInput.autoReplaceEmoji',
         'MessageComposerInput.useMarkdown',
         'MessageComposerInput.suggestEmoji',
-        'sendTypingNotifications',
         'MessageComposerInput.ctrlEnterToSend',
         'MessageComposerInput.surroundWith',
         'MessageComposerInput.showStickersButton',
         'MessageComposerInput.insertTrailingColon',
     ];
 
-    static TIME_SETTINGS = [
+    private static TIME_SETTINGS = [
         'showTwelveHourTimestamps',
         'alwaysShowTimestamps',
     ];
-    static CODE_BLOCKS_SETTINGS = [
+
+    private static CODE_BLOCKS_SETTINGS = [
         'enableSyntaxHighlightLanguageDetection',
         'expandCodeByDefault',
         'showCodeLineNumbers',
     ];
-    static IMAGES_AND_VIDEOS_SETTINGS = [
+
+    private static IMAGES_AND_VIDEOS_SETTINGS = [
         'urlPreviewsEnabled',
         'autoplayGifs',
         'autoplayVideo',
         'showImages',
     ];
-    static TIMELINE_SETTINGS = [
+
+    private static TIMELINE_SETTINGS = [
         'showTypingNotifications',
         'showRedactions',
         'showReadReceipts',
@@ -93,7 +102,8 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         'scrollToBottomOnMessageSent',
         'useOnlyCurrentProfiles',
     ];
-    static GENERAL_SETTINGS = [
+
+    private static GENERAL_SETTINGS = [
         'promptBeforeInviteUnknownUsers',
         // Start automatically after startup (electron-only)
         // Autocomplete delay (niche text box)
@@ -103,6 +113,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         super(props);
 
         this.state = {
+            disablingReadReceiptsSupported: false,
             autocompleteDelay:
                 SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10),
             readMarkerInViewThresholdMs:
@@ -112,6 +123,15 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         };
     }
 
+    public async componentDidMount(): Promise<void> {
+        this.setState({
+            disablingReadReceiptsSupported: (
+                await MatrixClientPeg.get().doesServerSupportUnstableFeature("org.matrix.msc2285.stable") ||
+                await MatrixClientPeg.get().doesServerSupportUnstableFeature("org.matrix.msc2285")
+            ),
+        });
+    }
+
     private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({ autocompleteDelay: e.target.value });
         SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
@@ -185,6 +205,20 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                     { this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS) }
                 </div>
 
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{ _t("Presence") }</span>
+                    <span className="mx_SettingsTab_subsectionText">
+                        { _t("Share your activity and status with others.") }
+                    </span>
+                    <SettingsFlag
+                        disabled={!this.state.disablingReadReceiptsSupported}
+                        disabledDescription={_t("Your server doesn't support disabling sending read receipts.")}
+                        name="sendReadReceipts"
+                        level={SettingLevel.ACCOUNT}
+                    />
+                    { this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS) }
+                </div>
+
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Composer") }</span>
                     { this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS) }

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -304,7 +304,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                     <div className="mx_SettingsTab_subsectionText">
                         <p>
                             { _t("Share anonymous data to help us identify issues. Nothing personal. " +
-                                 "No third parties.") }
+                                "No third parties.") }
                         </p>
                         <AccessibleButton
                             kind="link"