diff --git a/.eslintrc.js b/.eslintrc.js index 7c2ebb96df..d133a3c005 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -165,10 +165,31 @@ module.exports = { }, { files: ["test/**/*.{ts,tsx}", "cypress/**/*.ts"], + extends: ["plugin:matrix-org/jest"], rules: { // We don't need super strict typing in test utilities "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-member-accessibility": "off", + + // Jest/Cypress specific + + // Disabled tests are a reality for now but as soon as all of the xits are + // eliminated, we should enforce this. + "jest/no-disabled-tests": "off", + // TODO: There are many tests with invalid expects that should be fixed, + // https://github.com/vector-im/element-web/issues/24709 + "jest/valid-expect": "off", + // TODO: There are many cases to refactor away, + // https://github.com/vector-im/element-web/issues/24710 + "jest/no-conditional-expect": "off", + // Also treat "oldBackendOnly" as a test function. + // Used in some crypto tests. + "jest/no-standalone-expect": [ + "error", + { + additionalTestBlockFunctions: ["beforeAll", "beforeEach", "oldBackendOnly"], + }, + ], }, }, { @@ -176,6 +197,11 @@ module.exports = { parserOptions: { project: ["./cypress/tsconfig.json"], }, + rules: { + // Cypress "promises" work differently - disable some related rules + "jest/valid-expect-in-promise": "off", + "jest/no-done-callback": "off", + }, }, ], settings: { diff --git a/CHANGELOG.md b/CHANGELOG.md index bfd402f79e..3b8428ec02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,50 @@ +Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.67.0) (2023-02-28) +===================================================================================================== + +## ✨ Features + * Fix block code styling in rich text editor ([\#10246](https://github.com/matrix-org/matrix-react-sdk/pull/10246)). Contributed by @alunturner. + * Poll history: fetch more poll history ([\#10235](https://github.com/matrix-org/matrix-react-sdk/pull/10235)). Contributed by @kerryarchibald. + * Sort short/exact emoji matches before longer incomplete matches ([\#10212](https://github.com/matrix-org/matrix-react-sdk/pull/10212)). Fixes vector-im/element-web#23210. Contributed by @grimhilt. + * Poll history: detail screen ([\#10172](https://github.com/matrix-org/matrix-react-sdk/pull/10172)). Contributed by @kerryarchibald. + * Provide a more detailed error message than "No known servers" ([\#6048](https://github.com/matrix-org/matrix-react-sdk/pull/6048)). Fixes vector-im/element-web#13247. Contributed by @aaronraimist. + * Say when a call was answered from a different device ([\#10224](https://github.com/matrix-org/matrix-react-sdk/pull/10224)). + * Widget permissions customizations using module api ([\#10121](https://github.com/matrix-org/matrix-react-sdk/pull/10121)). Contributed by @maheichyk. + * Fix copy button icon overlapping with copyable text ([\#10227](https://github.com/matrix-org/matrix-react-sdk/pull/10227)). Contributed by @Adesh-Pandey. + * Support joining non-peekable rooms via the module API ([\#10154](https://github.com/matrix-org/matrix-react-sdk/pull/10154)). Contributed by @maheichyk. + * The "new login" toast does now display the same device information as in the settings. "No" does now open the device settings. "Yes, it was me" dismisses the toast. ([\#10200](https://github.com/matrix-org/matrix-react-sdk/pull/10200)). + * Do not prompt for a password when doing a „reset all“ after login ([\#10208](https://github.com/matrix-org/matrix-react-sdk/pull/10208)). + * Display "The sender has blocked you from receiving this message" error message instead of "Unable to decrypt message" ([\#10202](https://github.com/matrix-org/matrix-react-sdk/pull/10202)). Contributed by @florianduros. + * Polls: show warning about undecryptable relations ([\#10179](https://github.com/matrix-org/matrix-react-sdk/pull/10179)). Contributed by @kerryarchibald. + * Poll history: fetch last 30 days of polls ([\#10157](https://github.com/matrix-org/matrix-react-sdk/pull/10157)). Contributed by @kerryarchibald. + * Poll history - ended polls list items ([\#10119](https://github.com/matrix-org/matrix-react-sdk/pull/10119)). Contributed by @kerryarchibald. + * Remove threads labs flag and the ability to disable threads ([\#9878](https://github.com/matrix-org/matrix-react-sdk/pull/9878)). Fixes vector-im/element-web#24365. + * Show a success dialog after setting up the key backup ([\#10177](https://github.com/matrix-org/matrix-react-sdk/pull/10177)). Fixes vector-im/element-web#24487. + * Release Sign in with QR out of labs ([\#10066](https://github.com/matrix-org/matrix-react-sdk/pull/10066)). Contributed by @hughns. + * Hide indent button in rte ([\#10149](https://github.com/matrix-org/matrix-react-sdk/pull/10149)). Contributed by @alunturner. + * Add option to find own location in map views ([\#10083](https://github.com/matrix-org/matrix-react-sdk/pull/10083)). + * Render poll end events in timeline ([\#10027](https://github.com/matrix-org/matrix-react-sdk/pull/10027)). Contributed by @kerryarchibald. + +## 🐛 Bug Fixes + * Use the room avatar as a placeholder in calls ([\#10231](https://github.com/matrix-org/matrix-react-sdk/pull/10231)). + * Fix calls showing as 'connecting' after hangup ([\#10223](https://github.com/matrix-org/matrix-react-sdk/pull/10223)). + * Stop access token overflowing the box ([\#10069](https://github.com/matrix-org/matrix-react-sdk/pull/10069)). Fixes vector-im/element-web#24023. Contributed by @sbjaj33. + * Prevent multiple Jitsi calls started at the same time ([\#10183](https://github.com/matrix-org/matrix-react-sdk/pull/10183)). Fixes vector-im/element-web#23009. + * Make localization keys compatible with agglutinative and/or SOV type languages ([\#10159](https://github.com/matrix-org/matrix-react-sdk/pull/10159)). Contributed by @luixxiul. + * Add link to next file in the export ([\#10190](https://github.com/matrix-org/matrix-react-sdk/pull/10190)). Fixes vector-im/element-web#20272. Contributed by @grimhilt. + * Ended poll tiles: add ended the poll message ([\#10193](https://github.com/matrix-org/matrix-react-sdk/pull/10193)). Fixes vector-im/element-web#24579. Contributed by @kerryarchibald. + * Fix accidentally inverted condition for room ordering ([\#10178](https://github.com/matrix-org/matrix-react-sdk/pull/10178)). Fixes vector-im/element-web#24527. Contributed by @justjanne. + * Re-focus the composer on dialogue quit ([\#10007](https://github.com/matrix-org/matrix-react-sdk/pull/10007)). Fixes vector-im/element-web#22832. Contributed by @Ashu999. + * Try to resolve emails before creating a DM ([\#10164](https://github.com/matrix-org/matrix-react-sdk/pull/10164)). + * Disable poll response loading test ([\#10168](https://github.com/matrix-org/matrix-react-sdk/pull/10168)). Contributed by @justjanne. + * Fix email lookup in invite dialog ([\#10150](https://github.com/matrix-org/matrix-react-sdk/pull/10150)). Fixes vector-im/element-web#23353. + * Remove duplicate white space characters from translation keys ([\#10152](https://github.com/matrix-org/matrix-react-sdk/pull/10152)). Contributed by @luixxiul. + * Fix the caption of new sessions manager on Labs settings page for localization ([\#10143](https://github.com/matrix-org/matrix-react-sdk/pull/10143)). Contributed by @luixxiul. + * Prevent start another DM with a user if one already exists ([\#10127](https://github.com/matrix-org/matrix-react-sdk/pull/10127)). Fixes vector-im/element-web#23138. + * Remove white space characters before the horizontal ellipsis ([\#10130](https://github.com/matrix-org/matrix-react-sdk/pull/10130)). Contributed by @luixxiul. + * Fix Selectable Text on 'Delete All' and 'Retry All' Buttons ([\#10128](https://github.com/matrix-org/matrix-react-sdk/pull/10128)). Fixes vector-im/element-web#23232. Contributed by @akshattchhabra. + * Correctly Identify emoticons ([\#10108](https://github.com/matrix-org/matrix-react-sdk/pull/10108)). Fixes vector-im/element-web#19472. Contributed by @adarsh-sgh. + * Remove a redundant white space ([\#10129](https://github.com/matrix-org/matrix-react-sdk/pull/10129)). Contributed by @luixxiul. + Changes in [3.66.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.66.0) (2023-02-14) ===================================================================================================== diff --git a/cypress/e2e/create-room/create-room.spec.ts b/cypress/e2e/create-room/create-room.spec.ts index 72805d5e12..a51c22ef86 100644 --- a/cypress/e2e/create-room/create-room.spec.ts +++ b/cypress/e2e/create-room/create-room.spec.ts @@ -1,5 +1,5 @@ /* -Copyright 2022 The Matrix.org Foundation C.I.C. +Copyright 2022-2023 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. @@ -61,4 +61,31 @@ describe("Create Room", () => { cy.contains(".mx_RoomHeader_nametext", name); cy.contains(".mx_RoomHeader_topic", topic); }); + + it("should create a room with a long room name, which is displayed with ellipsis", () => { + let roomId: string; + const LONG_ROOM_NAME = + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " + + "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " + + "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " + + "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " + + "officia deserunt mollit anim id est laborum."; + + cy.createRoom({ name: LONG_ROOM_NAME }).then((_roomId) => { + roomId = _roomId; + cy.visit("/#/room/" + roomId); + }); + + // Wait until the room name is set + cy.get(".mx_RoomHeader_nametext").contains("Lorem ipsum"); + + // Make sure size of buttons on RoomHeader (except .mx_RoomHeader_name) are specified + // and the buttons are not compressed + // TODO: use a same class name + cy.get(".mx_RoomHeader_button").should("have.css", "height", "32px").should("have.css", "width", "32px"); + cy.get(".mx_HeaderButtons > .mx_RightPanel_headerButton") + .should("have.css", "height", "32px") + .should("have.css", "width", "32px"); + cy.get(".mx_RoomHeader").percySnapshotElement("Room header with a long room name"); + }); }); diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 20f748494a..15b437d621 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -164,7 +164,7 @@ describe("Decryption Failure Bar", () => { cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist"); cy.get(".mx_DecryptionFailureBar").percySnapshotElement( - "DecryptionFailureBar prompts user to open another device, " + "without Resend Key Requests button", + "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button", { widths: [320, 640], }, diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index 07a14533c7..b2537c2cbe 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -20,7 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { MatrixClient } from "../../global"; import Chainable = Cypress.Chainable; -const hideTimestampCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; +const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; describe("Polls", () => { let homeserver: HomeserverInstance; @@ -133,7 +133,7 @@ describe("Polls", () => { .as("pollId"); cy.get("@pollId").then((pollId) => { - getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hideTimestampCSS }); + getPollTile(pollId).percySnapshotElement("Polls Timeline tile - no votes", { percyCSS: hidePercyCSS }); // Bot votes 'Maybe' in the poll botVoteForOption(bot, roomId, pollId, pollParams.options[2]); diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index c6d2c298fe..2cae1a1218 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -356,7 +356,7 @@ describe("Sliding Sync", () => { }); // Regression test for https://github.com/vector-im/element-web/issues/21462 - it("should not cancel replies when permalinks are clicked ", () => { + it("should not cancel replies when permalinks are clicked", () => { cy.get("@roomId").then((roomId) => { // we require a first message as you cannot click the permalink text with the avatar in the way return cy diff --git a/cypress/e2e/spotlight/spotlight.spec.ts b/cypress/e2e/spotlight/spotlight.spec.ts index d9ead17bb3..d8453b9d99 100644 --- a/cypress/e2e/spotlight/spotlight.spec.ts +++ b/cypress/e2e/spotlight/spotlight.spec.ts @@ -24,7 +24,7 @@ import Timeoutable = Cypress.Timeoutable; import Withinable = Cypress.Withinable; import Shadow = Cypress.Shadow; -export enum Filter { +enum Filter { People = "people", PublicRooms = "public_rooms", } @@ -297,27 +297,28 @@ describe("Spotlight", () => { // TODO: We currently can’t test finding rooms on other homeservers/other protocols // We obviously don’t have federation or bridges in cypress tests - /* - const room3Name = "Matrix HQ"; - const room3Id = "#matrix:matrix.org"; - - it("should find unknown public rooms on other homeservers", () => { - cy.openSpotlightDialog().within(() => { - cy.spotlightFilter(Filter.PublicRooms); - cy.spotlightSearch().clear().type(room3Name); - cy.get("[aria-haspopup=true][role=button]").click(); - }).then(() => { - cy.contains(".mx_GenericDropdownMenu_Option--header", "matrix.org") - .next("[role=menuitemradio]") - .click(); - cy.wait(3_600_000); - }).then(() => cy.spotlightDialog().within(() => { - cy.spotlightResults().should("have.length", 1); - cy.spotlightResults().eq(0).should("contain", room3Name); - cy.spotlightResults().eq(0).should("contain", room3Id); - })); + it.skip("should find unknown public rooms on other homeservers", () => { + cy.openSpotlightDialog() + .within(() => { + cy.spotlightFilter(Filter.PublicRooms); + cy.spotlightSearch().clear().type(room3Name); + cy.get("[aria-haspopup=true][role=button]").click(); + }) + .then(() => { + cy.contains(".mx_GenericDropdownMenu_Option--header", "matrix.org") + .next("[role=menuitemradio]") + .click(); + cy.wait(3_600_000); + }) + .then(() => + cy.spotlightDialog().within(() => { + cy.spotlightResults().should("have.length", 1); + cy.spotlightResults().eq(0).should("contain", room3Name); + cy.spotlightResults().eq(0).should("contain", room3Id); + }), + ); }); - */ + it("should find known people", () => { cy.openSpotlightDialog() .within(() => { diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index d946ad34da..b887eb94fa 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -54,9 +54,20 @@ describe("Threads", () => { cy.visit("/#/room/" + roomId); }); + // --MessageTimestamp-color = #acacac = rgb(172, 172, 172) + // See: _MessageTimestamp.pcss + const MessageTimestampColor = "rgb(172, 172, 172)"; + // User sends message cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}"); + // Check the colour of timestamp on the main timeline + cy.get(".mx_RoomView_body .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should( + "have.css", + "color", + MessageTimestampColor, + ); + // Wait for message to send, get its ID and save as @threadId cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot") .invoke("attr", "data-scroll-tokens") @@ -78,6 +89,13 @@ describe("Threads", () => { // User responds in thread cy.get(".mx_ThreadView .mx_BasicMessageComposer_input").type("Test{enter}"); + // Check the colour of timestamp on EventTile in a thread (mx_ThreadView) + cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should( + "have.css", + "color", + MessageTimestampColor, + ); + // User asserts summary was updated correctly cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom"); cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test"); @@ -130,6 +148,10 @@ describe("Threads", () => { cy.get(".mx_ThreadPanel .mx_EventTile_last").within(() => { cy.get(".mx_EventTile_body").should("contain", "Hello Mr. Bot"); cy.get(".mx_ThreadSummary_content").should("contain", "How are things?"); + + // Check the colour of timestamp on thread list + cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor); + // User opens thread via threads list cy.get(".mx_EventTile_line").click(); }); diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index aa5a94a6dd..8cc4b8a093 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -185,9 +185,8 @@ describe("Timeline", () => { .should("have.css", "margin-inline-start", "104px") .should("have.css", "inset-inline-start", "0px"); - // Exclude timestamp from snapshot - const percyCSS = - ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", { percyCSS, }); @@ -213,8 +212,8 @@ describe("Timeline", () => { // Click timestamp to highlight hidden event line cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click(); - // Exclude timestamp from snapshot - const percyCSS = ".mx_RoomView_body .mx_EventTile .mx_MessageTimestamp { visibility: hidden !important; }"; + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; // should not add inline start padding to a hidden event line on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -239,7 +238,11 @@ describe("Timeline", () => { }); }); - it("should click top left of view source event toggle", () => { + it("should click view source event toggle", () => { + // This test checks: + // 1. clickability of top left of view source event toggle + // 2. clickability of view source toggle on IRC layout + sendEvent(roomId); cy.visit("/#/room/" + roomId); cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); @@ -255,8 +258,10 @@ describe("Timeline", () => { }); cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist"); + // 1. clickability of top left of view source event toggle + // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area - cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent") + cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent") .should("exist") .realHover() .within(() => { @@ -264,7 +269,41 @@ describe("Timeline", () => { }); // Make sure the expand toggle worked - cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); + cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("be.visible"); + + // Click again to collapse the source + cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent") + .should("exist") + .realHover() + .within(() => { + cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); + }); + cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("not.exist"); + + // 2. clickability of view source toggle on IRC layout + + // Enable IRC layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + + // Exclude timestamp from snapshot + const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; + + // Hover the view source toggle on IRC layout + cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent") + .should("exist") + .realHover() + .percySnapshotElement("Hovered hidden event line on IRC layout", { percyCSS }); + + // Click view source event toggle + cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent") + .should("exist") + .realHover() + .within(() => { + cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); + }); + + // Make sure the expand toggle worked + cy.get(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded").should("be.visible"); }); it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => { @@ -336,9 +375,8 @@ describe("Timeline", () => { cy.checkA11y(); - // Exclude timestamp from snapshot - const percyCSS = - ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", { percyCSS, widths: [800, 400], diff --git a/cypress/support/percy.ts b/cypress/support/percy.ts index b0f5c9f7c7..9183d5ebf6 100644 --- a/cypress/support/percy.ts +++ b/cypress/support/percy.ts @@ -41,7 +41,9 @@ declare global { Cypress.Commands.add("percySnapshotElement", { prevSubject: "element" }, (subject, name, options) => { if (!options?.allowSpinners) { // Await spinners to vanish - cy.get(".mx_Spinner").should("not.exist"); + cy.get(".mx_Spinner", { log: false }).should("not.exist"); + // But like really no more spinners please + cy.get(".mx_Spinner", { log: false }).should("not.exist"); } cy.percySnapshot(name, { domTransformation: (documentClone) => scope(documentClone, subject.selector), diff --git a/package.json b/package.json index 17b40b5789..f9923fe6e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.66.0", + "version": "3.67.0", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -54,6 +54,10 @@ "test:cypress:open": "cypress open", "coverage": "yarn test --coverage" }, + "resolutions": { + "@types/react-dom": "17.0.19", + "@types/react": "17.0.53" + }, "dependencies": { "@babel/runtime": "^7.12.5", "@matrix-org/analytics-events": "^0.4.0", @@ -92,7 +96,7 @@ "lodash": "^4.17.20", "maplibre-gl": "^2.0.0", "matrix-encrypt-attachment": "^1.0.3", - "matrix-events-sdk": "2.0.0", + "matrix-events-sdk": "0.0.1", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", "matrix-widget-api": "^1.1.1", "minimist": "^1.2.5", @@ -143,7 +147,6 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^14.4.3", - "@types/classnames": "^2.2.11", "@types/commonmark": "^0.27.4", "@types/counterpart": "^0.18.1", "@types/css-font-loading-module": "^0.0.7", @@ -164,9 +167,9 @@ "@types/pako": "^2.0.0", "@types/parse5": "^6.0.0", "@types/qrcode": "^1.3.5", - "@types/react": "17.0.49", + "@types/react": "17.0.53", "@types/react-beautiful-dnd": "^13.0.0", - "@types/react-dom": "17.0.17", + "@types/react-dom": "17.0.19", "@types/react-transition-group": "^4.4.0", "@types/sanitize-html": "2.8.0", "@types/tar-js": "^0.3.2", @@ -191,8 +194,9 @@ "eslint-config-prettier": "^8.5.0", "eslint-plugin-deprecate": "^0.7.0", "eslint-plugin-import": "^2.25.4", + "eslint-plugin-jest": "^27.2.1", "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-matrix-org": "0.10.0", + "eslint-plugin-matrix-org": "1.0.0", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-unicorn": "^45.0.0", @@ -211,10 +215,10 @@ "postcss-scss": "^4.0.4", "prettier": "2.8.0", "raw-loader": "^4.0.2", - "rimraf": "^3.0.2", - "stylelint": "^14.9.1", + "rimraf": "^4.0.0", + "stylelint": "^15.0.0", "stylelint-config-prettier": "^9.0.4", - "stylelint-config-standard": "^29.0.0", + "stylelint-config-standard": "^30.0.0", "stylelint-scss": "^4.2.0", "typescript": "4.9.3", "walk": "^2.3.14" diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 0d56e1b512..6a7bbd197f 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -17,6 +17,7 @@ @import "./components/views/beacon/_ShareLatestLocation.pcss"; @import "./components/views/beacon/_StyledLiveBeaconIcon.pcss"; @import "./components/views/context_menus/_KebabContextMenu.pcss"; +@import "./components/views/dialogs/polls/_PollDetailHeader.pcss"; @import "./components/views/dialogs/polls/_PollListItem.pcss"; @import "./components/views/dialogs/polls/_PollListItemEnded.pcss"; @import "./components/views/elements/_FilterDropdown.pcss"; @@ -135,7 +136,6 @@ @import "./views/dialogs/_FeedbackDialog.pcss"; @import "./views/dialogs/_ForwardDialog.pcss"; @import "./views/dialogs/_GenericFeatureFeedbackDialog.pcss"; -@import "./views/dialogs/_HostSignupDialog.pcss"; @import "./views/dialogs/_IncomingSasDialog.pcss"; @import "./views/dialogs/_InviteDialog.pcss"; @import "./views/dialogs/_JoinRuleDropdown.pcss"; diff --git a/src/components/views/dialogs/IDialogProps.ts b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss similarity index 66% rename from src/components/views/dialogs/IDialogProps.ts rename to res/css/components/views/dialogs/polls/_PollDetailHeader.pcss index b294fdafe1..6f29b6e08f 100644 --- a/src/components/views/dialogs/IDialogProps.ts +++ b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss @@ -1,5 +1,5 @@ /* -Copyright 2020 The Matrix.org Foundation C.I.C. +Copyright 2023 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. @@ -14,6 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -export interface IDialogProps { - onFinished(...args: any): void; +.mx_PollDetailHeader { + // override accessiblebutton style + font-size: $font-15px !important; +} + +.mx_PollDetailHeader_icon { + height: 15px; + width: 15px; + margin-right: $spacing-8; + vertical-align: middle; } diff --git a/res/css/components/views/dialogs/polls/_PollListItem.pcss b/res/css/components/views/dialogs/polls/_PollListItem.pcss index 7b19e67594..d6036fa378 100644 --- a/res/css/components/views/dialogs/polls/_PollListItem.pcss +++ b/res/css/components/views/dialogs/polls/_PollListItem.pcss @@ -16,12 +16,17 @@ limitations under the License. .mx_PollListItem { width: 100%; +} + +.mx_PollListItem_content { + width: 100%; display: grid; justify-content: left; align-items: center; grid-gap: $spacing-8; grid-template-columns: auto auto auto; grid-template-rows: auto; + cursor: pointer; color: $primary-content; } diff --git a/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss b/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss index 6518052ab6..16ea5dcce0 100644 --- a/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss +++ b/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss @@ -16,9 +16,14 @@ limitations under the License. .mx_PollListItemEnded { width: 100%; +} + +.mx_PollListItemEnded_content { + width: 100%; display: flex; flex-direction: column; color: $primary-content; + cursor: pointer; } .mx_PollListItemEnded_title { diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 4e30711730..27a8b2caa2 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -48,6 +48,9 @@ limitations under the License. align-items: center; } +/* See: mx_RoomHeader_button, of which this is a copy. + * TODO: factor out a common component to avoid this duplication. + */ .mx_RightPanel_headerButton { cursor: pointer; flex: 0 0 auto; diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index 08ef8947ee..9c9e1ce529 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -142,12 +142,8 @@ limitations under the License. justify-content: center; } - &.mx_UserMenu_contextMenu_guestPrompts, - &.mx_UserMenu_contextMenu_hostingLink { - padding-top: 0; - } - &.mx_UserMenu_contextMenu_guestPrompts { + padding-top: 0; display: inline-block; > span { @@ -190,10 +186,6 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/roomlist/dnd-cross.svg"); } - .mx_UserMenu_iconHosting::before { - mask-image: url("$(res)/img/element-icons/brands/element.svg"); - } - .mx_UserMenu_iconBell::before { mask-image: url("$(res)/img/element-icons/notifications.svg"); } diff --git a/res/css/views/dialogs/_HostSignupDialog.pcss b/res/css/views/dialogs/_HostSignupDialog.pcss deleted file mode 100644 index 15c383f1e8..0000000000 --- a/res/css/views/dialogs/_HostSignupDialog.pcss +++ /dev/null @@ -1,132 +0,0 @@ -/* -Copyright 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. -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_HostSignupDialog { - width: 90vw; - max-width: 580px; - height: 80vh; - max-height: 600px; - /* Ensure dialog borders are always white as the HostSignupDialog */ - /* does not yet support dark mode or theming in general. */ - /* In the future we might want to pass the theme to the called */ - /* iframe, should some hosting provider have that need. */ - background-color: #ffffff; - - .mx_HostSignupDialog_info { - text-align: center; - - .mx_HostSignupDialog_content_top { - margin-bottom: 24px; - } - - .mx_HostSignupDialog_paragraphs { - text-align: left; - padding-left: 25%; - padding-right: 25%; - } - - .mx_HostSignupDialog_buttons { - margin-bottom: 24px; - display: flex; - justify-content: center; - - button { - padding: 12px; - margin: 0 16px; - } - } - - .mx_HostSignupDialog_footer { - display: flex; - justify-content: center; - align-items: baseline; - - img { - padding-right: 5px; - } - } - } - - iframe { - width: 100%; - height: 100%; - border: none; - background-color: #fff; - min-height: 540px; - } -} - -.mx_HostSignupDialog_text_dark { - color: $primary-content; -} - -.mx_HostSignupDialog_text_light { - color: $secondary-content; -} - -.mx_HostSignup_maximize_button { - mask: url("$(res)/img/element-icons/maximise-expand.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: cover; - width: 14px; - height: 14px; - background-color: $dialog-close-fg-color; - cursor: pointer; - position: absolute; - top: 10px; - right: 10px; -} - -.mx_HostSignup_minimize_button { - mask: url("$(res)/img/element-icons/minimise-collapse.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: cover; - width: 14px; - height: 14px; - background-color: $dialog-close-fg-color; - cursor: pointer; - position: absolute; - top: 10px; - right: 25px; -} - -.mx_HostSignupDialog_minimized { - position: fixed; - bottom: 80px; - right: 26px; - width: 314px; - height: 217px; - overflow: hidden; - - &.mx_Dialog { - padding: 12px; - } - - .mx_Dialog_title { - text-align: left !important; - padding-left: 20px; - font-size: $font-15px; - } - - iframe { - width: 100%; - height: 100%; - border: none; - background-color: #fff; - } -} diff --git a/res/css/views/dialogs/polls/_PollHistoryList.pcss b/res/css/views/dialogs/polls/_PollHistoryList.pcss index ee6f0254f7..be6ca7423a 100644 --- a/res/css/views/dialogs/polls/_PollHistoryList.pcss +++ b/res/css/views/dialogs/polls/_PollHistoryList.pcss @@ -41,10 +41,20 @@ limitations under the License. .mx_PollHistoryList_noResults { height: 100%; width: 100%; + box-sizing: border-box; + padding: 0 $spacing-64; display: flex; + flex-direction: column; align-items: center; justify-content: center; + text-align: center; + + line-height: $font-24px; color: $secondary-content; + + .mx_PollHistoryList_loadMorePolls { + margin-top: $spacing-16; + } } .mx_PollHistoryList_loading { @@ -57,3 +67,7 @@ limitations under the License. margin: auto auto; } } + +.mx_PollHistoryList_loadMorePolls { + width: max-content; +} diff --git a/res/css/views/messages/_MessageTimestamp.pcss b/res/css/views/messages/_MessageTimestamp.pcss index e4e1a475ec..1b94ad3a6f 100644 --- a/res/css/views/messages/_MessageTimestamp.pcss +++ b/res/css/views/messages/_MessageTimestamp.pcss @@ -16,8 +16,9 @@ limitations under the License. .mx_MessageTimestamp { --MessageTimestamp-max-width: 80px; + --MessageTimestamp-color: $event-timestamp-color; - color: $event-timestamp-color; + color: var(--MessageTimestamp-color); font-size: $font-10px; font-variant-numeric: tabular-nums; display: block; /* enable the width setting below */ diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index c1f1daaca1..74d6a3175b 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -130,7 +130,7 @@ limitations under the License. } .mx_MessageTimestamp { - color: $event-timestamp-color; + color: var(--MessageTimestamp-color); /* TODO: check whether needed or not */ } .mx_BaseCard_footer { diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 02ae02fa5e..cc10e97609 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -130,12 +130,17 @@ $irc-line-height: $font-18px; .mx_TextualEvent, .mx_ViewSourceEvent, .mx_MTextBody { - display: inline-block; /* add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo */ padding: var(--EventTile_irc_line-padding-block) 0; } + .mx_EventTile_e2eIcon, + .mx_TextualEvent, + .mx_MTextBody { + display: inline-block; + } + .mx_ReplyTile { .mx_MTextBody { display: -webkit-box; /* Enable -webkit-line-clamp */ diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index c6ab2add22..75f2ee31d0 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -191,12 +191,13 @@ limitations under the License. } .mx_RoomHeader_button { - position: relative; + cursor: pointer; + flex: 0 0 auto; margin-left: 1px; margin-right: 1px; - cursor: pointer; height: 32px; width: 32px; + position: relative; border-radius: 100%; &::before { diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss index 51a213192c..a2c66202a4 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss @@ -88,17 +88,17 @@ limitations under the License. border-radius: 2px; } - code { + code:not(pre *) { font-family: $monospace-font-family !important; background-color: $inlinecode-background-color; border: 1px solid $inlinecode-border-color; border-radius: 4px; padding: $spacing-2; - } - code:empty { - border: unset; - padding: unset; + &:empty { + border: unset; + padding: unset; + } } } diff --git a/res/css/views/settings/_IntegrationManager.pcss b/res/css/views/settings/_IntegrationManager.pcss index f91d3fdd6c..505ccf86c2 100644 --- a/res/css/views/settings/_IntegrationManager.pcss +++ b/res/css/views/settings/_IntegrationManager.pcss @@ -17,6 +17,7 @@ limitations under the License. .mx_IntegrationManager { .mx_Dialog { box-sizing: border-box; + padding: 0; width: 60%; height: 70%; overflow: hidden; diff --git a/src/AddThreepid.ts b/src/AddThreepid.ts index b1ee5795d0..51779042f9 100644 --- a/src/AddThreepid.ts +++ b/src/AddThreepid.ts @@ -184,7 +184,7 @@ export default class AddThreepid { * with a "message" property which contains a human-readable message detailing why * the request failed. */ - public async checkEmailLinkClicked(): Promise<[boolean, IAuthData | Error | null] | undefined> { + public async checkEmailLinkClicked(): Promise<[success?: boolean, result?: IAuthData | Error | null]> { try { if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) { if (this.bind) { @@ -202,7 +202,7 @@ export default class AddThreepid { // The spec has always required this to use UI auth but synapse briefly // implemented it without, so this may just succeed and that's OK. - return; + return [true]; } catch (e) { if (e.httpStatus !== 401 || !e.data || !e.data.flows) { // doesn't look like an interactive-auth failure @@ -213,8 +213,7 @@ export default class AddThreepid { [SSOAuthEntry.PHASE_PREAUTH]: { title: _t("Use Single Sign On to continue"), body: _t( - "Confirm adding this email address by using " + - "Single Sign On to prove your identity.", + "Confirm adding this email address by using Single Sign On to prove your identity.", ), continueText: _t("Single Sign On"), continueKind: "primary", @@ -226,19 +225,16 @@ export default class AddThreepid { continueKind: "primary", }, }; - const { finished } = Modal.createDialog<[boolean, IAuthData | Error | null]>( - InteractiveAuthDialog, - { - title: _t("Add Email Address"), - matrixClient: MatrixClientPeg.get(), - authData: e.data, - makeRequest: this.makeAddThreepidOnlyRequest, - aestheticsForStagePhases: { - [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics, - [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics, - }, + const { finished } = Modal.createDialog(InteractiveAuthDialog, { + title: _t("Add Email Address"), + matrixClient: MatrixClientPeg.get(), + authData: e.data, + makeRequest: this.makeAddThreepidOnlyRequest, + aestheticsForStagePhases: { + [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics, + [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics, }, - ); + }); return finished; } } @@ -260,6 +256,7 @@ export default class AddThreepid { } throw err; } + return []; } /** @@ -333,7 +330,7 @@ export default class AddThreepid { [SSOAuthEntry.PHASE_PREAUTH]: { title: _t("Use Single Sign On to continue"), body: _t( - "Confirm adding this phone number by using " + "Single Sign On to prove your identity.", + "Confirm adding this phone number by using Single Sign On to prove your identity.", ), continueText: _t("Single Sign On"), continueKind: "primary", diff --git a/src/AsyncWrapper.tsx b/src/AsyncWrapper.tsx index e4e12bedfe..4ee10ca22d 100644 --- a/src/AsyncWrapper.tsx +++ b/src/AsyncWrapper.tsx @@ -18,16 +18,16 @@ import React, { ComponentType } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "./languageHandler"; -import { IDialogProps } from "./components/views/dialogs/IDialogProps"; import BaseDialog from "./components/views/dialogs/BaseDialog"; import DialogButtons from "./components/views/elements/DialogButtons"; import Spinner from "./components/views/elements/Spinner"; type AsyncImport = { default: T }; -interface IProps extends IDialogProps { +interface IProps { // A promise which resolves with the real component - prom: Promise>; + prom: Promise | AsyncImport>>; + onFinished(): void; } interface IState { @@ -71,7 +71,7 @@ export default class AsyncWrapper extends React.Component { } private onWrapperCancelClick = (): void => { - this.props.onFinished(false); + this.props.onFinished(); }; public render(): React.ReactNode { diff --git a/src/Avatar.ts b/src/Avatar.ts index 391495030c..88c80ef4b1 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -139,14 +139,18 @@ export function getInitialLetter(name: string): string | undefined { export function avatarUrlForRoom( room: Room | null, - width: number, - height: number, + width?: number, + height?: number, resizeMethod?: ResizeMethod, ): string | null { if (!room) return null; // null-guard if (room.getMxcAvatarUrl()) { - return mediaFromMxc(room.getMxcAvatarUrl() || undefined).getThumbnailOfSourceHttp(width, height, resizeMethod); + const media = mediaFromMxc(room.getMxcAvatarUrl() ?? undefined); + if (width !== undefined && height !== undefined) { + return media.getThumbnailOfSourceHttp(width, height, resizeMethod); + } + return media.srcHttp; } // space rooms cannot be DMs so skip the rest @@ -160,7 +164,11 @@ export function avatarUrlForRoom( // If there are only two members in the DM use the avatar of the other member const otherMember = room.getAvatarFallbackMember(); if (otherMember?.getMxcAvatarUrl()) { - return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); + const media = mediaFromMxc(otherMember.getMxcAvatarUrl()); + if (width !== undefined && height !== undefined) { + return media.getThumbnailOfSourceHttp(width, height, resizeMethod); + } + return media.srcHttp; } return null; } diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts index 382214a1b6..41bd0361a2 100644 --- a/src/ContentMessages.ts +++ b/src/ContentMessages.ts @@ -389,7 +389,7 @@ export default class ContentMessages { } if (tooBigFiles.length > 0) { - const { finished } = Modal.createDialog<[boolean]>(UploadFailureDialog, { + const { finished } = Modal.createDialog(UploadFailureDialog, { badFiles: tooBigFiles, totalFiles: files.length, contentMessages: this, @@ -407,7 +407,7 @@ export default class ContentMessages { const loopPromiseBefore = promBefore; if (!uploadAll) { - const { finished } = Modal.createDialog<[boolean, boolean]>(UploadConfirmDialog, { + const { finished } = Modal.createDialog(UploadConfirmDialog, { file, currentIndex: i, totalFiles: okFiles.length, diff --git a/src/IConfigOptions.ts b/src/IConfigOptions.ts index 1db73cc074..b2e44f23ce 100644 --- a/src/IConfigOptions.ts +++ b/src/IConfigOptions.ts @@ -148,19 +148,6 @@ export interface IConfigOptions { analytics_owner?: string; // defaults to `brand` privacy_policy_url?: string; // location for cookie policy - // Server hosting upsell options - hosting_signup_link?: string; // slightly different from `host_signup` - host_signup?: { - brand?: string; // acts as the enabled flag too (truthy == show) - - // Required-ness denotes when `brand` is truthy - cookie_policy_url: string; - privacy_policy_url: string; - terms_of_service_url: string; - url: string; - domains?: string[]; - }; - enable_presence_by_hs_url?: Record; // terms_and_conditions_links?: { url: string; text: string }[]; diff --git a/src/LegacyCallHandler.tsx b/src/LegacyCallHandler.tsx index b5358b4930..708db7a32d 100644 --- a/src/LegacyCallHandler.tsx +++ b/src/LegacyCallHandler.tsx @@ -58,7 +58,7 @@ import IncomingLegacyCallToast, { getIncomingLegacyCallToastKey } from "./toasts import ToastStore from "./stores/ToastStore"; import Resend from "./Resend"; import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload"; -import { KIND_CALL_TRANSFER } from "./components/views/dialogs/InviteDialogTypes"; +import { InviteKind } from "./components/views/dialogs/InviteDialogTypes"; import { OpenInviteDialogPayload } from "./dispatcher/payloads/OpenInviteDialogPayload"; import { findDMForUser } from "./utils/dm/findDMForUser"; import { getJoinedNonFunctionalMembers } from "./utils/room/getJoinedNonFunctionalMembers"; @@ -737,7 +737,7 @@ export default class LegacyCallHandler extends EventEmitter { ); if (!stats) { logger.debug( - "Call statistics are undefined. The call has " + "probably failed before a peerConn was established", + "Call statistics are undefined. The call has probably failed before a peerConn was established", ); return; } @@ -1214,7 +1214,7 @@ export default class LegacyCallHandler extends EventEmitter { call.setRemoteOnHold(true); dis.dispatch({ action: Action.OpenInviteDialog, - kind: KIND_CALL_TRANSFER, + kind: InviteKind.CallTransfer, call, analyticsName: "Transfer Call", className: "mx_InviteDialog_transferWrapper", diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts index 04b20adc8e..590b7eb180 100644 --- a/src/Lifecycle.ts +++ b/src/Lifecycle.ts @@ -265,7 +265,7 @@ export function handleInvalidStoreError(e: InvalidStoreError): Promise { .then(() => { const lazyLoadEnabled = e.value; if (lazyLoadEnabled) { - return new Promise((resolve) => { + return new Promise((resolve) => { Modal.createDialog(LazyLoadingResyncDialog, { onFinished: resolve, }); @@ -275,7 +275,7 @@ export function handleInvalidStoreError(e: InvalidStoreError): Promise { // between LL/non-LL version on same host. // as disabling LL when previously enabled // is a strong indicator of this (/develop & /app) - return new Promise((resolve) => { + return new Promise((resolve) => { Modal.createDialog(LazyLoadingDisabledDialog, { onFinished: resolve, host: window.location.host, diff --git a/src/Modal.tsx b/src/Modal.tsx index 3b21c47d3d..54ae185ad1 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -27,34 +27,35 @@ import AsyncWrapper from "./AsyncWrapper"; const DIALOG_CONTAINER_ID = "mx_Dialog_Container"; const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer"; -export interface IModal { +// Type which accepts a React Component which looks like a Modal (accepts an onFinished prop) +export type ComponentType = React.ComponentType<{ + onFinished?(...args: any): void; +}>; + +// Generic type which returns the props of the Modal component with the onFinished being optional. +export type ComponentProps = Omit, "onFinished"> & + Partial, "onFinished">>; + +export interface IModal { elem: React.ReactNode; className?: string; beforeClosePromise?: Promise; closeReason?: string; onBeforeClose?(reason?: string): Promise; - onFinished?(...args: T): void; - close(...args: T): void; + onFinished: ComponentProps["onFinished"]; + close(...args: Parameters["onFinished"]>): void; hidden?: boolean; } -export interface IHandle { - finished: Promise; - close(...args: T): void; +export interface IHandle { + finished: Promise["onFinished"]>>; + close(...args: Parameters["onFinished"]>): void; } -interface IProps { - onFinished?(...args: T): void; - // TODO improve typing here once all Modals are TS and we can exhaustively check the props - [key: string]: any; +interface IOptions { + onBeforeClose?: IModal["onBeforeClose"]; } -interface IOptions { - onBeforeClose?: IModal["onBeforeClose"]; -} - -type ParametersWithoutFirst any> = T extends (a: any, ...args: infer P) => any ? P : never; - export enum ModalManagerEvent { Opened = "opened", } @@ -111,18 +112,30 @@ export class ModalManager extends TypedEventEmitter 0; } - public createDialog( - Element: React.ComponentType, - ...rest: ParametersWithoutFirst - ): IHandle { - return this.createDialogAsync(Promise.resolve(Element), ...rest); + public createDialog( + Element: C, + props?: ComponentProps, + className?: string, + isPriorityModal = false, + isStaticModal = false, + options: IOptions = {}, + ): IHandle { + return this.createDialogAsync( + Promise.resolve(Element), + props, + className, + isPriorityModal, + isStaticModal, + options, + ); } - public appendDialog( + public appendDialog( Element: React.ComponentType, - ...rest: ParametersWithoutFirst - ): IHandle { - return this.appendDialogAsync(Promise.resolve(Element), ...rest); + props?: ComponentProps, + className?: string, + ): IHandle { + return this.appendDialogAsync(Promise.resolve(Element), props, className); } public closeCurrentModal(reason: string): void { @@ -134,15 +147,15 @@ export class ModalManager extends TypedEventEmitter( + private buildModal( prom: Promise, - props?: IProps, + props?: ComponentProps, className?: string, - options?: IOptions, + options?: IOptions, ): { - modal: IModal; - closeDialog: IHandle["close"]; - onFinishedProm: IHandle["finished"]; + modal: IModal; + closeDialog: IHandle["close"]; + onFinishedProm: IHandle["finished"]; } { const modal = { onFinished: props?.onFinished, @@ -151,10 +164,10 @@ export class ModalManager extends TypedEventEmitter; + } as IModal; // never call this from onFinished() otherwise it will loop - const [closeDialog, onFinishedProm] = this.getCloseFn(modal, props); + const [closeDialog, onFinishedProm] = this.getCloseFn(modal, props); // don't attempt to reuse the same AsyncWrapper for different dialogs, // otherwise we'll get confused. @@ -168,13 +181,13 @@ export class ModalManager extends TypedEventEmitter( - modal: IModal, - props?: IProps, - ): [IHandle["close"], IHandle["finished"]] { - const deferred = defer(); + private getCloseFn( + modal: IModal, + props?: ComponentProps, + ): [IHandle["close"], IHandle["finished"]] { + const deferred = defer["onFinished"]>>(); return [ - async (...args: T): Promise => { + async (...args: Parameters["onFinished"]>): Promise => { if (modal.beforeClosePromise) { await modal.beforeClosePromise; } else if (modal.onBeforeClose) { @@ -249,16 +262,16 @@ export class ModalManager extends TypedEventEmitter( - prom: Promise, - props?: IProps, + public createDialogAsync( + prom: Promise, + props?: ComponentProps, className?: string, isPriorityModal = false, isStaticModal = false, - options: IOptions = {}, - ): IHandle { + options: IOptions = {}, + ): IHandle { const beforeModal = this.getCurrentModal(); - const { modal, closeDialog, onFinishedProm } = this.buildModal(prom, props, className, options); + const { modal, closeDialog, onFinishedProm } = this.buildModal(prom, props, className, options); if (isPriorityModal) { // XXX: This is destructive this.priorityModal = modal; @@ -278,13 +291,13 @@ export class ModalManager extends TypedEventEmitter( + private appendDialogAsync( prom: Promise, - props?: IProps, + props?: ComponentProps, className?: string, - ): IHandle { + ): IHandle { const beforeModal = this.getCurrentModal(); - const { modal, closeDialog, onFinishedProm } = this.buildModal(prom, props, className, {}); + const { modal, closeDialog, onFinishedProm } = this.buildModal(prom, props, className, {}); this.modals.push(modal); diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index c92ebcc55e..0d2b64f244 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { ComponentProps } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { User } from "matrix-js-sdk/src/models/user"; @@ -29,7 +29,7 @@ import InviteDialog from "./components/views/dialogs/InviteDialog"; import BaseAvatar from "./components/views/avatars/BaseAvatar"; import { mediaFromMxc } from "./customisations/Media"; import ErrorDialog from "./components/views/dialogs/ErrorDialog"; -import { KIND_DM, KIND_INVITE } from "./components/views/dialogs/InviteDialogTypes"; +import { InviteKind } from "./components/views/dialogs/InviteDialogTypes"; import { Member } from "./utils/direct-messages"; export interface IInviteResult { @@ -64,7 +64,7 @@ export function showStartChatInviteDialog(initialText = ""): void { // This dialog handles the room creation internally - we don't need to worry about it. Modal.createDialog( InviteDialog, - { kind: KIND_DM, initialText }, + { kind: InviteKind.Dm, initialText }, /*className=*/ "mx_InviteDialog_flexWrapper", /*isPriority=*/ false, /*isStatic=*/ true, @@ -76,10 +76,10 @@ export function showRoomInviteDialog(roomId: string, initialText = ""): void { Modal.createDialog( InviteDialog, { - kind: KIND_INVITE, + kind: InviteKind.Invite, initialText, roomId, - }, + } as Omit, "onFinished">, /*className=*/ "mx_InviteDialog_flexWrapper", /*isPriority=*/ false, /*isStatic=*/ true, diff --git a/src/SecurityManager.ts b/src/SecurityManager.ts index 2a56de8751..563aac09ad 100644 --- a/src/SecurityManager.ts +++ b/src/SecurityManager.ts @@ -22,13 +22,13 @@ import { decodeRecoveryKey } from "matrix-js-sdk/src/crypto/recoverykey"; import { encodeBase64 } from "matrix-js-sdk/src/crypto/olmlib"; import { DeviceTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning"; import { logger } from "matrix-js-sdk/src/logger"; -import { ComponentType } from "react"; +import type CreateSecretStorageDialog from "./async-components/views/dialogs/security/CreateSecretStorageDialog"; import Modal from "./Modal"; import { MatrixClientPeg } from "./MatrixClientPeg"; import { _t } from "./languageHandler"; import { isSecureBackupRequired } from "./utils/WellKnownUtils"; -import AccessSecretStorageDialog from "./components/views/dialogs/security/AccessSecretStorageDialog"; +import AccessSecretStorageDialog, { KeyParams } from "./components/views/dialogs/security/AccessSecretStorageDialog"; import RestoreKeyBackupDialog from "./components/views/dialogs/security/RestoreKeyBackupDialog"; import SettingsStore from "./settings/SettingsStore"; import SecurityCustomisations from "./customisations/Security"; @@ -83,8 +83,6 @@ async function confirmToDismiss(): Promise { return !sure; } -type KeyParams = { passphrase: string; recoveryKey: string }; - function makeInputToKey(keyInfo: ISecretStorageKeyInfo): (keyParams: KeyParams) => Promise { return async ({ passphrase, recoveryKey }): Promise => { if (passphrase) { @@ -333,7 +331,7 @@ export async function accessSecretStorage(func = async (): Promise => {}, // passphrase creation. const { finished } = Modal.createDialogAsync( import("./async-components/views/dialogs/security/CreateSecretStorageDialog") as unknown as Promise< - ComponentType<{}> + typeof CreateSecretStorageDialog >, { forceReset, diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 6628b95fc1..b1df460f80 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -551,7 +551,7 @@ export const Commands = [ ) { const defaultIdentityServerUrl = getDefaultIdentityServerUrl(); if (defaultIdentityServerUrl) { - const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, { + const { finished } = Modal.createDialog(QuestionDialog, { title: _t("Use an identity server"), description: (

diff --git a/src/Terms.ts b/src/Terms.ts index f66f543887..ad4386d7aa 100644 --- a/src/Terms.ts +++ b/src/Terms.ts @@ -191,7 +191,7 @@ export async function dialogTermsInteractionCallback( ): Promise { logger.log("Terms that need agreement", policiesAndServicePairs); - const { finished } = Modal.createDialog<[boolean, string[]]>( + const { finished } = Modal.createDialog( TermsDialog, { policiesAndServicePairs, diff --git a/src/accessibility/KeyboardShortcuts.ts b/src/accessibility/KeyboardShortcuts.ts index 3011a5b5bd..bcd720ee21 100644 --- a/src/accessibility/KeyboardShortcuts.ts +++ b/src/accessibility/KeyboardShortcuts.ts @@ -154,7 +154,7 @@ export enum KeyBindingAction { ToggleHiddenEventVisibility = "KeyBinding.toggleHiddenEventVisibility", } -type KeyboardShortcutSetting = IBaseSetting; +type KeyboardShortcutSetting = Omit, "supportedLevels">; // TODO: We should figure out what to do with the keyboard shortcuts that are not handled by KeybindingManager export type IKeyboardShortcuts = Partial>; diff --git a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx index 300e67df82..a1e9485e02 100644 --- a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx @@ -27,7 +27,7 @@ import { Action } from "../../../../dispatcher/actions"; import { SettingLevel } from "../../../../settings/SettingLevel"; interface IProps { - onFinished: (success: boolean) => void; + onFinished: (success?: boolean) => void; } interface IState { diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx index 5393ae3fc6..517a56d23b 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx @@ -27,17 +27,18 @@ import { SettingLevel } from "../../../../settings/SettingLevel"; import Field from "../../../../components/views/elements/Field"; import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; import DialogButtons from "../../../../components/views/elements/DialogButtons"; -import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps"; import { IIndexStats } from "../../../../indexing/BaseEventIndexManager"; -interface IProps extends IDialogProps {} +interface IProps { + onFinished(): void; +} interface IState { eventIndexSize: number; eventCount: number; crawlingRoomsCount: number; roomCount: number; - currentRoom: string; + currentRoom: string | null; crawlerSleepTime: number; } @@ -60,7 +61,8 @@ export default class ManageEventIndexDialog extends React.Component => { const eventIndex = EventIndexPeg.get(); - let stats: IIndexStats; + if (!eventIndex) return; + let stats: IIndexStats | undefined; try { stats = await eventIndex.getStats(); @@ -70,7 +72,7 @@ export default class ManageEventIndexDialog extends React.Component => { const DisableEventIndexDialog = (await import("./DisableEventIndexDialog")).default; - Modal.createDialog(DisableEventIndexDialog, null, null, /* priority = */ false, /* static = */ true); + Modal.createDialog(DisableEventIndexDialog, undefined, undefined, /* priority = */ false, /* static = */ true); }; private onCrawlerSleepTimeChange = (e: ChangeEvent): void => { @@ -157,11 +161,9 @@ export default class ManageEventIndexDialog extends React.Component - {_t( - "%(brand)s is securely caching encrypted messages locally for them " + - "to appear in search results:", - { brand }, - )} + {_t("%(brand)s is securely caching encrypted messages locally for them to appear in search results:", { + brand, + })}

{crawlerState}
diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx index a9327f2a46..ec8cf31f30 100644 --- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx +++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx @@ -26,7 +26,6 @@ import { accessSecretStorage } from "../../../../SecurityManager"; import AccessibleButton from "../../../../components/views/elements/AccessibleButton"; import { copyNode } from "../../../../utils/strings"; import PassphraseField from "../../../../components/views/auth/PassphraseField"; -import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps"; import Field from "../../../../components/views/elements/Field"; import Spinner from "../../../../components/views/elements/Spinner"; import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; @@ -45,10 +44,12 @@ enum Phase { const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc. -interface IProps extends IDialogProps {} +interface IProps { + onFinished(done?: boolean): void; +} interface IState { - secureSecretStorage: boolean; + secureSecretStorage: boolean | null; phase: Phase; passPhrase: string; passPhraseValid: boolean; @@ -120,7 +121,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent { this.setState({ - passPhraseValid: result.valid, + passPhraseValid: !!result.valid, }); }; @@ -305,7 +306,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx index 1f2e7fd6b9..3e48739826 100644 --- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx +++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx @@ -43,7 +43,6 @@ import { SecureBackupSetupMethod, } from "../../../../utils/WellKnownUtils"; import SecurityCustomisations from "../../../../customisations/Security"; -import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps"; import Field from "../../../../components/views/elements/Field"; import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; import Spinner from "../../../../components/views/elements/Spinner"; @@ -67,10 +66,11 @@ enum Phase { const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc. -interface IProps extends IDialogProps { - hasCancel: boolean; - accountPassword: string; - forceReset: boolean; +interface IProps { + hasCancel?: boolean; + accountPassword?: string; + forceReset?: boolean; + onFinished(ok?: boolean): void; } interface IState { @@ -81,13 +81,13 @@ interface IState { copied: boolean; downloaded: boolean; setPassphrase: boolean; - backupInfo: IKeyBackupInfo; - backupSigStatus: TrustInfo; + backupInfo: IKeyBackupInfo | null; + backupSigStatus: TrustInfo | null; // does the server offer a UI auth flow with just m.login.password // for /keys/device_signing/upload? - canUploadKeysWithPasswordOnly: boolean; + canUploadKeysWithPasswordOnly: boolean | null; accountPassword: string; - accountPasswordCorrect: boolean; + accountPasswordCorrect: boolean | null; canSkip: boolean; passPhraseKeySelected: string; error?: string; @@ -119,7 +119,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { + private async fetchBackupInfo(): Promise<{ backupInfo?: IKeyBackupInfo; backupSigStatus?: TrustInfo }> { try { const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion(); const backupSigStatus = // we may not have started crypto yet, in which case we definitely don't trust the backup - MatrixClientPeg.get().isCryptoEnabled() && (await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo)); + backupInfo && MatrixClientPeg.get().isCryptoEnabled() + ? await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo) + : null; const { forceReset } = this.props; const phase = backupInfo && !forceReset ? Phase.Migrate : Phase.ChooseKeyPassphrase; @@ -189,17 +191,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent { try { - await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {} as CrossSigningKeys); + await MatrixClientPeg.get().uploadDeviceSigningKeys(undefined, {} as CrossSigningKeys); // We should never get here: the server should always require // UI auth to upload device signing keys. If we do, we upload // no keys which would be a no-op. @@ -248,7 +251,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { e.preventDefault(); - if (this.state.backupSigStatus.usable) { + if (this.state.backupSigStatus?.usable) { this.bootstrapSecretStorage(); } else { this.restoreBackup(); @@ -265,7 +268,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { - const blob = new Blob([this.recoveryKey.encodedPrivateKey], { + const blob = new Blob([this.recoveryKey.encodedPrivateKey!], { type: "text/plain;charset=us-ascii", }); FileSaver.saveAs(blob, "security-key.txt"); @@ -323,7 +326,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent => { this.setState({ phase: Phase.Storing, - error: null, + error: undefined, }); const cli = MatrixClientPeg.get(); @@ -351,7 +354,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent this.recoveryKey, - keyBackupInfo: this.state.backupInfo, + keyBackupInfo: this.state.backupInfo!, setupNewKeyBackup: !this.state.backupInfo, getKeyBackupPassphrase: async (): Promise => { // We may already have the backup key if we earlier went @@ -399,14 +402,14 @@ export default class CreateSecretStorageDialog extends React.PureComponent { this.setState({ - passPhraseValid: result.valid, + passPhraseValid: !!result.valid, }); }; @@ -581,13 +584,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent
); - } else if (!this.state.backupSigStatus.usable) { + } else if (!this.state.backupSigStatus?.usable) { authPrompt = (
{_t("Restore your key backup to upgrade your encryption")}
@@ -612,7 +615,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent
- {audioFeedArraysForCalls} ); diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 43c82b61ff..18c61240c9 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ComponentType, createRef } from "react"; +import React, { createRef } from "react"; import { ClientEvent, createClient, @@ -38,6 +38,8 @@ import "focus-visible"; // what-input helps improve keyboard accessibility import "what-input"; +import type NewRecoveryMethodDialog from "../../async-components/views/dialogs/security/NewRecoveryMethodDialog"; +import type RecoveryMethodRemovedDialog from "../../async-components/views/dialogs/security/RecoveryMethodRemovedDialog"; import PosthogTrackers from "../../PosthogTrackers"; import { DecryptionFailureTracker } from "../../DecryptionFailureTracker"; import { IMatrixClientCreds, MatrixClientPeg } from "../../MatrixClientPeg"; @@ -140,6 +142,7 @@ import RovingSpotlightDialog, { Filter } from "../views/dialogs/spotlight/Spotli import { findDMForUser } from "../../utils/dm/findDMForUser"; import { Linkify } from "../../HtmlUtils"; import { NotificationColor } from "../../stores/notifications/NotificationColor"; +import { UserTab } from "../views/dialogs/UserTab"; // legacy export export { default as Views } from "../../Views"; @@ -705,7 +708,7 @@ export default class MatrixChat extends React.PureComponent { const tabPayload = payload as OpenToTabPayload; Modal.createDialog( UserSettingsDialog, - { initialTabId: tabPayload.initialTabId }, + { initialTabId: tabPayload.initialTabId as UserTab }, /*className=*/ null, /*isPriority=*/ false, /*isStatic=*/ true, @@ -1629,14 +1632,14 @@ export default class MatrixChat extends React.PureComponent { Modal.createDialogAsync( import( "../../async-components/views/dialogs/security/NewRecoveryMethodDialog" - ) as unknown as Promise>, + ) as unknown as Promise, { newVersionInfo }, ); } else { Modal.createDialogAsync( import( "../../async-components/views/dialogs/security/RecoveryMethodRemovedDialog" - ) as unknown as Promise>, + ) as unknown as Promise, ); } }); diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 4f27392e25..9793289416 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -262,7 +262,14 @@ export default class RightPanel extends React.Component { break; case RightPanelPhases.RoomSummary: - card = ; + card = ( + + ); break; case RightPanelPhases.Widget: diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx index 8968f9c785..94cd6c5638 100644 --- a/src/components/structures/SpaceHierarchy.tsx +++ b/src/components/structures/SpaceHierarchy.tsx @@ -332,6 +332,7 @@ const Tile: React.FC = ({
  • { "do not have permission to view the message in question.", ); } else { - description = _t( - "Tried to load a specific point in this room's timeline, but was " + "unable to find it.", - ); + description = _t("Tried to load a specific point in this room's timeline, but was unable to find it."); } Modal.createDialog(ErrorDialog, { diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index aea40bbe57..ec6477aa7a 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -43,7 +43,6 @@ import IconizedContextMenu, { IconizedContextMenuOptionList, } from "../views/context_menus/IconizedContextMenu"; import { UIFeature } from "../../settings/UIFeature"; -import HostSignupAction from "./HostSignupAction"; import SpaceStore from "../../stores/spaces/SpaceStore"; import { UPDATE_SELECTED_SPACE } from "../../stores/spaces"; import UserIdentifierCustomisations from "../../customisations/UserIdentifier"; @@ -290,7 +289,6 @@ export default class UserMenu extends React.Component { if (!this.state.contextMenuPosition) return null; let topSection; - const hostSignupConfig = SdkConfig.getObject("host_signup"); if (MatrixClientPeg.get().isGuest()) { topSection = (
    @@ -318,15 +316,6 @@ export default class UserMenu extends React.Component { )}
    ); - } else if (hostSignupConfig?.get("url")) { - // If hostSignup.domains is set to a non-empty array, only show - // dialog if the user is on the domain or a subdomain. - const hostSignupDomains = hostSignupConfig.get("domains") || []; - const mxDomain = MatrixClientPeg.get().getDomain(); - const validDomains = hostSignupDomains.filter((d) => d === mxDomain || mxDomain.endsWith(`.${d}`)); - if (!hostSignupConfig.get("domains") || validDomains.length > 0) { - topSection = ; - } } let homeButton = null; @@ -432,7 +421,7 @@ export default class UserMenu extends React.Component { public render(): React.ReactNode { const avatarSize = 32; // should match border-radius of the avatar - const userId = MatrixClientPeg.get().getUserId(); + const userId = MatrixClientPeg.get().getSafeUserId(); const displayName = OwnProfileStore.instance.displayName || userId; const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize); diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx index c9191a23a8..f804eb2ce8 100644 --- a/src/components/structures/ViewSource.tsx +++ b/src/components/structures/ViewSource.tsx @@ -23,15 +23,15 @@ import { _t } from "../../languageHandler"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import { canEditContent } from "../../utils/EventUtils"; import { MatrixClientPeg } from "../../MatrixClientPeg"; -import { IDialogProps } from "../views/dialogs/IDialogProps"; import BaseDialog from "../views/dialogs/BaseDialog"; import { DevtoolsContext } from "../views/dialogs/devtools/BaseTool"; import { StateEventEditor } from "../views/dialogs/devtools/RoomState"; import { stringify, TimelineEventEditor } from "../views/dialogs/devtools/Event"; import CopyableText from "../views/elements/CopyableText"; -interface IProps extends IDialogProps { +interface IProps { mxEvent: MatrixEvent; // the MatrixEvent associated with the context menu + onFinished(): void; } interface IState { diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx index c3a6201252..d7a51956f4 100644 --- a/src/components/structures/auth/ForgotPassword.tsx +++ b/src/components/structures/auth/ForgotPassword.tsx @@ -368,7 +368,7 @@ export default class ForgotPassword extends React.Component { } public async renderConfirmLogoutDevicesDialog(): Promise { - const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, { + const { finished } = Modal.createDialog(QuestionDialog, { title: _t("Warning!"), description: (
    diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx index c2c7a0d913..97f3866f96 100644 --- a/src/components/structures/auth/Login.tsx +++ b/src/components/structures/auth/Login.tsx @@ -454,7 +454,7 @@ export default class LoginComponent extends React.PureComponent } let errorText: ReactNode = - _t("There was a problem communicating with the homeserver, " + "please try again later.") + + _t("There was a problem communicating with the homeserver, please try again later.") + (errCode ? " (" + errCode + ")" : ""); if (err instanceof ConnectionError) { diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx index d1de4ba4b3..72792a1999 100644 --- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx +++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { ReactNode } from "react"; import { _t } from "../../../../languageHandler"; import AccessibleButton from "../../../views/elements/AccessibleButton"; @@ -26,7 +26,8 @@ import { ErrorMessage } from "../../ErrorMessage"; interface Props { email: string; - errorText: string | null; + errorText: ReactNode | null; + onFinished(): void; // This modal is weird in that the way you close it signals intent onCloseClick: () => void; onReEnterEmailClick: () => void; onResendClick: () => Promise; diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index a865f0aeef..4f2fddc4ab 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -60,7 +60,7 @@ export default class PlayPauseButton extends React.PureComponent { return ( { client: this.props.client, }); - const channel = new MSC3903ECDHv1RendezvousChannel( + const channel = new MSC3903ECDHv2RendezvousChannel( transport, undefined, this.onFailure, diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index 469c5fbb2a..8728673b58 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -32,13 +32,13 @@ import { toPx } from "../../../utils/units"; import { _t } from "../../../languageHandler"; interface IProps { - name: string; // The name (first initial used as default) + name?: string; // The name (first initial used as default) idName?: string; // ID for generating hash colours title?: string; // onHover title text - url?: string; // highest priority of them all, shortcut to set in urls[0] + url?: string | null; // highest priority of them all, shortcut to set in urls[0] urls?: string[]; // [highest_priority, ... , lowest_priority] - width?: number; - height?: number; + width: number; + height: number; // XXX: resizeMethod not actually used. resizeMethod?: ResizeMethod; defaultToInitialLetter?: boolean; // true to add default url @@ -48,7 +48,7 @@ interface IProps { tabIndex?: number; } -const calculateUrls = (url?: string, urls?: string[], lowBandwidth = false): string[] => { +const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => { // work out the full set of urls to try to load. This is formed like so: // imageUrls: [ props.url, ...props.urls ] @@ -66,7 +66,7 @@ const calculateUrls = (url?: string, urls?: string[], lowBandwidth = false): str return Array.from(new Set(_urls)); }; -const useImageUrl = ({ url, urls }: { url?: string; urls?: string[] }): [string, () => void] => { +const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [string, () => void] => { // Since this is a hot code path and the settings store can be slow, we // use the cached lowBandwidth value from the room context if it exists const roomContext = useContext(RoomContext); diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 6d1ec066e7..953ffc2288 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -62,7 +62,7 @@ enum Icon { PresenceBusy = "BUSY", } -function tooltipText(variant: Icon): string { +function tooltipText(variant: Icon): string | undefined { switch (variant) { case Icon.Globe: return _t("This room is public"); @@ -78,7 +78,7 @@ function tooltipText(variant: Icon): string { } export default class DecoratedRoomAvatar extends React.PureComponent { - private _dmUser: User; + private _dmUser: User | null; private isUnmounted = false; private isWatchingTimeline = false; @@ -103,11 +103,11 @@ export default class DecoratedRoomAvatar extends React.PureComponent { + private onRoomTimeline = (ev: MatrixEvent, room?: Room): void => { if (this.isUnmounted) return; if (this.props.room.roomId !== room?.roomId) return; @@ -182,7 +182,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent, "name" | "idName" | "url" | "onClick"> { // Room may be left unset here, but if it is, // oobData.avatarUrl should be set (else there // would be nowhere to get the avatar from) room?: Room; - oobData?: IOOBData & { + oobData: IOOBData & { roomId?: string; }; viewAvatarOnClick?: boolean; @@ -86,7 +87,7 @@ export default class RoomAvatar extends React.Component { }; private static getImageUrls(props: IProps): string[] { - let oobAvatar = null; + let oobAvatar: string | null = null; if (props.oobData.avatarUrl) { oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp( props.width, @@ -94,28 +95,27 @@ export default class RoomAvatar extends React.Component { props.resizeMethod, ); } - return [ + + return filterBoolean([ oobAvatar, // highest priority RoomAvatar.getRoomAvatarUrl(props), - ].filter(function (url) { - return url !== null && url !== ""; - }); + ]); } - private static getRoomAvatarUrl(props: IProps): string { + private static getRoomAvatarUrl(props: IProps): string | null { if (!props.room) return null; return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod); } private onRoomAvatarClick = (): void => { - const avatarUrl = Avatar.avatarUrlForRoom(this.props.room, null, null, null); + const avatarUrl = Avatar.avatarUrlForRoom(this.props.room ?? null, undefined, undefined, undefined); const params = { src: avatarUrl, - name: this.props.room.name, + name: this.props.room?.name, }; - Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true); + Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true); }; private get roomIdName(): string | undefined { @@ -137,7 +137,7 @@ export default class RoomAvatar extends React.Component { public render(): React.ReactNode { const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props; - const roomName = room?.name ?? oobData.name; + const roomName = room?.name ?? oobData.name ?? "?"; return ( , "name" | "url" | "urls"> { +interface IProps extends Omit, "name" | "url" | "urls" | "height" | "width"> { app: IApp; + height?: number; + width?: number; } const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 20, ...props }) => { @@ -44,7 +46,7 @@ const WidgetAvatar: React.FC = ({ app, className, width = 20, height = 2 name={app.id} className={classNames("mx_WidgetAvatar", className)} // MSC2765 - url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : undefined} + url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : null} urls={iconUrls} width={width} height={height} diff --git a/src/components/views/beacon/BeaconListItem.tsx b/src/components/views/beacon/BeaconListItem.tsx index 24fdb05f32..caeff53bf5 100644 --- a/src/components/views/beacon/BeaconListItem.tsx +++ b/src/components/views/beacon/BeaconListItem.tsx @@ -42,14 +42,14 @@ const BeaconListItem: React.FC> = ({ beacon, .. const matrixClient = useContext(MatrixClientContext); const room = matrixClient.getRoom(beacon.roomId); - if (!latestLocationState || !beacon.isLive) { + if (!latestLocationState || !beacon.isLive || !room) { return null; } - const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self; - const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : undefined; + const isSelfLocation = beacon.beaconInfo?.assetType === LocationAssetType.Self; + const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : null; - const humanizedUpdateTime = humanizeTime(latestLocationState.timestamp); + const humanizedUpdateTime = (latestLocationState.timestamp && humanizeTime(latestLocationState.timestamp)) || ""; return (
  • @@ -62,7 +62,7 @@ const BeaconListItem: React.FC> = ({ beacon, .. {/* eat events from interactive share buttons diff --git a/src/components/views/beacon/BeaconStatusTooltip.tsx b/src/components/views/beacon/BeaconStatusTooltip.tsx index a0f70504c1..d66f4a59d0 100644 --- a/src/components/views/beacon/BeaconStatusTooltip.tsx +++ b/src/components/views/beacon/BeaconStatusTooltip.tsx @@ -27,11 +27,11 @@ interface Props { beacon: Beacon; } -const useBeaconName = (beacon: Beacon): string => { +const useBeaconName = (beacon: Beacon): string | undefined => { const matrixClient = useContext(MatrixClientContext); - if (beacon.beaconInfo.assetType !== LocationAssetType.Self) { - return beacon.beaconInfo.description; + if (beacon.beaconInfo?.assetType !== LocationAssetType.Self) { + return beacon.beaconInfo?.description; } const room = matrixClient.getRoom(beacon.roomId); const member = room?.getMember(beacon.beaconInfoOwner); diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx index 6c91cd1f39..818ca82242 100644 --- a/src/components/views/beacon/BeaconViewDialog.tsx +++ b/src/components/views/beacon/BeaconViewDialog.tsx @@ -23,7 +23,6 @@ import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-loca import { useLiveBeacons } from "../../../utils/beacon/useLiveBeacons"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import BaseDialog from "../dialogs/BaseDialog"; -import { IDialogProps } from "../dialogs/IDialogProps"; import Map from "../location/Map"; import ZoomButtons from "../location/ZoomButtons"; import BeaconMarker from "./BeaconMarker"; @@ -38,11 +37,12 @@ import MapFallback from "../location/MapFallback"; import { MapError } from "../location/MapError"; import { LocationShareError } from "../../../utils/location"; -interface IProps extends IDialogProps { +interface IProps { roomId: Room["roomId"]; matrixClient: MatrixClient; // open the map centered on this beacon's location initialFocusedBeacon?: Beacon; + onFinished(): void; } // track the 'focused time' as ts @@ -54,7 +54,7 @@ interface FocusedBeaconState { beacon?: Beacon; } -const getBoundsCenter = (bounds: Bounds): string | undefined => { +const getBoundsCenter = (bounds?: Bounds): string | undefined => { if (!bounds) { return; } @@ -70,10 +70,10 @@ const useMapPosition = ( { beacon, ts }: FocusedBeaconState, ): { bounds?: Bounds; - centerGeoUri: string; + centerGeoUri?: string; } => { const [bounds, setBounds] = useState(getBeaconBounds(liveBeacons)); - const [centerGeoUri, setCenterGeoUri] = useState( + const [centerGeoUri, setCenterGeoUri] = useState( beacon?.latestLocationState?.uri || getBoundsCenter(bounds), ); diff --git a/src/components/views/beacon/DialogOwnBeaconStatus.tsx b/src/components/views/beacon/DialogOwnBeaconStatus.tsx index 8c74586f35..3c456004f4 100644 --- a/src/components/views/beacon/DialogOwnBeaconStatus.tsx +++ b/src/components/views/beacon/DialogOwnBeaconStatus.tsx @@ -45,12 +45,12 @@ const DialogOwnBeaconStatus: React.FC = ({ roomId }) => { const matrixClient = useContext(MatrixClientContext); const room = matrixClient.getRoom(roomId); - if (!beacon?.isLive) { + if (!beacon?.isLive || !room) { return null; } - const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self; - const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : undefined; + const isSelfLocation = beacon.beaconInfo?.assetType === LocationAssetType.Self; + const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : null; return (
    diff --git a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx index d3577ba3ad..0104a79cae 100644 --- a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx +++ b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx @@ -25,7 +25,7 @@ import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-loca import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { Action } from "../../../dispatcher/actions"; import dispatcher from "../../../dispatcher/dispatcher"; -import AccessibleButton from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; interface Props { isMinimized?: boolean; @@ -121,7 +121,7 @@ const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => { ); const onWarningClick = relevantBeacon - ? () => { + ? (_e: ButtonEvent) => { dispatcher.dispatch({ action: Action.ViewRoom, room_id: relevantBeacon.roomId, @@ -131,7 +131,7 @@ const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => { highlighted: true, }); } - : undefined; + : null; const label = getLabel(hasStoppingErrors, hasLocationPublishErrors); diff --git a/src/components/views/beacon/LiveTimeRemaining.tsx b/src/components/views/beacon/LiveTimeRemaining.tsx index 3ffd248ca7..b6682d710b 100644 --- a/src/components/views/beacon/LiveTimeRemaining.tsx +++ b/src/components/views/beacon/LiveTimeRemaining.tsx @@ -40,13 +40,19 @@ const getUpdateInterval = (ms: number): number => { const useMsRemaining = (beacon: Beacon): number => { const beaconInfo = useEventEmitterState(beacon, BeaconEvent.Update, () => beacon.beaconInfo); - const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beaconInfo)); + const [msRemaining, setMsRemaining] = useState(() => (beaconInfo ? getBeaconMsUntilExpiry(beaconInfo) : 0)); useEffect(() => { + if (!beaconInfo) { + return; + } setMsRemaining(getBeaconMsUntilExpiry(beaconInfo)); }, [beaconInfo]); const updateMsRemaining = useCallback(() => { + if (!beaconInfo) { + return; + } const ms = getBeaconMsUntilExpiry(beaconInfo); setMsRemaining(ms); }, [beaconInfo]); diff --git a/src/components/views/beacon/OwnBeaconStatus.tsx b/src/components/views/beacon/OwnBeaconStatus.tsx index 7baffe3e5f..92afa950da 100644 --- a/src/components/views/beacon/OwnBeaconStatus.tsx +++ b/src/components/views/beacon/OwnBeaconStatus.tsx @@ -42,7 +42,7 @@ const OwnBeaconStatus: React.FC> = ({ beacon, stoppingInProgress, onStopSharing, onResetLocationPublishError, - } = useOwnLiveBeacons([beacon?.identifier]); + } = useOwnLiveBeacons(beacon?.identifier ? [beacon?.identifier] : []); // combine display status with errors that only occur for user's own beacons const ownDisplayStatus = hasLocationPublishError || hasStopSharingError ? BeaconDisplayStatus.Error : displayStatus; diff --git a/src/components/views/beacon/ShareLatestLocation.tsx b/src/components/views/beacon/ShareLatestLocation.tsx index 175e1d46e2..ef525ad838 100644 --- a/src/components/views/beacon/ShareLatestLocation.tsx +++ b/src/components/views/beacon/ShareLatestLocation.tsx @@ -28,9 +28,9 @@ interface Props { } const ShareLatestLocation: React.FC = ({ latestLocationState }) => { - const [coords, setCoords] = useState(null); + const [coords, setCoords] = useState(); useEffect(() => { - if (!latestLocationState) { + if (!latestLocationState?.uri) { return; } const coords = parseGeoUri(latestLocationState.uri); diff --git a/src/components/views/beacon/displayStatus.ts b/src/components/views/beacon/displayStatus.ts index 51c63f95c6..48260cb672 100644 --- a/src/components/views/beacon/displayStatus.ts +++ b/src/components/views/beacon/displayStatus.ts @@ -40,7 +40,5 @@ export const getBeaconDisplayStatus = ( if (!latestLocationState) { return BeaconDisplayStatus.Loading; } - if (latestLocationState) { - return BeaconDisplayStatus.Active; - } + return BeaconDisplayStatus.Active; }; diff --git a/src/components/views/dialogs/AppDownloadDialog.tsx b/src/components/views/dialogs/AppDownloadDialog.tsx index 46b7e455c2..dae321e683 100644 --- a/src/components/views/dialogs/AppDownloadDialog.tsx +++ b/src/components/views/dialogs/AppDownloadDialog.tsx @@ -25,13 +25,16 @@ import AccessibleButton from "../elements/AccessibleButton"; import QRCode from "../elements/QRCode"; import Heading from "../typography/Heading"; import BaseDialog from "./BaseDialog"; -import { IDialogProps } from "./IDialogProps"; const fallbackAppStore = "https://apps.apple.com/app/vector/id1083446067"; const fallbackGooglePlay = "https://play.google.com/store/apps/details?id=im.vector.app"; const fallbackFDroid = "https://f-droid.org/repository/browse/?fdid=im.vector.app"; -export const AppDownloadDialog: FC = ({ onFinished }: IDialogProps) => { +interface Props { + onFinished(): void; +} + +export const AppDownloadDialog: FC = ({ onFinished }) => { const brand = SdkConfig.get("brand"); const desktopBuilds = SdkConfig.getObject("desktop_builds"); const mobileBuilds = SdkConfig.getObject("mobile_builds"); diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx index 2feb7aac33..0def4f1943 100644 --- a/src/components/views/dialogs/BaseDialog.tsx +++ b/src/components/views/dialogs/BaseDialog.tsx @@ -21,17 +21,16 @@ import FocusLock from "react-focus-lock"; import classNames from "classnames"; import { MatrixClient } from "matrix-js-sdk/src/client"; -import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; +import AccessibleButton from "../elements/AccessibleButton"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { _t } from "../../../languageHandler"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import Heading from "../typography/Heading"; -import { IDialogProps } from "./IDialogProps"; import { PosthogScreenTracker, ScreenName } from "../../../PosthogTrackers"; import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; -interface IProps extends IDialogProps { +interface IProps { // Whether the dialog should have a 'close' button that will // cause the dialog to be cancelled. This should only be set // to false if there is nothing the app can sensibly do if the @@ -75,6 +74,7 @@ interface IProps extends IDialogProps { // optional Posthog ScreenName to supply during the lifetime of this dialog "screenName"?: ScreenName; + onFinished(): void; } /* @@ -86,7 +86,7 @@ interface IProps extends IDialogProps { export default class BaseDialog extends React.Component { private matrixClient: MatrixClient; - public static defaultProps = { + public static defaultProps: Partial = { hasCancel: true, fixedWidth: true, }; @@ -98,9 +98,7 @@ export default class BaseDialog extends React.Component { } private onKeyDown = (e: KeyboardEvent | React.KeyboardEvent): void => { - if (this.props.onKeyDown) { - this.props.onKeyDown(e); - } + this.props.onKeyDown?.(e); const action = getKeyBindingsManager().getAccessibilityAction(e); switch (action) { @@ -109,13 +107,13 @@ export default class BaseDialog extends React.Component { e.stopPropagation(); e.preventDefault(); - this.props.onFinished(false); + this.props.onFinished(); break; } }; - private onCancelClick = (e: ButtonEvent): void => { - this.props.onFinished(false); + private onCancelClick = (): void => { + this.props.onFinished(); }; public render(): React.ReactNode { diff --git a/src/components/views/dialogs/BetaFeedbackDialog.tsx b/src/components/views/dialogs/BetaFeedbackDialog.tsx index 86298fb970..8223fde929 100644 --- a/src/components/views/dialogs/BetaFeedbackDialog.tsx +++ b/src/components/views/dialogs/BetaFeedbackDialog.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from "react"; import { _t } from "../../../languageHandler"; -import { IDialogProps } from "./IDialogProps"; import SettingsStore from "../../../settings/SettingsStore"; import AccessibleButton from "../elements/AccessibleButton"; import defaultDispatcher from "../../../dispatcher/dispatcher"; @@ -27,8 +26,9 @@ import GenericFeatureFeedbackDialog from "./GenericFeatureFeedbackDialog"; // XXX: Keep this around for re-use in future Betas -interface IProps extends IDialogProps { +interface IProps { featureId: string; + onFinished(sendFeedback?: boolean): void; } const BetaFeedbackDialog: React.FC = ({ featureId, onFinished }) => { @@ -49,7 +49,7 @@ const BetaFeedbackDialog: React.FC = ({ featureId, onFinished }) => { { - onFinished(false); + onFinished(); defaultDispatcher.dispatch({ action: Action.ViewUserSettings, initialTabId: UserTab.Labs, diff --git a/src/components/views/dialogs/BulkRedactDialog.tsx b/src/components/views/dialogs/BulkRedactDialog.tsx index e1f9a11cd2..ba12f21039 100644 --- a/src/components/views/dialogs/BulkRedactDialog.tsx +++ b/src/components/views/dialogs/BulkRedactDialog.tsx @@ -26,19 +26,19 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; -import { IDialogProps } from "./IDialogProps"; import BaseDialog from "../dialogs/BaseDialog"; import InfoDialog from "../dialogs/InfoDialog"; import DialogButtons from "../elements/DialogButtons"; import StyledCheckbox from "../elements/StyledCheckbox"; -interface IBulkRedactDialogProps extends IDialogProps { +interface Props { matrixClient: MatrixClient; room: Room; member: RoomMember; + onFinished(redact?: boolean): void; } -const BulkRedactDialog: React.FC = (props) => { +const BulkRedactDialog: React.FC = (props) => { const { matrixClient: cli, room, member, onFinished } = props; const [keepStateEvents, setKeepStateEvents] = useState(true); diff --git a/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx b/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx index 60e18eb263..250b90e61d 100644 --- a/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx +++ b/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx @@ -24,7 +24,7 @@ import Spinner from "../elements/Spinner"; interface IProps { redact: () => Promise; - onFinished: (success: boolean) => void; + onFinished: (success?: boolean) => void; } interface IState { diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx index 0ee73f871a..2fa684eda8 100644 --- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx +++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx @@ -39,7 +39,7 @@ interface IProps { children?: ReactNode; className?: string; roomId?: string; - onFinished: (success: boolean, reason?: string) => void; + onFinished: (success?: boolean, reason?: string) => void; } interface IState { @@ -55,7 +55,7 @@ interface IState { * Also tweaks the style for 'dangerous' actions (albeit only with colour) */ export default class ConfirmUserActionDialog extends React.Component { - public static defaultProps = { + public static defaultProps: Partial = { danger: false, askReason: false, }; diff --git a/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx b/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx index 0f530a4fd7..e9ab1bc3cc 100644 --- a/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx +++ b/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx @@ -21,7 +21,7 @@ import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; interface IProps { - onFinished: (success: boolean) => void; + onFinished: (success?: boolean) => void; } export default class ConfirmWipeDeviceDialog extends React.Component { diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx index 915ca9f249..b15fb800d2 100644 --- a/src/components/views/dialogs/CreateRoomDialog.tsx +++ b/src/components/views/dialogs/CreateRoomDialog.tsx @@ -41,7 +41,7 @@ interface IProps { defaultName?: string; parentSpace?: Room; defaultEncrypted?: boolean; - onFinished(proceed: boolean, opts?: IOpts): void; + onFinished(proceed?: boolean, opts?: IOpts): void; } interface IState { diff --git a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx index 59b697621f..fe9f04af18 100644 --- a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx +++ b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx @@ -24,9 +24,10 @@ import Modal from "../../../Modal"; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; import QuestionDialog from "./QuestionDialog"; -import { IDialogProps } from "./IDialogProps"; -interface IProps extends IDialogProps {} +interface IProps { + onFinished(logout?: boolean): void; +} const CryptoStoreTooNewDialog: React.FC = (props: IProps) => { const brand = SdkConfig.get().brand; @@ -72,7 +73,7 @@ const CryptoStoreTooNewDialog: React.FC = (props: IProps) => { props.onFinished(false)} > diff --git a/src/components/views/dialogs/DeactivateAccountDialog.tsx b/src/components/views/dialogs/DeactivateAccountDialog.tsx index bdc1d54aba..5c1269033d 100644 --- a/src/components/views/dialogs/DeactivateAccountDialog.tsx +++ b/src/components/views/dialogs/DeactivateAccountDialog.tsx @@ -39,7 +39,7 @@ type DialogAesthetics = Partial<{ }>; interface IProps { - onFinished: (success: boolean) => void; + onFinished: (success?: boolean) => void; } interface IState { diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx index 2b74667ba5..3fd45c17a1 100644 --- a/src/components/views/dialogs/DevtoolsDialog.tsx +++ b/src/components/views/dialogs/DevtoolsDialog.tsx @@ -65,7 +65,7 @@ const Tools: Record = { interface IProps { roomId: string; - onFinished(finished: boolean): void; + onFinished(finished?: boolean): void; } type ToolInfo = [label: string, tool: Tool]; diff --git a/src/components/views/dialogs/EndPollDialog.tsx b/src/components/views/dialogs/EndPollDialog.tsx index 1951f881bb..0d4a66dfe7 100644 --- a/src/components/views/dialogs/EndPollDialog.tsx +++ b/src/components/views/dialogs/EndPollDialog.tsx @@ -20,17 +20,16 @@ import { MatrixClient } from "matrix-js-sdk/src/client"; import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent"; import { _t } from "../../../languageHandler"; -import { IDialogProps } from "./IDialogProps"; import QuestionDialog from "./QuestionDialog"; import { findTopAnswer } from "../messages/MPollBody"; import Modal from "../../../Modal"; import ErrorDialog from "./ErrorDialog"; import { GetRelationsForEvent } from "../rooms/EventTile"; -interface IProps extends IDialogProps { +interface IProps { matrixClient: MatrixClient; event: MatrixEvent; - onFinished: (success: boolean) => void; + onFinished: (success?: boolean) => void; getRelationsForEvent?: GetRelationsForEvent; } diff --git a/src/components/views/dialogs/ErrorDialog.tsx b/src/components/views/dialogs/ErrorDialog.tsx index 62ce55cdf3..4a82941767 100644 --- a/src/components/views/dialogs/ErrorDialog.tsx +++ b/src/components/views/dialogs/ErrorDialog.tsx @@ -31,7 +31,7 @@ import { _t } from "../../../languageHandler"; import BaseDialog from "./BaseDialog"; interface IProps { - onFinished: (success: boolean) => void; + onFinished: (success?: boolean) => void; title?: string; description?: React.ReactNode; button?: string; @@ -44,7 +44,7 @@ interface IState { } export default class ErrorDialog extends React.Component { - public static defaultProps = { + public static defaultProps: Partial = { focus: true, }; diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx index 406df1fd8e..e7b93c50f4 100644 --- a/src/components/views/dialogs/ExportDialog.tsx +++ b/src/components/views/dialogs/ExportDialog.tsx @@ -19,7 +19,6 @@ import { Room } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; -import { IDialogProps } from "./IDialogProps"; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; import Field from "../elements/Field"; @@ -44,8 +43,9 @@ import InfoDialog from "./InfoDialog"; import ChatExport from "../../../customisations/ChatExport"; import { validateNumberInRange } from "../../../utils/validate"; -interface IProps extends IDialogProps { +interface IProps { room: Room; + onFinished(doExport?: boolean): void; } interface ExportConfig { diff --git a/src/components/views/dialogs/FeedbackDialog.tsx b/src/components/views/dialogs/FeedbackDialog.tsx index b2f8dcfe00..9996e65d2e 100644 --- a/src/components/views/dialogs/FeedbackDialog.tsx +++ b/src/components/views/dialogs/FeedbackDialog.tsx @@ -24,7 +24,6 @@ import SdkConfig from "../../../SdkConfig"; import Modal from "../../../Modal"; import BugReportDialog from "./BugReportDialog"; import InfoDialog from "./InfoDialog"; -import { IDialogProps } from "./IDialogProps"; import { submitFeedback } from "../../../rageshake/submit-rageshake"; import { useStateToggle } from "../../../hooks/useStateToggle"; import StyledCheckbox from "../elements/StyledCheckbox"; @@ -33,8 +32,9 @@ const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" + "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc"; const newIssueUrl = "https://github.com/vector-im/element-web/issues/new/choose"; -interface IProps extends IDialogProps { +interface IProps { feature?: string; + onFinished(): void; } const FeedbackDialog: React.FC = (props: IProps) => { diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index 0bd462c65a..8b84c9380a 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -29,7 +29,6 @@ import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; import { useSettingValue } from "../../../hooks/useSettings"; import { Layout } from "../../../settings/enums/Layout"; -import { IDialogProps } from "./IDialogProps"; import BaseDialog from "./BaseDialog"; import { avatarUrlForUser } from "../../../Avatar"; import EventTile from "../rooms/EventTile"; @@ -55,13 +54,14 @@ import { RoomContextDetails } from "../rooms/RoomContextDetails"; const AVATAR_SIZE = 30; -interface IProps extends IDialogProps { +interface IProps { matrixClient: MatrixClient; // The event to forward event: MatrixEvent; // We need a permalink creator for the source room to pass through to EventTile // in case the event is a reply (even though the user can't get at the link) permalinkCreator: RoomPermalinkCreator; + onFinished(): void; } interface IEntryProps { diff --git a/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx b/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx index 2bdc3b5b3f..48e95f0244 100644 --- a/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx +++ b/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx @@ -20,17 +20,17 @@ import QuestionDialog from "./QuestionDialog"; import { _t } from "../../../languageHandler"; import Field from "../elements/Field"; import SdkConfig from "../../../SdkConfig"; -import { IDialogProps } from "./IDialogProps"; import { submitFeedback } from "../../../rageshake/submit-rageshake"; import StyledCheckbox from "../elements/StyledCheckbox"; import Modal from "../../../Modal"; import InfoDialog from "./InfoDialog"; -interface IProps extends IDialogProps { +interface IProps { title: string; subheading: string; rageshakeLabel: string; rageshakeData?: Record; + onFinished(sendFeedback?: boolean): void; } const GenericFeatureFeedbackDialog: React.FC = ({ diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx deleted file mode 100644 index 631eb1abcf..0000000000 --- a/src/components/views/dialogs/HostSignupDialog.tsx +++ /dev/null @@ -1,280 +0,0 @@ -/* -Copyright 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. -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 classNames from "classnames"; -import { logger } from "matrix-js-sdk/src/logger"; - -import AccessibleButton from "../elements/AccessibleButton"; -import Modal from "../../../Modal"; -import QuestionDialog from "./QuestionDialog"; -import SdkConfig from "../../../SdkConfig"; -import { _t } from "../../../languageHandler"; -import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import { HostSignupStore } from "../../../stores/HostSignupStore"; -import { OwnProfileStore } from "../../../stores/OwnProfileStore"; -import { IPostmessage, IPostmessageResponseData, PostmessageAction } from "./HostSignupDialogTypes"; -import { IConfigOptions } from "../../../IConfigOptions"; -import { SnakedObject } from "../../../utils/SnakedObject"; - -interface IProps {} - -interface IState { - completed: boolean; - error: string; - minimized: boolean; -} - -export default class HostSignupDialog extends React.PureComponent { - private iframeRef: React.RefObject = React.createRef(); - private readonly config: SnakedObject; - - public constructor(props: IProps) { - super(props); - - this.state = { - completed: false, - error: null, - minimized: false, - }; - - this.config = SdkConfig.getObject("host_signup"); - } - - private messageHandler = async (message: IPostmessage): Promise => { - if (!this.config.get("url").startsWith(message.origin)) { - return; - } - switch (message.data.action) { - case PostmessageAction.HostSignupAccountDetailsRequest: - this.onAccountDetailsRequest(); - break; - case PostmessageAction.Maximize: - this.setState({ - minimized: false, - }); - break; - case PostmessageAction.Minimize: - this.setState({ - minimized: true, - }); - break; - case PostmessageAction.SetupComplete: - this.setState({ - completed: true, - }); - break; - case PostmessageAction.CloseDialog: - return this.closeDialog(); - } - }; - - private maximizeDialog = (): void => { - this.setState({ - minimized: false, - }); - // Send this action to the iframe so it can act accordingly - this.sendMessage({ - action: PostmessageAction.Maximize, - }); - }; - - private minimizeDialog = (): void => { - this.setState({ - minimized: true, - }); - // Send this action to the iframe so it can act accordingly - this.sendMessage({ - action: PostmessageAction.Minimize, - }); - }; - - private closeDialog = async (): Promise => { - window.removeEventListener("message", this.messageHandler); - // Finally clear the flag in - return HostSignupStore.instance.setHostSignupActive(false); - }; - - private onCloseClick = async (): Promise => { - if (this.state.completed) { - // We're done, close - return this.closeDialog(); - } else { - Modal.createDialog(QuestionDialog, { - title: _t("Confirm abort of host creation"), - description: _t( - "Are you sure you wish to abort creation of the host? The process cannot be continued.", - ), - button: _t("Abort"), - onFinished: (result) => { - if (result) { - return this.closeDialog(); - } - }, - }); - } - }; - - private sendMessage = (message: IPostmessageResponseData): void => { - this.iframeRef.current.contentWindow.postMessage(message, this.config.get("url")); - }; - - private async sendAccountDetails(): Promise { - const openIdToken = await MatrixClientPeg.get().getOpenIdToken(); - if (!openIdToken || !openIdToken.access_token) { - logger.warn("Failed to connect to homeserver for OpenID token."); - this.setState({ - completed: true, - error: _t("Failed to connect to your homeserver. Please close this dialog and try again."), - }); - return; - } - this.sendMessage({ - action: PostmessageAction.HostSignupAccountDetails, - account: { - accessToken: await MatrixClientPeg.get().getAccessToken(), - name: OwnProfileStore.instance.displayName, - openIdToken: openIdToken.access_token, - serverName: await MatrixClientPeg.get().getDomain(), - userLocalpart: await MatrixClientPeg.get().getUserIdLocalpart(), - termsAccepted: true, - }, - }); - } - - private onAccountDetailsDialogFinished = async (result: boolean): Promise => { - if (result) { - return this.sendAccountDetails(); - } - return this.closeDialog(); - }; - - private onAccountDetailsRequest = (): void => { - const cookiePolicyUrl = this.config.get("cookie_policy_url"); - const privacyPolicyUrl = this.config.get("privacy_policy_url"); - const tosUrl = this.config.get("terms_of_service_url"); - - const textComponent = ( - <> -

    - {_t( - "Continuing temporarily allows the %(hostSignupBrand)s setup process to access your " + - "account to fetch verified email addresses. This data is not stored.", - { - hostSignupBrand: this.config.get("brand"), - }, - )} -

    -

    - {_t( - "Learn more in our , and .", - {}, - { - cookiePolicyLink: () => ( - - {_t("Cookie Policy")} - - ), - privacyPolicyLink: () => ( - - {_t("Privacy Policy")} - - ), - termsOfServiceLink: () => ( - - {_t("Terms of Service")} - - ), - }, - )} -

    - - ); - Modal.createDialog(QuestionDialog, { - title: _t("You should know"), - description: textComponent, - button: _t("Continue"), - onFinished: this.onAccountDetailsDialogFinished, - }); - }; - - public componentDidMount(): void { - window.addEventListener("message", this.messageHandler); - } - - public componentWillUnmount(): void { - if (HostSignupStore.instance.isHostSignupActive) { - // Run the close dialog actions if we're still active, otherwise good to go - this.closeDialog(); - } - } - - public render(): React.ReactNode { - return ( -
    -
    - {this.state.minimized && ( -
    -
    - {_t("%(hostSignupBrand)s Setup", { - hostSignupBrand: this.config.get("brand"), - })} -
    - -
    - )} - {!this.state.minimized && ( -
    - - -
    - )} - {this.state.error &&
    {this.state.error}
    } - {!this.state.error && ( -