Ask to refresh timeline when historical messages are imported (MSC2716)

Associated matrix-js-sdk PR: matrix-org/matrix-js-sdk#2282

Author: MadLittleMods

res/css/structures/_RoomStatusBar.scss

@@ -145,6 +145,12 @@ limitations under the License.
                     mask-image: url('$(res)/img/element-icons/retry.svg');
                 }
             }
+
+            &.mx_RoomStatusBar_refreshTimelineBtn {
+                &::before {
+                    mask-image: url('$(res)/img/element-icons/retry.svg');
+                }
+            }
         }
 
         .mx_InlineSpinner {

src/components/structures/RoomStatusBar.tsx

@@ -79,6 +79,7 @@ interface IState {
     syncStateData: ISyncStateData;
     unsentMessages: MatrixEvent[];
     isResending: boolean;
+    timelineNeedsRefresh: boolean;
 }
 
 export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
@@ -93,13 +94,16 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
             syncStateData: this.context.getSyncStateData(),
             unsentMessages: getUnsentMessages(this.props.room),
             isResending: false,
+            // TODO: This should be `false`
+            timelineNeedsRefresh: true,
         };
     }
 
     public componentDidMount(): void {
         const client = this.context;
         client.on("sync", this.onSyncStateChange);
         client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+        client.on("Room.historyImportedWithinTimeline", this.onRoomHistoryImportedWithinTimeline);
 
         this.checkSize();
     }
@@ -115,6 +119,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         if (client) {
             client.removeListener("sync", this.onSyncStateChange);
             client.removeListener("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+            client.removeListener("Room.historyImportedWithinTimeline", this.onRoomHistoryImportedWithinTimeline);
         }
     }
 
@@ -142,6 +147,19 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         dis.fire(Action.FocusSendMessageComposer);
     };
 
+    private onRefreshTimelineClick = (): void => {
+        console.log('TODO: Refresh timeline');
+        // TODO: What's the best way to refresh the timeline? Something like
+        // `room.resetLiveTimeline(null, null);` although this just seems to
+        // clear the timeline. I also tried to split out
+        // `scrollbackFromPaginationToken` from the `scrollback` method in to
+        // paginate from the beginning of the room but it's just not right.
+
+        this.setState({
+            timelineNeedsRefresh: false
+        });
+    }
+
     private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
         if (room.roomId !== this.props.room.roomId) return;
         const messages = getUnsentMessages(this.props.room);
@@ -151,6 +169,14 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         });
     };
 
+    private onRoomHistoryImportedWithinTimeline = (markerEv: MatrixEvent, room: Room) => {
+        if (room.roomId !== this.props.room.roomId) return;
+
+        this.setState({
+            timelineNeedsRefresh: true,
+        });
+    };
+
     // Check whether current size is greater than 0, if yes call props.onVisible
     private checkSize(): void {
         if (this.getSize()) {
@@ -166,7 +192,11 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
     private getSize(): number {
         if (this.shouldShowConnectionError()) {
             return STATUS_BAR_EXPANDED;
-        } else if (this.state.unsentMessages.length > 0 || this.state.isResending) {
+        } else if (
+            this.state.unsentMessages.length > 0 ||
+            this.state.isResending ||
+            this.state.timelineNeedsRefresh
+        ) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -182,7 +212,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
             this.state.syncStateData.error &&
             this.state.syncStateData.error.name === 'M_RESOURCE_LIMIT_EXCEEDED',
         );
-        return this.state.syncState === "ERROR" && !errorIsMauError;
+        return (this.state.syncState === "ERROR" && !errorIsMauError);
     }
 
     private getUnsentMessageContent(): JSX.Element {
@@ -306,6 +336,36 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
             return this.getUnsentMessageContent();
         }
 
+        if(this.state.timelineNeedsRefresh) {
+            return (
+                <div className="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages">
+                    <div role="alert">
+                        <div className="mx_RoomStatusBar_unsentBadge">
+                            <img
+                                src={require("../../../res/img/feather-customised/warning-triangle.svg").default}
+                                width="24"
+                                height="24"
+                                title="/!\ "
+                                alt="/!\ " />
+                        </div>
+                        <div>
+                            <div className="mx_RoomStatusBar_unsentTitle">
+                                { _t("History import detected.") }
+                            </div>
+                            <div className="mx_RoomStatusBar_unsentDescription">
+                                { _t("History was just imported somewhere in the room. In order to see the historical messages, refresh your timeline.") }
+                            </div>
+                        </div>
+                        <div className="mx_RoomStatusBar_unsentButtonBar">
+                        <AccessibleButton onClick={this.onRefreshTimelineClick} className="mx_RoomStatusBar_refreshTimelineBtn">
+                            { _t("Refresh timeline") }
+                        </AccessibleButton>
+                        </div>
+                    </div>
+                </div>
+            )
+        }
+
         return null;
     }
 }

src/i18n/strings/en_EN.json

@@ -3042,6 +3042,9 @@
     "You can select all or individual messages to retry or delete": "You can select all or individual messages to retry or delete",
     "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
     "Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
+    "History import detected.": "History import detected.",
+    "History was just imported somewhere in the room. In order to see the historical messages, refresh your timeline.": "History was just imported somewhere in the room. In order to see the historical messages, refresh your timeline.",
+    "Refresh timeline": "Refresh timeline",
     "You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
     "You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?",
     "Search failed": "Search failed",