Merge branch 'develop' into dbkr/sign_out_button

matrix-org · Jul 29, 2024 · 8d846b9 · 8d846b9
2 parents 2a81272 + 4e6b1c8
commit 8d846b9
Show file tree

Hide file tree

Showing 54 changed files with 1,341 additions and 825 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -142,6 +142,7 @@ module.exports = {
                             "!matrix-js-sdk/src/models/read-receipt",
                             "!matrix-js-sdk/src/models/relations-container",
                             "!matrix-js-sdk/src/models/related-relations",
+                            "!matrix-js-sdk/src/matrixrtc",
                         ],
                         message: "Please use matrix-js-sdk/src/matrix instead",
                     },

diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@vector-im/compound-design-tokens": "^1.2.0",
+        "@vector-im/compound-design-tokens": "^1.6.1",
         "@vector-im/compound-web": "^5.4.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
@@ -122,7 +122,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.145.0",
+        "posthog-js": "1.149.1",
         "qrcode": "1.5.3",
         "re-resizable": "^6.9.0",
         "react": "17.0.2",
@@ -197,7 +197,7 @@
         "@typescript-eslint/parser": "^7.0.0",
         "axe-core": "4.9.1",
         "babel-jest": "^29.0.0",
-        "blob-polyfill": "^7.0.0",
+        "blob-polyfill": "^9.0.0",
         "eslint": "8.57.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^9.0.0",
@@ -226,14 +226,14 @@
         "node-fetch": "2",
         "playwright-core": "^1.45.1",
         "postcss-scss": "^4.0.4",
