Merge remote-tracking branch 'origin/develop' into feat/add-link-rich…

…-text-editor

.prettierignore

@@ -14,3 +14,6 @@ package-lock.json
 yarn.lock
 
 /src/i18n/strings
+
+# This file is owned, parsed, and generated by allchange, which doesn't comply with prettier
+/CHANGELOG.md

cypress/e2e/polls/polls.spec.ts

@@ -77,6 +77,7 @@ describe("Polls", () => {
     };
 
     beforeEach(() => {
+        cy.enableLabsFeature("feature_threadstable");
         cy.window().then((win) => {
             win.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
         });

cypress/e2e/threads/threads.spec.ts

@@ -19,10 +19,17 @@ limitations under the License.
 import { SynapseInstance } from "../../plugins/synapsedocker";
 import { MatrixClient } from "../../global";
 
+function markWindowBeforeReload(): void {
+    // mark our window object to "know" when it gets reloaded
+    cy.window().then((w) => (w.beforeReload = true));
+}
+
 describe("Threads", () => {
     let synapse: SynapseInstance;
 
     beforeEach(() => {
+        // Default threads to ON for this spec
+        cy.enableLabsFeature("feature_threadstable");
         cy.window().then((win) => {
             win.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
         });
@@ -37,6 +44,35 @@ describe("Threads", () => {
         cy.stopSynapse(synapse);
     });
 
+    it("should reload when enabling threads beta", () => {
+        markWindowBeforeReload();
+
+        // Turn off
+        cy.openUserSettings("Labs").within(() => {
+            // initially the new property is there
+            cy.window().should("have.prop", "beforeReload", true);
+
+            cy.leaveBeta("Threaded messages");
+            cy.wait(1000);
+            // after reload the property should be gone
+            cy.window().should("not.have.prop", "beforeReload");
+        });
+
+        cy.get(".mx_MatrixChat", { timeout: 15000 }); // wait for the app
+        markWindowBeforeReload();
+
+        // Turn on
+        cy.openUserSettings("Labs").within(() => {
+            // initially the new property is there
+            cy.window().should("have.prop", "beforeReload", true);
+
+            cy.joinBeta("Threaded messages");
+            cy.wait(1000);
+            // after reload the property should be gone
+            cy.window().should("not.have.prop", "beforeReload");
+        });
+    });
+
     it("should be usable for a conversation", () => {
         let bot: MatrixClient;
         cy.getBot(synapse, {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "matrix-react-sdk",
-    "version": "3.62.0",
+    "version": "3.63.0",
     "description": "SDK for matrix.org using React",
     "author": "matrix.org",
     "repository": {
@@ -134,7 +134,7 @@
         "@babel/register": "^7.12.10",
         "@babel/traverse": "^7.12.12",
         "@casualbot/jest-sonar-reporter": "^2.2.5",
-        "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+        "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
         "@peculiar/webcrypto": "^1.4.1",
         "@percy/cli": "^1.11.0",
         "@percy/cypress": "^3.1.2",

res/css/_components.pcss

@@ -30,6 +30,7 @@
 @import "./components/views/location/_ZoomButtons.pcss";
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
+@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
 @import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";
 @import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";

res/css/components/views/settings/devices/_CurrentDeviceSection.pcss

@@ -0,0 +1,20 @@
+/*
+Copyright 2022 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CurrentDeviceSection_deviceDetails {
+    // align with text of session tile
+    margin-left: 56px;
+}

res/css/components/views/settings/devices/_DeviceDetails.pcss

@@ -19,8 +19,6 @@ limitations under the License.
     flex-direction: column;
     box-sizing: border-box;
 
-    width: 100%;
-
     margin-top: $spacing-16;
     padding: $spacing-24;
     border-radius: 8px;

res/css/components/views/settings/devices/_FilteredDeviceList.pcss

@@ -50,3 +50,8 @@ limitations under the License.
     flex-direction: row;
     gap: $spacing-8;
 }
+
+.mx_FilteredDeviceList_deviceDetails {
+    // align with text of session tile
+    margin-left: 88px;
+}

res/css/views/elements/_FacePile.pcss

@@ -30,7 +30,7 @@ limitations under the License.
         }
 
         .mx_BaseAvatar_image {
-            border: 1px solid $background;
+            border: 1px solid var(--facepile-background, $background);
         }
 
         .mx_BaseAvatar_initial {

res/css/views/messages/_CallEvent.pcss

@@ -29,49 +29,70 @@ limitations under the License.
     border-radius: 8px;
 
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     gap: $spacing-8;
 
-    .mx_CallEvent_title {
-        font-size: $font-15px;
-        line-height: 24px; /* in px to match the avatar */
+    > .mx_BaseAvatar,
+    > .mx_Icon {
+        align-self: flex-start;
     }
 
-    &.mx_CallEvent_inactive .mx_CallEvent_title::before {
-        display: inline-block;
-        vertical-align: middle;
-        content: "";
-        background-color: $secondary-content;
-        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
-        mask-size: 16px;
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
+    > .mx_Icon {
+        padding: 0;
+        margin: $spacing-4 0;
+        color: $secondary-content;
     }
 
-    &.mx_CallEvent_active .mx_CallEvent_title {
-        font-weight: 600;
+    .mx_LiveContentSummary {
+        font-size: $font-12px;
     }
 
-    > .mx_BaseAvatar {
-        align-self: flex-start;
-    }
+    --facepile-background: $system;
+}
 
-    > .mx_CallEvent_infoRows {
-        flex-grow: 1;
+.mx_CallEvent_title {
+    font-size: $font-15px;
+    line-height: 24px; /* in px to match the avatar */
+}
 
-        display: flex;
-        flex-direction: column;
-        gap: $spacing-4;
-    }
+.mx_CallEvent_inactive .mx_CallEvent_title::before {
+    display: inline-block;
+    vertical-align: middle;
+    content: "";
+    background-color: $secondary-content;
+    mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+    mask-size: 16px;
+    width: 16px;
+    height: 16px;
+    margin-right: $spacing-8;
+}
 
-    > .mx_CallDuration {
-        padding: $spacing-4;
-    }
+.mx_CallEvent_active .mx_CallEvent_title {
+    font-weight: $font-semi-bold;
+}
 
-    > .mx_CallEvent_button {
-        box-sizing: border-box;
-        min-width: 120px;
-    }
+.mx_CallEvent_columns {
+    flex-grow: 1;
+    display: flex;
+    gap: $spacing-12;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mx_TimelineCard .mx_CallEvent_columns {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $spacing-8;
+}
+
+.mx_CallEvent_details {
+    flex-grow: 1;
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.mx_CallEvent_button {
+    box-sizing: border-box;
+    min-width: 120px;
 }

res/css/views/voip/_CallView.pcss

@@ -46,6 +46,8 @@ limitations under the License.
         padding: $spacing-12;
         color: $call-lobby-primary-content;
         background-color: $call-lobby-background;
+
+        --facepile-background: $call-lobby-background;
         border-radius: 8px;
 
         display: flex;
@@ -57,10 +59,6 @@ limitations under the License.
         .mx_FacePile {
             width: fit-content;
             margin: $spacing-8 auto 0;
-
-            .mx_FacePile_faces .mx_BaseAvatar_image {
-                border-color: $call-lobby-background;
-            }
         }
 
         .mx_CallView_preview {

src/Rooms.ts

@@ -57,42 +57,47 @@ export function guessAndSetDMRoom(room: Room, isDirect: boolean): Promise<void>
 /**
  * Marks or unmarks the given room as being as a DM room.
  * @param {string} roomId The ID of the room to modify
- * @param {string} userId The user ID of the desired DM
- room target user or null to un-mark
- this room as a DM room
+ * @param {string | null} userId The user ID of the desired DM room target user or
+ *                        null to un-mark this room as a DM room
  * @returns {object} A promise
  */
-export async function setDMRoom(roomId: string, userId: string): Promise<void> {
+export async function setDMRoom(roomId: string, userId: string | null): Promise<void> {
     if (MatrixClientPeg.get().isGuest()) return;
 
     const mDirectEvent = MatrixClientPeg.get().getAccountData(EventType.Direct);
-    let dmRoomMap = {};
+    const currentContent = mDirectEvent?.getContent() || {};
 
-    if (mDirectEvent !== undefined) dmRoomMap = { ...mDirectEvent.getContent() }; // copy as we will mutate
+    const dmRoomMap = new Map(Object.entries(currentContent));
+    let modified = false;
 
     // remove it from the lists of any others users
     // (it can only be a DM room for one person)
-    for (const thisUserId of Object.keys(dmRoomMap)) {
-        const roomList = dmRoomMap[thisUserId];
+    for (const thisUserId of dmRoomMap.keys()) {
+        const roomList = dmRoomMap.get(thisUserId) || [];
 
         if (thisUserId != userId) {
             const indexOfRoom = roomList.indexOf(roomId);
             if (indexOfRoom > -1) {
                 roomList.splice(indexOfRoom, 1);
+                modified = true;
             }
         }
     }
 
     // now add it, if it's not already there
     if (userId) {
-        const roomList = dmRoomMap[userId] || [];
+        const roomList = dmRoomMap.get(userId) || [];
         if (roomList.indexOf(roomId) == -1) {
             roomList.push(roomId);
+            modified = true;
         }
-        dmRoomMap[userId] = roomList;
+        dmRoomMap.set(userId, roomList);
     }
 
-    await MatrixClientPeg.get().setAccountData(EventType.Direct, dmRoomMap);
+    // prevent unnecessary calls to setAccountData
+    if (!modified) return;
+
+    await MatrixClientPeg.get().setAccountData(EventType.Direct, Object.fromEntries(dmRoomMap));
 }
 
 /**

src/components/structures/TimelinePanel.tsx

@@ -1637,7 +1637,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         let i = events.length - 1;
         let userMembership = "leave";
         for (; i >= 0; i--) {
-            const timeline = room.getTimelineForEvent(events[i].getId());
+            const timeline = this.props.timelineSet.getTimelineForEvent(events[i].getId()!);
             if (!timeline) {
                 // Somehow, it seems to be possible for live events to not have
                 // a timeline, even though that should not happen. :(

src/components/views/elements/PollCreateDialog.tsx

@@ -138,7 +138,7 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
         const pollStart = PollStartEvent.from(
             this.state.question.trim(),
             this.state.options.map((a) => a.trim()).filter((a) => !!a),
-            this.state.kind,
+            this.state.kind.name,
         ).serialize();
 
         if (!this.props.editingMxEvent) {