Redesign "failed to send messages" status bar

res/css/structures/_RoomStatusBar.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomStatusBar {
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
     margin-left: 65px;
     min-height: 50px;
 }
@@ -68,6 +68,99 @@ limitations under the License.
     min-height: 58px;
 }
 
+.mx_RoomStatusBar_unsentMessages {
+    > div[role="alert"] {
+        // cheat some basic alignment
+        display: flex;
+        align-items: center;
+        min-height: 70px;
+        margin: 12px;
+        padding-left: 16px;
+        background-color: $header-panel-bg-color;
+        border-radius: 4px;
+    }
+
+    .mx_RoomStatusBar_unsentBadge {
+        margin-right: 12px;
+
+        .mx_NotificationBadge {
+            // Override sizing from the default badge
+            width: 24px !important;
+            height: 24px !important;
+            border-radius: 24px !important;
+
+            .mx_NotificationBadge_count {
+                font-size: $font-16px !important; // override default
+            }
+        }
+    }
+
+    .mx_RoomStatusBar_unsentTitle {
+        color: $warning-color;
+        font-size: $font-15px;
+    }
+
+    .mx_RoomStatusBar_unsentDescription {
+        font-size: $font-12px;
+    }
+
+    .mx_RoomStatusBar_unsentButtonBar {
+        flex-grow: 1;
+        text-align: right;
+        margin-right: 22px;
+        color: $muted-fg-color;
+
+        .mx_AccessibleButton {
+            padding: 5px 10px;
+            padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
+            display: inline-block;
+            position: relative;
+
+            &:nth-child(2) {
+                border-left: 1px solid $input-darker-bg-color;
+            }
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 10px; // inset for regular button padding
+                background-color: $muted-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+            }
+
+            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
+                mask-image: url('$(res)/img/element-icons/trashcan.svg');
+                width: 12px;
+                height: 16px;
+                top: calc(50% - 8px); // text sizes are dynamic
+            }
+
+            &.mx_RoomStatusBar_unsentResendAllBtn {
+                padding-left: 34px; // 28px from above, but +6px to account for the wider icon
+
+                &::before {
+                    mask-image: url('$(res)/img/element-icons/retry.svg');
+                    width: 18px;
+                    height: 18px;
+                    top: calc(50% - 9px); // text sizes are dynamic
+                }
+            }
+        }
+
+        .mx_InlineSpinner {
+            vertical-align: middle;
+            margin-right: 5px;
+            top: 1px; // just to help the vertical alignment be slightly better
+
+            & + span {
+                margin-right: 10px; // same margin/padding as the rightmost button
+            }
+        }
+    }
+}
+
 .mx_RoomStatusBar_connectionLostBar img {
     padding-left: 10px;
     padding-right: 10px;
@@ -103,7 +196,7 @@ limitations under the License.
 }
 
 .mx_MatrixChat_useCompactLayout {
-    .mx_RoomStatusBar {
+    .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
         min-height: 40px;
     }
 

res/img/element-icons/retry.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58365 3.90848C5.79757 2.94852 7.33285 2.375 9 2.375C12.6817 2.375 15.7112 5.1675 16.086 8.75H17.6314C17.9253 8.75 18.1006 9.07792 17.9376 9.32274L15.6812 12.711C15.5355 12.9297 15.2145 12.9297 15.0688 12.711L12.8124 9.32274C12.6494 9.07792 12.8247 8.75 13.1186 8.75H14.5754C14.2088 5.99798 11.8523 3.875 9 3.875C7.68247 3.875 6.4726 4.32705 5.51407 5.08504C5.45221 5.13396 5.39899 5.17326 5.36001 5.20114C5.34047 5.21513 5.32433 5.22637 5.31229 5.23463L5.29733 5.24482L5.29227 5.24821L5.29037 5.24948L5.28958 5.25L5.28923 5.25023L5.28906 5.25034L5.28898 5.2504L4.875 4.625L5.2889 5.25045C4.94347 5.47904 4.47814 5.38433 4.24955 5.0389C4.02136 4.69408 4.11534 4.22977 4.45929 4.00075L4.4633 3.99802C4.46789 3.99487 4.47605 3.9892 4.48719 3.98123C4.5096 3.9652 4.5433 3.94038 4.58365 3.90848ZM3.42456 10.25H4.88138C5.1753 10.25 5.35061 9.92208 5.18758 9.67726L2.93119 6.28905C2.78553 6.07032 2.46447 6.07032 2.31881 6.28905L0.0624241 9.67726C-0.100613 9.92207 0.0746987 10.25 0.368618 10.25H1.914C2.28878 13.8325 5.31828 16.625 9 16.625C10.7415 16.625 12.3388 15.9992 13.5764 14.9611C13.8938 14.6949 13.9353 14.2219 13.6691 13.9045C13.4029 13.5872 12.9298 13.5457 12.6125 13.8119C11.6349 14.6319 10.376 15.125 9 15.125C6.14769 15.125 3.79123 13.002 3.42456 10.25Z" fill="#737D8C"/>
+</svg>

res/img/element-icons/trashcan.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.857143 14.5C0.857143 15.4491 1.62857 16.5 2.57143 16.5H9.42857C10.3714 16.5 11.1429 15.2542 11.1429 14.3051V5.67692C11.1429 4.72781 10.3714 3.95128 9.42857 3.95128H2.57143C1.62857 3.95128 0.857143 4.72781 0.857143 5.67692V14.5ZM11.1429 1.36282H9L8.39143 0.750218C8.23714 0.59491 8.01429 0.5 7.79143 0.5H4.20857C3.98571 0.5 3.76286 0.59491 3.60857 0.750218L3 1.36282H0.857143C0.385714 1.36282 0 1.75109 0 2.22564C0 2.70019 0.385714 3.08846 0.857143 3.08846H11.1429C11.6143 3.08846 12 2.70019 12 2.22564C12 1.75109 11.6143 1.36282 11.1429 1.36282Z" fill="#737D8C"/>
+</svg>

src/Resend.js

@@ -21,11 +21,11 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
 export default class Resend {
     static resendUnsentEvents(room) {
-        room.getPendingEvents().filter(function(ev) {
+        return Promise.all(room.getPendingEvents().filter(function(ev) {
             return ev.status === EventStatus.NOT_SENT;
-        }).forEach(function(event) {
+        }).map(function(event) {
-            Resend.resend(event);
+            return Resend.resend(event);
-        });
+        }));
     }
 
     static cancelUnsentEvents(room) {
@@ -38,7 +38,7 @@ export default class Resend {
 
     static resend(event) {
         const room = MatrixClientPeg.get().getRoom(event.getRoomId());
-        MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
+        return MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
             dis.dispatch({
                 action: 'message_sent',
                 event: event,

src/components/structures/RoomStatusBar.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2015-2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,10 +20,15 @@ import { _t, _td } from '../../languageHandler';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
-import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
+import {messageForResourceLimitError} from '../../utils/ErrorUtils';
 import {Action} from "../../dispatcher/actions";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {EventStatus} from "matrix-js-sdk/src/models/event";
+import NotificationBadge from "../views/rooms/NotificationBadge";
+import {NotificationColor} from "../../stores/notifications/NotificationColor";
+import {StaticNotificationState} from "../../stores/notifications/StaticNotificationState";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import InlineSpinner from "../views/elements/InlineSpinner";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -76,6 +81,7 @@ export default class RoomStatusBar extends React.Component {
         syncState: MatrixClientPeg.get().getSyncState(),
         syncStateData: MatrixClientPeg.get().getSyncStateData(),
         unsentMessages: getUnsentMessages(this.props.room),
+        isResending: false,
     };
 
     componentDidMount() {
@@ -109,7 +115,10 @@ export default class RoomStatusBar extends React.Component {
     };
 
     _onResendAllClick = () => {
-        Resend.resendUnsentEvents(this.props.room);
+        Resend.resendUnsentEvents(this.props.room).then(() => {
+            this.setState({isResending: false});
+        });
+        this.setState({isResending: true});
         dis.fire(Action.FocusComposer);
     };
 
@@ -120,10 +129,7 @@ export default class RoomStatusBar extends React.Component {
 
     _onRoomLocalEchoUpdated = (event, room, oldEventId, oldStatus) => {
         if (room.roomId !== this.props.room.roomId) return;
-
+        this.setState({unsentMessages: getUnsentMessages(this.props.room)});
-        this.setState({
-            unsentMessages: getUnsentMessages(this.props.room),
-        });
     };
 
     // Check whether current size is greater than 0, if yes call props.onVisible
@@ -141,7 +147,7 @@ export default class RoomStatusBar extends React.Component {
     _getSize() {
         if (this._shouldShowConnectionError()) {
             return STATUS_BAR_EXPANDED;
-        } else if (this.state.unsentMessages.length > 0) {
+        } else if (this.state.unsentMessages.length > 0 || this.state.isResending) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -162,7 +168,6 @@ export default class RoomStatusBar extends React.Component {
 
     _getUnsentMessageContent() {
         const unsentMessages = this.state.unsentMessages;
-        if (!unsentMessages.length) return null;
 
         let title;
 
@@ -206,47 +211,58 @@ export default class RoomStatusBar extends React.Component {
                     "Please <a>contact your service administrator</a> to continue using the service.",
                 ),
             });
-        } else if (
-            unsentMessages.length === 1 &&
-            unsentMessages[0].error &&
-            unsentMessages[0].error.data &&
-            unsentMessages[0].error.data.error
-        ) {
-            title = messageForSendError(unsentMessages[0].error.data) || unsentMessages[0].error.data.error;
         } else {
-            title = _t('%(count)s of your messages have not been sent.', { count: unsentMessages.length });
+            title = _t('Some of your messages have not been sent');
         }
 
-        const content = _t("%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> " +
+        let buttonRow = <>
-            "now. You can also select individual messages to resend or cancel.",
+            <AccessibleButton onClick={this._onCancelAllClick} className="mx_RoomStatusBar_unsentCancelAllBtn">
-            { count: unsentMessages.length },
+                {_t("Delete all")}
-            {
+            </AccessibleButton>
-                'resendText': (sub) =>
+            <AccessibleButton onClick={this._onResendAllClick} className="mx_RoomStatusBar_unsentResendAllBtn">
-                    <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onResendAllClick}>{ sub }</a>,
+                {_t("Retry all")}
-                'cancelText': (sub) =>
+            </AccessibleButton>
-                    <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
+        </>;
-            },
+        if (this.state.isResending) {
-        );
+            buttonRow = <>
+                <InlineSpinner w={20} h={20} />
+                {/* span for css */}
+                <span>{_t("Sending")}</span>
+            </>;
+        }
 
-        return <div className="mx_RoomStatusBar_connectionLostBar">
+        return <>
-            <img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24" height="24" title={_t("Warning")} alt="" />
+            <div className="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages">
+                <div role="alert">
+                    <div className="mx_RoomStatusBar_unsentBadge">
+                        <NotificationBadge
+                            notification={StaticNotificationState.forSymbol("!", NotificationColor.Red)}
+                        />
+                    </div>
                     <div>
-                <div className="mx_RoomStatusBar_connectionLostBar_title">
+                        <div className="mx_RoomStatusBar_unsentTitle">
                             { title }
                         </div>
-                <div className="mx_RoomStatusBar_connectionLostBar_desc">
+                        <div className="mx_RoomStatusBar_unsentDescription">
-                    { content }
+                            { _t("You can select all or individual messages to retry or delete") }
                         </div>
                     </div>
-        </div>;
+                    <div className="mx_RoomStatusBar_unsentButtonBar">
+                        {buttonRow}
+                    </div>
+                </div>
+            </div>
+        </>;
     }
 
-    // return suitable content for the main (text) part of the status bar.
+    render() {
-    _getContent() {
         if (this._shouldShowConnectionError()) {
             return (
+                <div className="mx_RoomStatusBar">
+                    <div role="alert">
                         <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24" height="24" title="/!\ " alt="/!\ " />
+                            <img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24"
+                                 height="24" title="/!\ " alt="/!\ " />
                             <div>
                                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                                     {_t('Connectivity to the server has been lost.')}
@@ -256,25 +272,15 @@ export default class RoomStatusBar extends React.Component {
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </div>
             );
         }
 
-        if (this.state.unsentMessages.length > 0) {
+        if (this.state.unsentMessages.length > 0 || this.state.isResending) {
             return this._getUnsentMessageContent();
         }
 
         return null;
     }
-
-    render() {
-        const content = this._getContent();
-
-        return (
-            <div className="mx_RoomStatusBar">
-                <div role="alert">
-                    { content }
-                </div>
-            </div>
-        );
-    }
 }

src/components/views/rooms/NotificationBadge.tsx

@@ -30,7 +30,7 @@ interface IProps {
      * If true, the badge will show a count if at all possible. This is typically
      * used to override the user's preference for things like room sublists.
      */
-    forceCount: boolean;
+    forceCount?: boolean;
 
     /**
      * The room ID, if any, the badge represents.

src/i18n/strings/en_EN.json

@@ -658,7 +658,6 @@
     "No homeserver URL provided": "No homeserver URL provided",
     "Unexpected error resolving homeserver configuration": "Unexpected error resolving homeserver configuration",
     "Unexpected error resolving identity server configuration": "Unexpected error resolving identity server configuration",
-    "The message you are trying to send is too large.": "The message you are trying to send is too large.",
     "This homeserver has hit its Monthly Active User limit.": "This homeserver has hit its Monthly Active User limit.",
     "This homeserver has been blocked by its administrator.": "This homeserver has been blocked by its administrator.",
     "This homeserver has exceeded one of its resource limits.": "This homeserver has exceeded one of its resource limits.",
@@ -2611,10 +2610,11 @@
     "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.",
     "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.",
     "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.",
-    "%(count)s of your messages have not been sent.|other": "Some of your messages have not been sent.",
+    "Some of your messages have not been sent": "Some of your messages have not been sent",
-    "%(count)s of your messages have not been sent.|one": "Your message was not sent.",
+    "Delete all": "Delete all",
-    "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|other": "<resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.",
+    "Retry all": "Retry all",
-    "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|one": "<resendText>Resend message</resendText> or <cancelText>cancel message</cancelText> now.",
+    "Sending": "Sending",
+    "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.",
     "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?",

src/utils/ErrorUtils.js

@@ -49,12 +49,6 @@ export function messageForResourceLimitError(limitType, adminContact, strings, e
     }
 }
 
-export function messageForSendError(errorData) {
-    if (errorData.errcode === "M_TOO_LARGE") {
-        return _t("The message you are trying to send is too large.");
-    }
-}
-
 export function messageForSyncError(err) {
     if (err.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
         const limitError = messageForResourceLimitError(