-        "prettier": "3.3.2",
+        "prettier": "3.3.3",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.5.3",
+        "typescript": "5.5.4",
         "web-streams-polyfill": "^4.0.0"
     },
     "peerDependencies": {

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -37,7 +37,7 @@ export default defineConfig({
     },
     testDir: "playwright/e2e",
     outputDir: "playwright/test-results",
-    workers: process.env.CI ? "50%" : 1,
+    workers: 1,
     retries: process.env.CI ? 2 : 0,
     reporter: process.env.CI ? [["blob"], ["github"]] : [["html", { outputFolder: "playwright/html-report" }]],
     snapshotDir: "playwright/snapshots",

diff --git a/playwright/Dockerfile b/playwright/Dockerfile
@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.45.1-jammy
+FROM mcr.microsoft.com/playwright:v1.45.3-jammy
 
 WORKDIR /work/matrix-react-sdk
 VOLUME ["/work/element-web/node_modules"]

diff --git a/playwright/e2e/timeline/timeline.spec.ts b/playwright/e2e/timeline/timeline.spec.ts
@@ -1108,6 +1108,7 @@ test.describe("Timeline", () => {
             // Exclude timestamp and read marker from snapshot
             const screenshotOptions = {
                 mask: [page.locator(".mx_MessageTimestamp")],
+                hideTooltips: true,
                 css: `
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;

diff --git a/playwright/flaky-reporter.ts b/playwright/flaky-reporter.ts
@@ -25,6 +25,13 @@ const REPO = "element-hq/element-web";
 const LABEL = "Z-Flaky-Test";
 const ISSUE_TITLE_PREFIX = "Flaky playwright test: ";
 
+type PaginationLinks = {
+    prev?: string;
+    next?: string;
+    last?: string;
+    first?: string;
+};
+
 class FlakyReporter implements Reporter {
     private flakes = new Set<string>();
 
@@ -35,6 +42,54 @@ class FlakyReporter implements Reporter {
         }
     }
 
+    /**
+     * Parse link header to retrieve pagination links
+     * @see https://docs.github.com/en/rest/using-the-rest-api/using-pagination-in-the-rest-api?apiVersion=2022-11-28#using-link-headers
+     * @param link link header from response or undefined
+     * @returns an empty object if link is undefined otherwise returns a map from type to link
+     */
+    private parseLinkHeader(link: string): PaginationLinks {
+        /**
+         * link looks like:
+         * <https://api.github.com/repositories/1300192/issues?page=2>; rel="prev", <https://api.github.com/repositories/1300192/issues?page=4>;
+         */
+        const map: PaginationLinks = {};
+        if (!link) return map;
+        const matches = link.matchAll(/(<(?<link>.+?)>; rel="(?<type>.+?)")/g);
+        for (const match of matches) {
+            const { link, type } = match.groups;
+            map[type] = link;
+        }
+        return map;
+    }
+
+    /**
+     * Fetch all flaky test issues that were updated since Jan-1-2024
+     * @returns A promise that resolves to a list of issues
+     */
+    async getAllIssues(): Promise<any[]> {
+        const issues = [];
+        const { GITHUB_TOKEN, GITHUB_API_URL } = process.env;
+        // See https://docs.github.com/en/rest/issues/issues?apiVersion=2022-11-28#list-repository-issues
+        let url = `${GITHUB_API_URL}/repos/${REPO}/issues?labels=${LABEL}&state=all&per_page=100&sort=updated&since=2024-01-01`;
+        const headers = {
+            Authorization: `Bearer ${GITHUB_TOKEN}`,
+            Accept: "application / vnd.github + json",
+        };
+        while (url) {
+            // Fetch issues and add to list
+            const issuesResponse = await fetch(url, { headers });
+            const fetchedIssues = await issuesResponse.json();
+            issues.push(...fetchedIssues);
+
+            // Get the next link for fetching more results
+            const linkHeader = issuesResponse.headers.get("Link");
+            const parsed = this.parseLinkHeader(linkHeader);
+            url = parsed.next;
+        }
+        return issues;
+    }
+
     public async onExit(): Promise<void> {
         if (this.flakes.size === 0) {
             console.log("No flakes found");
@@ -49,18 +104,12 @@ class FlakyReporter implements Reporter {
         const { GITHUB_TOKEN, GITHUB_API_URL, GITHUB_SERVER_URL, GITHUB_REPOSITORY, GITHUB_RUN_ID } = process.env;
         if (!GITHUB_TOKEN) return;
 
-        const body = `${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}`;
-
-        const headers = { Authorization: `Bearer ${GITHUB_TOKEN}` };
-        // Fetch all existing issues with the flaky-test label.
-        const issuesRequest = await fetch(
-            `${GITHUB_API_URL}/repos/${REPO}/issues?labels=${LABEL}&state=all&per_page=100&sort=created`,
-            { headers },
-        );
-        const issues = await issuesRequest.json();
+        const issues = await this.getAllIssues();
         for (const flake of this.flakes) {
             const title = ISSUE_TITLE_PREFIX + "`" + flake + "`";
             const existingIssue = issues.find((issue) => issue.title === title);
+            const headers = { Authorization: `Bearer ${GITHUB_TOKEN}` };
+            const body = `${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}`;
 
             if (existingIssue) {
                 console.log(`Found issue ${existingIssue.number} for ${flake}, adding comment...`);

diff --git a/playwright/plugins/homeserver/synapse/index.ts b/playwright/plugins/homeserver/synapse/index.ts
@@ -28,7 +28,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for `matrixdotorg/synapse` image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:9e193236098ae5ff66c9bf79252e318fd561ceb1322d5495780a11d9dbdcfb17";
+const DOCKER_TAG = "develop@sha256:b73edc968e2f21f9e04502526de61fd3e1eeb8fcaa1d962a4de70e81debedec4";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);

diff --git a/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
diff --git a/playwright/tsconfig.json b/playwright/tsconfig.json
@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es2016",
+        "target": "es2018",
         "jsx": "react",
         "lib": ["ESNext", "es2021", "dom", "dom.iterable"],
         "resolveJsonModule": true,

diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
@@ -423,6 +423,8 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
         "mx_EventTile_body": true,
         "mx_EventTile_bigEmoji": emojiBody,
         "markdown-body": isHtmlMessage && !emojiBody,
+        // Override the global `notranslate` class set by the top-level `matrixchat` div.
+        "translate": true,
     });
 
     let emojiBodyElements: JSX.Element[] | undefined;

diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
@@ -586,7 +586,7 @@ export async function restoreFromLocalStorage(opts?: { ignoreGuest?: boolean }):
 
         const pickleKey = (await PlatformPeg.get()?.getPickleKey(userId, deviceId ?? "")) ?? undefined;
         if (pickleKey) {
-            logger.log("Got pickle key");
+            logger.log("Got pickle key for ${userId}|${deviceId}");
         } else {
             logger.log("No pickle key available");
         }
@@ -658,7 +658,7 @@ export async function setLoggedIn(credentials: IMatrixClientCreds): Promise<Matr
             : null;
 
     if (pickleKey) {
-        logger.log("Created pickle key");
+        logger.log(`Created pickle key for ${credentials.userId}|${credentials.deviceId}`);
     } else {
         logger.log("Pickle key not created");
     }

diff --git a/src/Notifier.ts b/src/Notifier.ts
@@ -32,6 +32,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { PermissionChanged as PermissionChangedEvent } from "@matrix-org/analytics-events/types/typescript/PermissionChanged";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import { PosthogAnalytics } from "./PosthogAnalytics";
@@ -505,10 +506,16 @@ class NotifierClass {
      * Some events require special handling such as showing in-app toasts
      */
     private performCustomEventHandling(ev: MatrixEvent): void {
+        const cli = MatrixClientPeg.safeGet();
+        const room = cli.getRoom(ev.getRoomId());
+        const thisUserHasConnectedDevice =
+            room && MatrixRTCSession.callMembershipsForRoom(room).some((m) => m.sender === cli.getUserId());
+
         if (
             EventType.CallNotify === ev.getType() &&
             SettingsStore.getValue("feature_group_calls") &&
-            (ev.getAge() ?? 0) < 10000
+            (ev.getAge() ?? 0) < 10000 &&
+            !thisUserHasConnectedDevice
         ) {
             const content = ev.getContent();
             const roomId = ev.getRoomId();

diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
@@ -28,7 +28,7 @@ import {
     TimelineWindow,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg";
+import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import EventIndexPeg from "../../indexing/EventIndexPeg";

diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications.svg";
+import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 
 import { _t } from "../../languageHandler";
 import { MatrixClientPeg } from "../../MatrixClientPeg";

diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
@@ -19,7 +19,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { EventTimelineSet, Room, Thread } from "matrix-js-sdk/src/matrix";
 import { IconButton, Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads.svg";
+import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 
 import { Icon as MarkAllThreadsReadIcon } from "../../../res/img/element-icons/check-all.svg";
 import BaseCard from "../views/right_panel/BaseCard";

diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
@@ -969,8 +969,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
     private readMarkerTimeout(readMarkerPosition: number | null): number {
         return readMarkerPosition === 0
-            ? this.context?.readMarkerInViewThresholdMs ?? this.state.readMarkerInViewThresholdMs
-            : this.context?.readMarkerOutOfViewThresholdMs ?? this.state.readMarkerOutOfViewThresholdMs;
+            ? (this.context?.readMarkerInViewThresholdMs ?? this.state.readMarkerInViewThresholdMs)
+            : (this.context?.readMarkerOutOfViewThresholdMs ?? this.state.readMarkerOutOfViewThresholdMs);
     }
 
     private async updateReadMarkerOnUserActivity(): Promise<void> {

diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx
@@ -22,7 +22,7 @@ import {
 } from "matrix-js-sdk/src/rendezvous";
 import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
 import { Icon as CheckCircleSolidIcon } from "@vector-im/compound-design-tokens/icons/check-circle-solid.svg";
-import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import { Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
 

diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "react";
 import classNames from "classnames";
 import { IconButton, Text } from "@vector-im/compound-web";
-import { Icon as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
 
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
@@ -143,7 +143,7 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
                                     {header}
                                 </Text>
                             ) : (
-                                header ?? <div className="mx_BaseCard_header_spacer" />
+                                (header ?? <div className="mx_BaseCard_header_spacer" />)
                             )}
                             {closeButton}
                         </div>

diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -37,19 +37,19 @@ import {
     Search,
     Form,
 } from "@vector-im/compound-web";
-import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite.svg";
+import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
 import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
-import { Icon as LinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
-import { Icon as SettingsIcon } from "@vector-im/compound-design-tokens/icons/settings.svg";
+import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
 import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg";
-import { Icon as LeaveIcon } from "@vector-im/compound-design-tokens/icons/leave.svg";
-import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg";
-import { Icon as PollsIcon } from "@vector-im/compound-design-tokens/icons/polls.svg";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg";
+import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
+import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
+import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
 import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
 import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
-import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
-import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
+import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import { Icon as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
 import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 

diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
@@ -35,17 +35,17 @@ import { UserVerificationStatus, VerificationRequest } from "matrix-js-sdk/src/c
 import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { Heading, MenuItem, Text } from "@vector-im/compound-web";
-import { Icon as ChatIcon } from "@vector-im/compound-design-tokens/icons/chat.svg";
-import { Icon as CheckIcon } from "@vector-im/compound-design-tokens/icons/check.svg";
-import { Icon as ShareIcon } from "@vector-im/compound-design-tokens/icons/share.svg";
-import { Icon as MentionIcon } from "@vector-im/compound-design-tokens/icons/mention.svg";
+import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
+import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
+import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
 import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
-import { Icon as BlockIcon } from "@vector-im/compound-design-tokens/icons/block.svg";
-import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
-import { Icon as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
+import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { Icon as ChatProblemIcon } from "@vector-im/compound-design-tokens/icons/chat-problem.svg";
 import { Icon as VisibilityOffIcon } from "@vector-im/compound-design-tokens/icons/visibility-off.svg";
-import { Icon as LeaveIcon } from "@vector-im/compound-design-tokens/icons/leave.svg";
+import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 
 import dis from "../../../dispatcher/dispatcher";
 import Modal from "../../../Modal";

diff --git a/src/components/views/room_settings/RoomProfileSettings.tsx b/src/components/views/room_settings/RoomProfileSettings.tsx
@@ -253,7 +253,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
                         avatar={
                             this.state.avatarRemovalPending
                                 ? undefined
-                                : this.state.avatarFile ?? this.state.originalAvatarUrl ?? undefined
+                                : (this.state.avatarFile ?? this.state.originalAvatarUrl ?? undefined)
                         }
                         avatarAltText={_t("room_settings|general|avatar_field_label")}
                         disabled={!this.state.canSetAvatar}