Add option to disable grouping in TimelinePanel (#7221)

Author: germain-gg

src/components/structures/MessagePanel.tsx

@@ -179,6 +179,7 @@ interface IProps {
     getRelationsForEvent?(eventId: string, relationType: string, eventType: string): Relations;
 
     hideThreadedMessages?: boolean;
+    disableGrouping?: boolean;
 }
 
 interface IState {
@@ -198,6 +199,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;
 
+    static defaultProps = {
+        disableGrouping: false,
+    };
+
     // opaque readreceipt info for each userId; used by ReadReceiptMarker
     // to manage its animations
     private readonly readReceiptMap: Record<string, object> = {};
@@ -652,7 +657,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             }
 
             for (const Grouper of groupers) {
-                if (Grouper.canStartGroup(this, mxEv)) {
+                if (Grouper.canStartGroup(this, mxEv) && !this.props.disableGrouping) {
                     grouper = new Grouper(
                         this,
                         mxEv,

src/components/structures/ThreadPanel.tsx

@@ -228,6 +228,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                     membersLoaded={true}
                     permalinkCreator={permalinkCreator}
                     tileShape={TileShape.ThreadPanel}
+                    disableGrouping={true}
                 />
             </BaseCard>
         </RoomContext.Provider>

src/components/structures/TimelinePanel.tsx

@@ -134,6 +134,7 @@ interface IProps {
     onPaginationRequest?(timelineWindow: TimelineWindow, direction: string, size: number): Promise<boolean>;
 
     hideThreadedMessages?: boolean;
+    disableGrouping?: boolean;
 }
 
 interface IState {
@@ -223,6 +224,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         className: 'mx_RoomView_messagePanel',
         sendReadReceiptOnLoad: true,
         hideThreadedMessages: true,
+        disableGrouping: false,
     };
 
     private lastRRSentEventId: string = undefined;
@@ -1537,6 +1539,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                 hideThreadedMessages={this.props.hideThreadedMessages}
+                disableGrouping={this.props.disableGrouping}
             />
         );
     }