Add option to show/hide ACL events (m.room.server_acl) in timeline

src/components/structures/RoomView.tsx

@@ -252,6 +252,7 @@ export interface IRoomState {
     showJoinLeaves: boolean;
     showAvatarChanges: boolean;
     showDisplaynameChanges: boolean;
+    showServerAclChanges: boolean;
     matrixClientIsReady: boolean;
     showUrlPreview?: boolean;
     e2eStatus?: E2EStatus;
@@ -461,6 +462,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             showJoinLeaves: true,
             showAvatarChanges: true,
             showDisplaynameChanges: true,
+            showServerAclChanges: true,
             matrixClientIsReady: context.client?.isInitialSyncComplete(),
             mainSplitContentType: MainSplitContentType.Timeline,
             timelineRenderingType: TimelineRenderingType.Room,
@@ -616,6 +618,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId),
             showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId),
             showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
+            showServerAclChanges: SettingsStore.getValue("showServerAclChanges", roomId),
             wasContextSwitch: wasContextSwitch,
             mainSplitContentType: room ? this.getMainSplitContentType(room) : undefined,
             initialEventId: undefined, // default to clearing this, will get set later in the method if needed
@@ -690,6 +693,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             SettingsStore.watchSetting("showDisplaynameChanges", roomId, (...[, , , value]) =>
                 this.setState({ showDisplaynameChanges: value as boolean }),
             ),
