Fix crashes in when opening Bridges in room settings (#33137)

* use SDKContext for room settings dialog to avoid crash #33107

* format with prettier

* add SDKContext to RoomSettingsDialog test

apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -42,6 +42,7 @@ import { type NonEmptyArray } from "../../../@types/common";
 import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 import ErrorBoundary from "../elements/ErrorBoundary";
 import { PeopleRoomSettingsTab } from "../settings/tabs/room/PeopleRoomSettingsTab";
+import { SDKContext, type SdkContextClass } from "../../../contexts/SDKContext";
 
 export const enum RoomSettingsTab {
     General = "ROOM_GENERAL_TAB",
@@ -59,6 +60,7 @@ interface IProps {
     roomId: string;
     onFinished: (success?: boolean) => void;
     initialTabId?: RoomSettingsTab;
+    sdkContext: SdkContextClass;
 }
 
 interface IState {
@@ -238,21 +240,23 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const roomName = this.state.room.name;
         return (
-            <BaseDialog
+            <SDKContext.Provider value={this.props.sdkContext}>
-                className="mx_RoomSettingsDialog"
+                <BaseDialog
-                hasCancel={true}
+                    className="mx_RoomSettingsDialog"
-                onFinished={this.props.onFinished}
+                    hasCancel={true}
-                title={_t("room_settings|title", { roomName })}
+                    onFinished={this.props.onFinished}
-            >
+                    title={_t("room_settings|title", { roomName })}
-                <div className="mx_SettingsDialog_content">
+                >
-                    <TabbedView
+                    <div className="mx_SettingsDialog_content">
-                        tabs={this.getTabs()}
+                        <TabbedView
-                        activeTabId={this.state.activeTabId}
+                            tabs={this.getTabs()}
-                        screenName="RoomSettings"
+                            activeTabId={this.state.activeTabId}
-                        onChange={this.onTabChange}
+                            screenName="RoomSettings"
-                    />
+                            onChange={this.onTabChange}
-                </div>
+                        />
-            </BaseDialog>
+                    </div>
+                </BaseDialog>
+            </SDKContext.Provider>
         );
     }
 }

apps/web/src/utils/DialogOpener.ts

@@ -57,6 +57,7 @@ export class DialogOpener {
                     {
                         roomId: payload.room_id || SdkContextClass.instance.roomViewStore.getRoomId(),
                         initialTabId: payload.initial_tab_id,
+                        sdkContext: SdkContextClass.instance,
                     },
                     /*className=*/ undefined,
                     /*isPriority=*/ false,

apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx

@@ -24,6 +24,7 @@ import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { UIFeature } from "../../../../../src/settings/UIFeature";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
 
 describe("<RoomSettingsDialog />", () => {
     const userId = "@alice:server.org";
@@ -43,6 +44,8 @@ describe("<RoomSettingsDialog />", () => {
     const room2 = new Room("!room2:server.org", mockClient, userId);
     room2.name = "Another Room";
 
+    let sdkContext: SdkContextClass;
+
     jest.spyOn(SettingsStore, "getValue");
 
     beforeEach(() => {
@@ -54,6 +57,9 @@ describe("<RoomSettingsDialog />", () => {
             return null;
         });
 
+        sdkContext = new SdkContextClass();
+        sdkContext.client = mockClient;
+
         jest.spyOn(SettingsStore, "getValue").mockReset().mockReturnValue(false);
 
         const dmRoomMap = {
@@ -63,7 +69,7 @@ describe("<RoomSettingsDialog />", () => {
     });
 
     const getComponent = (onFinished = jest.fn(), propRoomId = roomId) =>
-        render(<RoomSettingsDialog roomId={propRoomId} onFinished={onFinished} />, {
+        render(<RoomSettingsDialog roomId={propRoomId} onFinished={onFinished} sdkContext={sdkContext} />, {
             wrapper: ({ children }) => (
                 <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
             ),
@@ -79,7 +85,7 @@ describe("<RoomSettingsDialog />", () => {
 
         expect(getByText(`Room Settings - ${room.name}`)).toBeInTheDocument();
 
-        rerender(<RoomSettingsDialog roomId={room2.roomId} onFinished={jest.fn()} />);
+        rerender(<RoomSettingsDialog roomId={room2.roomId} onFinished={jest.fn()} sdkContext={sdkContext} />);
 
         expect(getByText(`Room Settings - ${room2.name}`)).toBeInTheDocument();
     });