Merge branch 'develop' into staging

Author: RiotRobot

.github/workflows/pull_request.yaml

@@ -6,7 +6,5 @@ concurrency: ${{ github.workflow }}-${{ github.event.pull_request.head.ref }}
 jobs:
     action:
         uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
-        with:
-            labels: "T-Defect,T-Enhancement,T-Task"
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

package.json

@@ -111,7 +111,7 @@
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "^2.3.2",
+        "sanitize-html": "2.8.0",
         "tar-js": "^0.3.0",
         "ua-parser-js": "^1.0.2",
         "url": "^0.11.0",
@@ -167,9 +167,8 @@
         "@types/react": "17.0.49",
         "@types/react-beautiful-dnd": "^13.0.0",
         "@types/react-dom": "17.0.17",
-        "@types/react-test-renderer": "^17.0.1",
         "@types/react-transition-group": "^4.4.0",
-        "@types/sanitize-html": "^2.3.1",
+        "@types/sanitize-html": "2.8.0",
         "@types/tar-js": "^0.3.2",
         "@types/ua-parser-js": "^0.7.36",
         "@types/zxcvbn": "^4.4.0",
@@ -212,7 +211,6 @@
         "postcss-scss": "^4.0.4",
         "prettier": "2.8.0",
         "raw-loader": "^4.0.2",
-        "react-test-renderer": "^17.0.2",
         "rimraf": "^3.0.2",
         "stylelint": "^14.9.1",
         "stylelint-config-prettier": "^9.0.4",

res/css/views/elements/_CopyableText.pcss

@@ -38,9 +38,12 @@ limitations under the License.
         cursor: pointer;
         margin-left: 20px;
         display: block;
+        /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
+        position: sticky;
+        right: 0;
         /* center to first line */
-        position: relative;
         top: 0.15em;
+        background-color: $background;
 
         &::before {
             content: "";

res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss

@@ -28,4 +28,9 @@ limitations under the License.
             margin-bottom: $spacing-16;
         }
     }
+
+    /* prevent the access token from overflowing the text box */
+    div .mx_CopyableText {
+        overflow: scroll;
+    }
 }

src/components/views/beacon/BeaconViewDialog.tsx