+            SettingsStore.watchSetting("showServerAclChanges", roomId, (...[, , , value]) =>
+                this.setState({ showServerAclChanges: value as boolean }),
+            ),
         ]);
 
         if (!initial && this.state.shouldPeek && !newState.shouldPeek) {

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

@@ -157,6 +157,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         "showReadReceipts",
         "showJoinLeaves",
         "showDisplaynameChanges",
+        "showServerAclChanges",
         "showChatEffects",
         "showAvatarChanges",
         "Pill.shouldShowPillAvatar",

src/contexts/RoomContext.ts

@@ -65,6 +65,7 @@ const RoomContext = createContext<RoomContextType>({
     showJoinLeaves: true,
     showAvatarChanges: true,
     showDisplaynameChanges: true,
+    showServerAclChanges: true,
     matrixClientIsReady: false,
     showUrlPreview: false,
     timelineRenderingType: TimelineRenderingType.Room,

src/i18n/strings/en_EN.json

@@ -3068,6 +3068,7 @@
         "show_chat_effects": "Show chat effects (animations when receiving e.g. confetti)",
         "show_displayname_changes": "Show display name changes",
         "show_join_leave": "Show join/leave messages (invites/removes/bans unaffected)",
+        "show_server_acl_changes": "Show server ACL changes",
         "show_message_previews": "Show message previews",
         "show_nsfw_content": "Show NSFW content",
         "show_read_receipts": "Show read receipts sent by other users",

src/settings/Settings.tsx

@@ -252,6 +252,7 @@ export interface Settings {
     "showJoinLeaves": IBaseSetting<boolean>;
     "showAvatarChanges": IBaseSetting<boolean>;
     "showDisplaynameChanges": IBaseSetting<boolean>;
+    "showServerAclChanges": IBaseSetting<boolean>;
     "showReadReceipts": IBaseSetting<boolean>;
     "showTwelveHourTimestamps": IBaseSetting<boolean>;
     "alwaysShowTimestamps": IBaseSetting<boolean>;
@@ -810,6 +811,11 @@ export const SETTINGS: Settings = {
         default: true,
         invertedSettingName: "hideDisplaynameChanges",
     },
+    "showServerAclChanges": {
+        supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,
+        displayName: _td("settings|show_server_acl_changes"),
+        default: true,
+    },
     "showReadReceipts": {
         supportedLevels: LEVELS_ROOM_SETTINGS,
         displayName: _td("settings|show_read_receipts"),

src/shouldHideEvent.ts

@@ -56,6 +56,7 @@ export default function shouldHideEvent(ev: MatrixEvent, ctx?: IRoomState): bool
         ? (name: keyof IRoomState) => ctx[name]
         : (name: SettingKey) => SettingsStore.getValue(name, ev.getRoomId());
 
+    if (ev.getType() === EventType.RoomServerAcl && !isEnabled("showServerAclChanges")) return true;
     // Hide redacted events
     // Deleted events with a thread are always shown regardless of user preference
     // to make sure that a thread can be accessible even if the root message is deleted

test/test-utils/room.ts

@@ -75,6 +75,7 @@ export function getRoomContext(room: Room, override: Partial<RoomContextType>):
         showJoinLeaves: true,
         showAvatarChanges: true,
         showDisplaynameChanges: true,
+        showServerAclChanges: true,
         matrixClientIsReady: false,
         timelineRenderingType: TimelineRenderingType.Room,
         mainSplitContentType: MainSplitContentType.Timeline,

test/unit-tests/components/structures/MessagePanel-test.tsx

@@ -90,6 +90,7 @@ describe("MessagePanel", function () {
         showJoinLeaves: false,
         showAvatarChanges: false,
         showDisplaynameChanges: true,
+        showServerAclChanges: true,
         showHiddenEvents: false,
     } as unknown as RoomContextType;
 

test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx

@@ -67,6 +67,7 @@ describe("<SendMessageComposer/>", () => {
         showJoinLeaves: true,
         showAvatarChanges: true,
         showDisplaynameChanges: true,
+        showServerAclChanges: true,
         matrixClientIsReady: false,
         timelineRenderingType: TimelineRenderingType.Room,
         mainSplitContentType: MainSplitContentType.Timeline,

test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -989,13 +989,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   <span
                     class="mx_SettingsFlag_labelText"
                   >
-                    Show chat effects (animations when receiving e.g. confetti)
+                    Show server ACL changes
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show chat effects (animations when receiving e.g. confetti)"
+                  aria-label="Show server ACL changes"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                   id="mx_SettingsFlag_enFRaTjdsFou"
                   role="switch"
@@ -1016,13 +1016,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   <span
                     class="mx_SettingsFlag_labelText"
                   >
-                    Show profile picture changes
+                    Show chat effects (animations when receiving e.g. confetti)
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show profile picture changes"
+                  aria-label="Show chat effects (animations when receiving e.g. confetti)"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                   id="mx_SettingsFlag_bfwnd5rz4XNX"
                   role="switch"
@@ -1043,13 +1043,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   <span
                     class="mx_SettingsFlag_labelText"
                   >
-                    Show avatars in user, room and event mentions
+                    Show profile picture changes
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Show avatars in user, room and event mentions"
+                  aria-label="Show profile picture changes"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                   id="mx_SettingsFlag_gs5uWEzYzZrS"
                   role="switch"
@@ -1070,13 +1070,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   <span
                     class="mx_SettingsFlag_labelText"
                   >
-                    Enable big emoji in chat
+                    Show avatars in user, room and event mentions
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Enable big emoji in chat"
+                  aria-label="Show avatars in user, room and event mentions"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                   id="mx_SettingsFlag_qWg7OgID1yRR"
                   role="switch"
@@ -1097,13 +1097,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   <span
                     class="mx_SettingsFlag_labelText"
                   >
-                    Jump to the bottom of the timeline when you send a message
+                    Enable big emoji in chat
                   </span>
                 </label>
                 <div
                   aria-checked="true"
                   aria-disabled="true"
-                  aria-label="Jump to the bottom of the timeline when you send a message"
+                  aria-label="Enable big emoji in chat"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                   id="mx_SettingsFlag_pOPewl7rtMbV"
                   role="switch"
@@ -1120,6 +1120,33 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 <label
                   class="mx_SettingsFlag_label"
                   for="mx_SettingsFlag_cmt3PZSyNp3v"
+                >
+                  <span
+                    class="mx_SettingsFlag_labelText"
+                  >
+                    Jump to the bottom of the timeline when you send a message
+                  </span>
+                </label>
+                <div
+                  aria-checked="true"
+                  aria-disabled="true"
+                  aria-label="Jump to the bottom of the timeline when you send a message"
+                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  id="mx_SettingsFlag_cmt3PZSyNp3v"
+                  role="switch"
+                  tabindex="0"
+                >
+                  <div
+                    class="mx_ToggleSwitch_ball"
+                  />
+                </div>
+              </div>
+              <div
+                class="mx_SettingsFlag"
+              >
+                <label
+                  class="mx_SettingsFlag_label"
+                  for="mx_SettingsFlag_dJJz3lHUv9XX"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1132,7 +1159,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show current profile picture and name for users in message history"
                   class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_cmt3PZSyNp3v"
+                  id="mx_SettingsFlag_dJJz3lHUv9XX"
                   role="switch"
                   tabindex="0"
                 >
@@ -1355,7 +1382,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_dJJz3lHUv9XX"
+                  for="mx_SettingsFlag_SBSSOZDRlzlA"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1368,7 +1395,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Show NSFW content"
                   class="mx_AccessibleButton mx_ToggleSwitch"
-                  id="mx_SettingsFlag_dJJz3lHUv9XX"
+                  id="mx_SettingsFlag_SBSSOZDRlzlA"
                   role="switch"
                   tabindex="0"
                 >
@@ -1399,7 +1426,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               >
                 <label
                   class="mx_SettingsFlag_label"
-                  for="mx_SettingsFlag_SBSSOZDRlzlA"
+                  for="mx_SettingsFlag_FLEpLCb0jpp6"
                 >
                   <span
                     class="mx_SettingsFlag_labelText"
@@ -1412,7 +1439,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Prompt before sending invites to potentially invalid matrix IDs"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  id="mx_SettingsFlag_SBSSOZDRlzlA"
+                  id="mx_SettingsFlag_FLEpLCb0jpp6"
                   role="switch"
                   tabindex="0"
                 >