Merge branch 'develop' into t3chguy/fix/24953

cypress/e2e/settings/general-user-settings-tab.spec.ts

@@ -53,7 +53,7 @@ describe("General user settings tab", () => {
 
         cy.findByTestId("mx_GeneralUserSettingsTab").within(() => {
             // Assert that the top heading is rendered
-            cy.findByTestId("general").should("have.text", "General").should("be.visible");
+            cy.findByText("General").should("be.visible");
 
             cy.get(".mx_ProfileSettings_profile")
                 .scrollIntoView()

cypress/e2e/spaces/spaces.spec.ts

@@ -140,6 +140,8 @@ describe("Spaces", () => {
         cy.findByPlaceholderText("Support").type("Projects");
         cy.findByRole("button", { name: "Continue" }).click();
 
+        cy.get(".mx_SpaceRoomView").percySnapshotElement("Space - 'Invite your teammates' dialog");
+
         cy.get(".mx_SpaceRoomView").within(() => {
             cy.get("h1").findByText("Invite your teammates");
             cy.findByRole("button", { name: "Skip for now" }).click();

res/css/structures/_SpaceRoomView.pcss

@@ -271,23 +271,6 @@ $SpaceRoomViewInnerWidth: 428px;
     }
 
     .mx_SpaceRoomView_inviteTeammates {
-        /* XXX remove this when spaces leaves Beta */
-        .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
-            padding: 16px;
-            position: relative;
-            border-radius: 8px;
-            background-color: $header-panel-bg-color;
-            max-width: $SpaceRoomViewInnerWidth;
-            margin: 20px 0 30px;
-            box-sizing: border-box;
-
-            .mx_BetaCard_betaPill {
-                position: absolute;
-                left: 16px;
-                top: 16px;
-            }
-        }
-
         .mx_SpaceRoomView_inviteTeammates_buttons {
             color: $secondary-content;
             margin-top: 28px;

res/css/views/elements/_Dropdown.pcss

@@ -58,8 +58,8 @@ limitations under the License.
 .mx_Dropdown_option {
     height: 35px;
     line-height: $font-35px;
-    padding-left: 8px;
-    padding-right: 8px;
+    // Overwrites the default padding for any li elements
+    padding: 0 8px;
 }
 
 .mx_Dropdown_input > .mx_Dropdown_option {
@@ -121,6 +121,10 @@ input.mx_Dropdown_option:focus {
     min-height: 35px;
 }
 
+ul.mx_Dropdown_menu li.mx_Dropdown_option {
+    list-style: none;
+}
+
 .mx_Dropdown_menu .mx_Dropdown_option_highlight {
     background-color: $focus-bg-color;
 }

res/css/views/settings/_JoinRuleSettings.pcss

@@ -57,7 +57,6 @@ limitations under the License.
 
 .mx_JoinRuleSettings_radioButton {
     padding-top: 16px;
-    margin-bottom: 8px;
 
     .mx_StyledRadioButton_content {
         margin-left: 14px;

res/css/views/settings/_ProfileSettings.pcss

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_ProfileSettings {
-    margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
     border-bottom: 1px solid $quinary-content;
 
     .mx_ProfileSettings_avatarUpload {
@@ -29,11 +28,13 @@ limitations under the License.
             flex-grow: 1;
             margin-inline-end: 54px;
 
-            .mx_Field:first-child {
-                margin-top: 0;
+            .mx_Field {
+                margin-top: $spacing-8;
             }
 
             .mx_ProfileSettings_profile_controls_topic {
+                margin-top: $spacing-8;
+
                 & > textarea {
                     font-family: inherit;
                     resize: vertical;

res/css/views/settings/_SettingsFieldset.pcss

@@ -43,3 +43,9 @@ limitations under the License.
         }
     }
 }
+
+.mx_SettingsFieldset_content {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-8;
+}

src/AddThreepid.ts

@@ -16,18 +16,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { IAuthData, IRequestMsisdnTokenResponse, IRequestTokenResponse } from "matrix-js-sdk/src/matrix";
+import { IAuthData, IRequestMsisdnTokenResponse, IRequestTokenResponse, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
 
-import { MatrixClientPeg } from "./MatrixClientPeg";
 import Modal from "./Modal";
 import { _t, UserFriendlyError } from "./languageHandler";
 import IdentityAuthClient from "./IdentityAuthClient";
 import { SSOAuthEntry } from "./components/views/auth/InteractiveAuthEntryComponents";
 import InteractiveAuthDialog from "./components/views/dialogs/InteractiveAuthDialog";
 
-function getIdServerDomain(): string {
-    const idBaseUrl = MatrixClientPeg.get().getIdentityServerUrl(true);
+function getIdServerDomain(matrixClient: MatrixClient): string {
+    const idBaseUrl = matrixClient.getIdentityServerUrl(true);
     if (!idBaseUrl) {
         throw new UserFriendlyError("Identity server not set");
     }
@@ -55,11 +54,11 @@ export type Binding = {
 export default class AddThreepid {
     private sessionId: string;
     private submitUrl?: string;
-    private clientSecret: string;
     private bind = false;
+    private readonly clientSecret: string;
 
-    public constructor() {
-        this.clientSecret = MatrixClientPeg.get().generateClientSecret();
+    public constructor(private readonly matrixClient: MatrixClient) {
+        this.clientSecret = matrixClient.generateClientSecret();
     }
 
     /**
@@ -70,7 +69,7 @@ export default class AddThreepid {
      */
     public async addEmailAddress(emailAddress: string): Promise<IRequestTokenResponse> {
         try {
-            const res = await MatrixClientPeg.get().requestAdd3pidEmailToken(emailAddress, this.clientSecret, 1);
+            const res = await this.matrixClient.requestAdd3pidEmailToken(emailAddress, this.clientSecret, 1);
             this.sessionId = res.sid;
             return res;
         } catch (err) {
@@ -90,12 +89,12 @@ export default class AddThreepid {
      */
     public async bindEmailAddress(emailAddress: string): Promise<IRequestTokenResponse> {
         this.bind = true;
-        if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
+        if (await this.matrixClient.doesServerSupportSeparateAddAndBind()) {
             // For separate bind, request a token directly from the IS.
             const authClient = new IdentityAuthClient();
             const identityAccessToken = (await authClient.getAccessToken()) ?? undefined;
             try {
-                const res = await MatrixClientPeg.get().requestEmailToken(
+                const res = await this.matrixClient.requestEmailToken(
                     emailAddress,
                     this.clientSecret,
                     1,
@@ -126,7 +125,7 @@ export default class AddThreepid {
      */
     public async addMsisdn(phoneCountry: string, phoneNumber: string): Promise<IRequestMsisdnTokenResponse> {
         try {
-            const res = await MatrixClientPeg.get().requestAdd3pidMsisdnToken(
+            const res = await this.matrixClient.requestAdd3pidMsisdnToken(
                 phoneCountry,
                 phoneNumber,
                 this.clientSecret,
@@ -153,12 +152,12 @@ export default class AddThreepid {
      */
     public async bindMsisdn(phoneCountry: string, phoneNumber: string): Promise<IRequestMsisdnTokenResponse> {
         this.bind = true;
-        if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
+        if (await this.matrixClient.doesServerSupportSeparateAddAndBind()) {
             // For separate bind, request a token directly from the IS.
             const authClient = new IdentityAuthClient();
             const identityAccessToken = (await authClient.getAccessToken()) ?? undefined;
             try {
-                const res = await MatrixClientPeg.get().requestMsisdnToken(
+                const res = await this.matrixClient.requestMsisdnToken(
                     phoneCountry,
                     phoneNumber,
                     this.clientSecret,
@@ -189,17 +188,17 @@ export default class AddThreepid {
      */
     public async checkEmailLinkClicked(): Promise<[success?: boolean, result?: IAuthData | Error | null]> {
         try {
-            if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
+            if (await this.matrixClient.doesServerSupportSeparateAddAndBind()) {
                 if (this.bind) {
                     const authClient = new IdentityAuthClient();
                     const identityAccessToken = await authClient.getAccessToken();
                     if (!identityAccessToken) {
                         throw new UserFriendlyError("No identity access token found");
                     }
-                    await MatrixClientPeg.get().bindThreePid({
+                    await this.matrixClient.bindThreePid({
                         sid: this.sessionId,
                         client_secret: this.clientSecret,
-                        id_server: getIdServerDomain(),
+                        id_server: getIdServerDomain(this.matrixClient),
                         id_access_token: identityAccessToken,
                     });
                 } else {
@@ -233,7 +232,7 @@ export default class AddThreepid {
                         };
                         const { finished } = Modal.createDialog(InteractiveAuthDialog, {
                             title: _t("Add Email Address"),
-                            matrixClient: MatrixClientPeg.get(),
+                            matrixClient: this.matrixClient,
                             authData: err.data,
                             makeRequest: this.makeAddThreepidOnlyRequest,
                             aestheticsForStagePhases: {
@@ -245,11 +244,11 @@ export default class AddThreepid {
                     }
                 }
             } else {
-                await MatrixClientPeg.get().addThreePid(
+                await this.matrixClient.addThreePid(
                     {
                         sid: this.sessionId,
                         client_secret: this.clientSecret,
-                        id_server: getIdServerDomain(),
+                        id_server: getIdServerDomain(this.matrixClient),
                     },
                     this.bind,
                 );
@@ -272,7 +271,7 @@ export default class AddThreepid {
      * @return {Promise<Object>} Response from /3pid/add call (in current spec, an empty object)
      */
     private makeAddThreepidOnlyRequest = (auth?: { type: string; session?: string }): Promise<{}> => {
-        return MatrixClientPeg.get().addThreePidOnly({
+        return this.matrixClient.addThreePidOnly({
             sid: this.sessionId,
             client_secret: this.clientSecret,
             auth,
@@ -291,18 +290,18 @@ export default class AddThreepid {
         msisdnToken: string,
     ): Promise<[success?: boolean, result?: IAuthData | Error | null] | undefined> {
         const authClient = new IdentityAuthClient();
-        const supportsSeparateAddAndBind = await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind();
+        const supportsSeparateAddAndBind = await this.matrixClient.doesServerSupportSeparateAddAndBind();
 
         let result: { success: boolean } | MatrixError;
         if (this.submitUrl) {
-            result = await MatrixClientPeg.get().submitMsisdnTokenOtherUrl(
+            result = await this.matrixClient.submitMsisdnTokenOtherUrl(
                 this.submitUrl,
                 this.sessionId,
                 this.clientSecret,
                 msisdnToken,
             );
         } else if (this.bind || !supportsSeparateAddAndBind) {
-            result = await MatrixClientPeg.get().submitMsisdnToken(
+            result = await this.matrixClient.submitMsisdnToken(
                 this.sessionId,
                 this.clientSecret,
                 msisdnToken,
@@ -317,10 +316,10 @@ export default class AddThreepid {
 
         if (supportsSeparateAddAndBind) {
             if (this.bind) {
-                await MatrixClientPeg.get().bindThreePid({
+                await this.matrixClient.bindThreePid({
                     sid: this.sessionId,
                     client_secret: this.clientSecret,
-                    id_server: getIdServerDomain(),
+                    id_server: getIdServerDomain(this.matrixClient),
                     id_access_token: await authClient.getAccessToken(),
                 });
             } else {
@@ -354,7 +353,7 @@ export default class AddThreepid {
                     };
                     const { finished } = Modal.createDialog(InteractiveAuthDialog, {
                         title: _t("Add Phone Number"),
-                        matrixClient: MatrixClientPeg.get(),
+                        matrixClient: this.matrixClient,
                         authData: err.data,
                         makeRequest: this.makeAddThreepidOnlyRequest,
                         aestheticsForStagePhases: {
@@ -366,11 +365,11 @@ export default class AddThreepid {
                 }
             }
         } else {
-            await MatrixClientPeg.get().addThreePid(
+            await this.matrixClient.addThreePid(
                 {
                     sid: this.sessionId,
                     client_secret: this.clientSecret,
-                    id_server: getIdServerDomain(),
+                    id_server: getIdServerDomain(this.matrixClient),
                 },
                 this.bind,
             );

src/Resend.ts

@@ -17,8 +17,8 @@ limitations under the License.
 import { MatrixEvent, EventStatus } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
-import { MatrixClientPeg } from "./MatrixClientPeg";
 import dis from "./dispatcher/dispatcher";
 
 export default class Resend {
@@ -30,7 +30,7 @@ export default class Resend {
                     return ev.status === EventStatus.NOT_SENT;
                 })
                 .map(function (event: MatrixEvent) {
-                    return Resend.resend(event);
+                    return Resend.resend(room.client, event);
                 }),
         );
     }
@@ -41,30 +41,28 @@ export default class Resend {
                 return ev.status === EventStatus.NOT_SENT;
             })
             .forEach(function (event: MatrixEvent) {
-                Resend.removeFromQueue(event);
+                Resend.removeFromQueue(room.client, event);
             });
     }
 
-    public static resend(event: MatrixEvent): Promise<void> {
-        const room = MatrixClientPeg.get().getRoom(event.getRoomId())!;
-        return MatrixClientPeg.get()
-            .resendEvent(event, room)
-            .then(
-                function (res) {
-                    dis.dispatch({
-                        action: "message_sent",
-                        event: event,
-                    });
-                },
-                function (err: Error) {
-                    // XXX: temporary logging to try to diagnose
-                    // https://github.com/vector-im/element-web/issues/3148
-                    logger.log("Resend got send failure: " + err.name + "(" + err + ")");
-                },
-            );
+    public static resend(client: MatrixClient, event: MatrixEvent): Promise<void> {
+        const room = client.getRoom(event.getRoomId())!;
+        return client.resendEvent(event, room).then(
+            function (res) {
+                dis.dispatch({
+                    action: "message_sent",
+                    event: event,
+                });
+            },
+            function (err: Error) {
+                // XXX: temporary logging to try to diagnose
+                // https://github.com/vector-im/element-web/issues/3148
+                logger.log("Resend got send failure: " + err.name + "(" + err + ")");
+            },
+        );
     }
 
-    public static removeFromQueue(event: MatrixEvent): void {
-        MatrixClientPeg.get().cancelPendingEvent(event);
+    public static removeFromQueue(client: MatrixClient, event: MatrixEvent): void {
+        client.cancelPendingEvent(event);
     }
 }

src/RoomInvite.tsx

@@ -22,7 +22,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
-import { MatrixClientPeg } from "./MatrixClientPeg";
 import MultiInviter, { CompletionStates } from "./utils/MultiInviter";
 import Modal from "./Modal";
 import { _t } from "./languageHandler";
@@ -115,7 +114,7 @@ export function inviteUsersToRoom(
 ): Promise<void> {
     return inviteMultipleToRoom(client, roomId, userIds, sendSharedHistoryKeys, progressCallback)
         .then((result) => {
-            const room = MatrixClientPeg.get().getRoom(roomId)!;
+            const room = client.getRoom(roomId)!;
             showAnyInviteErrors(result.states, room, result.inviter);
         })
         .catch((err) => {
@@ -153,7 +152,7 @@ export function showAnyInviteErrors(
             }
         }
 
-        const cli = MatrixClientPeg.get();
+        const cli = room.client;
         if (errorList.length > 0) {
             // React 16 doesn't let us use `errorList.join(<br />)` anymore, so this is our solution
             const description = (