Merge branch 'develop' into psg-637/session-tile

matrix-org · Aug 8, 2022 · 4bfeb3b · 4bfeb3b
2 parents 8938939 + 7eaed1a
commit 4bfeb3b
Show file tree

Hide file tree

Showing 53 changed files with 1,739 additions and 518 deletions.
diff --git a/.github/workflows/static_analysis.yaml b/.github/workflows/static_analysis.yaml
@@ -74,3 +74,21 @@ jobs:
 
       - name: Run Linter
         run: "yarn run lint:style"
+
+  analyse_dead_code:
+    name: "Analyse Dead Code"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v3
+        with:
+          cache: 'yarn'
+
+      - name: Install Deps
+        run: "scripts/ci/layered.sh"
+
+      - name: Dead Code Analysis
+        run: |
+          cd element-web 
+          yarn run analyse:unused-exports
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,31 @@
+Changes in [3.51.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.51.0) (2022-08-02)
+=====================================================================================================
+
+## ✨ Features
+ * Live location share -  focus on user location on list item click ([\#9051](https://github.com/matrix-org/matrix-react-sdk/pull/9051)). Contributed by @kerryarchibald.
+ * Live location sharing - don't trigger unread counts for beacon location events ([\#9071](https://github.com/matrix-org/matrix-react-sdk/pull/9071)). Contributed by @kerryarchibald.
+ * Support for sending voice messages as replies and in threads ([\#9097](https://github.com/matrix-org/matrix-react-sdk/pull/9097)). Fixes vector-im/element-web#22031.
+ * Add `Reply in thread` button to the right-click message context-menu ([\#9004](https://github.com/matrix-org/matrix-react-sdk/pull/9004)). Fixes vector-im/element-web#22745.
+ * Starred_Messages_Feature_Contd_II/Outreachy ([\#9086](https://github.com/matrix-org/matrix-react-sdk/pull/9086)).
+ *  Use "frequently used emojis" for autocompletion in composer ([\#8998](https://github.com/matrix-org/matrix-react-sdk/pull/8998)). Fixes vector-im/element-web#18978. Contributed by @grimhilt.
+ * Improve clickability of view source event toggle button  ([\#9068](https://github.com/matrix-org/matrix-react-sdk/pull/9068)). Fixes vector-im/element-web#21856. Contributed by @luixxiul.
+ * Improve clickability of "collapse" link button on bubble layout ([\#9037](https://github.com/matrix-org/matrix-react-sdk/pull/9037)). Fixes vector-im/element-web#22864. Contributed by @luixxiul.
+ * Starred_Messages_Feature/Outreachy ([\#8842](https://github.com/matrix-org/matrix-react-sdk/pull/8842)).
+ * Implement Use Case Selection screen ([\#8984](https://github.com/matrix-org/matrix-react-sdk/pull/8984)). Contributed by @justjanne.
+ * Live location share - handle insufficient permissions in location sharing ([\#9047](https://github.com/matrix-org/matrix-react-sdk/pull/9047)). Contributed by @kerryarchibald.
+ * Improve _FilePanel.scss ([\#9031](https://github.com/matrix-org/matrix-react-sdk/pull/9031)). Contributed by @luixxiul.
+ * Improve spotlight accessibility by adding context menus ([\#8907](https://github.com/matrix-org/matrix-react-sdk/pull/8907)). Fixes vector-im/element-web#20875 and vector-im/element-web#22675. Contributed by @justjanne.
+
+## 🐛 Bug Fixes
+ * Replace mask-images with svg components in MessageActionBar ([\#9088](https://github.com/matrix-org/matrix-react-sdk/pull/9088)). Fixes vector-im/element-web#22912. Contributed by @kerryarchibald.
+ * Unbreak in-app permalink tooltips ([\#9087](https://github.com/matrix-org/matrix-react-sdk/pull/9087)). Fixes vector-im/element-web#22874.
+ * Show a back button when viewing a space member ([\#9095](https://github.com/matrix-org/matrix-react-sdk/pull/9095)). Fixes vector-im/element-web#22898.
+ * Align the right edge of info tile lines with normal ones on IRC layout ([\#9058](https://github.com/matrix-org/matrix-react-sdk/pull/9058)). Fixes vector-im/element-web#22871. Contributed by @luixxiul.
+ * Prevent email verification from overriding existing sessions ([\#9075](https://github.com/matrix-org/matrix-react-sdk/pull/9075)). Fixes vector-im/element-web#22881. Contributed by @justjanne.
+ * Fix wrong buttons being used when exploring public rooms ([\#9062](https://github.com/matrix-org/matrix-react-sdk/pull/9062)). Fixes vector-im/element-web#22862.
+ * Re-add padding to generic event list summary on IRC layout ([\#9063](https://github.com/matrix-org/matrix-react-sdk/pull/9063)). Fixes vector-im/element-web#22869. Contributed by @luixxiul.
+ * Joining federated rooms via the spotlight search should no longer cause a "No known servers" error. ([\#9055](https://github.com/matrix-org/matrix-react-sdk/pull/9055)). Fixes vector-im/element-web#22845. Contributed by @Half-Shot.
+
 Changes in [3.49.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.49.0) (2022-07-26)
 =====================================================================================================
 

diff --git a/cypress/e2e/crypto/crypto.spec.ts b/cypress/e2e/crypto/crypto.spec.ts
@@ -57,7 +57,7 @@ const startDMWithBob = function(this: CryptoTestContext) {
 };
 
 const testMessages = function(this: CryptoTestContext) {
-    cy.get(".mx_BasicMessageComposer_input").should("have.focus").type("Hey!{enter}");
+    // check the invite message
     cy.contains(".mx_EventTile_body", "Hey!")
         .closest(".mx_EventTile")
         .should("not.have.descendants", ".mx_EventTile_e2eIcon_warning")
@@ -150,6 +150,11 @@ describe("Cryptography", function() {
     it("creating a DM should work, being e2e-encrypted / user verification", function(this: CryptoTestContext) {
         cy.bootstrapCrossSigning();
         startDMWithBob.call(this);
+        // send first message
+        cy.get(".mx_BasicMessageComposer_input")
+            .click()
+            .should("have.focus")
+            .type("Hey!{enter}");
         checkDMRoom();
         bobJoin.call(this);
         testMessages.call(this);

diff --git a/cypress/e2e/spotlight/spotlight.spec.ts b/cypress/e2e/spotlight/spotlight.spec.ts
@@ -118,10 +118,13 @@ Cypress.Commands.add("startDM", (name: string) => {
         cy.spotlightResults().should("have.length", 1);
         cy.spotlightResults().eq(0).should("contain", name);
         cy.spotlightResults().eq(0).click();
-    }).then(() => {
-        cy.roomHeaderName().should("contain", name);
-        cy.get(".mx_RoomSublist[aria-label=People]").should("contain", name);
     });
+    // send first message to start DM
+    cy.get(".mx_BasicMessageComposer_input")
+        .should("have.focus")
+        .type("Hey!{enter}");
+    cy.contains(".mx_EventTile_body", "Hey!");
+    cy.get(".mx_RoomSublist[aria-label=People]").should("contain", name);
 });
 
 describe("Spotlight", () => {
@@ -324,11 +327,19 @@ describe("Spotlight", () => {
             cy.spotlightResults().should("have.length", 1);
             cy.spotlightResults().eq(0).should("contain", bot2Name);
             cy.spotlightResults().eq(0).click();
-        }).then(() => {
-            cy.roomHeaderName().should("contain", bot2Name);
-            cy.get(".mx_RoomSublist[aria-label=People]").should("contain", bot2Name);
         });
 
+        // Send first message to actually start DM
+        cy.roomHeaderName().should("contain", bot2Name);
+        cy.get(".mx_BasicMessageComposer_input")
+            .click()
+            .should("have.focus")
+            .type("Hey!{enter}");
+
+        // Assert DM exists by checking for the first message and the room being in the room list
+        cy.contains(".mx_EventTile_body", "Hey!");
+        cy.get(".mx_RoomSublist[aria-label=People]").should("contain", bot2Name);
+
         // Invite BotBob into existing DM with ByteBot
         cy.getDmRooms(bot2.getUserId()).then(dmRooms => dmRooms[0])
             .then(groupDmId => cy.inviteUser(groupDmId, bot1.getUserId()))

diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
@@ -57,12 +57,12 @@ const expectAvatar = (e: JQuery<HTMLElement>, avatarUrl: string): void => {
     });
 };
 
-const sendEvent = (roomId: string): Chainable<ISendEventResponse> => {
+const sendEvent = (roomId: string, html = false): Chainable<ISendEventResponse> => {
     return cy.sendEvent(
         roomId,
         null,
         "m.room.message" as EventType,
-        MessageEvent.from("Message").serialize().content,
+        MessageEvent.from("Message", html ? "<b>Message</b>" : undefined).serialize().content,
     );
 };
 
@@ -261,6 +261,18 @@ describe("Timeline", () => {
             // Make sure "collapse" link button worked
             cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]");
         });
+
+        it("should highlight search result words regardless of formatting", () => {
+            sendEvent(roomId);
+            sendEvent(roomId, true);
+            cy.visit("/#/room/" + roomId);
+
+            cy.get(".mx_RoomHeader_searchButton").click();
+            cy.get(".mx_SearchBar_input input").type("Message{enter}");
+
+            cy.get(".mx_EventTile:not(.mx_EventTile_contextual)").find(".mx_EventTile_searchHighlight").should("exist");
+            cy.get(".mx_RoomView_searchResultsPanel").percySnapshotElement("Highlighted search results");
+        });
     });
 
     describe("message sending", () => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.49.0",
+  "version": "3.51.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -93,7 +93,7 @@
     "maplibre-gl": "^1.15.2",
     "matrix-encrypt-attachment": "^1.0.3",
     "matrix-events-sdk": "^0.0.1-beta.7",
-    "matrix-js-sdk": "19.2.0-rc.1",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^0.1.0-beta.18",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
@@ -39,6 +39,7 @@
 @import "./structures/_GenericErrorPage.pcss";
 @import "./structures/_HeaderButtons.pcss";
 @import "./structures/_HomePage.pcss";
+@import "./structures/_LargeLoader.pcss";
 @import "./structures/_LeftPanel.pcss";
 @import "./structures/_MainSplit.pcss";
 @import "./structures/_MatrixChat.pcss";

diff --git a/res/css/structures/_LargeLoader.pcss b/res/css/structures/_LargeLoader.pcss
@@ -0,0 +1,37 @@
+/*
+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_LargeLoader {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .mx_Spinner {
+        flex: unset;
+        height: auto;
+        margin-bottom: 32px;
+        margin-top: 33vh;
+    }
+
+    .mx_LargeLoader_text {
+        font-size: 24px;
+        font-weight: 600;
+        padding: 0 16px;
+        position: relative;
+        text-align: center;
+    }
+}
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
@@ -183,6 +183,10 @@ limitations under the License.
     box-sizing: border-box;
 }
 
+.mx_RoomView--local .mx_ScrollPanel .mx_RoomView_MessageList {
+    justify-content: center;
+}
+
 .mx_RoomView_MessageList li {
     clear: both;
 }

diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
@@ -470,40 +470,38 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
     }
 
     let strippedBody: string;
-    let safeBody: string;
-    let isDisplayedWithHtml: boolean;
-    // XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying
-    // to highlight HTML tags themselves.  However, this does mean that we don't highlight textnodes which
-    // are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted
-    // by an attempt to search for 'foobar'.  Then again, the search query probably wouldn't work either
+    let safeBody: string; // safe, sanitised HTML, preferred over `strippedBody` which is fully plaintext
+
     try {
-        if (highlights && highlights.length > 0) {
-            const highlighter = new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink);
-            const safeHighlights = highlights
-                // sanitizeHtml can hang if an unclosed HTML tag is thrown at it
-                // A search for `<foo` will make the browser crash
-                // an alternative would be to escape HTML special characters
-                // but that would bring no additional benefit as the highlighter
-                // does not work with those special chars
-                .filter((highlight: string): boolean => !highlight.includes("<"))
-                .map((highlight: string): string => sanitizeHtml(highlight, sanitizeParams));
-            // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure.
-            sanitizeParams.textFilter = function(safeText) {
-                return highlighter.applyHighlights(safeText, safeHighlights).join('');
-            };
-        }
+        // sanitizeHtml can hang if an unclosed HTML tag is thrown at it
+        // A search for `<foo` will make the browser crash an alternative would be to escape HTML special characters
+        // but that would bring no additional benefit as the highlighter does not work with those special chars
+        const safeHighlights = highlights
+            ?.filter((highlight: string): boolean => !highlight.includes("<"))
+            .map((highlight: string): string => sanitizeHtml(highlight, sanitizeParams));
 
         let formattedBody = typeof content.formatted_body === 'string' ? content.formatted_body : null;
         const plainBody = typeof content.body === 'string' ? content.body : "";
 
         if (opts.stripReplyFallback && formattedBody) formattedBody = stripHTMLReply(formattedBody);
         strippedBody = opts.stripReplyFallback ? stripPlainReply(plainBody) : plainBody;
-
         bodyHasEmoji = mightContainEmoji(isFormattedBody ? formattedBody : plainBody);
 
-        // Only generate safeBody if the message was sent as org.matrix.custom.html
+        const highlighter = safeHighlights?.length
+            ? new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink)
+            : null;
+
         if (isFormattedBody) {
-            isDisplayedWithHtml = true;
+            if (highlighter) {
+                // XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying
+                // to highlight HTML tags themselves. However, this does mean that we don't highlight textnodes which
+                // are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted
+                // by an attempt to search for 'foobar'.  Then again, the search query probably wouldn't work either
+                // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure.
+                sanitizeParams.textFilter = function(safeText) {
+                    return highlighter.applyHighlights(safeText, safeHighlights).join('');
+                };
+            }
 
             safeBody = sanitizeHtml(formattedBody, sanitizeParams);
             const phtml = cheerio.load(safeBody, {
@@ -533,12 +531,14 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
             if (bodyHasEmoji) {
                 safeBody = formatEmojis(safeBody, true).join('');
             }
+        } else if (highlighter) {
+            safeBody = highlighter.applyHighlights(plainBody, safeHighlights).join('');
         }
     } finally {
         delete sanitizeParams.textFilter;
     }
 
-    const contentBody = isDisplayedWithHtml ? safeBody : strippedBody;
+    const contentBody = safeBody ?? strippedBody;
     if (opts.returnString) {
         return contentBody;
     }
@@ -576,11 +576,11 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
     });
 
     let emojiBodyElements: JSX.Element[];
-    if (!isDisplayedWithHtml && bodyHasEmoji) {
+    if (!safeBody && bodyHasEmoji) {
         emojiBodyElements = formatEmojis(strippedBody, false) as JSX.Element[];
     }
 
-    return isDisplayedWithHtml ?
+    return safeBody ?
         <span
             key="body"
             ref={opts.ref}

diff --git a/src/components/structures/LargeLoader.tsx b/src/components/structures/LargeLoader.tsx
@@ -0,0 +1,37 @@
+/*
+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.
+*/
+
+import React from "react";
+
+import Spinner from "../views/elements/Spinner";
+
+interface LargeLoaderProps {
+    text: string;
+}
+
+/**
+ * Loader component that displays a (almost centered) spinner and loading message.
+ */
+export const LargeLoader: React.FC<LargeLoaderProps> = ({ text }) => {
+    return (
+        <div className="mx_LargeLoader">
+            <Spinner w={45} h={45} />
+            <div className="mx_LargeLoader_text">
+                { text }
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
@@ -23,8 +23,8 @@ import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { Relations } from "matrix-js-sdk/src/models/relations";
 import { logger } from 'matrix-js-sdk/src/logger';
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
-import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
 import { M_BEACON_INFO } from 'matrix-js-sdk/src/@types/beacon';
+import { isSupportedReceiptType } from "matrix-js-sdk/src/utils";
 
 import shouldHideEvent from '../../shouldHideEvent';
 import { wantsDateSeparator } from '../../DateUtils';
@@ -828,7 +828,11 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
         const receipts: IReadReceiptProps[] = [];
         room.getReceiptsForEvent(event).forEach((r) => {
-            if (!r.userId || ![ReceiptType.Read, ReceiptType.ReadPrivate].includes(r.type) || r.userId === myUserId) {
+            if (
+                !r.userId ||
+                !isSupportedReceiptType(r.type) ||
+                r.userId === myUserId
+            ) {
                 return; // ignore non-read receipts and receipts from self.
             }
             if (MatrixClientPeg.get().isUserIgnored(r.userId)) {