show better error msg after UnkDevDialog

should fix element-hq/element-web#3122

Author: ara4n

src/components/structures/RoomStatusBar.js

@@ -39,8 +39,8 @@ module.exports = React.createClass({
         // the number of messages which have arrived since we've been scrolled up
         numUnreadMessages: React.PropTypes.number,
 
-        // true if there are messages in the room which had errors on send
-        hasUnsentMessages: React.PropTypes.bool,
+        // string to display when there are messages in the room which had errors on send
+        unsentMessageError: React.PropTypes.string,
 
         // this is true if we are fully scrolled-down, and are looking at
         // the end of the live timeline.
@@ -160,7 +160,7 @@ module.exports = React.createClass({
             return STATUS_BAR_EXPANDED;
         } else if (props.tabCompleteEntries) {
             return STATUS_BAR_HIDDEN;
-        } else if (props.hasUnsentMessages) {
+        } else if (props.unsentMessageError) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -288,12 +288,12 @@ module.exports = React.createClass({
             );
         }
 
-        if (this.props.hasUnsentMessages) {
+        if (this.props.unsentMessageError) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
                     <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
                     <div className="mx_RoomStatusBar_connectionLostBar_title">
-                        Some of your messages have not been sent.
+                        { this.props.unsentMessageError }
                     </div>
                     <div className="mx_RoomStatusBar_connectionLostBar_desc">
                         <a className="mx_RoomStatusBar_resend_link"

src/components/structures/RoomView.js

@@ -128,7 +128,7 @@ module.exports = React.createClass({
             draggingFile: false,
             searching: false,
             searchResults: null,
-            hasUnsentMessages: false,
+            unsentMessageError: '',
             callState: null,
             guestsCanJoin: false,
             canPeek: false,
@@ -182,7 +182,7 @@ module.exports = React.createClass({
                     room: room,
                     roomId: result.room_id,
                     roomLoading: !room,
-                    hasUnsentMessages: this._hasUnsentMessages(room),
+                    unsentMessageError: this._getUnsentMessageError(room),
                 }, this._onHaveRoom);
             }, (err) => {
                 this.setState({
@@ -196,7 +196,7 @@ module.exports = React.createClass({
                 roomId: this.props.roomAddress,
                 room: room,
                 roomLoading: !room,
-                hasUnsentMessages: this._hasUnsentMessages(room),
+                unsentMessageError: this._getUnsentMessageError(room),
             }, this._onHaveRoom);
         }
     },
@@ -397,7 +397,7 @@ module.exports = React.createClass({
             case 'message_sent':
             case 'message_send_cancelled':
                 this.setState({
-                    hasUnsentMessages: this._hasUnsentMessages(this.state.room)
+                    unsentMessageError: this._getUnsentMessageError(this.state.room),
                 });
                 break;
             case 'notifier_enabled':
@@ -636,8 +636,15 @@ module.exports = React.createClass({
         }
     }, 500),
 
-    _hasUnsentMessages: function(room) {
-        return this._getUnsentMessages(room).length > 0;
+    _getUnsentMessageError: function(room) {
+        const unsentMessages = this._getUnsentMessages(room);
+        if (!unsentMessages.length) return "";
+        for (const event of unsentMessages) {
+            if (!event.error || event.error.name !== "UnknownDeviceError") {
+                return "Some of your messages have not been sent.";
+            }
+        }
+        return "Message not sent due to unknown devices being present";
     },
 
     _getUnsentMessages: function(room) {
@@ -1521,7 +1528,7 @@ module.exports = React.createClass({
                 room={this.state.room}
                 tabComplete={this.tabComplete}
                 numUnreadMessages={this.state.numUnreadMessages}
-                hasUnsentMessages={this.state.hasUnsentMessages}
+                unsentMessageError={this.state.unsentMessageError}
                 atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
                 hasActiveCall={inCall}
                 onResendAllClick={this.onResendAllClick}