Fix edge cases around event list summaries with hidden events and redactions (#7797)

Author: t3chguy

src/components/structures/MessagePanel.tsx

@@ -681,15 +681,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
  for (const Grouper of groupers) {
  if (Grouper.canStartGroup(this, mxEv) && !this.props.disableGrouping) {
- grouper = new Grouper(
- this,
- mxEv,
- prevEvent,
- lastShownEvent,
- this.props.layout,
- nextEvent,
- nextTile,
- );
+ grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent, nextEvent, nextTile);
  }
  }
  if (!grouper) {
@@ -1056,7 +1048,6 @@ abstract class BaseGrouper {
  public readonly event: MatrixEvent,
  public readonly prevEvent: MatrixEvent,
  public readonly lastShownEvent: MatrixEvent,
- protected readonly layout: Layout,
  public readonly nextEvent?: MatrixEvent,
  public readonly nextEventTile?: MatrixEvent,
  ) {
@@ -1183,7 +1174,7 @@ class CreationGrouper extends BaseGrouper {
  onToggle={panel.onHeightChanged} // Update scroll state
  summaryMembers={[ev.sender]}
  summaryText={summaryText}
- layout={this.layout}
+ layout={this.panel.props.layout}
  >
  { eventTiles }
  </GenericEventListSummary>,
@@ -1226,11 +1217,10 @@ class MainGrouper extends BaseGrouper {
  public readonly event: MatrixEvent,
  public readonly prevEvent: MatrixEvent,
  public readonly lastShownEvent: MatrixEvent,
- protected readonly layout: Layout,
  nextEvent: MatrixEvent,
  nextEventTile: MatrixEvent,
  ) {
- super(panel, event, prevEvent, lastShownEvent, layout, nextEvent, nextEventTile);
+ super(panel, event, prevEvent, lastShownEvent, nextEvent, nextEventTile);
  this.events = [event];
  }
 
@@ -1296,15 +1286,18 @@ class MainGrouper extends BaseGrouper {
  const key = "eventlistsummary-" + (this.prevEvent ? this.events[0].getId() : "initial");
 
  let highlightInSummary = false;
- let eventTiles = this.events.map((e) => {
+ let eventTiles = this.events.map((e, i) => {
  if (e.getId() === panel.props.highlightedEventId) {
  highlightInSummary = true;
  }
- // In order to prevent DateSeparators from appearing in the expanded form
- // of EventListSummary, render each member event as if the previous
- // one was itself. This way, the timestamp of the previous event === the
- // timestamp of the current event, and no DateSeparator is inserted.
- return panel.getTilesForEvent(e, e, e === lastShownEvent, isGrouped, this.nextEvent, this.nextEventTile);
+ return panel.getTilesForEvent(
+ i === 0 ? this.prevEvent : this.events[i - 1],
+ e,
+ e === lastShownEvent,
+ isGrouped,
+ this.nextEvent,
+ this.nextEventTile,
+ );
  }).reduce((a, b) => a.concat(b), []);
 
  if (eventTiles.length === 0) {
@@ -1323,7 +1316,7 @@ class MainGrouper extends BaseGrouper {
  events={this.events}
  onToggle={panel.onHeightChanged} // Update scroll state
  startExpanded={highlightInSummary}
- layout={this.layout}
+ layout={this.panel.props.layout}
  >
  { eventTiles }
  </EventListSummary>,
@@ -1337,7 +1330,7 @@ class MainGrouper extends BaseGrouper {
  }
 
  public getNewPrevEvent(): MatrixEvent {
- return this.events[0];
+ return this.events[this.events.length - 1];
  }
 }
 

src/components/views/elements/EventListSummary.tsx

@@ -31,6 +31,7 @@ import { jsxJoin } from '../../../utils/ReactUtils';
 import { Layout } from '../../../settings/enums/Layout';
 import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
 import AccessibleButton from './AccessibleButton';
+import RoomContext from "../../../contexts/RoomContext";
 
 const onPinnedMessagesClick = (): void => {
  RightPanelStore.instance.setCard({ phase: RightPanelPhases.PinnedMessages }, false);
@@ -80,6 +81,9 @@ const SEP = ",";
 
 @replaceableComponent("views.elements.EventListSummary")
 export default class EventListSummary extends React.Component<IProps> {
+ static contextType = RoomContext;
+ public context!: React.ContextType<typeof RoomContext>;
+
  static defaultProps = {
  summaryLength: 1,
  threshold: 3,
@@ -477,25 +481,37 @@ export default class EventListSummary extends React.Component<IProps> {
  const userEvents: Record<string, IUserEvents[]> = {};
  eventsToRender.forEach((e, index) => {
  const type = e.getType();
- const userId = type === EventType.RoomServerAcl ? e.getSender() : e.getStateKey();
+
+ let userId = e.getSender();
+ if (type === EventType.RoomMember) {
+ userId = e.getStateKey();
+ } else if (e.isRedacted()) {
+ userId = e.getUnsigned()?.redacted_because?.sender;
+ }
+
  // Initialise a user's events
  if (!userEvents[userId]) {
  userEvents[userId] = [];
  }
 
- if (e.target && TARGET_AS_DISPLAY_NAME_EVENTS.includes(type as EventType)) {
- latestUserAvatarMember.set(userId, e.target);
- } else if (e.sender) {
- latestUserAvatarMember.set(userId, e.sender);
- }
-
  let displayName = userId;
  if (type === EventType.RoomThirdPartyInvite) {
  displayName = e.getContent().display_name;
+ if (e.sender) {
+ latestUserAvatarMember.set(userId, e.sender);
+ }
+ } else if (e.isRedacted()) {
+ const sender = this.context?.room.getMember(userId);
+ if (sender) {
+ displayName = sender.name;
+ latestUserAvatarMember.set(userId, sender);
+ }
  } else if (e.target && TARGET_AS_DISPLAY_NAME_EVENTS.includes(type as EventType)) {
  displayName = e.target.name;
+ latestUserAvatarMember.set(userId, e.target);
  } else if (e.sender) {
  displayName = e.sender.name;
+ latestUserAvatarMember.set(userId, e.sender);
  }
 
  userEvents[userId].push({

src/utils/EventUtils.ts

@@ -226,6 +226,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent, hideEvent?: boolean):
  !isBubbleMessage &&
  !isLeftAlignedBubbleMessage &&
  eventType !== EventType.RoomMessage &&
+ eventType !== EventType.RoomMessageEncrypted &&
  eventType !== EventType.Sticker &&
  eventType !== EventType.RoomCreate &&
  !M_POLL_START.matches(eventType)