@@ -158,12 +158,12 @@ const BeaconViewDialog: React.FC<IProps> = ({ initialFocusedBeacon, roomId, matr
                 )}
                 {mapDisplayError && <MapError error={mapDisplayError.message as LocationShareError} isMinimised />}
                 {!centerGeoUri && !mapDisplayError && (
-                    <MapFallback data-test-id="beacon-view-dialog-map-fallback" className="mx_BeaconViewDialog_map">
+                    <MapFallback data-testid="beacon-view-dialog-map-fallback" className="mx_BeaconViewDialog_map">
                         <span className="mx_BeaconViewDialog_mapFallbackMessage">{_t("No live locations")}</span>
                         <AccessibleButton
                             kind="primary"
                             onClick={onFinished}
-                            data-test-id="beacon-view-dialog-fallback-close"
+                            data-testid="beacon-view-dialog-fallback-close"
                         >
                             {_t("Close")}
                         </AccessibleButton>
@@ -179,7 +179,7 @@ const BeaconViewDialog: React.FC<IProps> = ({ initialFocusedBeacon, roomId, matr
                     <AccessibleButton
                         kind="primary"
                         onClick={() => setSidebarOpen(true)}
-                        data-test-id="beacon-view-dialog-open-sidebar"
+                        data-testid="beacon-view-dialog-open-sidebar"
                         className="mx_BeaconViewDialog_viewListButton"
                     >
                         <LiveLocationIcon height={12} />

src/components/views/messages/DecryptionFailureBody.tsx

@@ -14,14 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
 import { IBodyProps } from "./IBodyProps";
 
+function getErrorMessage(mxEvent?: MatrixEvent): string {
+    return mxEvent?.isEncryptedDisabledForUnverifiedDevices
+        ? _t("The sender has blocked you from receiving this message")
+        : _t("Unable to decrypt message");
+}
+
 // A placeholder element for messages that could not be decrypted
-export default class DecryptionFailureBody extends React.Component<Partial<IBodyProps>> {
-    public render(): ReactNode {
-        return <div className="mx_DecryptionFailureBody mx_EventTile_content">{_t("Unable to decrypt message")}</div>;
-    }
+export function DecryptionFailureBody({ mxEvent }: Partial<IBodyProps>): JSX.Element {
+    return <div className="mx_DecryptionFailureBody mx_EventTile_content">{getErrorMessage(mxEvent)}</div>;
 }

src/components/views/messages/MPollBody.tsx

@@ -182,12 +182,14 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
     private addListeners(): void {
         this.state.poll?.on(PollEvent.Responses, this.onResponsesChange);
         this.state.poll?.on(PollEvent.End, this.onRelationsChange);
+        this.state.poll?.on(PollEvent.UndecryptableRelations, this.render.bind(this));
     }
 
     private removeListeners(): void {
         if (this.state.poll) {
             this.state.poll.off(PollEvent.Responses, this.onResponsesChange);
             this.state.poll.off(PollEvent.End, this.onRelationsChange);
+            this.state.poll.off(PollEvent.UndecryptableRelations, this.render.bind(this));
         }
     }
 
@@ -297,7 +299,9 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
         const showResults = poll.isEnded || (disclosed && myVote !== undefined);
 
         let totalText: string;
-        if (poll.isEnded) {
+        if (showResults && poll.undecryptableRelationsCount) {
+            totalText = _t("Due to decryption errors, some votes may not be counted");
+        } else if (poll.isEnded) {
             totalText = _t("Final result based on %(count)s votes", { count: totalVotes });
         } else if (!disclosed) {
             totalText = _t("Results will be visible when the poll is ended");

src/components/views/messages/MPollEndBody.tsx

@@ -21,7 +21,9 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { Icon as PollIcon } from "../../../../res/img/element-icons/room/composer/poll.svg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { _t } from "../../../languageHandler";
 import { textForEvent } from "../../../TextForEvent";
+import { Caption } from "../typography/Caption";
 import { IBodyProps } from "./IBodyProps";
 import MPollBody from "./MPollBody";
 
@@ -105,5 +107,10 @@ export const MPollEndBody = React.forwardRef<any, IBodyProps>(({ mxEvent, ...pro
         );
     }
 
-    return <MPollBody mxEvent={pollStartEvent} {...props} />;
+    return (
+        <div>
+            <Caption>{_t("Ended a poll")}</Caption>
+            <MPollBody mxEvent={pollStartEvent} {...props} />
+        </div>
+    );
 });

src/components/views/messages/MessageEvent.tsx

@@ -41,7 +41,7 @@ import { MPollEndBody } from "./MPollEndBody";
 import MLocationBody from "./MLocationBody";
 import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
-import DecryptionFailureBody from "./DecryptionFailureBody";
+import { DecryptionFailureBody } from "./DecryptionFailureBody";
 import { GetRelationsForEvent, IEventTileOps } from "../rooms/EventTile";
 import { VoiceBroadcastBody, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "../../../voice-broadcast";
 

src/components/views/room_settings/AliasSettings.tsx

@@ -399,7 +399,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
         return (
             <div className="mx_AliasSettings">
                 <SettingsFieldset
-                    data-test-id="published-address-fieldset"
+                    data-testid="published-address-fieldset"
                     legend={_t("Published Addresses")}
                     description={
                         <>
@@ -450,7 +450,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                     />
                 </SettingsFieldset>
                 <SettingsFieldset
-                    data-test-id="local-address-fieldset"
+                    data-testid="local-address-fieldset"
                     legend={_t("Local Addresses")}
                     description={
                         isSpaceRoom