Show space name instead of 'Empty room' after creation (#32886)

* Fix #32682: Show space name instead of 'Empty room' after creation

When creating a new space, the setup screens showed 'Empty room' or
'New room' instead of the chosen name.

The 'createSpace' function nested 'name' and 'topic' inside
'createOpts'. However, the creation flow expects them at the top
level of the options object. This caused the name to be undefined.

This patch modifies SpaceCreateMenu.tsx to move these properties to
the top-level. It also updates SpaceCreateMenu-test.tsx with a
regression test to verify the fix and prevent future regressions.

* fix: format SpaceCreateMenu test with prettier

apps/web/src/components/views/spaces/SpaceCreateMenu.tsx

@@ -60,8 +60,9 @@ export const createSpace = async (
     otherOpts: Partial<Omit<ICreateOpts, "createOpts">> = {},
 ): Promise<string | null> => {
     return createRoom(client, {
+        name,
+        topic,
         createOpts: {
-            name,
             preset: isPublic ? Preset.PublicChat : Preset.PrivateChat,
             visibility:
                 isPublic && (await client.doesServerSupportUnstableFeature("org.matrix.msc3827.stable"))
@@ -73,7 +74,6 @@ export const createSpace = async (
                 invite: isPublic ? 0 : 50,
             },
             room_alias_name: isPublic && alias ? alias.substring(1, alias.indexOf(":")) : undefined,
-            topic,
             ...createOpts,
         },
         avatar,

apps/web/test/unit-tests/components/views/spaces/SpaceCreateMenu-test.tsx

@@ -8,12 +8,19 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { render, cleanup } from "jest-matrix-react";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+    HistoryVisibility,
+    MatrixError,
+    type MatrixClient,
+    Preset,
+    RoomType,
+    Visibility,
+} from "matrix-js-sdk/src/matrix";
 import userEvent from "@testing-library/user-event";
-import { MatrixError } from "matrix-js-sdk/src/matrix";
 import { type MockedObject } from "jest-mock";
 
-import SpaceCreateMenu from "../../../../../src/components/views/spaces/SpaceCreateMenu";
+import * as createRoomModule from "../../../../../src/createRoom";
+import SpaceCreateMenu, { createSpace } from "../../../../../src/components/views/spaces/SpaceCreateMenu";
 import {
     getMockClientWithEventEmitter,
     mockClientMethodsRooms,
@@ -118,4 +125,35 @@ describe("<SpaceCreateMenu />", () => {
             visibility: "private",
         });
     });
+
+    it("should pass name and topic at the top level when creating a space", async () => {
+        const createRoomSpy = jest.spyOn(createRoomModule, "default").mockResolvedValue("!room:id");
+        client.doesServerSupportUnstableFeature.mockResolvedValue(false);
+
+        await createSpace(client, "My Name", true, "#my-namefoobar:server", "A description");
+
+        expect(createRoomSpy).toHaveBeenCalledWith(client, {
+            name: "My Name",
+            topic: "A description",
+            createOpts: {
+                preset: Preset.PublicChat,
+                visibility: Visibility.Private,
+                power_level_content_override: {
+                    events_default: 100,
+                    invite: 0,
+                },
+                room_alias_name: "my-namefoobar",
+            },
+            avatar: undefined,
+            roomType: RoomType.Space,
+            historyVisibility: HistoryVisibility.WorldReadable,
+            spinner: false,
+            encryption: false,
+            andView: true,
+            inlineErrors: true,
+        });
+
+        expect(createRoomSpy.mock.calls[0][1]?.createOpts).not.toHaveProperty("name");
+        expect(createRoomSpy.mock.calls[0][1]?.createOpts).not.toHaveProperty("topic");
+    });
 });