Switch ModalManager to the React 18 createRoot API (#28336)

* Remove boilerplate around dispatcher and settings watchers

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move state update listeners from constructor to componentDidMount

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch ModalManager to the React 18 createRoot API

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

test/unit-tests/components/views/dialogs/ConfirmRedactDialog-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
 import { MatrixClient, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
-import { screen } from "jest-matrix-react";
+import { screen, act } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import { flushPromises, mkEvent, stubClient } from "../../../../test-utils";
@@ -31,12 +31,12 @@ describe("ConfirmRedactDialog", () => {
     };
 
     const confirmDeleteVoiceBroadcastStartedEvent = async () => {
-        createRedactEventDialog({ mxEvent });
+        act(() => createRedactEventDialog({ mxEvent }));
         // double-flush promises required for the dialog to show up
         await flushPromises();
         await flushPromises();
 
-        await userEvent.click(screen.getByTestId("dialog-primary-button"));
+        await userEvent.click(await screen.findByTestId("dialog-primary-button"));
     };
 
     beforeEach(() => {

test/unit-tests/components/views/messages/DateSeparator-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { fireEvent, render, screen } from "jest-matrix-react";
+import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
 import { TimestampToEventResponse, ConnectionError, HTTPError, MatrixError } from "matrix-js-sdk/src/matrix";
 
 import dispatcher from "../../../../../src/dispatcher/dispatcher";
@@ -291,7 +291,9 @@ describe("DateSeparator", () => {
                 // The submit debug logs option should *NOT* be shown for network errors.
                 //
                 // We have to use `queryBy` so that it can return `null` for something that does not exist.
-                expect(screen.queryByTestId("jump-to-date-error-submit-debug-logs-button")).not.toBeInTheDocument();
+                await waitFor(() =>
+                    expect(screen.queryByTestId("jump-to-date-error-submit-debug-logs-button")).not.toBeInTheDocument(),
+                );
             });
         });
     });

test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts

@@ -417,7 +417,7 @@ describe("message", () => {
             expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
             expect(mockClient.cancelPendingEvent).toHaveBeenCalledTimes(1);
             expect(mockCreateRedactEventDialog).toHaveBeenCalledTimes(1);
-            expect(spyDispatcher).toHaveBeenCalledTimes(0);
+            expect(spyDispatcher).toHaveBeenCalledTimes(1);
         });
 
         it("Should do nothing if the content is unmodified", async () => {

test/unit-tests/components/views/settings/JoinRuleSettings-test.tsx

@@ -202,7 +202,7 @@ describe("<JoinRuleSettings />", () => {
 
                 await flushPromises();
 
-                expect(within(dialog).getByText("Loading new room")).toBeInTheDocument();
+                await expect(within(dialog).findByText("Loading new room")).resolves.toBeInTheDocument();
 
                 // "create" our new room, have it come thru sync
                 client.getRoom.mockImplementation((id) => {
@@ -250,7 +250,7 @@ describe("<JoinRuleSettings />", () => {
 
                 await flushPromises();
 
-                expect(within(dialog).getByText("Loading new room")).toBeInTheDocument();
+                await expect(within(dialog).findByText("Loading new room")).resolves.toBeInTheDocument();
 
                 // "create" our new room, have it come thru sync
                 client.getRoom.mockImplementation((id) => {

test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -119,6 +119,7 @@ describe("<SessionManagerTab />", () => {
     const mockVerificationRequest = {
         cancel: jest.fn(),
         on: jest.fn(),
+        off: jest.fn(),
     } as unknown as VerificationRequest;
 
     const mockCrypto = mocked({